yiliangyiyun-app/components/selectAddress.vue

<template>
	<view>
		<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>
		</picker>
	</view>
</template>

<script>
	import {
		address
	} from '@/components/data/data.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,
			}
		},
		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],
				multiArray: [
					[],
					[],
					[]
				],
			}
		},
		mounted() {
			this.place = this.searchPlace
			console.log("this.series", this.series)
			for (let i = 0; i < address.length; i++) {
				this.multiArray[0].push(address[i])

			}
			// 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] = address[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">
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		font-weight: 800;
		line-height: 48rpx;
		background-color: #fff;
		border-bottom: solid 3rpx #eeeeee;
		align-items: center;

		image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 12rpx;
			flex: 0 0 76rpx;
		}

		&-name {
			padding-left: 20rpx;
		}
	}
</style>