leromro-mini/pages_home/components/cc-selectDity/cc-selectDityBak.vue

<template>
	<view>
		<!--自定义地址选择器-->
		<view class="cc_area_mask" v-show="show == true"></view>
		<view :class="'cc_area_view ' + (show ? 'show':'hide')">
			<view class="cc_area_view_btns">
				<text class="cc_area_view_btn_cancle" @tap="handleNYZAreaCancle">取消</text>
				<text class="cc_area_view_btn_title" style="color: #393939;font-size: 32upx;">地区选择</text>
				<text class="cc_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province"
					:data-city="city" :data-area="area" style="color: #4284e5;">确定</text>
			</view>
			<picker-view class="cc_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange"
				:value="value">
				<picker-view-column>
					<view v-for="(item, index) in provinces" :key="index" class="cc_area_colum_view">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item, index) in citys" :key="index" class="cc_area_colum_view">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item, index) in areas" :key="index" class="cc_area_colum_view">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import {
		getProvinces,
		getMyCity,
		getAreas,
		getAreasCode
	} from "./area.js"

	let index = [0, 0, 0];
	let provinces = getProvinces();
	let citys = getMyCity(index[0]);
	let areas = getMyCity(index[0], index[1]);

	export default {
		mixins: [{
			methods: {
				setData: function(obj, callback) {
					let that = this;
					const handleData = (tepData, tepKey, afterKey) => {
						tepKey = tepKey.split('.');
						tepKey.forEach(item => {
							if (tepData[item] === null || tepData[item] === undefined) {
								let reg = /^[0-9]+$/;
								tepData[item] = reg.test(afterKey) ? [] : {};
								tepData = tepData[item];
							} else {
								tepData = tepData[item];
							}
						});
						return tepData;
					};
					const isFn = function(value) {
						return typeof value == 'function' || false;
					};
					Object.keys(obj).forEach(function(key) {
						let val = obj[key];
						key = key.replace(/\]/g, '').replace(/\[/g, '.');
						let front, after;
						let index_after = key.lastIndexOf('.');
						if (index_after != -1) {
							after = key.slice(index_after + 1);
							front = handleData(that, key.slice(0, index_after), after);
						} else {
							after = key;
							front = that;
						}
						if (front.$data && front.$data[after] === undefined) {
							Object.defineProperty(front, after, {
								get() {
									return front.$data[after];
								},
								set(newValue) {
									front.$data[after] = newValue;
									that.$forceUpdate();
								},
								enumerable: true,
								configurable: true
							});

							// #ifndef VUE3
							that.$set(front, after, val);
							// #endif

							// #ifdef VUE3
							Reflect.set(front, after, val);
							// #endif

						} else {

							// #ifndef VUE3
							that.$set(front, after, val);
							// #endif

							// #ifdef VUE3
							Reflect.set(front, after, val);
							// #endif
						}
					});
					isFn(callback) && this.$nextTick(callback);
				}
			}
		}],
		data() {
			return {
				provinces: getProvinces(),
				citys: getMyCity(index[0]),
				areas: getAreas(index[0], index[1]),
				value: [0, 0, 0]
			};
		},

		components: {},
		props: {
			// 省
			province: {
				//控制area_select显示隐藏
				type: String,
				default: ''
			},
			// 市
			city: {
				//控制area_select显示隐藏
				type: String,
				default: ''
			},
			// 区
			area: {
				//控制area_select显示隐藏
				type: String,
				default: ''
			},

			show: {
				//控制area_select显示隐藏
				type: Boolean,
				default: false
			},
			maskShow: {
				//是否显示蒙层
				type: Boolean,
				default: true
			}
		},
		watch: {
			province() {
				this.init();
			},
			city() {
				this.init();
			},
			area() {
				this.init();
			}
		},
		mounted() {
			let provinceIndex = this.provinces.indexOf(this.province);
			this.citys = getMyCity(provinceIndex);
			let cityIndex = this.citys.indexOf(this.city);
			this.areas = getAreas(provinceIndex, cityIndex);
			let areaIndex = this.areas.indexOf(this.area);

			// 设置选择序列
			this.value = [provinceIndex, cityIndex, areaIndex];
			let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
			//console.log(areaCode)
			//console.log("this.value = " + JSON.stringify(this.value));
		},
		methods: {
			init() {
				//console.log(this.area)
				let provinceIndex = this.provinces.indexOf(this.province);
				this.citys = getMyCity(provinceIndex);
				let cityIndex = this.citys.indexOf(this.city);
				this.areas = getAreas(provinceIndex, cityIndex);
				let areaIndex = this.areas.indexOf(this.area);

				//获取地区编码
				let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
				// 设置选择序列
				this.value = [provinceIndex, cityIndex, areaIndex];

			},
			handleNYZAreaChange: function(e) {
				var that = this;
				var value = e.detail.value;

				// 更新 index
				index = value;

				// 获取对应的城市和区域数据
				let selectCitys = getMyCity(index[0]);
				let selectAreas = getAreas(index[0], index[1]);

				// 触发 setData 更新数据
				that.setData({
					citys: selectCitys,
					areas: selectAreas,
					value: index
				});

				let areaCode = getAreasCode(index[0], index[1], index[2]);

				// 触发事件
				that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]], areaCode);


			},

			/**
			 * 确定按钮的点击事件
			 */
			handleNYZAreaSelect: function(e) {
				var myEventDetail = e;
				var myEventOption = {};
				this.$emit('sureSelectArea', {
					detail: myEventDetail
				}, myEventOption);

				// 复原初始状态
				index = [0, 0, 0];
			},

			handleNYZAreaCancle: function(e) {
				var that = this;

				this.$emit('hideShow', {
					detail: false
				});

				// 复原初始状态
				index = [0, 0, 0];
			}


		},






		/**
		 * 取消按钮的点击事件
		 */
		handleNYZAreaCancle: function(e) {
			var that = this;
			//console.log("e:" + JSON.stringify(e));
			this.$emit('hideShow', {
				detail: false
			});
			// 复原初始状态
			index = [0, 0, 0];
		}
	}
</script>
<style scoped lang="scss">
	.cc_area_view {
		width: 100%;
		position: fixed;
		bottom: -1000px;
		left: 0px;
		background-color: #fff;
		z-index: 21;
		transition: all 0.3s;
	}

	.cc_area_pick_view {
		height: 400px;
		width: 100%;

	}

	.cc_area_colum_view {
		line-height: 35px;
		text-align: center;
		font-size: 28upx;
	}

	.hide {
		bottom: -1000upx;
		transition: all 0.3s;
	}

	.show {
		bottom: 0upx;
		transition: all 0.3s;
	}

	.cc_area_view_btns {
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
		font-size: 30upx;
		padding: 18upx 0upx;
		display: flex;
		justify-content: space-between;
	}

	.cc_area_view_btns>text {
		display: inline-block;
		word-spacing: 4upx;
		letter-spacing: 4upx;
	}

	.cc_area_view_btn_cancle {
		color: #939393;
		padding-right: 20upx;
		padding-left: 25upx;
	}

	.cc_area_view_btn_sure {
		float: right;
		padding-left: 20upx;
		padding-right: 25upx;
	}

	.cc_area_mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(28, 28, 28, 0.6);
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 20;
	}
</style>