|
|
<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: #F99C10 !important; |
|
|
border-bottom: 1rpx solid #F99C10; |
|
|
} |
|
|
} |
|
|
} |
|
|
.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>
|
|
|
|
