fix: 全部分类

src/api/client/business.js

@@ -45,10 +45,14 @@ export function getGoodsDetailApi(id) {
  * 分类接口 - 获取分类列表
  * @returns
  */
-export function maintainCategories(id) {
+export function maintainCategories(data) {
   return request({
     url: `/maintain/categories`,
     method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data,
   });
 }
 
@@ -92,11 +96,11 @@ export function addGoodsFavorite(id) {
 
 // 商品接口 - 获取商家商品列表
 
-export function changeGoodsType(merchantId,data) {
+export function changeGoodsType(merchantId, data) {
   return request({
     url: `/maintain/merchant/${merchantId}/goods`,
     method: 'get',
-    data:data,
+    data: data,
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
@@ -129,7 +133,6 @@ export function cancelReservation(id) {
   });
 }
 
-
 /**
  * 购物车接口 - 新增购物车商品
  * @param {*} data
@@ -177,7 +180,6 @@ export function getCartList(id) {
   });
 }
 
-
 /**
  * 购物车接口 - 删除购物车
  * @param {*} data
@@ -198,7 +200,7 @@ export function deleteCartItem(ids) {
  * @param {*} data
  * @returns
  */
-export function editGoodsNumb(id,data) {
+export function editGoodsNumb(id, data) {
   return request({
     url: `/maintain/cartItem/${id}`,
     method: 'get',
@@ -250,7 +252,7 @@ export function accountToOrderGetComment(data) {
   return request({
     url: `/maintain/assess/query`,
     method: 'post',
-    data:data,
+    data: data,
     headers: {
       'Content-Type': 'application/json',
     },
@@ -262,11 +264,11 @@ export function accountToOrderGetComment(data) {
  * @param {*} data
  * @returns
  */
-export function getGoodsConcentList(goodsId,data) {
+export function getGoodsConcentList(goodsId, data) {
   return request({
     url: `/maintain/goods/${goodsId}/comments`,
     method: 'get',
-    data:data,
+    data: data,
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
@@ -288,4 +290,3 @@ export function goodsCommentsAdd(data) {
     },
   });
 }
-

src/pages/client/clientPackage/category.vue

@@ -1,24 +1,54 @@
 <template>
   <view class="u-wrap">
     <view class="u-menu-wrap">
-      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
-        :scroll-into-view="itemId">
-        <view v-for="(item, index) in left_first_list" :key="index" class="u-tab-item"
-          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="handleLeftMenuClick(index)">
+      <scroll-view
+        scroll-y
+        scroll-with-animation
+        class="u-tab-view menu-scroll-view"
+        :scroll-top="scrollTop"
+        :scroll-into-view="itemId"
+      >
+        <view
+          v-for="(item, index) in left_first_list"
+          :key="index"
+          class="u-tab-item"
+          :class="[current == index ? 'u-tab-item-active' : '']"
+          @tap.stop="handleLeftMenuClick(index)"
+        >
           <text class="u-line-1">{{ item.name }}</text>
         </view>
       </scroll-view>
 
-      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+      <scroll-view
+        :scroll-top="scrollRightTop"
+        scroll-y
+        scroll-with-animation
+        class="right-box"
+        @scroll="rightScroll"
+      >
         <view class="page-view">
-          <view class="class-item" :id="'item' + index" v-for="(item, index) in left_first_list" :key="index">
+          <view
+            class="class-item"
+            :id="'item' + index"
+            v-for="(item, index) in left_first_list"
+            :key="index"
+          >
             <view class="item-title">
               <text>{{ item.name }}</text>
             </view>
             <view class="item-container">
-              <view class="thumb-box" v-for="(child, childIndex) in item.children" :key="childIndex"
-                @click="handleItemClick(child.id, child.name)">
-                <image v-if="child.icon != ''" class="item-menu-image" :src="child.icon" mode=""></image>
+              <view
+                class="thumb-box"
+                v-for="(child, childIndex) in item.children"
+                :key="childIndex"
+                @click="handleItemClick(child.id, child.name)"
+              >
+                <image
+                  v-if="child.icon != ''"
+                  class="item-menu-image"
+                  :src="child.icon"
+                  mode=""
+                ></image>
                 <view v-else class="item-menu-image row-c" style="background-color: #f4f6f8">
                   <text style="font-size: 20rpx; color: #d0d0d0">加载失败</text>
                 </view>
@@ -33,291 +63,290 @@
 </template>
 
 <script>
-  // import {
-  //   buildTree
-  // } from '@/utils/tools.js';
-  import {
-    maintainCategories
-  } from '@/api/client/business.js';
-  export default {
-    data() {
-      return {
-        scrollTop: 0, //tab标题的滚动条位置
-        oldScrollTop: 0, // tab标题的滚动条旧位置
-        current: 0, // 预设当前项的值
-        menuHeight: 0, // 左边菜单的高度
-        menuItemHeight: 0, // 左边菜单item的高度
-        itemId: '', // 栏目右边scroll-view用于滚动的id
-        cateList: [], // 渲染的数据
-        arr: [], // 储存距离顶部高度的数组
-        scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-        timer: null, // 定时器
-        left_first_list: [], //左侧一级列表
-      };
-    },
-    onLoad() {
-      // this.cateList = buildTree(this.getCache('categories'));
-    },
-    onReady() {
-      this.getMenuItemTop();
-    },
-    mounted() {
-      // 获取左侧一级列表信息
-      maintainCategories().then(res => {
-        console.log('@@@@res',res);
-        this.left_first_list = res.data;
-      });
-    },
-    methods: {
-      /**
-       * 获取一个目标元素的高度
-       * @elClass 元素的类名
-       * @dataVal 储存高度的对象
-       */
-      getElRect(elClass, dataVal) {
-        new Promise((resolve, reject) => {
-          const query = uni.createSelectorQuery().in(this);
-          query
-            .select('.' + elClass)
-            .fields({
-                size: true,
-              },
-              res => {
-                // 如果节点尚未生成，res值为null，循环调用执行
-                if (!res) {
-                  setTimeout(() => {
-                    this.getElRect(elClass);
-                  }, 10);
-                  return;
-                }
-                this[dataVal] = res.height;
-                resolve();
-              },
-            )
-            .exec();
-        });
-      },
-      /**
-       * 获取右边菜单每个item到顶部的距离
-       * 储存到 arr 数组里面用于后面滚动判断
-       */
-      getMenuItemTop() {
-        new Promise(resolve => {
-          let selectorQuery = uni.createSelectorQuery();
-          selectorQuery
-            .selectAll('.class-item')
-            .boundingClientRect(rects => {
-              // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-              if (!rects.length) {
+// import {
+//   buildTree
+// } from '@/utils/tools.js';
+import { maintainCategories } from '@/api/client/business.js';
+export default {
+  data() {
+    return {
+      scrollTop: 0, //tab标题的滚动条位置
+      oldScrollTop: 0, // tab标题的滚动条旧位置
+      current: 0, // 预设当前项的值
+      menuHeight: 0, // 左边菜单的高度
+      menuItemHeight: 0, // 左边菜单item的高度
+      itemId: '', // 栏目右边scroll-view用于滚动的id
+      cateList: [], // 渲染的数据
+      arr: [], // 储存距离顶部高度的数组
+      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+      timer: null, // 定时器
+      left_first_list: [], //左侧一级列表
+    };
+  },
+  onLoad() {
+    // this.cateList = buildTree(this.getCache('categories'));
+  },
+  onReady() {
+    this.getMenuItemTop();
+  },
+  mounted() {
+    // 获取左侧一级列表信息
+    maintainCategories({ merchantId: '', type: 0 }).then(res => {
+      console.log('@@@@res', res);
+      this.left_first_list = res.data;
+    });
+  },
+  methods: {
+    /**
+     * 获取一个目标元素的高度
+     * @elClass 元素的类名
+     * @dataVal 储存高度的对象
+     */
+    getElRect(elClass, dataVal) {
+      new Promise((resolve, reject) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.' + elClass)
+          .fields(
+            {
+              size: true,
+            },
+            res => {
+              // 如果节点尚未生成，res值为null，循环调用执行
+              if (!res) {
                 setTimeout(() => {
-                  this.getMenuItemTop();
+                  this.getElRect(elClass);
                 }, 10);
                 return;
               }
-              rects.forEach(rect => {
-                // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-                // this.arr.push(rect.top - rects[0].top);
-                this.arr.push(rect.top);
-                resolve();
-              });
-            })
-            .exec();
-        });
-      },
-      /**
-       * 观测元素相交状态
-       * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-       * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-       */
-      async observer() {
-        this.cateList.map((val, index) => {
-          let observer = uni.createIntersectionObserver(this);
-          observer
-            .relativeTo('.right-box', {
-              top: 0,
-            })
-            .observe('#item' + index, res => {
-              if (res.intersectionRatio > 0) {
-                let id = res.id.substring(4);
-                this.leftMenuStatus(id);
-              }
-            });
-        });
-      },
-      /**
-       * 设置左边菜单的滚动状态
-       * @index 传入的 ID
-       */
-      async leftMenuStatus(index) {
-        this.current = index;
-        // 如果为0，意味着尚未初始化
-        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-          await this.getElRect('menu-scroll-view', 'menuHeight');
-          await this.getElRect('u-tab-item', 'menuItemHeight');
-        }
-        // 将菜单活动item垂直居中
-        this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-      },
-      /**
-       * 点击左边的栏目切换
-       * @index 传入的 ID
-       */
-      async handleLeftMenuClick(index) {
-        if (this.arr.length == 0) {
-          await this.getMenuItemTop();
-        }
-        if (index == this.current) return;
-        this.scrollRightTop = this.oldScrollTop;
-        this.$nextTick(function() {
-          this.scrollRightTop = this.arr[index];
-          this.current = index;
-          this.leftMenuStatus(index);
-        });
-      },
-      /**
-       * 右边菜单滚动
-       * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-       */
-      async rightScroll(e) {
-        this.oldScrollTop = e.detail.scrollTop;
-        if (this.arr.length == 0) {
-          await this.getMenuItemTop();
-        }
-        if (this.timer) return;
-        if (!this.menuHeight) {
-          await this.getElRect('menu-scroll-view', 'menuHeight');
-        }
-        setTimeout(() => {
-          // 节流
-          this.timer = null;
-          // scrollHeight为右边菜单垂直中点位置
-          // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-          // scrollHeight为右边菜单头部位置
-          let scrollHeight = e.detail.scrollTop + 20;
-          for (let i = 0; i < this.arr.length; i++) {
-            let height1 = this.arr[i];
-            let height2 = this.arr[i + 1];
-            if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
-              this.leftMenuStatus(i);
+              this[dataVal] = res.height;
+              resolve();
+            },
+          )
+          .exec();
+      });
+    },
+    /**
+     * 获取右边菜单每个item到顶部的距离
+     * 储存到 arr 数组里面用于后面滚动判断
+     */
+    getMenuItemTop() {
+      new Promise(resolve => {
+        let selectorQuery = uni.createSelectorQuery();
+        selectorQuery
+          .selectAll('.class-item')
+          .boundingClientRect(rects => {
+            // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+            if (!rects.length) {
+              setTimeout(() => {
+                this.getMenuItemTop();
+              }, 10);
               return;
             }
+            rects.forEach(rect => {
+              // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+              // this.arr.push(rect.top - rects[0].top);
+              this.arr.push(rect.top);
+              resolve();
+            });
+          })
+          .exec();
+      });
+    },
+    /**
+     * 观测元素相交状态
+     * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+     * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+     */
+    async observer() {
+      this.cateList.map((val, index) => {
+        let observer = uni.createIntersectionObserver(this);
+        observer
+          .relativeTo('.right-box', {
+            top: 0,
+          })
+          .observe('#item' + index, res => {
+            if (res.intersectionRatio > 0) {
+              let id = res.id.substring(4);
+              this.leftMenuStatus(id);
+            }
+          });
+      });
+    },
+    /**
+     * 设置左边菜单的滚动状态
+     * @index 传入的 ID
+     */
+    async leftMenuStatus(index) {
+      this.current = index;
+      // 如果为0，意味着尚未初始化
+      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+        await this.getElRect('u-tab-item', 'menuItemHeight');
+      }
+      // 将菜单活动item垂直居中
+      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+    },
+    /**
+     * 点击左边的栏目切换
+     * @index 传入的 ID
+     */
+    async handleLeftMenuClick(index) {
+      if (this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if (index == this.current) return;
+      this.scrollRightTop = this.oldScrollTop;
+      this.$nextTick(function () {
+        this.scrollRightTop = this.arr[index];
+        this.current = index;
+        this.leftMenuStatus(index);
+      });
+    },
+    /**
+     * 右边菜单滚动
+     * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+     */
+    async rightScroll(e) {
+      this.oldScrollTop = e.detail.scrollTop;
+      if (this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if (this.timer) return;
+      if (!this.menuHeight) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+      }
+      setTimeout(() => {
+        // 节流
+        this.timer = null;
+        // scrollHeight为右边菜单垂直中点位置
+        // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+        // scrollHeight为右边菜单头部位置
+        let scrollHeight = e.detail.scrollTop + 20;
+        for (let i = 0; i < this.arr.length; i++) {
+          let height1 = this.arr[i];
+          let height2 = this.arr[i + 1];
+          if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
+            this.leftMenuStatus(i);
+            return;
           }
-        }, 10);
-      },
-      handleItemClick(id, name) {
-        this.$Router.push(`/pages/client/clientPackage/storeList?id=${id}`);
-      },
+        }
+      }, 10);
+    },
+    handleItemClick(id, name) {
+      this.$Router.push(`/pages/client/clientPackage/storeList?id=${id}`);
     },
-  };
+  },
+};
 </script>
 
 <style scoped>
-  .u-wrap {
-    /* #ifdef H5 */
-    height: calc(100vh - var(--window-top));
-    /* #endif */
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
+.u-wrap {
+  /* #ifdef H5 */
+  height: calc(100vh - var(--window-top));
+  /* #endif */
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
 
-  .u-search-box {
-    padding: 18rpx 30rpx;
-  }
+.u-search-box {
+  padding: 18rpx 30rpx;
+}
 
-  .u-menu-wrap {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
+.u-menu-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
 
-  .u-tab-view {
-    width: 200rpx;
-    height: 100%;
-  }
+.u-tab-view {
+  width: 200rpx;
+  height: 100%;
+}
 
-  .u-tab-item {
-    height: 110rpx;
-    background: #f6f6f6;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 26rpx;
-    color: #444;
-    font-weight: 400;
-    line-height: 1;
-  }
+.u-tab-item {
+  height: 110rpx;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+  line-height: 1;
+}
 
-  .u-tab-item-active {
-    position: relative;
-    color: #06a446;
-    font-size: 30rpx;
-    font-weight: 500;
-    background: #d6ffe7;
-  }
+.u-tab-item-active {
+  position: relative;
+  color: #06a446;
+  font-size: 30rpx;
+  font-weight: 500;
+  background: #d6ffe7;
+}
 
-  .u-tab-item-active::before {
-    content: '';
-    position: absolute;
-    border-left: 4px solid #06a446;
-    height: 52rpx;
-    left: 0;
-    top: 29rpx;
-  }
+.u-tab-item-active::before {
+  content: '';
+  position: absolute;
+  border-left: 4px solid #06a446;
+  height: 52rpx;
+  left: 0;
+  top: 29rpx;
+}
 
-  .u-tab-view {
-    height: 100%;
-  }
+.u-tab-view {
+  height: 100%;
+}
 
-  .right-box {
-    background-color: rgb(250, 250, 250);
-  }
+.right-box {
+  background-color: rgb(250, 250, 250);
+}
 
-  .page-view {
-    padding: 16rpx;
-  }
+.page-view {
+  padding: 16rpx;
+}
 
-  .class-item {
-    margin-bottom: 30rpx;
-    background-color: #fff;
-    padding: 16rpx;
-    border-radius: 8rpx;
-  }
+.class-item {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
 
-  .class-item:last-child {
-    min-height: 100vh;
-  }
+.class-item:last-child {
+  min-height: 100vh;
+}
 
-  .item-title {
-    font-size: 26rpx;
-    color: #06a446;
-    font-weight: bold;
-  }
+.item-title {
+  font-size: 26rpx;
+  color: #06a446;
+  font-weight: bold;
+}
 
-  .item-menu-name {
-    margin-top: 8rpx;
-    font-weight: normal;
-    font-size: 24rpx;
-    color: #06a446;
-  }
+.item-menu-name {
+  margin-top: 8rpx;
+  font-weight: normal;
+  font-size: 24rpx;
+  color: #06a446;
+}
 
-  .item-container {
-    display: flex;
-    flex-wrap: wrap;
-  }
+.item-container {
+  display: flex;
+  flex-wrap: wrap;
+}
 
-  .thumb-box {
-    width: 33.333333%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    margin-top: 20rpx;
-  }
+.thumb-box {
+  width: 33.333333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 20rpx;
+}
 
-  .item-menu-image {
-    width: 120rpx;
-    height: 120rpx;
-  }
+.item-menu-image {
+  width: 120rpx;
+  height: 120rpx;
+}
 </style>