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 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>

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

		.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>