feat(specaialAreaList): 商品列表样式调整

pages/specialArea/list.vue

@@ -4,77 +4,14 @@
     <view class="index_header">
       <view>{{ titLabel }}</view>
     </view>
-    <view class="shareImg" v-if="specialArea == 7" @click="goShare">
+    <!-- 分类抽屉按钮 -->
-      <u-icon name="share-square" size="24" color="#005BAC"> </u-icon>
+    <view class="category-drawer-btn" @click="openCategoryDrawer">
+      <u-icon name="list" size="20" color="#005BAC"></u-icon>
+      <text>分类</text>
     </view>
 
-    <!-- <u-scroll-list
-      :indicator="false"
-      v-if="itemChildren.length > 1"
-      class="tabList_a"
-    >
-      <view class="tab">
-        <view
-          v-for="(item, index) in itemChildren"
-          :key="index"
-          @click="setSpecial(item)"
-          v-show="item.isShow"
-          :class="[specialArea == item.value ? 'actTab' : 'tab_i']"
-        >
-          <view>{{ item.label }}</view>
-        </view>
-      </view>
-    </u-scroll-list> -->
     <view class="index_btm">
-      <!-- 新的可收起展开的一二级菜单 -->
+      <view class="index_r full-width">
-      <view class="menu_container">
-        <view class="collapsible_menu">
-          <view v-for="item in oneList" :key="item.pkId" class="menu_group">
-            <!-- 一级分类 -->
-            <view
-              class="first_level_item"
-              :class="{ active: oneId == item.pkId }"
-              @click="toggleFirstLevel(item)"
-            >
-              <view class="menu_text">{{
-                truncateText(item.classifyName, 10)
-              }}</view>
-              <view
-                v-if="item.children && item.children.length > 0"
-                class="expand_icon"
-                :class="{ expanded: expandedMenus.includes(item.pkId) }"
-              >
-                <u-icon
-                  name="arrow-right"
-                  size="14"
-                  :color="oneId == item.pkId ? '#fff' : '#666'"
-                ></u-icon>
-              </view>
-            </view>
-            <view
-              class="second_level_container"
-              :class="{ expanded: expandedMenus.includes(item.pkId) }"
-              v-if="
-                item.pkId === oneId && item.children && item.children.length > 0
-              "
-            >
-              <view
-                v-for="subItem in item.children"
-                :key="subItem.pkId"
-                class="second_level_item"
-                :class="{ active: twoId == subItem.pkId }"
-                @click="selectSecondLevel(subItem)"
-              >
-                <view class="sub_menu_text">{{
-                  truncateText(subItem.classifyName, 10)
-                }}</view>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <view class="index_r">
         <view class="search">
           <u--input
             placeholder="请输入商品名称"
@@ -88,11 +25,41 @@
           ></u--input>
         </view>
         <view class="goodList">
+          <!-- 空状态提示 -->
+          <view v-if="goodList.length === 0" class="empty-state">
+            <view class="empty-icon">
+              <u-icon :name="getEmptyIcon()" size="80" color="#d0d0d0"></u-icon>
+            </view>
+            <view class="empty-title">{{ getEmptyTitle() }}</view>
+            <view class="empty-desc">{{ getEmptyDesc() }}</view>
+            <view class="empty-tips">
+              <text v-for="(tip, index) in getEmptyTips()" :key="index">
+                • {{ tip }}
+              </text>
+            </view>
+            <view class="empty-actions">
+              <view class="empty-action primary" @click="openCategoryDrawer">
+                <u-icon name="list" size="16" color="#ffffff"></u-icon>
+                <text>浏览分类</text>
+              </view>
+              <view
+                class="empty-action secondary"
+                @click="clearSearch"
+                v-if="waresName"
+              >
+                <u-icon name="close-circle" size="16" color="#005bac"></u-icon>
+                <text>清除搜索</text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 商品列表 -->
           <view
             v-for="item in goodList"
             :key="item.waresCode"
             class="goodList_i"
             @tap="goDetails(item)"
+            v-else
           >
             <view style="display: flex; flex: 1">
               <view
@@ -247,6 +214,75 @@
       :carLength="shopCarLength"
       :specialArea="specialArea"
     ></cartBall>
+
+    <!-- 分类抽屉遮罩 -->
+    <view
+      class="drawer-mask"
+      :class="{ show: showCategoryDrawer }"
+      @click="closeCategoryDrawer"
+      v-if="showCategoryDrawer"
+    ></view>
+
+    <!-- 分类抽屉 -->
+    <view class="category-drawer" :class="{ show: showCategoryDrawer }">
+      <view class="drawer-header">
+        <text class="drawer-title">商品分类</text>
+        <u-icon
+          name="close"
+          size="20"
+          color="#666"
+          @click="closeCategoryDrawer"
+        ></u-icon>
+      </view>
+
+      <view class="drawer-content">
+        <view
+          v-for="item in oneList"
+          :key="item.pkId"
+          class="drawer-menu-group"
+        >
+          <!-- 一级分类 -->
+          <view
+            class="drawer-first-level"
+            :class="{ active: oneId == item.pkId }"
+          >
+            <view class="drawer-menu-text" @click="selectFirstLevel(item)">{{
+              truncateText(item.classifyName, 12)
+            }}</view>
+            <!-- <view
+              v-if="item.children && item.children.length > 0"
+              class="drawer-expand-icon"
+              :class="{ expanded: expandedMenus.includes(item.pkId) }"
+              @click="toggleExpand(item.pkId)"
+            >
+              <u-icon
+                name="arrow-right"
+                size="16"
+                :color="oneId == item.pkId ? '#fff' : '#666'"
+              ></u-icon>
+            </view> -->
+          </view>
+
+          <view
+            class="drawer-second-level-container"
+            :class="{ expanded: expandedMenus.includes(item.pkId) }"
+            v-if="item.children && item.children.length > 0"
+          >
+            <view
+              v-for="subItem in item.children"
+              :key="subItem.pkId"
+              class="drawer-second-level"
+              :class="{ active: twoId == subItem.pkId }"
+              @click="selectSecondLevel(subItem)"
+            >
+              <view class="drawer-sub-menu-text">{{
+                truncateText(subItem.classifyName, 12)
+              }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -301,6 +337,7 @@ export default {
       isCountry: false,
       waresName: '',
       expandedMenus: [], // 存储展开的一级菜单ID
+      showCategoryDrawer: false, // 控制分类抽屉显示
     }
   },
   onLoad(options) {
@@ -370,6 +407,8 @@ export default {
   },
   onShow() {
     this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
+    // 确保抽屉是关闭的
+    this.showCategoryDrawer = false
     let that = this
     uni.$on('returnData', function (data) {
       that.specialArea = data.value
@@ -413,7 +452,16 @@ export default {
                 ...item,
               }
             })
-            this.toggleFirstLevel(this.oneList[0])
+
+            // 默认全部展开
+            this.expandedMenus = this.oneList.map(item => item.pkId)
+
+            // 选择第一个分类
+            if (this.oneList[0]) {
+              this.oneId = this.oneList[0].pkId
+              this.twoId = this.oneList[0].pkId
+              this.getAllGoods(this.oneList[0].pkId)
+            }
           }
         })
     },
@@ -422,26 +470,94 @@ export default {
       if (text.length <= maxLength) return text
       return text.substring(0, maxLength) + '...'
     },
-    toggleFirstLevel(item) {
+    // 选择一级分类（不影响展开状态）
-      const index = this.expandedMenus.indexOf(item.pkId)
+    selectFirstLevel(item) {
-      this.expandedMenus = []
-
-      if (index === -1) {
-        this.expandedMenus.push(item.pkId)
-      }
-
-      if (item.pkId === this.oneId) {
-        return
-      }
       this.oneId = item.pkId
       this.twoId = item.pkId
       this.getAllGoods(item.pkId)
-      // this.getClassIfyTwo(item.pkId)
+    },
+    // 切换展开状态（不影响选择状态）
+    toggleExpand(pkId) {
+      const index = this.expandedMenus.indexOf(pkId)
+      if (index === -1) {
+        this.expandedMenus.push(pkId)
+      } else {
+        this.expandedMenus.splice(index, 1)
+      }
+    },
+    // 保留原方法以兼容其他地方的调用
+    toggleFirstLevel(item) {
+      this.selectFirstLevel(item)
     },
     // 选择二级分类
     selectSecondLevel(item) {
       this.twoId = item.pkId
       this.getAllGoods1(item.pkId)
+      // 不自动关闭抽屉，让用户手动关闭
+    },
+    // 打开分类抽屉
+    openCategoryDrawer() {
+      this.showCategoryDrawer = true
+    },
+    // 关闭分类抽屉
+    closeCategoryDrawer() {
+      this.showCategoryDrawer = false
+    },
+    // 获取空状态图标
+    getEmptyIcon() {
+      if (this.waresName) {
+        return 'search'
+      }
+      return 'shopping-cart'
+    },
+    // 获取空状态标题
+    getEmptyTitle() {
+      if (this.waresName) {
+        return '未找到相关商品'
+      }
+      return '暂无商品'
+    },
+    // 获取空状态描述
+    getEmptyDesc() {
+      if (this.waresName) {
+        return `没有找到包含"${this.waresName}"的商品`
+      }
+
+      // 如果二级分类ID不等于一级分类ID，说明选择了具体的二级分类
+      if (this.twoId !== this.oneId) {
+        const currentCategory = this.oneList.find(
+          item => item.pkId === this.oneId
+        )
+        if (currentCategory && currentCategory.children) {
+          const subCategory = currentCategory.children.find(
+            sub => sub.pkId === this.twoId
+          )
+          if (subCategory) {
+            return `"${subCategory.classifyName}"分类下还没有商品哦`
+          }
+        }
+      }
+
+      // 显示一级分类名称
+      const currentCategory = this.oneList.find(
+        item => item.pkId === this.oneId
+      )
+      if (currentCategory) {
+        return `"${currentCategory.classifyName}"分类下还没有商品哦`
+      }
+      return '当前分类下还没有商品哦'
+    },
+    // 获取空状态提示
+    getEmptyTips() {
+      if (this.waresName) {
+        return ['检查搜索词是否正确', '浏览其他分类商品']
+      }
+      return ['试试其他分类', '商品正在陆续上架中']
+    },
+    // 清除搜索
+    clearSearch() {
+      this.waresName = ''
+      this.getAllGoods1()
     },
     changeCountry() {
       this.isCountry = true
@@ -537,10 +653,8 @@ export default {
           this.oneList = res.data
           this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
 
-          // 默认展开第一个菜单
+          // 默认全部展开
-          if (this.oneList[0]) {
+          this.expandedMenus = this.oneList.map(item => item.pkId)
-            this.expandedMenus = [this.oneList[0].pkId]
-          }
 
           this.getClassIfyTwo(this.oneList[0].pkId)
           this.getAllGoods(this.oneList[0].pkId)
@@ -681,152 +795,223 @@ export default {
   margin-bottom: 10rpx;
 }
 
+/* 分类抽屉按钮 */
+.category-drawer-btn {
+  position: fixed;
+  top: 10rpx;
+  right: 20rpx;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  padding: 16rpx 20rpx;
+
+  font-size: 24rpx;
+  color: #005bac;
+  font-weight: 500;
+
+  text {
+    margin-left: 8rpx;
+  }
+
+  &:active {
+    transform: scale(0.95);
+    background: rgba(240, 247, 255, 0.95);
+  }
+}
+
 .index_btm {
   flex: 1;
   display: flex;
 
-  .menu_container {
+  .index_r {
-    width: 200rpx;
+    flex: 1;
-    background: #f8f9fa;
+    background: #fff;
-    border-right: 1px solid #e9ecef;
+    display: flex;
+    flex-direction: column;
 
-    .collapsible_menu {
+    &.full-width {
-      height: 86vh;
+      margin-left: 0;
-      overflow-y: auto;
+    }
-      padding: 10rpx 0;
+  }
+}
 
-      .menu_group {
+/* 分类抽屉遮罩 */
-        margin-bottom: 4rpx;
+.drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 
-        .first_level_item {
+  &.show {
-          display: flex;
+    opacity: 1;
-          align-items: center;
+  }
-          justify-content: space-between;
+}
-          padding: 16rpx 12rpx;
+
-          margin: 0 8rpx;
+/* 分类抽屉样式 */
-          background: #ffffff;
+.category-drawer {
-          border-radius: 8rpx;
+  position: fixed;
-          font-size: 20rpx;
+  top: 0;
-          font-weight: 500;
+  left: 0;
-          color: #333333;
+  width: 600rpx;
-          box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
+  height: 100vh;
-          transition: all 0.3s ease;
+  background: #f8f9fa;
-          border: 1rpx solid transparent;
+  display: flex;
+  flex-direction: column;
+  z-index: 1001;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40rpx 30rpx 30rpx;
+    background: #ffffff;
+    border-bottom: 1px solid #e9ecef;
+
+    .drawer-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+
+  .drawer-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20rpx 0;
+
+    /* 抽屉滚动条 */
+    &::-webkit-scrollbar {
+      width: 4rpx;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 2rpx;
+    }
+
+    .drawer-menu-group {
+      margin-bottom: 8rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      margin: 0 20rpx 12rpx;
+      overflow: hidden;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+
+      .drawer-first-level {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #333333;
+        transition: all 0.3s ease;
+        position: relative;
+
+        &.active {
+          background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+          color: #ffffff;
+
+          .drawer-expand-icon {
+            .u-icon {
+              color: #ffffff !important;
+            }
+          }
+        }
+
+        .drawer-menu-text {
+          flex: 1;
+          font-size: 30rpx;
+          line-height: 1.3;
+          padding: 32rpx 24rpx;
+          cursor: pointer;
 
           &:active {
-            transform: scale(0.98);
+            background: rgba(0, 0, 0, 0.05);
-            background: #f0f7ff;
+          }
+        }
+
+        .drawer-expand-icon {
+          transition: transform 0.3s ease;
+          padding: 32rpx 24rpx 32rpx 8rpx;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:active {
+            background: rgba(0, 0, 0, 0.05);
+          }
+
+          &.expanded {
+            transform: rotate(90deg);
+          }
+        }
+      }
+
+      .drawer-second-level-container {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s ease;
+        background: #f8f9fa;
+
+        &.expanded {
+          max-height: 1000rpx;
+        }
+
+        .drawer-second-level {
+          padding: 24rpx 48rpx;
+          font-size: 28rpx;
+          color: #666666;
+          border-top: 1px solid #e9ecef;
+          transition: all 0.2s ease;
+          position: relative;
+
+          &:active {
+            background: #e9ecef;
           }
 
           &.active {
             background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
-            color: #ffffff;
+            color: #fff;
-            border-color: #005bac;
+            font-weight: 500;
-            box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3);
 
-            .expand_icon {
+            &::before {
-              .u-icon {
+              content: '';
-                color: #ffffff !important;
+              position: absolute;
-              }
+              left: 24rpx;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 8rpx;
+              height: 8rpx;
+              background: #005bac;
+              border-radius: 50%;
             }
           }
 
-          .menu_text {
+          .drawer-sub-menu-text {
-            flex: 1;
+            font-size: 28rpx;
-            font-size: 24rpx;
             line-height: 1.3;
-          }
+            margin-left: 20rpx;
-
-          .expand_icon {
-            margin-left: 8rpx;
-            transition: transform 0.3s ease;
-
-            &.expanded {
-              transform: rotate(90deg);
-            }
-          }
-        }
-
-        .second_level_container {
-          max-height: 0;
-          overflow: hidden;
-          transition: max-height 0.3s ease;
-          margin: 0 8rpx;
-
-          &.expanded {
-            max-height: 1000rpx;
-          }
-
-          .second_level_item {
-            padding: 18rpx 10rpx;
-            margin: 4rpx 0;
-            margin-left: 8rpx;
-            background: #ffffff;
-            border-radius: 6rpx;
-            font-size: 20rpx;
-            color: #666666;
-            border-left: 3rpx solid #e9ecef;
-            transition: all 0.2s ease;
-            position: relative;
-
-            &:active {
-              transform: translateX(4rpx);
-              background: #f8f9fa;
-            }
-
-            &.active {
-              background: #e8f4fd;
-              color: #005bac;
-              border-left-color: #005bac;
-              font-weight: 500;
-
-              &::before {
-                content: '';
-                position: absolute;
-                right: 8rpx;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 8rpx;
-                height: 8rpx;
-                background: #005bac;
-                border-radius: 50%;
-              }
-            }
-
-            .sub_menu_text {
-              font-size: 22rpx;
-              line-height: 1.3;
-            }
           }
         }
       }
     }
   }
-
-  .index_l {
-    width: 198rpx;
-    padding: 10rpx 0;
-    font-size: 11px;
-    font-family:
-      PingFang SC-Regular,
-      PingFang SC;
-    font-weight: 400;
-    color: #000000;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    height: 86vh;
-    background: #f2f2f2;
-  }
-
-  .index_r {
-    flex: 1;
-    background: #fff;
-    margin-left: 10rpx;
-    display: flex;
-    flex-direction: column;
-  }
 }
 
 .classIfy {
@@ -937,6 +1122,95 @@ export default {
   height: calc(100vh - 320rpx);
   overflow-y: auto;
 
+  /* 空状态样式 */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 500rpx;
+    padding: 80rpx 40rpx;
+
+    .empty-icon {
+      margin-bottom: 40rpx;
+      opacity: 0.6;
+      animation: float 3s ease-in-out infinite;
+    }
+
+    .empty-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #333333;
+      margin-bottom: 16rpx;
+    }
+
+    .empty-desc {
+      font-size: 28rpx;
+      color: #666666;
+      margin-bottom: 40rpx;
+      text-align: center;
+      line-height: 1.5;
+    }
+
+    .empty-tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 50rpx;
+
+      text {
+        font-size: 24rpx;
+        color: #999999;
+        margin-bottom: 8rpx;
+        line-height: 1.4;
+      }
+    }
+
+    .empty-actions {
+      display: flex;
+      gap: 20rpx;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .empty-action {
+      display: flex;
+      align-items: center;
+      padding: 20rpx 32rpx;
+      border-radius: 50rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+
+      text {
+        margin-left: 8rpx;
+      }
+
+      &.primary {
+        background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.3);
+
+        &:active {
+          transform: scale(0.95);
+          box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.4);
+        }
+      }
+
+      &.secondary {
+        background: rgba(0, 91, 172, 0.1);
+        color: #005bac;
+        border: 2rpx solid rgba(0, 91, 172, 0.2);
+
+        &:active {
+          transform: scale(0.95);
+          background: rgba(0, 91, 172, 0.15);
+        }
+      }
+    }
+  }
+
   .goodList_i {
     // display: flex;
     border-bottom: 1px solid #eee;
@@ -1295,4 +1569,15 @@ export default {
     left: 100%;
   }
 }
+
+/* 空状态浮动动画 */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10rpx);
+  }
+}
 </style>