book-shop/pages-mine/components/city-picker.vue

<template>
	<u-popup
		v-model="value"
		mode="bottom"
		:popup="false"
		:mask="true"
		:closeable="true"
		:safe-area-inset-bottom="true"
		close-icon-color="#ffffff"
		:z-index="uZIndex"
		:maskCloseAble="maskCloseAble"
		@close="close"
	>
		<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
		<view class="area-box">
			<view class="u-flex" :class="{ change: isChange }">
				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<u-cell-group>
								<u-cell-item v-for="(item, index) in addressList" :title="item.name" :arrow="false" :index="index" :key="index" @click="provinceChange">
									<u-icon v-show="isChooseP && province == index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
								</u-cell-item>
							</u-cell-group>
						</scroll-view>
					</view>
				</view>
				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<u-cell-group v-if="isChooseP">
								<u-cell-item v-for="(item, index) in addressList[province].children" :title="item.name" :arrow="false" :index="index" :key="index" @click="cityChange">
									<u-icon v-show="isChooseC && city == index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
								</u-cell-item>
							</u-cell-group>
						</scroll-view>
					</view>
				</view>

				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<u-cell-group v-if="isChooseC">
								<u-cell-item v-for="(item, index) in addressList[province].children[city].children" :title="item.name" :arrow="false" :index="index" :key="index" @click="areaChange">
									<u-icon v-show="isChooseA && area == index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
								</u-cell-item>
							</u-cell-group>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>

export default {
	name: 'city-picker',
	props: {
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
		// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
		defaultRegion: {
			type: Array,
			default() {
				return [];
			}
		},
		// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
		areaCode: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否允许通过点击遮罩关闭Picker
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			// addressList:[],
			
			
			cityValue: '',
			isChooseP: false, //是否已经选择了省
			province: 0, //省级下标
			provinces: [],
			isChooseC: false, //是否已经选择了市
			city: 0, //市级下标
			citys: [],
			isChooseA: false, //是否已经选择了区
			area: 0, //区级下标
			areas: [],
			tabsIndex: 0
		};
	},
	mounted() {
		if(this.addressList.length<1){
			this.getRegionList();
		}else{
			this.init();
			
		}
		
	},
	computed: {
		isChange() {
			return this.tabsIndex > 1;
		},
		genTabsList() {
			let tabsList = [
				{
					name: '请选择'
				}
			];
			if (this.isChooseP) {
				tabsList[0].name = this.addressList[this.province].name;
				tabsList[1] = {
					name: '请选择'
				};
			}
			if (this.isChooseC) {
				tabsList[1].name = this.addressList[this.province].children[this.city].name;
				tabsList[2] = {
					name: '请选择'
				};
			}
			if (this.isChooseA) {
				tabsList[2].name = this.addressList[this.province].children[this.city].children[this.area].name;
			}
			return tabsList;
		},
		uZIndex() {
			// 如果用户有传递z-index值，优先使用
			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
		},
		// 地址列表
		addressList() {
			return this.$store.state.pub.addressList;
		},
	},
	methods: {		
		getRegionList(){
			this.$u.api.getRegionListAjax().then(({code,data})=>{
				if(code==1){
					this.$store.commit('pub/commitAddressList',data)
					this.init();
				}
			})
		},
		init() {
			// 这里只会传code形式的，不传文本
			if(this.areaCode[0]){
				this.setProvince();
			}
		},
		setProvince() {
			// 查询省 索引
			const list = this.addressList;
			list.map((v, k) => {
				if (v.code == this.areaCode[0]) {
					this.provinceChange(k);
					if(this.areaCode[1]){
						// 查询城市索引
						this.setCity(k);
					}
					
				}
			});
		},
		setCity(pi,ci,ai) {
			// pi,ci,ai 省市区 索引
			const list = this.addressList[pi].children;
			list.map((v, k) => {
				if (v.code == this.areaCode[1]) {
					this.cityChange(k);
					if(this.areaCode[2]){
						// 查询地区索引
						this.setArea(pi,k);
					}
				}
			});
		},
		setArea(pi,ci,ai) {
			const list = this.addressList[pi].children[ci].children;
			list.map((v, k) => {
				if (v.code == this.areaCode[2]) {
					this.isChooseA = true;
					this.area = k;
				}
			});
		},
		close() {
			this.$emit('input', false);
		},
		tabsChange(index) {
			this.tabsIndex = index;
		},
		provinceChange(index) {
			this.isChooseP = true;
			this.isChooseC = false;
			this.isChooseA = false;
			this.province = index;
			this.citys = this.addressList[index].children;
			this.tabsIndex = 1;
		},
		cityChange(index) {
			this.isChooseC = true;
			this.isChooseA = false;
			this.city = index;
			if(this.citys[index].children[0]){
				this.areas = this.citys[index].children;
				this.tabsIndex = 2;
				return false;
			}
			let result = {};
			
			result.province = this.addressList[this.province];
			result.city = this.addressList[this.province].children[this.city];
			this.$emit('city-change', result);
			this.close();
		},
		areaChange(index) {
			this.isChooseA = true;
			this.area = index;
			let result = {};
			
			result.province = this.addressList[this.province];
			result.city = this.addressList[this.province].children[this.city];
			result.area = this.addressList[this.province].children[this.city].children[this.area];
			
			this.$emit('city-change', result);
			this.close();
		},
	}
};
</script>
<style lang="scss" scoped>
.area-box {
	width: 100%;
	overflow: hidden;
	height: 800rpx;

	> view {
		width: 150%;
		transition: transform 0.3s ease-in-out 0s;
		transform: translateX(0);

		&.change {
			transform: translateX(-33.3333333%);
		}
	}

	.area-item {
		width: 33.3333333%;
		height: 800rpx;
	}
}
</style>