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>
	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: {

			// searchPlace(oldValue, newValue) {
			// 	console.log(123)
			// 	console.log(oldValue, newValue)
			// 	// if (val != '') {
			// 	// 	this.place = val
			// 	// }
			// }
		},
		data() {
			return {
				check: false,
				place: '',
				textStyleEmpty: {
					"color": '#C5CAD4',
					"font-size": '32rpx'
				},
				multiIndex: [0, 0, 0],
				addressCopy: null,
				multiArray: [
					[],
					[],
					[]
				],
			}
		},
		mounted() {
			console.log(this.disabled)
			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 {
					_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;
	}
</style>