ProAdvanced/components/slambb-picker/slambb-picker-city.vue

<template>
	<view class="city-container ">
		<view class="city-view">
			<picker-view class="city-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="city-item" v-for="(picker_item,picker_index) in provinceDataList" :key="picker_index">{{picker_item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="city-item" v-for="(picker_item,picker_index) in cityDataList" :key="picker_index">{{picker_item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="city-item" v-for="(picker_item,picker_index) in areaDataList" :key="picker_index">{{picker_item.label}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
-
<script>
	var minDate = 1950;
	var provinceData = {};
	var cityData = {};
	var areaData = {};

	export default {
		props: {
			itemObj: { //各类型携带的数据
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				provinceDataList: [],
				cityDataList: [],
				areaDataList: [],
				// 年月日
				value: [],
				visible: true,
				indicatorStyle: `height: 65rpx; `,
			}
		},
		//组件生命周期
		// created: function(e) {
		// 	console.log("created itemObj=", this.bInit);
		// },
		// destroyed:function(e){
		// 	console.log("destroyed itemObj=", this.bInit);
		// },
		mounted() {
			let value = [];
			let provinceDataList;
			let cityDataList;
			let areaDataList;

			provinceData = require('./city-data/province.js').default;
			cityData = require('./city-data/city.js').default;
			areaData = require('./city-data/area.js').default;

			value =  this.itemObj.defaultValue || [0, 0, 0];
			// 解析citycode
			// for (let i = 0; i < provinceData.length; i++) {
			// 	if (provinceData[i].value == this.itemObj.defaultValue.substr(0, 2)) {
			// 		let currentCityData = cityData[i];
			// 		for (let j = 0; j < currentCityData.length; j++) {
			// 			if (currentCityData[j].value == this.itemObj.defaultValue.substr(0, 4)) {
			// 				let areaDataTemp = areaData[i][j];
			// 				for (let k = 0; k < areaDataTemp.length; k++) {
			// 					if (areaDataTemp[k].value == this.itemObj.defaultValue) {
			// 						value = [i, j, k];
			// 						break;
			// 					}
			// 				}
			// 				break;
			// 			}
			// 		}
			// 		break;
			// 	}
			// }

			provinceDataList = provinceData;
			cityDataList = cityData[value[0]];
			areaDataList = areaData[value[0]][value[1]];

			//city、provincialStreet
			this.provinceDataList = provinceDataList;
			this.cityDataList = cityDataList;
			this.areaDataList = areaDataList;
			this.value = value;
			// console.log('显示时候更新一次数据');
			this.$emit('bindChangeCity', {
				label: this._getLabel(),
				value: this.value,
				cityCode: this._getCityCode()
			});
		},
		methods: {
			_getLabel() {
				let pcikerLabel =
					this.provinceDataList[this.value[0]].label +
					'-' +
					this.cityDataList[this.value[1]].label +
					'-' +
					this.areaDataList[this.value[2]].label;
				return pcikerLabel;
			},
			_getCityCode() {
				return this.areaDataList[this.value[2]].value;
			},
			bindChange({
				detail: {
					value
				}
			}) {
				// console.log(JSON.stringify(e))
				let changevalue;
				changevalue = value;
				if (this.value[0] !== changevalue[0]) {
					// 第一级发生滚动
					this.cityDataList = cityData[changevalue[0]];
					this.areaDataList = areaData[changevalue[0]][0];
					changevalue[1] = 0;
					changevalue[2] = 0;
				} else if (this.value[1] !== changevalue[1]) {
					// 第二级滚动
					this.areaDataList = areaData[changevalue[0]][changevalue[1]];
					changevalue[2] = 0;
				}
				this.value = changevalue;

				this.$emit('bindChangeCity', {
					label: this._getLabel(),
					value: this.value,
					cityCode: this._getCityCode()
				});
			}
		}
	}
</script>

<style>
	/* picker */
	.city-container {
		position: relative;
		display: flex;
		justify-content: center;
	}

	.city-view {
		background: #FFFFFF;
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		border-radius: 20upx;
	}

	.city-picker-view {
		width: 100%;
		height: 300rpx;
		border-radius: 20px;
	}

	.city-item {
		text-align: center;
		width: calc(100% - 0px);
		height: 65rpx;
		line-height: 65rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 20px;
		color: rgba(164, 136, 220, 1);
	}

</style>