From 8d5741534c5c3812272751ac3841aa65e601ad2e Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Wed, 15 Oct 2025 15:14:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(hiList):=20=20=E6=B3=A8=E5=86=8C=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=88=97=E8=A1=A8=E5=A6=82=E6=9E=9C=E4=B8=BA=E5=8C=97?=
 =?UTF-8?q?=E5=A4=A7=E7=94=84=E9=80=89=E5=B1=95=E7=A4=BA=E4=B8=80=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/special-area.js     |   5 +-
 pages/shareArea/hiList.vue | 454 ++++++++++++++++++++++++++++++++++++-
 pages/specialArea/list.vue |   6 -
 3 files changed, 450 insertions(+), 15 deletions(-)

diff --git a/config/special-area.js b/config/special-area.js
index 3a1a5bc..8d41a05 100644
--- a/config/special-area.js
+++ b/config/special-area.js
@@ -1,5 +1,6 @@
 const http = uni.$u.http
 
 //会员专区商品列表
-export const getAreaGoods = params =>
-  http.post('/sale/api/retail-wares/wares-list', params)
+export const getAreaGoods = params => {
+  return http.post('/sale/api/retail-wares/wares-list', params)
+}
diff --git a/pages/shareArea/hiList.vue b/pages/shareArea/hiList.vue
index 67bde58..ed3cf7e 100644
--- a/pages/shareArea/hiList.vue
+++ b/pages/shareArea/hiList.vue
@@ -1,6 +1,5 @@
 <template>
   <view class="contain">
-    <!-- Tab选项卡 -->
     <view class="tab-container">
       <view class="tab-wrapper">
         <view
@@ -16,7 +15,132 @@
       </view>
     </view>
 
-    <view class="goods-container">
+    <!-- 分类和搜索区域 - 仅在北大甄选时显示 -->
+    <view class="category-container" v-if="activeTab === 43">
+      <view class="category-section">
+        <view class="category-left">
+          <view
+            v-for="item in oneList"
+            :class="[
+              'category-item',
+              oneId == item.pkId ? 'category-active' : '',
+            ]"
+            @click="selectOneCategory(item)"
+            :key="item.pkId"
+          >
+            {{ item.classifyName }}
+          </view>
+        </view>
+        <view class="category-right">
+          <!-- 二级分类 -->
+          <scroll-view
+            class="category-scroll"
+            scroll-x="true"
+            :show-scrollbar="false"
+            v-if="twoList.length > 0"
+          >
+            <view class="category-tabs">
+              <view
+                v-for="(item, index) in twoList"
+                :key="index"
+                @click="selectTwoCategory(item)"
+                :class="[twoId == item.pkId ? 'tab-active' : 'tab-item']"
+              >
+                {{ item.classifyName }}
+              </view>
+            </view>
+          </scroll-view>
+
+          <!-- 搜索框 -->
+          <view class="search-container">
+            <view class="search-input-wrapper">
+              <u--input
+                class="search-input"
+                placeholder="请输入商品名称"
+                placeholderStyle="font-size:14px;"
+                prefixIcon="search"
+                shape="circle"
+                v-model="waresName"
+                border="none"
+                prefixIconStyle="font-size: 22px;color: #909399"
+                @confirm="searchGoods"
+              />
+            </view>
+          </view>
+
+          <!-- 北大甄选的商品列表 -->
+          <view class="goods-list-container">
+            <scroll-view
+              class="goodList"
+              scroll-y="true"
+              enhanced
+              :show-scrollbar="false"
+            >
+              <view
+                v-for="item in goodList"
+                :key="item.waresCode"
+                class="goodList_i"
+              >
+                <img :src="item.cover1" class="cover" alt="" />
+                <view class="goodList_ir">
+                  <view class="tit1">
+                    {{ item.waresName }}
+                  </view>
+
+                  <view class="goodList_ib">
+                    <view class="price-container">
+                      <!-- <text class="currency">￥</text> -->
+                      <text class="price">{{
+                        formatCurrency(item.waresPrice)
+                      }}</text>
+                      <text v-if="item.isSale === 1" class="sale-status"
+                        >已售罄</text
+                      >
+                    </view>
+                    <!-- <img @click.stop="addCar(item)"
+                             src="@/static/images/cart.png"
+                             alt=""> -->
+                  </view>
+
+                  <!-- 数量控制区域 -->
+                  <view class="quantity-section" v-if="item.isSale !== 1">
+                    <view class="quantity-control">
+                      <view
+                        class="quantity-btn minus"
+                        :class="{ disabled: item.quantity <= 1 }"
+                        @click.stop="updateQuantity(item, -1)"
+                      >
+                        <text class="quantity-icon">−</text>
+                      </view>
+                      <view class="quantity-display">
+                        <text class="quantity-text">{{
+                          item.quantity || 1
+                        }}</text>
+                      </view>
+                      <view
+                        class="quantity-btn plus"
+                        @click.stop="updateQuantity(item, 1)"
+                      >
+                        <text class="quantity-icon">+</text>
+                      </view>
+                    </view>
+                    <view class="toBuy" @click.stop="goBuy(item)">购买</view>
+                  </view>
+
+                  <!-- 禁售状态 -->
+                  <view class="sold-out-section" v-if="item.isSale === 1">
+                    <view class="sold-out-btn">暂时缺货</view>
+                  </view>
+                </view>
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 精品专区的商品容器 -->
+    <view class="goods-container" v-if="activeTab !== 43">
       <scroll-view
         class="goodList"
         scroll-y="true"
@@ -70,7 +194,7 @@
             </view>
           </view>
         </view>
-        <view class="list-bottom">
+        <view class="list-bottom" v-if="activeTab !== 43">
           <text class="bottom-text">— 已显示全部商品 —</text>
         </view>
       </scroll-view>
@@ -80,6 +204,8 @@
 
 <script>
 import * as api from '@/config/login.js'
+import * as goodsApi from '@/config/goods.js'
+import { getAreaGoods } from '@/config/special-area.js'
 import { setToken } from '@/config/auth.js'
 import { formatCurrency } from '@/util/index.js'
 
@@ -100,10 +226,21 @@ export default {
           value: 41,
         },
       ],
+      // 分类相关数据
+      oneList: [], // 一级分类列表
+      oneId: '', // 当前选中的一级分类ID
+      twoList: [], // 二级分类列表
+      twoId: '', // 当前选中的二级分类ID
+      waresName: '', // 搜索关键词
+      userInfo: {}, // 用户信息
+      pkCountry: 1, // 国家ID
+      categoryLoaded: false, // 分类是否已加载
     }
   },
   onLoad(options) {
     this.pkParent = options.pkParent
+    this.userInfo = uni.getStorageSync('User') || {}
+    this.pkCountry = this.userInfo.pkCountry || 1
     this.getToken()
   },
   methods: {
@@ -116,7 +253,16 @@ export default {
         .then(res => {
           setToken(res.data.access_token, res.data.expires_in)
           uni.setStorageSync('regiest-login', '1')
-          this.getList()
+
+          // 根据当前tab决定加载方式
+          if (this.activeTab === 43) {
+            // 北大甄选 - 需要分类
+            this.getClassIfy()
+          } else {
+            // 精品专区 - 直接获取商品列表
+            this.getList()
+          }
+
           this.getCode()
         })
     },
@@ -144,7 +290,18 @@ export default {
       if (this.activeTab !== value) {
         this.activeTab = value
         this.goodList = [] // 清空当前列表
-        this.getList() // 重新获取数据
+
+        // 清空搜索和分类条件
+        this.clearSearchAndCategory()
+
+        // 根据不同tab加载不同数据
+        if (value === 43) {
+          // 北大甄选 - 需要分类
+          this.getClassIfy()
+        } else {
+          // 精品专区 - 直接获取商品列表
+          this.getList()
+        }
       }
     },
     updateQuantity(item, change) {
@@ -164,6 +321,101 @@ export default {
         url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
       })
     },
+    // 获取分类列表（一级）
+    getClassIfy() {
+      goodsApi
+        .classifyList({
+          pkCountry: this.pkCountry,
+          specialArea: this.activeTab,
+          hierarchy: 0,
+        })
+        .then(res => {
+          this.oneList = res.data || []
+          this.categoryLoaded = true
+          if (this.oneList.length > 0) {
+            this.oneId = this.oneList[0].pkId
+            this.getClassIfyTwo(this.oneList[0].pkId)
+            this.getAllGoodsWithCategory(this.oneList[0].pkId)
+          }
+        })
+        .catch(err => {
+          console.error('获取分类失败:', err)
+        })
+    },
+    // 获取分类二级
+    getClassIfyTwo(pkId) {
+      goodsApi
+        .classifyList({
+          specialArea: this.activeTab,
+          pkParent: pkId,
+          hierarchy: 1,
+          pkCountry: this.pkCountry,
+        })
+        .then(res => {
+          const twoListData = res.data || []
+          twoListData.unshift({
+            classifyName: '全部',
+            pkId: pkId,
+          })
+          this.twoList = twoListData
+          this.twoId = pkId
+        })
+        .catch(err => {
+          console.error('获取二级分类失败:', err)
+        })
+    },
+    // 根据分类获取商品（带搜索功能）
+    getAllGoodsWithCategory(id) {
+      const params = {
+        pkCountry: this.pkCountry,
+        specialArea: this.activeTab,
+        pkAreaClassify: id || this.oneId,
+        shareMemberCode: this.pkParent,
+        waresName: '',
+      }
+
+      // 如果有搜索关键词，添加到参数中
+      if (this.waresName.trim()) {
+        params.waresName = this.waresName.trim()
+      }
+      api
+        .queryWares(params)
+        .then(res => {
+          // 为每个商品初始化quantity字段
+          this.goodList = (res.data || []).map(item => ({
+            ...item,
+            quantity: item.quantity || 1,
+          }))
+        })
+        .catch(err => {
+          console.log(err, '...err')
+          console.error('获取商品列表失败:', err)
+          this.goodList = []
+        })
+    },
+    // 选择一级分类
+    selectOneCategory(item) {
+      this.oneId = item.pkId
+      this.getAllGoodsWithCategory(item.pkId)
+      this.getClassIfyTwo(item.pkId)
+    },
+    // 选择二级分类
+    selectTwoCategory(item) {
+      this.twoId = item.pkId
+      this.getAllGoodsWithCategory(item.pkId)
+    },
+    // 搜索商品
+    searchGoods() {
+      this.getAllGoodsWithCategory()
+    },
+    // 清空搜索和分类
+    clearSearchAndCategory() {
+      this.waresName = ''
+      this.oneId = ''
+      this.twoId = ''
+      this.oneList = []
+      this.twoList = []
+    },
   },
 }
 </script>
@@ -172,10 +424,197 @@ export default {
 .contain {
   background: #f8fafc;
   min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
+// 分类和搜索区域样式
+.category-container {
+  background: #ffffff;
+  border-bottom: 1rpx solid #e2e8f0;
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+
+  .category-section {
+    flex: 1;
+    display: flex;
+    height: 0rpx;
+
+    .category-left {
+      width: 200rpx;
+      background: #f8fafc;
+      border-right: 1rpx solid #e2e8f0;
+      overflow-y: auto;
+      flex-shrink: 0;
+
+      .category-item {
+        padding: 24rpx 20rpx;
+        font-size: 26rpx;
+        color: #64748b;
+        text-align: center;
+        border-bottom: 1rpx solid #f1f5f9;
+        transition: all 0.2s ease;
+
+        &.category-active {
+          background: #005bac;
+          color: #ffffff;
+          font-weight: 600;
+        }
+
+        &:active {
+          background: rgba(0, 91, 172, 0.1);
+        }
+      }
+    }
+
+    .category-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: #fff;
+      .category-scroll {
+        padding: 20rpx 24rpx;
+        border-bottom: 1rpx solid #f1f5f9;
+
+        .category-tabs {
+          display: flex;
+          white-space: nowrap;
+
+          .tab-item,
+          .tab-active {
+            padding: 12rpx 24rpx;
+            margin-right: 20rpx;
+            border-radius: 20rpx;
+            font-size: 26rpx;
+            white-space: nowrap;
+            transition: all 0.2s ease;
+          }
+
+          .tab-item {
+            background: #f8fafc;
+            color: #64748b;
+            border: 1rpx solid #e2e8f0;
+          }
+
+          .tab-active {
+            background: #005bac;
+            color: #ffffff;
+            font-weight: 600;
+          }
+        }
+      }
+
+      .search-container {
+        padding: 20rpx 24rpx;
+        border-bottom: 1rpx solid #f1f5f9;
+
+        .search-input-wrapper {
+          display: flex;
+          align-items: center;
+          background: #f8fafc;
+          border-radius: 24rpx;
+          border: 1rpx solid #e2e8f0;
+          padding: 0 20rpx;
+
+          .search-input {
+            flex: 1;
+            height: 72rpx;
+            font-size: 28rpx;
+            color: #1f2937;
+
+            &::placeholder {
+              color: #9ca3af;
+            }
+          }
+
+          .search-icon {
+            width: 60rpx;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #005bac;
+            border-radius: 50%;
+            margin-left: 12rpx;
+
+            .search-text {
+              color: #ffffff;
+              font-size: 24rpx;
+            }
+
+            &:active {
+              background: #004494;
+              transform: scale(0.95);
+            }
+          }
+        }
+      }
+
+      // 北大甄选的商品列表容器
+      .goods-list-container {
+        flex: 1;
+        overflow: hidden;
+        background: #fff;
+        .goodList {
+          padding: 0;
+          .goodList_i {
+            padding: 8rpx;
+            img {
+              height: 140rpx;
+              width: 140rpx;
+              border-radius: 12rpx;
+            }
+            .goodList_ir {
+              margin-left: 8rpx;
+              .tit1 {
+                font-size: 26rpx;
+                margin-bottom: 8rpx;
+              }
+              .goodList_ib {
+                .price-container {
+                  .price {
+                    font-size: 28rpx;
+                    color: #f82c1a;
+                  }
+                }
+              }
+              .quantity-section {
+                .quantity-control {
+                  .quantity-btn {
+                    width: 40rpx;
+                    height: 40rpx;
+                    .quantity-icon {
+                      font-size: 24rpx;
+                    }
+                  }
+                  .quantity-display {
+                    height: 40rpx;
+                  }
+                }
+                .toBuy {
+                  font-size: 24rpx;
+                  color: #ffffff;
+                  padding: 8rpx 16rpx;
+                  border-radius: 12rpx;
+                }
+                .sold-out-btn {
+                  font-size: 24rpx;
+                  color: #ffffff;
+                  padding: 8rpx 16rpx;
+                  border-radius: 12rpx;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // Tab选项卡样式 - 简约大气设计
 .tab-container {
   // background: #ffffff;
@@ -258,11 +697,12 @@ export default {
 
 // 商品容器区域
 .goods-container {
-  // flex: 1;
+  flex: 1;
   background: #f8fafc;
   padding: 24rpx 24rpx 0;
   position: relative;
   z-index: 3;
+  overflow: hidden;
 
   .section-title {
     text-align: center;
@@ -287,7 +727,7 @@ export default {
 
 // 商品列表滚动区域
 .goodList {
-  // height: calc(100vh - 400rpx);
+  height: 100%;
   padding: 0 8rpx;
 
   .goodList_i {
diff --git a/pages/specialArea/list.vue b/pages/specialArea/list.vue
index 98c3844..2f3fba5 100644
--- a/pages/specialArea/list.vue
+++ b/pages/specialArea/list.vue
@@ -1,9 +1,3 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-11-21 15:11:22
--->
 <template>
   <view class="content">
     <backIcon :diff="diff"></backIcon>