zhxg_app_v1.0/components/complex-picker-region/complex-picker-region.vue

<template>
	<view style="background-color: white;padding: 5rpx;">
		<view class="center">
			<view style="margin-right: 20rpx;">
				{{label}}:
			</view>
			<uni-easyinput style="padding: 5rpx;" @focus="open" trim="all" v-model="selctValue"
				placeholder="请选择"></uni-easyinput>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view style="height: 60vh;background-color: white;padding: 20rpx;padding-top: 40rpx;">
				<uni-row>
					<uni-col :span="4" :offset="0">
						<view class="demo-uni-col center">
							<span @click.stop="cancle" style="color: rgba(69, 90, 100, 0.6);">
								取 消
							</span>
						</view>
					</uni-col>
					<uni-col :span="14" :offset="1">
						<view class="center" v-if="filterable">
							<uni-easyinput v-model="search" focus placeholder="输入关键字过滤"
								@input="inputChange"></uni-easyinput>
						</view>

					</uni-col>
					<uni-col :span="4" :offset="filterable ?1:15">
						<view class="demo-uni-col center" @click="confirm" style="color: #576b95;">确 认</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="8">
						<view class="">
							<picker-view @change="bindChange" class="picker-view">
								<!-- 省 -->
								<picker-view-column>
									<view class="center" v-for="(item,index) in provinces" :key="Math.random()">
										{{item.value}}
									</view>
								</picker-view-column>
								<!-- 市 -->
								<picker-view-column>
									<view class="center" v-for="(item,index) in cities" :key="Math.random()">
										{{item.value}}
									</view>
								</picker-view-column>
								区县
								<picker-view-column>
									<view class="center" v-for="(item,index) in counties" :key="Math.random()">
										{{item.value}}
									</view>
								</picker-view-column>
							</picker-view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import area from './area.js'
	export default {
		props: {
			label: {
				default: '标签'
			},
			filterable: {
				default: false,
				type: Boolean
			},
			treeArr: {
				default: function() {
					return area
				},
				type: Array
			}
		},
		data() {
			return {
				//---
				selctValue: '',
				//
				popupVisible: true,
				title: 'picker-view',
				filterpickeArr: [],
				visible: true,
				//搜索框---
				search: '',
				//滚动框的值
				pickeValue: '',
				// 省市县数据
				provinces: [],
				cities: [],
				counties: [],
				selectProvince: '',
				selectCity: '',
				selectCounty: '',
			}
		},
		mounted() {
			this.filterpickeArr = [...this.treeArr]
			this.resetArr()
		},
		methods: {
			//恢复 下拉数据/搜索数据/选中数据
			resetArr() {
				this.provinces = [...this.treeArr]
				this.cities = [...this.provinces[0].children]
				this.counties = [...this.cities[0].children]
				this.selectProvince = this.provinces[0]
				this.selectCity = this.cities[0]
				this.selectCounty = this.counties[0]
				//搜索项
				this.search = ''
			},
			//表单项
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
				this.resetArr()
			},
			//弹出框---
			// 输入框
			inputChange(val) {
				this.filter(val)
			},
			//过滤
			filter(val) {
				const filteArr = this.treeArr.filter((item, index) => {
					return item.indexOf(val) !== -1;
				})
				this.filterpickeArr = [...filteArr]
				this.pickeValue = this.filterpickeArr[0]
			},
			//取消
			cancle() {
				this.$refs.popup.close()
			},
			//确认
			confirm() {
				this.selctValue = this.pickeValue
				this.$refs.popup.close()
				const selectData = {
					selectProvince: this.selectProvince,
					selectCity: this.selectCity,
					selectCounty: this.selectCounty
				}
				let showValue = this.selectProvince.value + '/' + this.selectCity.value + '/' + this.selectCounty.value
				//回显
				this.selctValue = showValue
				this.$emit('confirm', selectData)
			},
			// 滑动
			bindChange: function(e) {
				const val = e.detail.value
				//联动-实现
				this.linkArr(val)
			},

			//联动实现
			linkArr(val = []) {
				let provinceIndex = val[0]
				let cityIndex = val[1]
				let countyIndex = val[2]
				if (provinceIndex || provinceIndex === 0) {
					//说明第一列 改变了------
					this.cities = (this.provinces[provinceIndex] || {}).children
					this.counties = (this.cities[0] || {}).children
					//默认选中的数据
					this.selectProvince = this.provinces[provinceIndex]
					this.selectCity = this.cities[0]
					this.selectCounty = this.counties[0]
				}
				if (cityIndex || cityIndex === 0) {
					//说明第二列 改变了------
					this.counties = (this.cities[cityIndex] || {}).children
					//默认选中的数据
					this.selectCity = this.cities[cityIndex]
					this.selectCounty = this.counties[0]
				}
				if (countyIndex || countyIndex === 0) {
					//说明第三列 改变了-----
					//默认选中的数据
					this.selectCounty = this.counties[countyIndex]
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo-uni-col {
		height: 36px;
	}

	.picker-view {
		height: 50vh;
		width: 100vw;
		margin-top: 20rpx;
	}

	.center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>