feat(SpecialArealist): 专区分类调整

config/goods.js

@@ -1,15 +1,3 @@
-/*
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-11-23 11:10:29
- */
-/*
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-11-23 11:10:29
- */
 const http = uni.$u.http
 
 //商品列表
@@ -117,3 +105,6 @@ export const energyShop = params =>
 //hi粉确认订单
 export const energyShopSilo = params =>
   http.post('/sale/api/order/valid-silo', params)
+
+export const getAllCategory = params =>
+  http.get('/sale/api/area-classify/listTree', { params })

config/request.js

@@ -1,9 +1,3 @@
-/*
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-05-24 14:43:45
- */
 import { getToken, removeToken } from '@/config/auth.js'
 
 module.exports = vm => {
@@ -19,7 +13,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'https://t-app.beida666.com/prod-api'
+    config.baseURL = 'http://192.168.2.102:8080'
     //#endif
 
     //#ifdef QA_SERVER

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>
@@ -32,34 +26,55 @@
       </view>
     </u-scroll-list>
     <view class="index_btm">
-      <!-- sangelxiu1 会员专区 隐藏分类-->
+      <!-- 新的可收起展开的一二级菜单 -->
-      <view class="index_l" v-if="!newShareMember">
+      <view class="menu_container">
-        <view
+        <view class="collapsible_menu">
-          v-for="item in oneList"
+          <view v-for="item in oneList" :key="item.pkId" class="menu_group">
-          :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"
+              class="first_level_item"
-              :key="index"
+              :class="{ active: oneId == item.pkId }"
-              @click="((twoId = item.pkId), getAllGoods1(item.pkId))"
+              @click="toggleFirstLevel(item)"
-              :class="[twoId == item.pkId ? 'actTab' : 'tab_i']"
             >
-              <view>{{ item.classifyName }}</view>
+              <view class="menu_text">{{
-              <!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
+                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>
-        </u-scroll-list>
+        </view>
+      </view>
+
+      <view class="index_r">
         <view class="search">
           <u--input
             placeholder="请输入商品名称"
@@ -285,6 +300,7 @@ export default {
       countryList: [],
       isCountry: false,
       waresName: '',
+      expandedMenus: [], // 存储展开的一级菜单ID
     }
   },
   onLoad(options) {
@@ -351,10 +367,10 @@ export default {
     this.setSpecial({
       value: this.specialArea,
     })
+    this.getAllCategory()
   },
   onShow() {
     this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
-    console.log(this.newShareMember, '...this.newShareMember')
     let that = this
     uni.$on('returnData', function (data) {
       that.specialArea = data.value
@@ -363,7 +379,7 @@ export default {
       })
     })
     // 获取国家
-    this.getJScountry()
+    // this.getJScountry()
     this.$nextTick(() => {
       this.$refs.cart.getCar()
     })
@@ -373,11 +389,61 @@ 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.toggleFirstLevel(this.oneList[0])
+          }
+        })
+    },
+    truncateText(text, maxLength) {
+      if (!text) return ''
+      if (text.length <= maxLength) return text
+      return text.substring(0, maxLength) + '...'
+    },
+    toggleFirstLevel(item) {
+      const index = this.expandedMenus.indexOf(item.pkId)
+      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)
+    },
+    // 选择二级分类
+    selectSecondLevel(item) {
+      this.twoId = item.pkId
+      this.getAllGoods1(item.pkId)
+    },
     changeCountry() {
       this.isCountry = true
     },
@@ -416,18 +482,7 @@ export default {
       })
     },
     setSpecial(item) {
-      if (item.value == 21) {
+      this.specialArea = item.value
-        // 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 = {
@@ -481,6 +536,12 @@ export default {
           // })
           this.oneList = res.data
           this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
+
+          // 默认展开第一个菜单
+          if (this.oneList[0]) {
+            this.expandedMenus = [this.oneList[0].pkId]
+          }
+
           this.getClassIfyTwo(this.oneList[0].pkId)
           this.getAllGoods(this.oneList[0].pkId)
         })
@@ -621,7 +682,126 @@ export default {
 }
 
 .index_btm {
-  flex: 1; // display: flex;
+  flex: 1;
+  display: flex;
+
+  .menu_container {
+    width: 200rpx;
+    background: #f8f9fa;
+    border-right: 1px solid #e9ecef;
+
+    .collapsible_menu {
+      height: 86vh;
+      overflow-y: auto;
+      padding: 10rpx 0;
+
+      .menu_group {
+        margin-bottom: 4rpx;
+
+        .first_level_item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 16rpx 12rpx;
+          margin: 0 8rpx;
+          background: #ffffff;
+          border-radius: 8rpx;
+          font-size: 20rpx;
+          font-weight: 500;
+          color: #333333;
+          box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
+          transition: all 0.3s ease;
+          border: 1rpx solid transparent;
+
+          &:active {
+            transform: scale(0.98);
+            background: #f0f7ff;
+          }
+
+          &.active {
+            background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+            color: #ffffff;
+            border-color: #005bac;
+            box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3);
+
+            .expand_icon {
+              .u-icon {
+                color: #ffffff !important;
+              }
+            }
+          }
+
+          .menu_text {
+            flex: 1;
+            font-size: 24rpx;
+            line-height: 1.3;
+          }
+
+          .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;
@@ -641,17 +821,11 @@ export default {
   }
 
   .index_r {
-    // flex: 1;
+    flex: 1;
     background: #fff;
-    margin-left: 198rpx; // padding: 20rpx;
+    margin-left: 10rpx;
-    // display: flex;
+    display: flex;
-  }
+    flex-direction: column;
-
-  .index_r_2 {
-    // flex: 1;
-    background: #fff;
-    margin-left: 20rpx; // padding: 20rpx;
-    // display: flex;
   }
 }