yiliangyiyun-app/components/selectAddress.vue

<template>
	<view>
		<picker :class="disabled?'pickerClass':''" ref='picker' @change="bindPickerChange" :value="multiIndex"
			:range="multiArray" range-key='label' mode="multiSelector" @columnchange='columnchange'>
			<view class="text" :style="textStyleEmpty" v-if="place=='选择地区'">
				{{place}}
			</view>
			<view class="text" :style="textStyle" v-else>{{edit?text:place}}</view>
			<slot name="icon"></slot>
		</picker>
	</view>
</template>

<script>
	var that= this
	import {
		address
	} from '@/components/data/data.js'
	import {
		address1
	} from '@/components/data/data1.js'
	export default {
		name: 'selectAddress',
		props: {
			searchPlace: {
				type: String,
				default: '全国'
			},
			edit: {
				value: Boolean,
				default: false
			},
			text: {
				type: String,
				default: ''
			},
			series: {
				type: String,
				default: '1'
			},
			textStyle: {
				type: Object,
			},
			disabled: {
				value: Boolean,
				default: false
			},
		},
		watch: {
			
			text:{
				handler(oldValue, newValue) {
				console.log(11111111)
				console.log(oldValue, newValue)
				// if (val != '') {
					this.place = oldValue
				// }
				console.log(this.place,this.text,this.edit)
			},
			deep:true,
			immediate:true,
			},
			place:{
				handler(oldValue, newValue) {
				// console.log(11111111)
				// console.log(oldValue, newValue)
				// // if (val != '') {
				// 	this.place = oldValue
				// // }
				// console.log(this.place,this.text,this.edit)
			},
			deep:true,
			immediate:true,
			},
		},
		data() {
			return {
				check: false,
				place: '',
				textStyleEmpty: {
					"color": '#C5CAD4',
					"font-size": '32rpx'
				},
				multiIndex: [0, 0, 0],
				addressCopy: null,
				multiArray: [
					[],
					[],
					[]
				],
			}
		},
		mounted() {
			if(!this.edit&&!this.text){
				this.place = this.searchPlace
			}
			// console.log("this.series", this.series)
			if (this.series == 3) {
				this.addressCopy = JSON.parse(JSON.stringify(address1))
				this.addressCopy.shift()
			} else {
				this.addressCopy = JSON.parse(JSON.stringify(address))
			}
			// console.log("this.addressCopy", this.addressCopy)
			for (let i = 0; i < this.addressCopy.length; i++) {
				this.multiArray[0].push(this.addressCopy[i])

			}
			this.multiArray[1] = this.addressCopy[0].child
			this.multiArray[2] = this.addressCopy[0].child[0].child
			// this.$emit('selectAddress', '')
		},
		methods: {
			columnchange(e) {
				console.log('picker发送选择改变', e.detail)
				this.multiIndex[e.detail.column] = e.detail.value
				console.log("this.multiIndex", this.multiIndex)
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.multiArray[1] = this.addressCopy[e.detail.value].child
						this.multiArray[2] = this.multiArray[1][0].child
						console.log(this.multiArray[1])
						this.multiIndex.splice(1, 1, 0)
						this.multiIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						this.multiArray[2] = this.multiArray[1][this.multiIndex[1]].child
						this.multiIndex.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()

			},
			bindPickerChange: function(e) {
				this.check = false
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				console.log(this.multiArray)
				//判断全部
				let _address = ''
				let _showVal = ''
				if (this.multiArray[0][e.detail.value[0]].label == '全国') {
					_address = ''
					this.place = '全国'
				} else if (this.multiArray[1][e.detail.value[1]]
					.label == '全部') {
					_address = this.multiArray[0][e.detail.value[0]].label
					this.place = this.multiArray[0][e.detail.value[0]].label
				} else if (this.multiArray[2][e.detail.value[2]].label == '全部') {
					_address = this.multiArray[0][e.detail.value[0]].label + this.multiArray[1][e.detail.value[1]]
						.label
					this.place = this.multiArray[1][e.detail.value[1]].label
				} else {
					if(this.multiArray[0][e.detail.value[0]].label=='北京'||this.multiArray[0][e.detail.value[0]].label=='天津'||this.multiArray[0][e.detail.value[0]].label=='上海'||this.multiArray[0][e.detail.value[0]].label=='重庆'){
						_address =  this.multiArray[1][e.detail.value[1]]
						.label + this.multiArray[2][e.detail.value[2]].label
					}else{
						_address = this.multiArray[0][e.detail.value[0]].label + this.multiArray[1][e.detail.value[1]]
						.label + this.multiArray[2][e.detail.value[2]].label
					}
					this.place = this.multiArray[2][e.detail.value[2]].label
					this.check = true
				}
				if (this.series == 3) {
					if (!_address) {
						this.place = '全国'
					}
					if (this.check) {
						this.place = _address
					} else {
						this.place = this.searchPlace
					}

				}
				console.log("_showVal", this.place)
				console.log("_address", _address)
				console.log("this.check", this.check)
				this.$emit('selectAddress', {
					showVal: this.place,
					address: _address,
					check: this.check
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.text {
		display: inline-block;
		margin: 0;
	}
</style>