You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

289 lines
7.2 KiB

<template>
<view>
<text class="uni-input" @tap="open">{{value}}</text>
<uni-popup ref="popup" type="bottom">
<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>
</uni-popup>
</view>
</template>
<script type="text/babel">
import uniPopup from "./uni-popup/uni-popup.vue";
import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";
export default {
name: "CitySelect",
components: {
uniPopup,
uniPopupMessage,
uniPopupDialog
},
props: ["callback", "items", "defaultValue"],
data() {
return {
value: "请选择",
show: this.value,
province: [],
provinceActive: null,
city: [],
cityActive: null,
district: [],
districtActive: null,
current: 0
};
},
watch: {
items(nextItem) {
this.province = nextItem;
},
defaultValue(next){
this.value=next
}
},
mounted() {
console.log(this);
if (this.value) {
this.value = this.value;
}
this.province = this.items;
},
methods: {
open() {
this.province = this.items;
this.provinceActive = null;
this.cityActive = null;
this.districtActive = null;
this.city = [];
this.district = [];
this.current = 0;
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();
}
}
};
</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: #f23030 !important;
border-bottom: 1rpx solid #f23030;
}
}
}
.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>