From 796d72727efee399d575b8529de8b7df5f4062eb Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Fri, 24 Nov 2023 16:56:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/requesta.js              |   4 ++
 pages/product/list/index.vue | 110 ++++++++++++++++++++++++++++++++++-
 2 files changed, 111 insertions(+), 3 deletions(-)

diff --git a/api/requesta.js b/api/requesta.js
index a2d0070..50708da 100644
--- a/api/requesta.js
+++ b/api/requesta.js
@@ -23,3 +23,7 @@ export function getCartList(data) {
 export function getCartCounts(data) {
   return request.get("user/cart/count", data);
 }
+
+export function getCategoryListLevel(data) {
+	return request.get("category/list_level", data);
+}
\ No newline at end of file
diff --git a/pages/product/list/index.vue b/pages/product/list/index.vue
index 70b1e18..bbd9228 100644
--- a/pages/product/list/index.vue
+++ b/pages/product/list/index.vue
@@ -9,6 +9,17 @@
 						<block>
 							<swiper-item :class="{ active: 0 == swiperCur }">
 								<view class="slide-navigator">
+                  <picker class="item"
+                    mode="multiSelector"
+                  	:range="[menuList,menuCList]"
+                    :range-key="'cate_name'"
+                    @columnchange="columnchange"
+                    @change="changeMenu"
+                    @cancel="cancelMenu"
+                  >
+                  	<image mode='widthFix' class="image" src="@/static/images/daoru.png"></image>
+                  	<text class="text">分类筛选</text>
+                  </picker>
 									<!-- <view class="item" hover-class='none' @click="jumpAddGoods">
 										<image mode='widthFix' class="image" src="../static/images/product_add.png">
 										</image>
@@ -74,6 +85,16 @@
 			</view>
 			<view class="wrapper">
 				<view class='product_list'>
+          <!-- <view class="menu_cls">
+          	<u-scroll-list indicatorActiveColor='#FF6D20' :indicator="true">
+          		<view class="menu_li" :class="{'menu_li_on': item.store_category_id==store_category_id}" @click="changeMerchant(item.store_category_id)" v-for="item,index in menuList"
+          			:key="index">
+          			<u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx" shape="circle"
+          				></u--image>
+          			<view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}</view>
+          		</view>
+          	</u-scroll-list>
+          </view> -->
 					<view v-for="(item,index) in productList" :key="index" style="position: relative;width: 100%;">
 						<view class='item' @click="yinc">
 							<view class='image'>
@@ -217,6 +238,9 @@
   import {
     getPreviewProDetail
   } from "@/api/store.js";
+  import {
+    getCategoryListLevel
+  } from '@/api/requesta.js';
 	export default {
 		name: 'productList',
 		components: {
@@ -230,6 +254,9 @@
 					page: 1,
 					limit: 20
 				},
+				menuList: [], // 分类菜单
+        menuCList: [], //二级分类
+        cate_id: '', // 已选id
 				loaded: false,
 				loading: false,
 				mer_id: '',
@@ -263,7 +290,12 @@
 		onLoad(options) {
 			// this.mer_id = options.mer_id;
 			this.getUserInfo()
-			
+			getCategoryListLevel({
+        type: 2
+      }).then(res => {
+				this.menuList = res.data;
+        this.menuCList = res.data[0].children;
+      })
 		},
 		onPullDownRefresh() {
 			this.where.page = 1
@@ -557,20 +589,24 @@
 				}
 			},
 			getList: function(mer_id, ispage) {
+        console.log('调用');
 				var that = this;
 				if (that.loading || that.loaded) return;
 				that.loading = true;
 				if (ispage) {
 					this.where.page = 1
-					that.productList = []
+					this.$set(this, 'productList', []);
 				}
+        if(this.cate_id.store_category_id){
+          that.where.cate_id = this.cate_id.store_category_id;
+          // mer_cate_id 为商户自己的分类参数
+        }
 				productLstApi(mer_id, that.where).then(
 					res => {
 						that.loading = false;
 						that.loaded = res.data.list.length < that.where.limit;
 						that.productList.push.apply(that.productList, res.data.list);
 						that.where.page = that.where.page + 1;
-
 					},
 					error => {
 						that.$util.Tips({
@@ -689,6 +725,26 @@
 			more(index) {
 				this.current = index
 			},
+      // 选择地址
+      columnchange(e){
+        if(e.detail.column==0){
+          this.menuCList = this.menuList[e.detail.value].children;
+        }
+      },
+      changeMenu(e){
+        let cate_id = this.menuList[e.detail.value[0]].children[e.detail.value[1]]||this.menuList[e.detail.value[0]]||'';
+        this.$set(this, 'cate_id', JSON.parse(JSON.stringify(cate_id)));
+        this.loading = false;
+        this.loaded = false;
+        this.getList(this.mer_id, true)
+      },
+      cancelMenu(){
+        this.loading = false;
+        this.loaded = false;
+        this.where.cate_id = null;
+        this.cate_id.store_category_id = null;
+        this.getList(this.mer_id, true)
+      }
 		},
 
 	}
@@ -1065,4 +1121,52 @@
 			}
 		}
 	}
+  .menu_cls {
+  	background-color: white;
+  	// height: 199.77rpx;
+  	border-radius: 10rpx;
+  	padding: 20rpx 20rpx 0 20rpx;
+    margin-top: 20rpx;
+    font-size: 26.29rpx;
+    height: 220rpx;
+    width: 100%;
+  
+  	.menu_li {
+  		// margin-right: 20rpx;
+  		// background-color: red;
+  		// width: 50vw;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 140rpx;
+      height: auto;
+  		// width: 120rpx;
+  		// display: inline-block;
+      .image{
+        border: 5rpx solid #fff;
+      }
+      .li_text{
+        flex: 1;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+        padding: 1rpx 10rpx 4rpx 10rpx;
+      }
+  	}
+    .menu_li_on{
+      .image{
+        border: 5rpx solid #ff6d20;
+        border-radius: 50%;
+      }
+      .li_text{
+        background-color: #ff6d20;
+        border-radius: 2em;
+        color: #fff;
+        padding: 1rpx 10rpx 4rpx 10rpx;
+      }
+    }
+  
+  }
 </style>
\ No newline at end of file