H5/components/city/city.vue

<template>
	<uni-popup class="picker-popup" ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
		<div class="picker-content">
			<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 cityList" :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],
				// sheng: [cityJson[16]],
				// shi: [],
				// qu: [],

				cityList: cityJson
			}
		},
		watch: {

		},
		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() {

				console.log("this.value  = ", this.value)
				const index = this.value[0]
				const { value, label } = this.cityList[index];
				// value: '420113', label: '汉南区'
				this.$emit("update:code", value);
				this.$emit("cityName", label);
				this.$emit("onConfirm")
				this.cancel();
			},
			cancel() {
				this.$refs.popupRef.close()
			}
		}
	}
</script>