|  | @@ -0,0 +1,281 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +	<view class="pupop">
 | 
	
		
			
				|  |  | +		<view class="popup-box" :animation="animationData">
 | 
	
		
			
				|  |  | +			<view class="pupop-btn">
 | 
	
		
			
				|  |  | +				<view @tap="cancel">取消</view>
 | 
	
		
			
				|  |  | +				<view @tap="confirm" style="color: #2979ff;">确定</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
 | 
	
		
			
				|  |  | +				<picker-view-column>
 | 
	
		
			
				|  |  | +					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
 | 
	
		
			
				|  |  | +				</picker-view-column>
 | 
	
		
			
				|  |  | +				<picker-view-column>
 | 
	
		
			
				|  |  | +					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
 | 
	
		
			
				|  |  | +				</picker-view-column>
 | 
	
		
			
				|  |  | +				<picker-view-column v-if="column == 3">
 | 
	
		
			
				|  |  | +					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
 | 
	
		
			
				|  |  | +				</picker-view-column>
 | 
	
		
			
				|  |  | +			</picker-view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
 | 
	
		
			
				|  |  | +	</view>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +	import {
 | 
	
		
			
				|  |  | +		addressList
 | 
	
		
			
				|  |  | +	} from './cityData.js'
 | 
	
		
			
				|  |  | +	export default {
 | 
	
		
			
				|  |  | +		data() {
 | 
	
		
			
				|  |  | +			return {
 | 
	
		
			
				|  |  | +				value: [],
 | 
	
		
			
				|  |  | +				addressList,
 | 
	
		
			
				|  |  | +				provinceList: [],
 | 
	
		
			
				|  |  | +				cityList: [],
 | 
	
		
			
				|  |  | +				areaList: [],
 | 
	
		
			
				|  |  | +				indicatorStyle: `height: 50px;`,
 | 
	
		
			
				|  |  | +				provinceIndex: 0,
 | 
	
		
			
				|  |  | +				cityIndex: 0,
 | 
	
		
			
				|  |  | +				areaIndex: 0,
 | 
	
		
			
				|  |  | +				animationData: {}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		props: {
 | 
	
		
			
				|  |  | +			column: {
 | 
	
		
			
				|  |  | +				type: Number,
 | 
	
		
			
				|  |  | +				default: 3
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			defaultValue: {
 | 
	
		
			
				|  |  | +				default: () => ''
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			visible: {
 | 
	
		
			
				|  |  | +				type: Boolean,
 | 
	
		
			
				|  |  | +				default: () => false
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			maskCloseAble: {
 | 
	
		
			
				|  |  | +				type: Boolean,
 | 
	
		
			
				|  |  | +				default: () => true
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		watch: {
 | 
	
		
			
				|  |  | +			visible (val) {
 | 
	
		
			
				|  |  | +				this.changeActive()
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			defaultValue() {
 | 
	
		
			
				|  |  | +				this.init()
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		created() {
 | 
	
		
			
				|  |  | +			this.init()
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		methods: {
 | 
	
		
			
				|  |  | +			init () {
 | 
	
		
			
				|  |  | +				var provinceList = []
 | 
	
		
			
				|  |  | +				addressList.filter(item => {
 | 
	
		
			
				|  |  | +					provinceList.push({
 | 
	
		
			
				|  |  | +						code: item.code,
 | 
	
		
			
				|  |  | +						name: item.name
 | 
	
		
			
				|  |  | +					})
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  | +				this.provinceList = [...provinceList]
 | 
	
		
			
				|  |  | +				if (!this.defaultValue) {
 | 
	
		
			
				|  |  | +					this.cityList = addressList[0].children
 | 
	
		
			
				|  |  | +					this.areaList = addressList[0].children[0].children
 | 
	
		
			
				|  |  | +				} else {
 | 
	
		
			
				|  |  | +					var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
 | 
	
		
			
				|  |  | +					if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
 | 
	
		
			
				|  |  | +						console.log(this.defaultValue)
 | 
	
		
			
				|  |  | +						var province = this.defaultValue[0]
 | 
	
		
			
				|  |  | +						var city = this.defaultValue[1]
 | 
	
		
			
				|  |  | +						this.provinceIndex = 0
 | 
	
		
			
				|  |  | +						this.cityIndex = 0
 | 
	
		
			
				|  |  | +						this.areaIndex = 0
 | 
	
		
			
				|  |  | +						this.provinceIndex = addressList.findIndex(obj => {
 | 
	
		
			
				|  |  | +							return obj.name == province
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
 | 
	
		
			
				|  |  | +						this.cityList = addressList[this.provinceIndex].children
 | 
	
		
			
				|  |  | +						this.cityIndex = this.cityList.findIndex(obj => {
 | 
	
		
			
				|  |  | +							return obj.name == city
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
 | 
	
		
			
				|  |  | +						this.areaList = this.cityList[this.cityIndex].children
 | 
	
		
			
				|  |  | +						if (this.defaultValue.length > 2) {
 | 
	
		
			
				|  |  | +							this.areaIndex = this.areaList.findIndex(obj => {
 | 
	
		
			
				|  |  | +								return obj.name == this.defaultValue[2]
 | 
	
		
			
				|  |  | +							})
 | 
	
		
			
				|  |  | +						}
 | 
	
		
			
				|  |  | +						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
 | 
	
		
			
				|  |  | +						this.$nextTick(() => {
 | 
	
		
			
				|  |  | +							if (this.column == 3) {
 | 
	
		
			
				|  |  | +								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
 | 
	
		
			
				|  |  | +							} else if (this.column == 2) {
 | 
	
		
			
				|  |  | +								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
 | 
	
		
			
				|  |  | +							}
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +					} else if (/^\d{6}$/.test(this.defaultValue)) {
 | 
	
		
			
				|  |  | +						var province = this.defaultValue.substr(0, 2)
 | 
	
		
			
				|  |  | +						var city = this.defaultValue.substr(0, 4)
 | 
	
		
			
				|  |  | +						this.provinceIndex = 0
 | 
	
		
			
				|  |  | +						this.cityIndex = 0
 | 
	
		
			
				|  |  | +						this.areaIndex = 0
 | 
	
		
			
				|  |  | +						this.provinceIndex = addressList.findIndex(obj => {
 | 
	
		
			
				|  |  | +							return obj.code == province
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
 | 
	
		
			
				|  |  | +						this.cityList = addressList[this.provinceIndex].children
 | 
	
		
			
				|  |  | +						this.cityIndex = this.cityList.findIndex(obj => {
 | 
	
		
			
				|  |  | +							return obj.code == city
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
 | 
	
		
			
				|  |  | +						this.areaList = this.cityList[this.cityIndex].children
 | 
	
		
			
				|  |  | +						this.areaIndex = this.areaList.findIndex(obj => {
 | 
	
		
			
				|  |  | +							return obj.code == this.defaultValue
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
 | 
	
		
			
				|  |  | +						this.$nextTick(() => {
 | 
	
		
			
				|  |  | +							if (this.column == 3) {
 | 
	
		
			
				|  |  | +								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
 | 
	
		
			
				|  |  | +							} else if (this.column == 2) {
 | 
	
		
			
				|  |  | +								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
 | 
	
		
			
				|  |  | +							}
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +					} else {
 | 
	
		
			
				|  |  | +						uni.showToast({
 | 
	
		
			
				|  |  | +							title: '地区编码格式不正确',
 | 
	
		
			
				|  |  | +							icon: 'none'
 | 
	
		
			
				|  |  | +						})
 | 
	
		
			
				|  |  | +						console.log('地区编码格式不正确')
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +				this.changeActive()
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			confirm () {
 | 
	
		
			
				|  |  | +				if (this.column == 3) {
 | 
	
		
			
				|  |  | +					this.$emit('confirm', {
 | 
	
		
			
				|  |  | +						code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
 | 
	
		
			
				|  |  | +						name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name + addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
 | 
	
		
			
				|  |  | +						provinceName: addressList[this.provinceIndex].name,
 | 
	
		
			
				|  |  | +						cityName: addressList[this.provinceIndex].children[this.cityIndex].name,
 | 
	
		
			
				|  |  | +						areaName: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
 | 
	
		
			
				|  |  | +					})
 | 
	
		
			
				|  |  | +				} else if (this.column == 2) {
 | 
	
		
			
				|  |  | +					this.$emit('confirm', {
 | 
	
		
			
				|  |  | +						code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
 | 
	
		
			
				|  |  | +						name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name,
 | 
	
		
			
				|  |  | +						provinceName: addressList[this.provinceIndex].name,
 | 
	
		
			
				|  |  | +						cityName: addressList[this.provinceIndex].children[this.cityIndex].name
 | 
	
		
			
				|  |  | +					})
 | 
	
		
			
				|  |  | +				} else {
 | 
	
		
			
				|  |  | +					uni.showToast({
 | 
	
		
			
				|  |  | +						title: '目前column只能传2和3',
 | 
	
		
			
				|  |  | +						icon: 'none'
 | 
	
		
			
				|  |  | +					})
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			cancel () {
 | 
	
		
			
				|  |  | +				this.$emit('cancel')
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			// 动画
 | 
	
		
			
				|  |  | +			changeActive () {
 | 
	
		
			
				|  |  | +				var active = '-315px'
 | 
	
		
			
				|  |  | +				if (this.visible) {
 | 
	
		
			
				|  |  | +					active = 0
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +				var animation = uni.createAnimation({
 | 
	
		
			
				|  |  | +					duration: 400,
 | 
	
		
			
				|  |  | +					timingFunction: 'linear'
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  | +				animation.bottom(active).step()
 | 
	
		
			
				|  |  | +				this.animationData = animation.export()
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			bindChange(e) {
 | 
	
		
			
				|  |  | +				e.detail.value[0] = e.detail.value[0] || 0
 | 
	
		
			
				|  |  | +				e.detail.value[1] = e.detail.value[1] || 0
 | 
	
		
			
				|  |  | +				e.detail.value[2] = e.detail.value[2] || 0
 | 
	
		
			
				|  |  | +				if (e.detail.value[0] != this.provinceIndex) {
 | 
	
		
			
				|  |  | +					// console.log('监听第一列')
 | 
	
		
			
				|  |  | +					this.provinceChange(e.detail.value[0])
 | 
	
		
			
				|  |  | +				} else if (e.detail.value[1] != this.cityIndex) {
 | 
	
		
			
				|  |  | +					// console.log('监听第二列')
 | 
	
		
			
				|  |  | +					this.cityChange(e.detail.value[1])
 | 
	
		
			
				|  |  | +				} else if (e.detail.value[2] != this.areaIndex) {
 | 
	
		
			
				|  |  | +					// console.log('监听第三列')
 | 
	
		
			
				|  |  | +					this.areaChange(e.detail.value[2])
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			// 监听第一列变化
 | 
	
		
			
				|  |  | +			provinceChange (e) {
 | 
	
		
			
				|  |  | +				this.provinceIndex = e
 | 
	
		
			
				|  |  | +				this.cityIndex = 0
 | 
	
		
			
				|  |  | +				this.areaIndex = 0
 | 
	
		
			
				|  |  | +				this.value = [...[e, 0, 0]]
 | 
	
		
			
				|  |  | +				this.cityList = addressList[e].children
 | 
	
		
			
				|  |  | +				this.areaList = addressList[e].children[0].children
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			// 监听第二列变化
 | 
	
		
			
				|  |  | +			cityChange (e) {
 | 
	
		
			
				|  |  | +				this.cityIndex = e
 | 
	
		
			
				|  |  | +				this.areaIndex = 0
 | 
	
		
			
				|  |  | +				// console.log(this.cityIndex, this.areaIndex)
 | 
	
		
			
				|  |  | +				this.value = [...[this.provinceIndex, e, 0]]
 | 
	
		
			
				|  |  | +				this.cityList = addressList[this.provinceIndex].children
 | 
	
		
			
				|  |  | +				this.areaList = addressList[this.provinceIndex].children[e].children
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			// 监听第三列变化
 | 
	
		
			
				|  |  | +			areaChange (e) {
 | 
	
		
			
				|  |  | +				this.areaIndex = e
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +			// 点击模态框
 | 
	
		
			
				|  |  | +			close () {
 | 
	
		
			
				|  |  | +				if (this.maskCloseAble) {
 | 
	
		
			
				|  |  | +					this.cancel()
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped lang="scss">
 | 
	
		
			
				|  |  | +	.pupop {
 | 
	
		
			
				|  |  | +		.popup-box {
 | 
	
		
			
				|  |  | +			position: fixed;
 | 
	
		
			
				|  |  | +			left: 0;
 | 
	
		
			
				|  |  | +			bottom: -315px;
 | 
	
		
			
				|  |  | +			z-index: 99999;
 | 
	
		
			
				|  |  | +			background: #fff;
 | 
	
		
			
				|  |  | +			padding-bottom: 50px;
 | 
	
		
			
				|  |  | +			.pupop-btn{
 | 
	
		
			
				|  |  | +				height: 40px;
 | 
	
		
			
				|  |  | +				display: flex;
 | 
	
		
			
				|  |  | +				align-items: center;
 | 
	
		
			
				|  |  | +				padding: 0 30upx;
 | 
	
		
			
				|  |  | +				justify-content: space-between;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.pupop-model {
 | 
	
		
			
				|  |  | +			position: fixed;
 | 
	
		
			
				|  |  | +			left: 0;
 | 
	
		
			
				|  |  | +			top: 0;
 | 
	
		
			
				|  |  | +			width: 100%;
 | 
	
		
			
				|  |  | +			height: 100%;
 | 
	
		
			
				|  |  | +			z-index: 9999;
 | 
	
		
			
				|  |  | +			background: rgba(0, 0, 0, .5);
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.pupop-models{
 | 
	
		
			
				|  |  | +			display: none;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.picker-view {
 | 
	
		
			
				|  |  | +			width: 750rpx;
 | 
	
		
			
				|  |  | +			height: 225px;
 | 
	
		
			
				|  |  | +			margin-top: 20rpx;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.item {
 | 
	
		
			
				|  |  | +			height: 50px;
 | 
	
		
			
				|  |  | +			align-items: center;
 | 
	
		
			
				|  |  | +			justify-content: center;
 | 
	
		
			
				|  |  | +			text-align: center;
 | 
	
		
			
				|  |  | +			line-height: 50px;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</style>
 |