移动端地址选择组件

<template>
	<u-popup :show="showPopup" @close="closeRegion" round="12" :closeable="true">
		<view class="m-2 pb-4" style="height: 80vh;">
			<view class="pl-2 d-flex">
				<view v-for="(cu,c) in emitObj" :key="c" @click="backList(c)" class="mr-2 region-text"
					:style="{'color': cu ? '#2979ff' : '#909399'}">{{ cu ? cu.label : '请选择' }}</view>
			</view>
			<view v-for="(reg,r) in showList" :key="r">
				<view class="drop-item" @click="clickReg(r)">
					{{reg.classificationName}}
					<u-icon v-if="reg.children" name="arrow-right" size="15" color="#909399" class="ml-8">
					</u-icon>
					<u-icon v-if="emitObj[current] && reg.id === emitObj[current].id" name="checkbox-mark" size="15"
						color="#2979ff" style="position: absolute;right: 50rpx;"></u-icon>
				</view>
				<u-line></u-line>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			showPopup: {
				type: Boolean,
				default: false
			},
			editNew: {
				type: Boolean,
				default: false
			},
			editRegion: {
				type: String,
				default: '11'
			}
		},
		data() {
			return {
				clickList: [],
				current: 0,
				regionList: this.$regionData,
				province: [],
				city: [],
				area: [],
				showList: [],
				emitObj: []
			}
		},
		methods: {
			init() {
				this.showList = this.regionList
				if (this.editNew) {
					this.current = 0
					this.emitObj.push(null)
				} else {
					let rel = this.showList
					this.$func.install.filtRegion(this.editRegion).split('-').map((reg, r) => {
						this.$set(this.emitObj, r, {
							label: reg,
							id: this.editRegion.split(',')[r]
						})
						rel.map((item, index) => {
							if (item.id === this.editRegion.split(',')[r] && item.children) {
								rel = item.children
								this.setCHil(r, item.children)
							}
						})
						this.backList(r)
					})
				}
			},
			setCHil(index, arr) {
				if (index === 0) {
					this.city = arr
				} else if (index === 1) {
					this.area = arr
				}
			},
			clickReg(r) {
				let sets = {
					label: this.showList[r].classificationName,
					id: this.showList[r].id
				}
				this.$set(this.emitObj, this.current, sets)
				if (this.showList[r].children) {
					this.setCHil(this.current, this.showList[r].children)
					this.current = this.current + 1
					if (this.emitObj[this.current]) {
						this.$set(this.emitObj, this.current, null)
					}
					if (this.emitObj[this.current + 1]) {
						this.emitObj.splice(this.current + 1, 1)
					}
					this.showList = this.showList[r].children
				} else {
					let regString = ''
					this.emitObj.map((item, index) => {
						regString = index === 0 ? item.id : regString + ',' + item.id
					})
					this.cleanData()
					this.$emit('confirm', regString)
				}
			},
			backList(c) {
				if (c === 1) {
					this.showList = this.city
				} else if (c === 2) {
					this.showList = this.area
				} else {
					this.showList = this.regionList
				}
				this.current = c
			},
			closeRegion() {
				this.cleanData()
				this.$emit('close')
			},
			cleanData() {
				this.showList = []
				this.clickList = []
				this.current = 0
				this.city = []
				this.area = []
				this.showList = []
				this.emitObj = []
			}
		}
	}
</script>