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="searchPlace=='请选交货地区'">{{searchPlace}}</view>
			<view class="text" :style="textStyle" v-else>{{searchPlace}}</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: {
			// keyword:function(val){
			// 	let arr = this.tList;
			// 	if(val!=''){
			// 		this.list = arr.filter(v => {
			// 			let flag = false
			// 			if(v.members.length>0){
			// 				v.members.forEach(m=>{
			// 					if(m.groupNickName.includes(val)){
			// 						flag = true
			// 					}
			// 				})
			// 			}
			// 			return flag
			// 		})
			// 	}else {
			// 		this.list = this.tList
			// 	}
			// }
		},
		data() {
			return {
				textStyleEmpty: {
					"color": '#C5CAD4',
					"font-size": '32rpx'
				},
				multiIndex: [0, 0, 0],
				multiArray: [
					[],
					[],
					[]
				],
			}
		},
		mounted() {
			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) {
				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 = "全国"
					_showVal = '全国'
				} else if (this.multiArray[1][e.detail.value[1]]
					.label == '全部') {
					_address = this.multiArray[0][e.detail.value[0]].label
					this.searchPlace = 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.searchPlace = 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.searchPlace = this.multiArray[2][e.detail.value[2]].label
				}
				if (this.series == 3) {
					if (!_address) {
						this.searchPlace = '全国'
						return
					}
					this.searchPlace = _address

				}
				console.log("_showVal", _showVal)
				console.log("_address", _address)
				this.$emit('selectAddress', _address)
			}
		},
	}
</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>