leromro-mini/components/city-index/index.vue

<template>
	<view>
		<u-popup :show="show" round="20rpx" @close="close">
			<!-- 标题 -->
			<view class="popup-title">
				<text class="text" @click="close">取消</text>
				<view class="flex"></view>
				<text class="text" @click="confirm">确定</text>
			</view>
			<!-- 城市数据 -->
			<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="cityIndex" @change="cityChange">
				<picker-view-column>
					<view v-for="(item,index) in list" :key="index">
						<text class="name">{{item.name}}</text>
					</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in list[cityIndex[0]].children" :key="index">
						<text class="name">{{item.name}}</text>
					</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in list[cityIndex[0]].children[cityIndex[1]].children" :key="index">
						<text class="name">{{item.name}}</text>
					</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
	let cityData = require('./cityData.js').pca;
	export default {
		data() {
			return {
				show: false,
				list: cityData,
				cityIndex: [0, 0, 0],
				indicatorStyle: `height: 50px;`,
			}
		},
		methods: {
			// 显示
			showd() {
				this.show = true
			},
			// 确认
			confirm(e) {
				let current = this.list[this.cityIndex[0]].name + '' + this.list[this.cityIndex[0]].children[this
					.cityIndex[1]].name + '' + this.list[this.cityIndex[0]].children[this.cityIndex[1]].children[this
					.cityIndex[2]].name;
				this.$emit('confirm', this.list[this.cityIndex[0]], this.list[this.cityIndex[0]].children[this
					.cityIndex[1]], this.list[this.cityIndex[0]].children[this.cityIndex[1]].children[this
					.cityIndex[2]])

				this.close();
			},
			// 滑动
			cityChange(e) {
				let currentIndex = e.detail.value;
				if (currentIndex[0] != this.cityIndex[0]) {
					this.cityIndex.splice(0, 3, currentIndex[0], 0, 0);
					return;
				}
				if (currentIndex[1] != this.cityIndex[1]) {
					this.cityIndex.splice(1, 2, currentIndex[1], 0);
					return;
				}
				if (currentIndex[2] != this.cityIndex[2]) {
					this.cityIndex.splice(2, 1, currentIndex[2]);
					return;
				}
			},
			// 取消
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss混入，为了少写几行#ifndef
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.picker-view {
		height: 500rpx;

		.name {
			text-align: center;
			font-size: 30rpx;
			height: 50px;
			line-height: 50px;
		}
	}

	.popup-title {
		@include flex(row);
		align-items: center;
		padding: 30rpx;

		.text {
			color: #3c9cff;
		}

		.flex {
			flex: 1;
		}
	}
</style>