college/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue

<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 = '-415px'
				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>