支持级联选择商铺地址

api/shop.js

@@ -15,4 +15,9 @@ const getShopInfo = async ({ shopId }) => {
 	return res.data;
 }
 
-export default { listBuildingByDistrict, getShopList, getShopInfo };
+const getDistrictBuildingFloor = async()  => {
+	const res = await request.get({ url: `/shop/districtBuildingFloor`});
+	return res.data;
+}
+
+export default { listBuildingByDistrict, getShopList, getShopInfo, getDistrictBuildingFloor };

pages/shop/index.vue

@@ -12,12 +12,15 @@
 				<uni-row class="demo-uni-row" :width="nvueWidth">
 					<uni-col :span="11">
 						<view class="demo-uni-col">						
-							<uni-data-picker :localdata="items" placeholder="商铺位置" popup-title="选择商铺位置" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
+							<uni-data-picker :localdata="addressItems" v-model="selectedAddress" placeholder="商铺位置" popup-title="选择商铺位置" 
+							 @change="onchange"
+							 @nodeclick="onnodeclick"
+							 @popupclosed="onpopupclosed"></uni-data-picker>
 						</view>
 					</uni-col>
 					<uni-col :span="5">
 						<view class="demo-uni-col">						
-							<uni-data-select class="search-data-select"  placeholder="使用状态" v-model="statusValue" :localdata="statusRange" @change="changeStatus">状态</uni-data-select>
+							<uni-data-select class="search-data-select"  placeholder="使用状态" v-model="statusValue" :localdata="statusRange">状态</uni-data-select>
 						</view>
 					</uni-col>
 					<uni-col :span="4">
@@ -61,28 +64,11 @@
 				// more = 加载前， loading = 加载中， noMore = 没有更多
 				more: 'more',
 				dataList: [],
-				items: [{
-				          text: "一年级",
-				          value: "1-0",
-				          children: [
-				            {
-				              text: "1.1班",
-				              value: "1-1"
-				            },
-				            {
-				              text: "1.2班",
-				              value: "1-2"
-				            }
-				          ]
-				        },
-				        {
-				          text: "二年级",
-				          value: "2-0"
-				        },
-				        {
-				          text: "三年级",
-				          value: "3-0"
-				        }],
+				currentAddress: null,
+				selectedAddress: null,
+				addressItems: [],
+				statusValue: null,
+				statusRange: [],
 				queryForm: {
 					pageNum: 1,
 					pageSize: 12,
@@ -97,9 +83,10 @@
 		onShow: function() {
 			// this.init();
 		},
-		async mounted() {			
-			this.getShopList();
+		async mounted() {
 			await this.getDicts();
+			await this.getDistrictBuildingFloor();
+			await this.getShopList();
 		},
 		methods: {
 			getTitle(shop){
@@ -111,11 +98,21 @@
 							+ "状态:" + shop.status;
 				return title;
 			},
+			async getDistrictBuildingFloor() {
+				const resp_address = await shopApi.getDistrictBuildingFloor();
+				this.addressItems = resp_address.data.map(node => this.flattenValues(node));
+			},
+			flattenValues(node, parentValue='') {
+			  if(parentValue!==''){
+				  node.value = parentValue + ':' + node.value;
+			  }			  
+			  
+			  if (!node.isleaf && node.children!=null && node.children.length != 0) {
+			     node.children.map(child => this.flattenValues(child, node.value));
+			  }
+			  return node;
+			},
 			async getDicts() {
-				const resp_district = await dictApi.getDict('che_district');
-				if (resp_district.code == 200) 
-					this.districtRange = resp_district.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
-
 				const resp_vacant = await dictApi.getDict('vacant_status');
 				if (resp_vacant.code == 200) 
 					this.statusRange = resp_vacant.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
@@ -126,9 +123,17 @@
 			},
 			// 搜索函数
 			async getShopList() {
-				this.reset();
+				this.resetFormAndResult();
 				this.more = 'loading';
 
+				if(this.currentAddress != null){
+					var parts = this.currentAddress.value.split(":");
+					if (parts.length >= 1) this.queryForm.district = parts[0];				
+					if (parts.length >= 2) this.queryForm.building = parts[1];
+					if (parts.length >= 3) this.queryForm.floor = parts[2];					
+				}
+			
+				console.log("getShopList:", this.queryForm);
 				const queryParams = {};
 				for (const key in this.queryForm) {
 					if (this.queryForm[key] !== null && this.queryForm[key] !== undefined) {
@@ -145,30 +150,41 @@
 			async handleSearch() {
 				await this.getShopList();
 			},
-			async changeDistrict(e) {
-				this.buildingValue = null;
-				this.buildingRange.length = 0;
-				this.districtValue = e;
-				const resp_building = await shopApi.listBuildingByDistrict({district: e});
-				if (resp_building.code == 200) 
-					this.buildingRange = resp_building.data.map(l => ({ ...l, value: l, text: l}));
-		    },
-			changeBuidling(e) {
-				this.buildingValue = e;				
-				console.log("e:", e);
-		    },
-			changeStatus(e) {
-				console.log("e:", e);
-		    },
-			reset() {
-				this.dataList.length = 0;
+			async handleReset() {
+				this.resetFormAndResult();
 
+				this.searchVal = null;
+				this.currentAddress = null;
+				this.selectedAddress = null;
+				this.statusValue = null;
+				
+				await this.getShopList();
+			},	
+			onchange(nodesPath) {
+				const value = nodesPath.detail.value[0];
+				if (!value) {
+					this.currentAddress = null;
+				}
+			},
+			onnodeclick(node) {
+				this.currentAddress = node;
+				console.log("onnodeclick:", this.currentAddress);
+			},
+			onpopupclosed() {
+				console.log("onpopupclosed:", this.currentAddress.value);
+				this.$nextTick(() => {
+					this.selectedAddress = this.currentAddress.value
+				});
+			},
+			resetFormAndResult() {
+				this.dataList.length = 0;
+								
 				this.queryForm.pageNum = 1;
 				this.queryForm.pageSize= 12;
-				this.queryForm.district = this.districtValue;
 				this.queryForm.status = this.statusValue;
-				this.queryForm.building = this.buildingValue;
-				this.queryForm.floor = this.floor;
+				this.queryForm.district = null;
+				this.queryForm.building = null;
+				this.queryForm.floor = null;
 				this.queryForm.name = this.searchVal;
 			}
 		},