MALL_MP_WX/ChargingStation/components/charge/index.vue

<template>
	<view>
		<uni-popup @change="change" ref="popup" type="bottom" background-color="#fff">
			<view v-if="value" style="height:35vh; display: flex;flex-direction: column;">
				<!-- <view style="display: flex;">
					<uni-easyinput @input="iconClick" @confirm="confirmFn" style="width: 90%; margin: 0 auto;"
						prefixIcon="search" v-model="getData.params.nameOrPhone" placeholder="请输入内容" />
				</view> -->
				<picker-view  v-if="Boolean(Number(seleIndex.length))" :value="seleIndex" @change="pickerChange"
					 @pickstart='pickstart' @pickend='pickendFn' style="flex: 1;">
					<picker-view-column>
						<view style="display: flex;align-items: center;justify-content: center;"
							v-for="(item,index) in addressList.provinces" :key="index">{{ item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view style="display: flex;align-items: center;justify-content: center;"
							v-for="(item,index) in addressList.citys[seleIndex[0]]" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
				<!-- <view @click="buttenFn" class="butten">
					确定
				</view> -->
				<button :disabled="pickerOpen" :loading='pickerOpen' @click="buttenFn" class="butten" >
					<text>{{pickerOpen?'加载中':'确定'}}</text>
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import sy from '@/api/sy'
	import provinces from '../util/province.js';
	import citys from '../util/city.js';
	import areas from '../util/area.js';
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			addressData: {
				type: Object,
				default: () => {
					return null
				}
			}
		},
		watch: {
			value: function(n, o) {
				console.log('监听', n)
				if (n) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.close()
				}
			},
			addressData: function(n, o) {
				this.addressDataFilter(this.addressData)
			}
		},
		created() {
			console.log(this.value, '111')

			// this.getlist()
		},
		data() {
			return {
				pickerOpen:false,
				determine: null,
				addressList: {
					provinces: provinces,
					citys: citys
				},
				seleData: null,
				seleIndex: [],
				seachValue: '',
				getData: {
					pageSize: 5,
					currentPage: 1,
					params: {
						nameOrPhone: '',
						type: 0
					}
				},
			}
		},
		methods: {
			pickstart(){
				this.pickerOpen = true
			},
			pickendFn(){
				this.pickerOpen = false	
				console.log('结束')
				this.$nextTick(function(){
					console.log(this.addressList.provinces[this.seleIndex[0]].label,this.addressList.citys[this.seleIndex[0]][this.seleIndex[1]].label)
				})
			},
			//选择器逆解析
			addressDataFilter(e) {
				console.log(this.seleIndex.length, '***')
				this.addressList.provinces.forEach((item, index) => {
					if (item.label == e.province) {  
						this.seleIndex[0] = index
						this.addressList.citys[this.seleIndex[0]].forEach((m, x) => {
							if (m.label == e.city) {
								this.seleIndex[1] = x
							}
						})
					}
				})
			},
			iconClick() {
				if (!this.getData.params.nameOrPhone) {
					this.getlist()
				}
			},
			buttenFn() {
				clearTimeout(this.determine)
				uni.showLoading({
					title: '加载中'
				})
				
				this.seleData = {
					province: this.addressList.provinces[this.seleIndex[0]].label,
					city: this.addressList.citys[this.seleIndex[0]][this.seleIndex[1]].label
				}
				this.determine = setTimeout(() => {
					this.$emit('chargeChange', this.seleData)
					uni.hideLoading()
					this.$emit('input', false)
				}, 700)
			},
			getlist() {
				// sy.findCustomerName(this.getData).then(res => {
				// 	if (res.code !== 20000) return
				// 	if (res.data.list.length == 0){
				// 		uni.showToast({
				// 			title:'暂无数据'
				// 		})
				// 		return
				// 	} 
				// 	this.list = res.data.list
				// 	if (!this.getData.params.nameOrPhone) {
				// 		this.list.unshift({
				// 			userName: '全部',
				// 			customerId: ''
				// 		})
				// 	}
				// 	this.seleData = this.list[0]
				// 	console.log(res, '负责人组件')
				// })
			},
			pickerChange(e) {
				this.seleIndex = e.detail.value
			},
			change(e) {
				this.$emit('input', e.show)
			},
			confirmFn() {
				this.getlist()
			}
		}
	}
</script>

<style scoped>
	button[disabled] {
		  background: #007AFF50;
		  color: #ffffff50;
	}
	.butten {
		display: flex;
		justify-content: center;
		font-size: 35rpx;
		color: #ffffff;
		width: 60%;
		margin: 10rpx auto;
		border-radius: 10px;
		background: #007AFF;
		align-items: center;
		/* padding: 20rpx 0; */
	}
</style>