carbon-statistics/components/select-addr/select-addr.vue

<!-- 地址读取数据接口 -->
<template>
	<view class="select-addr">
		<view class="select-wrap">
			<view @tap="handleTap('pickerAddr')" 
			class="select-item full"			
			 ref="pickerAddrText">{{ defaultTtext }}</view>
		</view>
		<lb-picker 		
		ref="pickerAddr" 
		v-model="value" 
		mode="multiSelector" 
		:list="areaList" 
		:level="5"
		:column-num="7"
		emptyText="请稍后重试"
		@change="handleChange"
		@confirm="handleConfirm"
		@cancel="handleCancel">
		<view slot="action-center">上下滑动选择市县乡村</view>
		</lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import {config} from '@/common/config.js'
	export default {
		name: 'selectAddr',
		components: {
			LbPicker
		},
		props:{
			defaultTtext:{
				type:String,
				default:'全部地区'
			}
		},
		created() {
			//获取地址数据
			if(uni.getStorageSync('addrData')){
				this.areaList = uni.getStorageSync('addrData');				
			}else{
				// this.$api.http.get('/wap/treeOrganize/get/preToJson')
				this.$u.get(config.addrApi,{}).then(res => {
					// console.log('preToJson',res);
					if (res.retHead.errCode == 0) {
						this.areaList = res.retBody;
						uni.setStorageSync('addrData', res.retBody);
					} else {
						this.$api.msg(res.retHead.errMsg)					
					}
				}).catch(err =>{console.log('获取地址数据',err)});				
			}
			
		},
		data() {
			return {
				value: [],//指定默认值
				// value: ["522600000000", "522633000000", "522633107000", "522633107202"],//指定默认值
				areaList: [],
				areaProps: {
					label: 'orgName',
					value: 'parentOrgId',
				},
				pickerIndex: 0,
				text: "",
				params:{
					cityId:'',
					countyId:'',
					townId:'',
					villageId:'',
					textArray:[],
					addrLevel:null,										
				},

			};
		},
		methods: {
			//地址选择
			handleTap (picker) {
				
				this.resetAddr();
				this.$refs[picker].show();
				// uni.hideTabBar();
				// console.log('this.$refs[picker]',this.$refs[picker]);
				},
				handleChange (item) {
					// console.log('change::', item)
				},
				handleConfirm (item) {
					let that = this;
					let text = '';
					item.item.forEach(function(item,index,array){
						if(item.label == "全部"){
							return
						}
						text+=item.label+'-'
						that.params.textArray.push(item.label);
					});
					
					if(text.charAt(text.length-1)=="-"){						
						text = text.substr(0,text.length-1)
					};
					if(text == ''){
						text = this.defaultTtext;
						that.$refs.pickerAddrText.$el.style.color = "gray";
					}else{
						that.$refs.pickerAddrText.$el.style.color = "#333";
					};
					that.$refs.pickerAddrText.$el.innerText=text;
					this.params.addrLevel = this.params.textArray.length + 1;
					this.params.cityId = item.value[0];
					this.params.countyId = item.value[1];
					this.params.townId = item.value[2];
					this.params.villageId = item.value[3];
					// console.log('this.params::', this.params)
					//给父组件传值
					this.$emit('getAddr',this.params)
					// uni.showTabBar();
					
				},
				handleCancel (item) {
					// uni.showTabBar();
					// console.log('cancel::', item)
				},
				resetAddr(){
					this.params.cityId = "";
					this.params.countyId = "";
					this.params.townId = "";
					this.params.villageId = "";
					this.params.textArray=[];
				}

		}
	}
</script>

<style scoped>
.select-wrap{display: flex;margin-top: 15rpx;}
.select-wrap .select-item{flex: 1;font-size: 28rpx;color: gray;height: 80rpx;line-height: 80rpx;box-sizing: border-box;padding: 0 16rpx 0 16rpx;border: 1rpx solid #E5E5E5;position: relative;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border-radius: 8px;margin-right: 7rpx;}
.select-wrap .select-item:last-of-type{margin-right: 0;}
.select-wrap .select-item::after{content: '';width: 0;height: 0;border-left: 5rpx solid transparent;border-right: 5rpx solid transparent;border-top: 8rpx solid #666;position: absolute;right: 10rpx;top: 50%;}
.select-wrap .select-item.full::after{right: 15rpx;border-left-width: 8rpx;border-right-width: 8rpx;border-top-width: 10rpx;}
.select-wrap .select-item.full{padding-right: 30rpx;}
.normal .select-wrap .select-item{padding: 0;border: 0;}
.normal .select-wrap .select-item::after{border: 0;}


.select-addr >>> .picker-item .lb-picker-column{font-size: 30rpx;}
.select-addr >>> .uni-picker-view-wrapper uni-picker-view-column:first-of-type{width: 140rpx;flex: unset;}
</style>