H5/components/city/city.vue

<template>
	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">

		<!-- :indicator-style="indicatorStyle"   -->
		<div class="city-box">
			<div class="city-picker-btn">
				<text @click.stop="cancel()">取消</text>
				<text @click.stop="confirm()">确定</text>
			</div>
			<picker-view indicator-class="indicator-class" :value="value||[]" class="picker-view" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in sheng" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in shi" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in qu" :key="index">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</div> 
	</uni-popup>

</template>

<script>
	import { cityJson } from "./json.js"
	export default {
		name: "city",
		props: {
			code: {
				type: String | Array,
				default: null
			}
		},
		data() {
			return {
				codeValue: [],
				labelValue:'',
				value: [0, 0, 0],
				sheng: [cityJson[16]],
				shi: [],
				qu: []
			}
		},
		watch: {
			value: {
				handler(newV, oldV) {
					const indexArr = newV || []
					this.shi = [];
					this.qu = []; 
					// 省
					const sh_l = indexArr[0] || 0;
					const sheng_ = this.sheng[sh_l];
					let shi_ = null;
					let qu_ = null;
					let code = [sheng_.value];
					let label = sheng_.label;

					if (sheng_.children && sheng_.children.length > 0) {
						// 市
						this.shi = sheng_.children;
						const s_l = indexArr[1] || 0;
						shi_ = this.shi[s_l]
						code.push(shi_.value)
						label = `${label}/${shi_.label}`
					}


					if (shi_ && shi_.children && shi_.children.length > 0) {
						// 区
						this.qu = shi_.children;
						const q_l = indexArr[2] || 0;
						const qu_ = this.qu[q_l]
						code.push(qu_.value)
						label = `${label}/${qu_.label}`
					}

					this.codeValue = code;
					this.labelValue = label;
				},
				immediate: true,
				deep: true
			}
		},
		created() {

		},
		mounted() {
			

		},
		methods: {
			open(){
				this.$refs.popupRef.open()
			},
			bindChange(val) {
				const { value } = val.detail;

				console.log("bindChange = ", value, this.value)
				if (value[0] !== this.value[0]) {
					this.value = [value[0], 0, 0];
					return
				}
				if (value[1] !== this.value[1]) {
					this.value = [value[0], value[1], 0];
					return
				}
				this.value = value;
			},
			confirm(){ 
				this.$emit("update:code", this.codeValue);
				this.$emit("cityName", this.labelValue);
				this.$emit("onConfirm")
				this.cancel();
			},
			cancel(){
				this.$refs.popupRef.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1001;

		.city-box {
			height: 55vh;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;

			.city-picker-btn {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
			}

			.picker-view {
				height: calc(100% - 100rpx);
				text-align: center;

			}
		}
	}

	/deep/ .indicator-class {
		height: 100rpx;
	}

	/deep/ .uni-picker-view-content {
		.item {
			text-align: center;

			line-height: 100rpx;
		}
	}
</style>