Browse Source

商铺管理:按板块-标签-商铺逐级显示

skym1024 1 year ago
parent
commit
52ed9e069a
5 changed files with 305 additions and 256 deletions
  1. 3 8
      api/shop.js
  2. 13 1
      pages.json
  3. 12 247
      pages/shop/index.vue
  4. 231 0
      pages/shop/shoplist.vue
  5. 46 0
      pages/shop/taglist.vue

+ 3 - 8
api/shop.js

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

+ 13 - 1
pages.json

@@ -146,12 +146,24 @@
 				"navigationBarTitleText": "商铺列表"
 			}
 		},
+		{
+			"path": "pages/shop/taglist",
+			"style": {
+				"navigationBarTitleText": "商铺详情"
+			}
+		},
+		{
+			"path": "pages/shop/shoplist",
+			"style": {
+				"navigationBarTitleText": "商铺详情"
+			}
+		},				
 		{
 			"path": "pages/shop/info",
 			"style": {
 				"navigationBarTitleText": "商铺详情"
 			}
-		},			
+		},
 		{
 			"path": "pages/activity/uploadFiel",
 			"style": {

+ 12 - 247
pages/shop/index.vue

@@ -1,49 +1,11 @@
 <template>
 	<view class="container">
-		<view class="top">
-			<view class="search">
-				<uni-row class="demo-uni-row" :width="nvueWidth">
-					<uni-col>
-						<view class="demo-uni-col">
-							<uni-easyinput class="uni-input" prefixIcon="search" v-model="formData.name" placeholder="请输入商户名称"></uni-easyinput>
-						</view>						
-					</uni-col>
-				</uni-row>
-				<uni-row class="demo-uni-row" :width="nvueWidth">
-					<uni-col :span="11">
-						<view class="demo-uni-col">						
-							<uni-data-picker :localdata="addressOptions" 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="formData.status" :localdata="statusOptions">状态</uni-data-select>
-						</view>
-					</uni-col>
-					<uni-col :span="4">
-						<view class="demo-uni-col">
-							<button class="searchBtn" type="default" @click="handleSearch">搜索</button>
-						</view>						
-					</uni-col>
-					<uni-col :span="4">
-						<view class="demo-uni-col">
-							<button class="searchBtn" type="default" @click="handleReset">重置</button>
-						</view>						
-					</uni-col>							
-				</uni-row>
-			</view>
-		</view>
 		<uni-list border class="list">
 			<uni-list-item
-				v-for="(item, index) in resultList"
+				v-for="(item, index) in districtOptions"
 				:key="index"
 				:ellipsis="2"
-				:title="item.district"
-				:note=getAddress(item)
-				:rightText=getMerchantName(item)
+				:title="item.value"
 				showArrow
 				clickable
 				@click="listItemBtn(item)">				
@@ -55,228 +17,31 @@
 
 <script>
 	import dictApi from '../../api/dict.js';
-	import shopApi from '../../api/shop.js';
-	import { BASE_URL } from '../../env.js';	
+	import request from '../../api/shop.js';
+	import { BASE_URL } from '../../env.js';
 	export default {
 		data() {
-			return {				
-				addressOptions: [],
-				statusOptions: [],
-				currentAddress: null,
-				selectedAddress: null,				
-				formData: {
-					pageNum: 0,
-					pageSize: 20,
-					district: null,
-					building: null,
-					floor: null,
-					status: null,
-					name: null,
-				},
-				resultList: [],
-				more: 'more'
+			return {
+				districtSelected: '',
+				districtOptions: [],
 			}
 		},
-		onShow: function() {
-			// this.init();
-		},
-		// 页面生命周期中onReachBottom(页面滚动到底部的事件)
-		onReachBottom() {
-			if(this.more != 'noMore') {
-				this.more = 'more';
-				this.getShopList();
-			}
-		},		
 		async mounted() {
 			await this.getDicts();
-			await this.getDistrictBuildingFloor();
-			await this.getShopList();
 		},
 		methods: {
-			async getDicts() {
-				const resp_vacant = await dictApi.getDict('vacant_status');
-				if (resp_vacant.code == 200) 
-					this.statusOptions = resp_vacant.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
-			},
-			async getDistrictBuildingFloor() {
-				const resp_address = await shopApi.getDistrictBuildingFloor();
-				this.addressOptions = 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 getShopList() {
-				this.more = 'loading';
-
-				const queryParams = {};
-				this.getFormParams(queryParams);
-				const resp = await shopApi.getShopList({...queryParams});
-				this.resultList.push(...resp.rows);
-
-				this.updateMoreStatus(resp.total);
-			},
-			// 搜索函数
-			async handleSearch() {
-				this.resultList.length = 0;
-				this.formData.pageNum = 0;
-
-				await this.getShopList();
-			},
-			async handleReset() {
-				this.currentAddress = null;
-				this.selectedAddress = null;
-								
-				this.formData.pageNum = 0;
-				this.formData.name = null;				
-				this.formData.district = null;
-				this.formData.building = null;
-				this.formData.floor = null;
-				this.formData.status = null;
-
-				this.resultList.length = 0;
-
-				await this.getShopList();
-			},
-			onchange(nodesPath) {
-				const value = nodesPath.detail.value[0];
-				if (!value) {
-					this.currentAddress = null;
-				}
-			},
-			onnodeclick(node) {
-				this.currentAddress = node;
-			},
-			onpopupclosed() {
-				this.$nextTick(() => {
-					this.selectedAddress = this.currentAddress.value
-				});
+			async getDicts() {				
+				const resp_district = await dictApi.getDict('che_district');
+				if (resp_district.code == 200) 
+					this.districtOptions = resp_district.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
 			},
 			// 列表点击函数
 			listItemBtn(e) {
-				uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
-			},
-			getAddress(shop){
-				return "楼栋:" + shop.building + "  楼层:" + shop.floor + "  铺位号:" + shop.number;
-			},
-			getMerchantName(shop){
-				if(shop.status === "未使用")
-					return shop.status;
-				
-				if(shop.name != null && shop.name != '' && shop.name != undefined)
-					return shop.name;
-
-				return "未知";					
+				uni.navigateTo({ url: `/pages/shop/taglist?district=${e.value}` })
 			},
-			getFormParams(queryParams){
-				this.formData.pageNum += 1;
-
-				if(this.currentAddress != null){
-					var parts = this.currentAddress.value.split(":");
-					if (parts.length >= 1) this.formData.district = parts[0];				
-					if (parts.length >= 2) this.formData.building = parts[1];
-					if (parts.length >= 3) this.formData.floor = parts[2];					
-				}
-				
-				for (const key in this.formData) {
-					if (this.formData[key] !== null 
-						&& this.formData[key] !== undefined
-						&& this.formData[key] !== '') {
-						queryParams[key] = this.formData[key];
-					}
-				}
-			},
-			updateMoreStatus(total){
-				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
-				this.more = this.formData.pageNum >= Math.ceil(total / this.formData.pageSize) ? 'noMore' : 'more';
-			}
 		}
 	}
 </script>
 
 <style>
-	.container {
-		width: 100%;
-		background-color: #fff;
-	}
-	.top {
-		width: 100%;
-		z-index: 999;
-		background-color: #fff;
-		/* overflow: hidden; */
-	}
-	.tabsBox {
-		width: 100%;
-		border-bottom: 1px solid #d3d3d3;
-		display: flex;
-	}
-	.tab {
-		width: 25%;
-	}
-	.text {
-		display: block;
-		width: 80%;
-		margin: 0 auto;
-		text-align: center;
-	}
-	.current {
-		color: #ff9302;
-		border-bottom: 1px solid #ff9302;
-	}
-.search {
-		width: 98%;
-		border: 1px solid #f3f3f3;
-		background-color: #fff !important;
-		border-radius: 5px;
-		margin: 2px;
-		padding: 2rpx;
-		display: block;
-	}
-	.demo-uni-row {
-		margin-bottom: 10px;
-		display: block;
-	}
-	/deep/ .uni-row {
-		margin-bottom: 10px;
-	}
-	.demo-uni-col {
-		height: 24px;
-		margin-bottom: 10px;
-		border-radius: 4px;
-	}		
-	.uni-easyinput {
-		width: 100%;
-		font-size: 14px;
-		display: block;
-	}
-	.uni-easyinput .uni-easyinput__content {
-		border: 1px solid #f3f3f3;
-		border-radius: 10px;
-	}
-	.search-data-select{
-		width: 100%;
-		border-radius: 10px;
-	}
-	.searchBtn {
-		width: 98%;
-		background-color: #ff9302 !important;
-		border: none;
-		color: #fff !important;
-		border-radius: 12px;
-		padding-left: 2px;
-		padding-right: 2px;
-		margin-left: 2px;
-		margin-right: 2px;
-		font-size: 13px;
-	}
-	.list {
-		display: block;
-	}
 </style>

+ 231 - 0
pages/shop/shoplist.vue

@@ -0,0 +1,231 @@
+<template>
+	<view class="container">
+		<view class="top">
+			<view class="search">
+				<uni-row class="demo-uni-row" :width="nvueWidth">
+					<uni-col>
+						<view class="demo-uni-col">
+							<uni-easyinput class="uni-input" prefixIcon="search" v-model="formData.name" placeholder="请输入商户名称"></uni-easyinput>
+						</view>						
+					</uni-col>
+				</uni-row>
+				<uni-row class="demo-uni-row" :width="nvueWidth">
+					<uni-col :span="16">
+						<view class="demo-uni-col">						
+							<uni-data-select class="search-data-select"  placeholder="使用状态" v-model="formData.status" :localdata="statusOptions">状态</uni-data-select>
+						</view>
+					</uni-col>
+					<uni-col :span="4">
+						<view class="demo-uni-col">
+							<button class="searchBtn" type="default" @click="handleSearch">搜索</button>
+						</view>						
+					</uni-col>
+					<uni-col :span="4">
+						<view class="demo-uni-col">
+							<button class="searchBtn" type="default" @click="handleReset">重置</button>
+						</view>						
+					</uni-col>							
+				</uni-row>
+			</view>
+		</view>
+		<uni-list border class="list">
+			<uni-list-item
+				v-for="(item, index) in resultList"
+				:key="index"
+				:ellipsis="2"
+				:title="item.district"
+				:note=getAddress(item)
+				:rightText=getMerchantName(item)
+				showArrow
+				clickable
+				@click="listItemBtn(item)">				
+			</uni-list-item>
+		</uni-list>
+		<uni-load-more :status="more" />
+	</view>
+</template>
+
+<script>
+	import dictApi from '../../api/dict.js';
+	import shopApi from '../../api/shop.js';
+	import { BASE_URL } from '../../env.js';	
+	export default {
+		data() {
+			return {				
+				statusOptions: [],
+				formData: {
+					pageNum: 0,
+					pageSize: 20,
+					district: null,
+					tag: null,
+					status: null,
+					name: null,
+				},
+				resultList: [],
+				more: 'more'
+			}
+		},
+		onLoad: function (option) {
+			this.formData.district = option.district;
+			this.formData.tag = option.tag;
+		},		
+		onShow: function() {
+			// this.init();
+		},
+		// 页面生命周期中onReachBottom(页面滚动到底部的事件)
+		onReachBottom() {
+			if(this.more != 'noMore') {
+				this.more = 'more';
+				this.getShopList();
+			}
+		},		
+		async mounted() {
+			await this.getDicts();
+			await this.getShopList();
+		},
+		methods: {
+			async getDicts() {
+				const resp_vacant = await dictApi.getDict('vacant_status');
+				if (resp_vacant.code == 200) 
+					this.statusOptions = resp_vacant.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
+			},
+			// 搜索函数
+			async getShopList() {
+				this.more = 'loading';
+
+				const queryParams = {};
+				this.getFormParams(queryParams);
+				const resp = await shopApi.getShopList({...queryParams});
+				this.resultList.push(...resp.rows);
+
+				this.updateMoreStatus(resp.total);
+			},
+			// 搜索函数
+			async handleSearch() {
+				this.resultList.length = 0;
+				this.formData.pageNum = 0;
+
+				await this.getShopList();
+			},
+			async handleReset() {								
+				this.formData.pageNum = 0;
+				this.formData.name = null;
+				this.formData.status = null;
+
+				this.resultList.length = 0;
+
+				await this.getShopList();
+			},
+			// 列表点击函数
+			listItemBtn(e) {
+				uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
+			},
+			getAddress(shop){
+				return shop.tag + "  铺位号:" + shop.number;
+			},
+			getMerchantName(shop){
+				if(shop.status === "未使用")
+					return shop.status;
+				
+				if(shop.name != null && shop.name != '' && shop.name != undefined)
+					return shop.name;
+
+				return "未知";					
+			},
+			getFormParams(queryParams){
+				this.formData.pageNum += 1;
+				for (const key in this.formData) {
+					if (this.formData[key] !== null 
+						&& this.formData[key] !== undefined
+						&& this.formData[key] !== '') {
+						queryParams[key] = this.formData[key];
+					}
+				}
+			},
+			updateMoreStatus(total){
+				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
+				this.more = this.formData.pageNum >= Math.ceil(total / this.formData.pageSize) ? 'noMore' : 'more';
+			}
+		}
+	}
+</script>
+
+<style>
+	.container {
+		width: 100%;
+		background-color: #fff;
+	}
+	.top {
+		width: 100%;
+		z-index: 999;
+		background-color: #fff;
+		/* overflow: hidden; */
+	}
+	.tabsBox {
+		width: 100%;
+		border-bottom: 1px solid #d3d3d3;
+		display: flex;
+	}
+	.tab {
+		width: 25%;
+	}
+	.text {
+		display: block;
+		width: 80%;
+		margin: 0 auto;
+		text-align: center;
+	}
+	.current {
+		color: #ff9302;
+		border-bottom: 1px solid #ff9302;
+	}
+.search {
+		width: 98%;
+		border: 1px solid #f3f3f3;
+		background-color: #fff !important;
+		border-radius: 5px;
+		margin: 2px;
+		padding: 2rpx;
+		display: block;
+	}
+	.demo-uni-row {
+		margin-bottom: 10px;
+		display: block;
+	}
+	/deep/ .uni-row {
+		margin-bottom: 10px;
+	}
+	.demo-uni-col {
+		height: 24px;
+		margin-bottom: 10px;
+		border-radius: 4px;
+	}		
+	.uni-easyinput {
+		width: 100%;
+		font-size: 14px;
+		display: block;
+	}
+	.uni-easyinput .uni-easyinput__content {
+		border: 1px solid #f3f3f3;
+		border-radius: 10px;
+	}
+	.search-data-select{
+		width: 100%;
+		border-radius: 10px;
+	}
+	.searchBtn {
+		width: 98%;
+		background-color: #ff9302 !important;
+		border: none;
+		color: #fff !important;
+		border-radius: 12px;
+		padding-left: 2px;
+		padding-right: 2px;
+		margin-left: 2px;
+		margin-right: 2px;
+		font-size: 13px;
+	}
+	.list {
+		display: block;
+	}
+</style>

+ 46 - 0
pages/shop/taglist.vue

@@ -0,0 +1,46 @@
+<template>
+	<view class="container">
+		<uni-list border class="list">
+			<uni-list-item
+				v-for="(item, index) in taglist"
+				:key="index"
+				:ellipsis="2"
+				:title="item"
+				showArrow
+				clickable
+				@click="listItemBtn(item)">				
+			</uni-list-item>
+		</uni-list>
+		<uni-load-more :status="more" />
+	</view>
+</template>
+
+<script>
+	import request from '../../api/shop.js';
+	import { BASE_URL } from '../../env.js';
+	export default {
+		components: {},
+		onLoad: function (option) {
+			this.district = option.district;
+		},
+		data() {
+			return {
+				district: '',
+				taglist: [],
+			}
+		},
+		async mounted() {
+			const resp = await request.listTagByDistrict({ district: this.district});
+			this.taglist = resp.data;
+		},	
+		methods: {
+			// 列表点击函数
+			listItemBtn(e) {
+				uni.navigateTo({ url: `/pages/shop/shoplist?district=${this.district}&tag=${e}` })
+			},
+		}
+	}
+</script>
+
+<style>
+</style>