feat(specialArea): 样式改版

components/goods-list.vue

@@ -232,7 +232,6 @@ export default {
   },
   mounted() {
     this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
-    console.log(this.newShareMember, '...this.newShareMember')
     this.setSpecial({
       value: this.specialArea,
     })
@@ -245,7 +244,6 @@ export default {
     this.setSmallCarLength(0)
   },
   beforeDestroy() {
-    console.log('beforeDestroy........?')
     this.setSmallCarLength(0)
   },
   methods: {
@@ -326,7 +324,7 @@ export default {
           // })
           this.oneList = res.data
           this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
-          this.getClassIfyTwo(this.oneList[0].pkId)
+          // this.getClassIfyTwo(this.oneList[0].pkId)
           this.getAllGoods(this.oneList[0].pkId)
         })
     },

config/request.js

@@ -13,7 +13,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'http://192.168.2.102:8080'
+    config.baseURL = 'https://t-app.beida666.com/prod-api'
     //#endif
 
     //#ifdef QA_SERVER

pages.json

@@ -232,6 +232,14 @@
         }
       }
     },
+    {
+      "path": "pages/specialArea/drawer-list",
+      "style": {
+        "app-plus": {
+          "titleNView": false
+        }
+      }
+    },
     {
       "path": "pages/specialArea/haIndex",
       "style": {

pages/specialArea/list.vue

@@ -4,14 +4,56 @@
     <view class="index_header">
       <view>{{ titLabel }}</view>
     </view>
-    <!-- 分类抽屉按钮 -->
+    <view class="shareImg" v-if="specialArea == 7" @click="goShare">
-    <view class="category-drawer-btn" @click="openCategoryDrawer">
+      <u-icon name="share-square" size="24" color="#005BAC"> </u-icon>
-      <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">
+      <!-- sangelxiu1 会员专区 隐藏分类-->
+      <view class="index_l" v-if="!newShareMember">
+        <view
+          v-for="item in oneList"
+          :class="['classIfy', oneId == item.pkId ? 'actOne' : '']"
+          @click="
+            ((oneId = item.pkId),
+            getAllGoods(item.pkId),
+            getClassIfyTwo(item.pkId))
+          "
+          :key="item.pkId"
+          >{{ item.classifyName }}</view
+        >
+      </view>
+      <view :class="newShareMember ? 'index_r_2' : 'index_r'">
+        <u-scroll-list :indicator="false" class="tabList">
+          <view class="tab">
+            <view
+              v-for="(item, index) in twoList"
+              :key="index"
+              @click="((twoId = item.pkId), getAllGoods1(item.pkId))"
+              :class="[twoId == item.pkId ? 'actTab' : 'tab_i']"
+            >
+              <view>{{ item.classifyName }}</view>
+              <!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
+            </view>
+          </view>
+        </u-scroll-list>
         <view class="search">
           <u--input
             placeholder="请输入商品名称"
@@ -25,41 +67,11 @@
           ></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
@@ -214,75 +226,6 @@
       :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>
 
@@ -336,8 +279,6 @@ export default {
       countryList: [],
       isCountry: false,
       waresName: '',
-      expandedMenus: [], // 存储展开的一级菜单ID
-      showCategoryDrawer: false, // 控制分类抽屉显示
     }
   },
   onLoad(options) {
@@ -407,8 +348,6 @@ 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
@@ -417,7 +356,7 @@ export default {
       })
     })
     // 获取国家
-    // this.getJScountry()
+    this.getJScountry()
     this.$nextTick(() => {
       this.$refs.cart.getCar()
     })
@@ -427,138 +366,11 @@ export default {
     this.setSmallCarLength(0)
   },
   beforeDestroy() {
+    console.log('beforeDestroy........?')
     this.setSmallCarLength(0)
   },
   methods: {
     ...mapActions(['setSmallCarLength', 'setShopCarLength']),
-    getAllCategory() {
-      api
-        .getAllCategory({
-          specialArea: this.specialArea,
-          pkCountry: this.pkCountry,
-        })
-        .then(res => {
-          if (res.code === 200) {
-            const tempList = res.data || []
-            this.oneList = tempList.map(item => {
-              const children = item.children
-              if (children && children.length > 0) {
-                item.children = [
-                  { classifyName: '全部', pkId: item.pkId },
-                  ...children,
-                ]
-              }
-              return {
-                ...item,
-              }
-            })
-
-            // 默认全部展开
-            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)
-            }
-          }
-        })
-    },
-    truncateText(text, maxLength) {
-      if (!text) return ''
-      if (text.length <= maxLength) return text
-      return text.substring(0, maxLength) + '...'
-    },
-    // 选择一级分类（不影响展开状态）
-    selectFirstLevel(item) {
-      this.oneId = item.pkId
-      this.twoId = item.pkId
-      this.getAllGoods(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
     },
@@ -597,8 +409,18 @@ export default {
       })
     },
     setSpecial(item) {
-      this.specialArea = item.value
+      if (item.value == 21) {
-      this.getAllCategory()
+        // uni.navigateTo({
+        //   url:
+        //     '/pages/specialArea/haIndex?label=' +
+        //     this.titLabel +
+        //     '&specialArea=21&children=' +
+        //     JSON.stringify(this.itemChildren),
+        // })
+      } else {
+        this.specialArea = item.value
+        this.getClassIfy()
+      }
     },
     addCar(item) {
       let carList = {
@@ -652,10 +474,6 @@ export default {
           // })
           this.oneList = res.data
           this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
-
-          // 默认全部展开
-          this.expandedMenus = this.oneList.map(item => item.pkId)
-
           this.getClassIfyTwo(this.oneList[0].pkId)
           this.getAllGoods(this.oneList[0].pkId)
         })
@@ -795,222 +613,38 @@ 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;
+  flex: 1; // display: flex;
-  display: flex;
 
-  .index_r {
+  .index_l {
-    flex: 1;
+    width: 198rpx;
-    background: #fff;
+    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;
-    &.full-width {
+    height: 86vh;
-      margin-left: 0;
+    background: #f2f2f2;
-    }
-  }
-}
-
-/* 分类抽屉遮罩 */
-.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;
-
-  &.show {
-    opacity: 1;
-  }
-}
-
-/* 分类抽屉样式 */
-.category-drawer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 600rpx;
-  height: 100vh;
-  background: #f8f9fa;
-  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 {
+  .index_r {
-    display: flex;
+    // flex: 1;
-    justify-content: space-between;
+    background: #fff;
-    align-items: center;
+    margin-left: 198rpx; // padding: 20rpx;
-    padding: 40rpx 30rpx 30rpx;
+    // display: flex;
-    background: #ffffff;
-    border-bottom: 1px solid #e9ecef;
-
-    .drawer-title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: #333333;
-    }
   }
 
-  .drawer-content {
+  .index_r_2 {
-    flex: 1;
+    // flex: 1;
-    overflow-y: auto;
+    background: #fff;
-    padding: 20rpx 0;
+    margin-left: 20rpx; // padding: 20rpx;
-
+    // display: flex;
-    /* 抽屉滚动条 */
-    &::-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 {
-            background: rgba(0, 0, 0, 0.05);
-          }
-        }
-
-        .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: #fff;
-            font-weight: 500;
-
-            &::before {
-              content: '';
-              position: absolute;
-              left: 24rpx;
-              top: 50%;
-              transform: translateY(-50%);
-              width: 8rpx;
-              height: 8rpx;
-              background: #005bac;
-              border-radius: 50%;
-            }
-          }
-
-          .drawer-sub-menu-text {
-            font-size: 28rpx;
-            line-height: 1.3;
-            margin-left: 20rpx;
-          }
-        }
-      }
-    }
   }
 }
 
@@ -1122,95 +756,6 @@ 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;
@@ -1569,15 +1114,4 @@ export default {
     left: 100%;
   }
 }
-
-/* 空状态浮动动画 */
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10rpx);
-  }
-}
 </style>