创意需求发布

components/cityPicker/cityPicker.vue

@@ -0,0 +1,120 @@
+<template>
+	<view>
+		<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
+			@cancel="cancel"></u-picker>
+	</view>
+</template>
+
+<script>
+	import { cityData } from '@/utills/city.js'
+	export default {
+		name: "cityPicker",
+		props: {
+			showPicker: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				cityData,
+				//显示选择器
+				show: false,
+				// 打开选择器显示默认城市
+				cityList: [],
+				cityLevel1: [],
+				cityLevel2: [],
+				cityLevel3: []
+			};
+		},
+		watch: {
+			showPicker: {
+				handler(val) {
+					console.log(val)
+					this.show = this.showPicker
+				},
+				immediate: true
+			},
+			show: {
+				handler(val) {
+					if(val) {
+						this.cityList = [],
+						this.cityLevel1 = [],
+						this.cityLevel2 = [],
+						this.cityLevel3 = []
+						this.initCityData();
+					}
+				},
+				immediate: true
+			}
+		},
+		onLoad() {
+			// 城市选择器初始化
+			this.initCityData();
+		},
+		methods: {
+			initCityData() {
+				// 遍历城市js
+				this.cityData.forEach((item1, index1) => {
+					let temp2 = [];
+					this.cityLevel1.push(item1.provinceName);
+
+					let temp4 = [];
+					let temp3 = [];
+					// 遍历市
+					item1.cities.forEach((item2, index2) => {
+						temp2.push(item2.cityName);
+						// 遍历区
+						item2.counties.forEach((item3, index3) => {
+							temp3.push(item3.countyName);
+						})
+						temp4[index2] = temp3;
+						temp3 = [];
+					})
+					this.cityLevel3[index1] = temp4;
+
+					this.cityLevel2[index1] = temp2;
+				})
+				// 选择器默认城市
+				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
+			},
+			// 选中时执行
+			changeHandler(e) {
+				const {
+					columnIndex,
+					index,
+					indexs,
+					value,
+					values,
+					// 微信小程序无法将picker实例传出来，只能通过ref操作
+					picker = this.$refs.uPicker
+				} = e;
+				if (columnIndex === 0) { // 选择第一列数据时
+					// 设置第二列关联数据
+					picker.setColumnValues(1, this.cityLevel2[index]);
+					// 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
+				} else if (columnIndex === 1) { // 选择第二列数据时
+					// 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
+				}
+			},
+			// 单击确认按钮时执行
+			confirm(e) {
+				// 输出数组 [省, 市, 区]
+				console.log(e.value);
+				this.$emit('confirm', e.value)
+				// 隐藏城市选择器
+				this.show = false;
+			},
+			cancel() {
+				this.$emit('cancel')
+				this.show = false
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>