一级市场，二级市场分类，筛选，搜索

App.vue

@@ -39,7 +39,7 @@ button::after {
 /**挂载iconfont字体图标*/
 @font-face {
 	font-family: 'iconfont';
-	src: url('https://at.alicdn.com/t/c/font_4191999_e7zpht1k18.ttf?t=1691493310275') format('truetype');
+	src: url('https://at.alicdn.com/t/c/font_4191999_uwys6dyk5iq.ttf?t=1691992251789') format('truetype');
 	/* src: url('~@/static/font/iconfont.ttf') format('truetype'); */
 }
 .icon {

common/style.scss

@@ -356,7 +356,7 @@
 			bottom: 0px;
 			position: absolute;
 			width: 120px;
-			.icon{
+			.icon {
 				padding-right: 4px;
 			}
 		}
@@ -610,6 +610,7 @@
 .sort-list {
 	padding: 0px 0px 10px 0px;
 	color: #424242;
+	overflow: hidden;
 	.sort-item {
 		float: left;
 		cursor: pointer;
@@ -629,6 +630,9 @@
 		padding-top: 5px;
 		color: $font-c;
 		font-size: 14px;
+		.qc {
+			padding-left: 3px;
+		}
 	}
 }
 .goodsList {
@@ -645,6 +649,16 @@
 			margin-bottom: 9px;
 			float: left;
 			width: 80%;
+			font-size: 17px;
+			font-weight: bold;
+		}
+		.goodsType {
+			float: right;
+			color: #a0a2a6;
+			width: 70px;
+			margin-top: -29px;
+			text-align: right;
+			font-size: 13px;
 		}
 		.state {
 			float: right;

pages.json

@@ -301,53 +301,58 @@
 				"enablePullDownRefresh": false
 			}
 
+		}, {
+			"path": "pages/market/one/leader/detail",
+			"style": {
+				"navigationBarTitleText": "订单详情",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/market/one/leader/members",
+			"style": {
+				"navigationBarTitleText": "订单边民",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/market/one/car/car",
+			"style": {
+				"navigationBarTitleText": "叫车服务",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/market/one/merchant/address/address",
+			"style": {
+				"navigationBarTitleText": "选择地址",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/market/one/merchant/order/vehice",
+			"style": {
+				"navigationBarTitleText": "车辆展示界面",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/market/productType",
+			"style": {
+				"navigationBarTitleText": "选择商品分类",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "重置",
+							"fontSize": "14px"
+						}]
+					}
+				}
+			}
+
 		}
-	    ,{
-            "path" : "pages/market/one/leader/detail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "订单详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/market/one/leader/members",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "订单边民",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/market/one/car/car",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "叫车服务",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/market/one/merchant/address/address",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "选择地址",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/market/one/merchant/order/vehice",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "车辆展示界面",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"tabBar": {
 		"color": "#7A7E83",
 		"selectedColor": "#4581fb",

pages/market/one/list.vue

@@ -1,29 +1,29 @@
 <template>
 	<view>
 		<view class="search">
-			<u-search placeholder="搜索商品名称" v-model="param.customerName" bgColor="white" @search="refresh()" :animation="true" actionText="取消" @clear="refresh()"></u-search>
+			<u-search placeholder="搜索商品名称" v-model="param.goodsName" bgColor="white" @search="refresh()" :animation="true" actionText="取消" @clear="refresh()"></u-search>
 			<view class="clear"></view>
 		</view>
 		<view class="goodsList">
 			<view class="sort-list">
 				<view class="sort-item" :class="{ active: item.check }" v-for="(item, index) in sort" :key="index" @click="select(item, index)">
 					<text>{{ item.name }}</text>
-					<text v-if="index > 0 && item.isAsc == 'desc'" class="icon">&#xeb0a;</text>
-					<text v-if="index > 0 && item.isAsc == 'asc'" class="icon">&#xeb0b;</text>
+					<text v-if="index > 0 && item.orderBy == 'desc'" class="icon">&#xeb0a;</text>
+					<text v-if="index > 0 && item.orderBy == 'asc'" class="icon">&#xeb0b;</text>
 				</view>
-				<view class="type" @click="show = true">
-					<text>分类</text>
+				<view class="type" @click="go()">
+					<text>{{ param.goodsType || '分类' }}</text>
 					<text class="icon">&#xe8f2;</text>
 				</view>
-				<view class="clear"></view>
 			</view>
 			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
-				<view class="title">{{item.merchantName}}</view>
+				<view class="title">{{ item.merchantName }}</view>
+				<view class="goodsType omit">{{ item.goodsType }}</view>
 				<image src="../../../static/news.jpg" mode="aspectFill" class="pic"></image>
 				<view class="con">
 					<view class="productName omit">{{ item.goodsName }}</view>
 					<view class="desc omit">
-						<text>{{item.grossWeight}} {{item.goodsUnits}}</text>
+						<text>{{ item.grossWeight }} {{ item.goodsUnits }}</text>
 						<text>{{ item.tradeAreaName }}</text>
 					</view>
 					<view class="price">¥ {{ item.price }}</view>
@@ -43,7 +43,11 @@ export default {
 		return {
 			show: false,
 			user: this.getUser(),
-			sort: [{ name: '综合' }, { name: '日期' }, { name: '价格' }],
+			sort: [
+				{ name: '综合', sortType: 1, orderBy: 'desc', check: false },
+				{ name: '日期', sortType: 15, orderBy: 'desc', check: false },
+				{ name: '价格', sortType: 7, orderBy: 'desc', check: false }
+			],
 			list: [],
 			param: { pageNo: 1, pageSize: 10 },
 			loadMore: true
@@ -51,8 +55,26 @@ export default {
 	},
 	onLoad() {
 		this.getData();
+		//选择商品分类
+		uni.$on('productType', res => {
+			this.param.goodsType = res.name;
+			this.param.current = res.current;
+			this.param.now = res.now;
+			this.refresh();
+		});
 	},
 	methods: {
+		select(item, index) {
+			this.sort.forEach(it => (it.check = false));
+			item.check = true;
+			if (index > 0) {
+				this.orderBy = this.orderBy == 'desc' ? 'asc' : 'desc';
+				item.orderBy = this.orderBy;
+			}
+			this.param.orderBy = item.orderBy;
+			this.param.sortType = item.sortType;
+			this.refresh();
+		},
 		getData() {
 			this.http.request({
 				url: '/level-one-server/app/TbGoodsTransit/getList',
@@ -64,6 +86,10 @@ export default {
 				}
 			});
 		},
+		//选择分类
+		go() {
+			uni.navigateTo({ url: '/pages/market/productType?current=' + this.param.current + '&now=' + this.param.now });
+		},
 		// 添加购物车
 		addCar(goods) {
 			let params = {
@@ -121,4 +147,4 @@ page {
 .search {
 	padding: 12px 12px 0px 12px;
 }
-</style>
+</style>

pages/market/productType.vue

@@ -0,0 +1,103 @@
+<template>
+	<view>
+		<view class="left">
+			<view class="item" :class="{ active: index == current }" v-for="(item, index) in list" :key="index" @click="(current = index), (now = -1)">{{ item.name }}</view>
+		</view>
+		<view class="right">
+			<view class="list" v-if="list.length > 0">
+				<view class="tags" v-for="(child, i) in list[current].children" :key="child.id" @click="select(child, i)">
+					<view class="item" :class="{ active: now == i }">
+						<text class="icon" v-if="now == i">&#xe602;</text>
+						<text class="icon" v-else>&#xe8f2;</text>
+						<text>{{ child.name }}</text>
+					</view>
+				</view>
+				<u-empty v-if="!list[current].children"></u-empty>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			list: [],
+			now: -1,
+			current: 0
+		};
+	},
+	onLoad(e) {
+		if (e.current != 'undefined') {
+			this.now = e.now;
+			this.current = e.current;
+		}
+		this.getData();
+	},
+	methods: {
+		getData() {
+			this.http.request({
+				url: '/level-one-server/app/TbGoodsType/getTree',
+				success: res => {
+					this.list = res.data.data;
+				}
+			});
+		},
+		//选择商品分类
+		select(item, index) {
+			item.current = this.current;
+			item.now = index;
+			uni.$emit('productType', item);
+			uni.navigateBack();
+		}
+	},
+	onNavigationBarButtonTap() {
+		uni.$emit('productType', {});
+		uni.navigateBack();
+	}
+};
+</script>
+
+<style lang="scss">
+.left {
+	position: fixed;
+	top: 40px;
+	height: 100%;
+	width: 35%;
+	overflow-y: auto;
+	z-index: 2;
+	color: $font-c;
+	background-color: #f1f1f1;
+	.item {
+		padding: 10px;
+		font-size: 15px;
+		&.active {
+			color: $main-color;
+			background-color: white;
+		}
+	}
+}
+.right {
+	position: fixed;
+	top: 50px;
+	height: 100%;
+	width: 65%;
+	overflow-y: auto;
+	left: 35%;
+	z-index: 1;
+	.list {
+		padding: 0px 12px 12px 12px;
+		color: $font-c;
+		.item {
+			padding: 8px 2px 8px 2px;
+			&.active {
+				color: $main-color;
+			}
+			.icon {
+				float: right;
+				padding-top: 3px;
+			}
+		}
+	}
+}
+</style>

pages/market/two/list.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="search">
-			<u-search placeholder="搜索商品名称" v-model="param.customerName" bgColor="white" @search="refresh()" :animation="true" actionText="取消" @clear="refresh()"></u-search>
+			<u-search placeholder="搜索商品名称" v-model="param.goodsName" bgColor="white" @search="refresh()" :animation="true" actionText="取消" @clear="refresh()"></u-search>
 			<view class="clear"></view>
 		</view>
 		<view class="goodsList">
@@ -11,11 +11,10 @@
 					<text v-if="index > 0 && item.isAsc == 'desc'" class="icon">&#xeb0a;</text>
 					<text v-if="index > 0 && item.isAsc == 'asc'" class="icon">&#xeb0b;</text>
 				</view>
-				<view class="type" @click="show = true">
-					<text>分类</text>
+				<view class="type" @click="go()">
+					<text>{{ param.goodsType || '分类' }}</text>
 					<text class="icon">&#xe8f2;</text>
 				</view>
-				<view class="clear"></view>
 			</view>
 			<view class="item" v-for="(item, index) in list" :key="index">
 				<view class="title" @click="detail(item)">{{ item.createName }}</view>
@@ -47,8 +46,26 @@ export default {
 	},
 	onLoad(e) {
 		this.getData();
+		//选择商品分类
+		uni.$on('productType', res => {
+			this.param.goodsType = res.name;
+			this.param.current = res.current;
+			this.param.now = res.now;
+			this.refresh();
+		});
 	},
 	methods: {
+		select(item, index) {
+			this.sort.forEach(it => (it.check = false));
+			item.check = true;
+			if (index > 0) {
+				this.orderBy = this.orderBy == 'desc' ? 'asc' : 'desc';
+				item.orderBy = this.orderBy;
+			}
+			this.param.orderBy = item.orderBy;
+			this.param.sortType = item.sortType;
+			this.refresh();
+		},
 		getData() {
 			this.http.request({
 				url: '/level-two-server/app/TbGoodsDemand/getList',
@@ -60,6 +77,10 @@ export default {
 				}
 			});
 		},
+		//选择分类
+		go() {
+			uni.navigateTo({ url: '/pages/market/productType?current=' + this.param.current + '&now=' + this.param.now });
+		},
 		detail(item) {
 			uni.navigateTo({ url: '/pages/market/two/detail?id=' + item.id });
 		},