school_uni/uni_modules/cc-selectDity/components/cc-selectDity/cc-selectDity.vue

<template>
	<view>
		<!--自定义地址选择器-->
		<view class="cc_area_mask" v-if="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_sure" @tap="handleNYZAreaSelect" :data-province="province"
					:data-city="city" :data-area="area">确定</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
	} 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
							});
							front[after] = val;
						} else {
							that.$set(front, after, val);
						}
					});
					isFn(callback) && this.$nextTick(callback);
				}
			}
		}],
		data() {
			return {
				provinces: getProvinces(),
				citys: getMyCity(index[0]),
				areas: getAreas(index[0], index[1]),
				value: [0, 0, 0],
				province: '北京市',
				city: '北京市',
				area: '东城区'
			};
		},

		components: {},
		props: {
			show: {
				//控制area_select显示隐藏
				type: Boolean,
				default: false
			},
			maskShow: {
				//是否显示蒙层
				type: Boolean,
				default: true
			}
		},
		methods: {


			handleNYZAreaChange: function(e) {
				var that = this;
				
				var value = e.detail.value;
				/**
				 * 滚动的是省
				 * 省改变 市、区都不变
				 */

				if (index[0] != value[0]) {
					index = [value[0], 0, 0];
					let selectCitys = getMyCity(index[0]);
					let selectAreas = getAreas(index[0], 0);
					that.setData({
						citys: selectCitys,
						areas: selectAreas,
						value: [index[0], 0, 0],
						province: provinces[index[0]],
						city: selectCitys[0],
						area: selectAreas[0]
					});
				} else if (index[1] != value[1]) {
					/**
					 * 市改变了 省不变 区变
					 */
					index = [value[0], value[1], 0];
					let selectCitys = getMyCity(index[0]);
					let selectAreas = getAreas(index[0], value[1]);
					that.setData({
						citys: selectCitys,
						areas: selectAreas,
						value: [index[0], index[1], 0],
						province: provinces[index[0]],
						city: selectCitys[index[1]],
						area: selectAreas[0]
					});
				} else if (index[2] != value[2]) {
					/**
					 * 区改变了
					 */
					index = [value[0], value[1], value[2]];
					let selectCitys = getMyCity(index[0]);
					let selectAreas = getAreas(index[0], value[1]);
					that.setData({
						citys: selectCitys,
						areas: selectAreas,
						value: [index[0], index[1], index[2]],
						province: provinces[index[0]],
						city: selectCitys[index[1]],
						area: selectAreas[index[2]]
					});
				}
			},

			/**
			 * 确定按钮的点击事件
			 */
			handleNYZAreaSelect: function(e) {
				var myEventDetail = e; // detail对象，提供给事件监听函数
				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];
			}
		}
	};
</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: 200px;
		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;
	}

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