book-hi/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() {
				uni.$u.http.get('/token/getAllDistrict').then(res => {
					console.log(res, 'xxxxxxxxxxx')
				})

				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>