<template> <view> <text class="uni-input" style=" background-color: #F8F8F8; display: block; line-height: 76rpx;padding:0 29rpx;" @tap="open">{{value}}</text> <u-popup :show="integralShow" v-if="integralShow" duration='100' :closeable='true' mode="bottom" border-radius="20" close-icon="true" @close="closePopup(2)"> <view class="cityselect"> <view class="cityselect-header"> <view class="cityselect-title"> <text>请选择地址</text> </view> <view class="cityselect-nav"> <view class="item" v-if="provinceActive" @tap="changeNav(0)"> <text>{{provinceActive.n}}</text> </view> <view class="item" v-if="cityActive" @tap="changeNav(1)"> <text>{{cityActive.n}}</text> </view> <view class="item" v-if="districtActive" @tap="changeNav(2)"> <text>{{districtActive.n}}</text> </view> <view class="item active" v-else> <text>请选择</text> </view> </view> </view> <view class="cityselect-content"> <swiper class="swiper" disable-touch="true" touchable="false" :current="current"> <swiper-item> <scroll-view scroll-y class="cityScroll"> <view> <view class="cityselect-item" v-for="(item,index) in province" :key="index" @tap="selectProvince(index)" > <view class="cityselect-item-box"> <text>{{item.n}}</text> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y class="cityScroll"> <view> <view class="cityselect-item" v-for="(item,index) in city" :key="index" @tap="selectCity(index)" > <view class="cityselect-item-box"> <text>{{item.n}}</text> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y class="cityScroll"> <view> <view class="cityselect-item" v-for="(item,index) in district" :key="index" @tap="selectDistrict(index)" > <view class="cityselect-item-box"> <text>{{item.n}}</text> </view> </view> </view> </scroll-view> </swiper-item> </swiper> </view> </view> </u-popup> </view> </template> <script type="text/babel"> export default { name: "CitySelect", components: { }, props: ["callback", "items", "defaultValue"], data() { return { integralShow:false, value: "请选择", show: this.value, province: [], provinceActive: null, city: [], cityActive: null, district: [], districtActive: null, current: 0 }; }, watch: { items(nextItem) { // console.log(nextItem,'1111111111111111111'); this.province = nextItem; }, defaultValue(nextItem){ // console.log(nextItem,'222222222222222222'); this.value = nextItem; } }, mounted() { // console.log(this.defaultValue,'改变的地址'); if (this.defaultValue) { this.value = this.defaultValue; } this.province = this.items; }, methods: { closePopup(){ this.integralShow = false; }, open() { this.province = this.items; this.provinceActive = null; this.cityActive = null; this.districtActive = null; this.city = []; this.district = []; this.current = 0; this.integralShow = true; // this.$refs.popup.open(); }, changeNav(index) { if (index == 0) { this.provinceActive = null; } if (index == 1) { this.cityActive = null; } if (index == 2) { this.districtActive = null; } this.current = index; }, selectProvince(index) { this.provinceActive = this.province[index]; this.city = this.province[index].c; this.current = 1; }, selectCity(index) { this.cityActive = this.city[index]; this.district = this.city[index].c; this.current = 2; }, selectDistrict(index) { this.districtActive = this.district[index]; this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`; // this.callback({ // province: { // id: this.provinceActive.v, // name: this.provinceActive.n // }, // city: { // id: this.cityActive.v, // name: this.cityActive.n // }, // district: { // id: this.districtActive.v, // name: this.districtActive.n // } // }); this.$emit("callback", { province: { id: this.provinceActive.v, name: this.provinceActive.n }, city: { id: this.cityActive.v, name: this.cityActive.n }, district: { id: this.districtActive.v, name: this.districtActive.n } }); // this.$refs.popup.close(); this.integralShow = false; } } }; </script> <style lang="less"> .cityselect { width: 100%; height: 75%; background-color: #fff; z-index: 1502; position: relative; padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); .cityScroll { height: 100%; } .swiper { height: 800rpx; } } .cityselect-header { width: 100%; z-index: 1; } .cityselect-title { width: 100%; font-size: 30rpx; text-align: center; height: 95rpx; line-height: 95rpx; position: relative; &:cityselect-title:after { height: 1px; position: absolute; z-index: 0; bottom: 0; left: 0; content: ""; width: 100%; background-image: linear-gradient(0deg, #ececec 50%, transparent 0); } } .cityselect-nav { width: 100%; padding-left: 20rpx; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; .item { font-size: 26rpx; color: #222; display: block; height: 80rpx; line-height: 92rpx; padding: 0 16rpx; position: relative; margin-right: 30rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; &.active { color: #99CC00 !important; border-bottom: 1rpx solid #99CC00; } } } .cityselect-content { height: 100%; width: 100%; } .cityselect-item { .cityselect-item-box { display: block; padding: 0 40rpx; position: relative; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; text-overflow: ellipsis; line-height: 64rpx; max-height: 65rpx; font-size: 26rpx; color: #333; &:after { content: ""; height: 1rpx; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(0deg, #ececec 50%, transparent 0); } } } </style>