feat(merchant):新增预约功能，完善商家状态

src/api/merchant/order.js

@@ -37,7 +37,7 @@ export function getOrderQuantityApi(id) {
  * @param {*} data
  * @returns
  */
-export function listMerchantReservations(data) {
+export function getAppointListApi(data) {
   return request({
     url: `/maintain/listMerchantReservations`,
     method: 'post',

src/api/merchant/shopManage.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+/**
+ * @description 商品接口 - 获取商家商品列表
+ * @param {*} data
+ * @returns
+ */
+
+export function getMerchantClassify(data) {
+  return request({
+    url: `/maintain/merchant/${merchantId}/goods`,
+    data: data,
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/design/index.scss

@@ -13,16 +13,14 @@
   }
 }
 
-
 /*==================================================================
                          设置字体大小的样式
   =================================================================*/
-  @for $i from 0 to 100 {
-    .f-s-#{$i} {
-      font-size: $i + rpx;
-    }
+@for $i from 0 to 100 {
+  .f-s-#{$i} {
+    font-size: $i + rpx;
   }
-
+}
 
 /*==================================================================
                          设置边框圆角class
@@ -117,3 +115,73 @@
   }
 }
 
+/*==================================================================
+                           弹性盒子
+  =================================================================*/
+.fl-flex {
+  display: flex;
+}
+
+.fl-flex-direction {
+  flex-direction: column;
+}
+
+.fl-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.fl-align-start {
+  align-items: flex-start;
+}
+
+.fl-align-end {
+  align-items: flex-end;
+}
+
+.fl-align-center {
+  align-items: center;
+}
+
+.fl-align-stretch {
+  align-items: stretch;
+}
+
+.fl-self-start {
+  align-self: flex-start;
+}
+
+.fl-self-center {
+  align-self: center;
+}
+
+.fl-self-end {
+  align-self: flex-end;
+}
+
+.fl-self-stretch {
+  align-self: stretch;
+}
+
+.fl-align-stretch {
+  align-items: stretch;
+}
+
+.fl-justify-start {
+  justify-content: flex-start;
+}
+
+.fl-justify-end {
+  justify-content: flex-end;
+}
+
+.fl-justify-center {
+  justify-content: center;
+}
+
+.fl-justify-between {
+  justify-content: space-between;
+}
+
+.fl-justify-around {
+  justify-content: space-around;
+}

src/pages.json

@@ -2,7 +2,8 @@
   "easycom": {
     "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   },
-  "pages": [{
+  "pages": [
+    {
       "path": "pages/client/tabBar/home/index",
       "style": {
         "navigationBarTitleText": "首页",
@@ -66,9 +67,11 @@
       }
     }
   ],
-  "subPackages": [{
+  "subPackages": [
+    {
       "root": "pages/client/clientPackage",
-      "pages": [{
+      "pages": [
+        {
           "path": "search",
           "style": {
             "navigationBarTitleText": "搜索"
@@ -184,7 +187,8 @@
     },
     {
       "root": "pages/client/clientUser",
-      "pages": [{
+      "pages": [
+        {
           "path": "collectList",
           "style": {
             "navigationBarTitleText": "我的收藏"
@@ -290,7 +294,8 @@
     },
     {
       "root": "pages/merchant",
-      "pages": [{
+      "pages": [
+        {
           "path": "extend/index",
           "style": {
             "navigationBarTitleText": "推广",
@@ -421,6 +426,12 @@
             "navigationBarTitleText": "店铺管理"
           }
         },
+        {
+          "path": "store/appointList",
+          "style": {
+            "navigationBarTitleText": "预约列表"
+          }
+        },
         {
           "path": "order/index",
           "style": {
@@ -436,7 +447,8 @@
     "selectedColor": "#42b2fa",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
-    "list": [{
+    "list": [
+      {
         "pagePath": "pages/client/tabBar/home/index"
       },
       {
@@ -456,12 +468,15 @@
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
   },
-  "condition": { //模式配置，仅开发期间生效
+  "condition": {
+    //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-    "list": [{
-      "name": "", //模式名称
-      "path": "", //启动页面，必选
-      "query": "" //启动参数，在页面的onLoad函数里面得到
-    }]
+    "list": [
+      {
+        "name": "", //模式名称
+        "path": "", //启动页面，必选
+        "query": "" //启动参数，在页面的onLoad函数里面得到
+      }
+    ]
   }
 }

src/pages/merchant/mine/index.vue

@@ -114,11 +114,12 @@
 
 <script>
 import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
+import { updateBusinessStatus } from '@/api/merchant/mine';
 
 export default {
   data() {
     return {
-      state: 1,
+      state: 0,
       stateName: '营业中',
       show: false,
       showAut: false,
@@ -190,11 +191,13 @@ export default {
     changeStatus() {
       this.show = true;
     },
+
     confirmSwitch() {
       uni.navigateTo({
         url: '/pages/merchant/mine/openStore/index',
       });
     },
+
     handelCancel() {
       uni.switchTab({
         url: '/pages/client/tabBar/home/index',
@@ -205,21 +208,27 @@ export default {
       this.show = false;
     },
 
+    // 修改商家状态
     confirm(val) {
+      console.log(val, '11111111');
       this.state = val.value[0].id;
       this.stateName = val.value[0].label;
       this.show = false;
+
+      updateBusinessStatus(this.merchantInfo.merchant.id, { businessStatus: this.state }).then(
+        res => {
+          if (res.code === 'OK') {
+            this.$u.toast('修改成功');
+          }
+        },
+      );
     },
 
     getStatusColor(state) {
-      if (state === 1) {
+      if (state === 0) {
         return '#19be6b';
-      } else if (state === 2) {
+      } else if (state === 1) {
         return '#ff9900';
-      } else if (state === 3) {
-        return '#909399';
-      } else {
-        return '';
       }
     },
 

src/pages/merchant/order/index.vue

@@ -26,7 +26,7 @@
 
       <orderItem :list="orderList" :typeStyle.sync="typeStyle"></orderItem>
     </view>
-    <tabbar currentTab="merchantOrder"  />
+    <tabbar currentTab="merchantOrder" />
   </view>
 </template>
 
@@ -67,7 +67,7 @@ export default {
         },
       );
       let res = await getOrderListApi({ ...result });
-      if (res.code === 200) {
+      if (res.code === 'OK') {
         this.orderList = res.data.records;
       }
     },

src/pages/merchant/store/appointList.vue

@@ -0,0 +1,95 @@
+<template>
+  <view class="appointList">
+    <view v-for="item in appointList" :key="item.id" class="appoint">
+      <view class="fl-flex fl-justify-between">
+        <view>
+          {{ item.mobile }}
+          <text class="f-s-22" style="color: #999999"> (预留手机) </text>
+        </view>
+        <u-icon name="phone" color="#2979ff" size="24" @click="handlerMakePhone(item.mobile)" />
+      </view>
+      <view class="line"></view>
+      <view class="fl-flex fl-align-center">
+        <image
+          :src="item.simpleMerchantVO.logo"
+          mode="scaleToFill"
+          style="width: 200rpx; height: 200rpx"
+          v-if="item.simpleMerchantVO.logo"
+        />
+        <image
+          src="/static/QR57a.jpg"
+          v-else
+          mode="scaleToFill"
+          style="width: 200rpx; height: 200rpx"
+        />
+
+        <view class="u-p-l-10">
+          <view class="f-s-32" style="font-weight: bold">服务名称服务</view>
+          <view style="margin: 10rpx 0">{{ $u.timeFormat(item.appointTime) || '--' }}</view>
+          <view>{{ item.simpleMerchantVO.address || '--' }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getAppointListApi } from '@/api/merchant/order';
+export default {
+  data() {
+    return {
+      params: {
+        offset: 1,
+        size: 10,
+      },
+      appointList: [],
+      list: {},
+    };
+  },
+  onShow() {
+    let { merchant } = this.$store.state.data.merchantInfo;
+    this.list = merchant;
+
+    setTimeout(() => {
+      this.getAppointList();
+    }, 300);
+  },
+
+  methods: {
+    async getAppointList() {
+      let result = Object.assign({}, { ...this.params }, { merchantId: this.list.id });
+      console.log(result, '0000000');
+      let res = await getAppointListApi({ ...result });
+
+      if (res.code === 'OK') {
+        this.appointList = res.data;
+      }
+    },
+
+    handlerMakePhone() {
+      uni.makePhoneCall({
+        phoneNumber: '114', //仅为示例
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.appointList {
+  .appoint {
+    margin: 0 20rpx;
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    border-radius: 20rpx;
+
+    .line {
+      height: 2rpx;
+      width: 100%;
+      background-color: #eee;
+      margin: 5rpx 0;
+    }
+  }
+}
+</style>

src/pages/merchant/store/index.vue

@@ -14,7 +14,7 @@
         <view class="line"></view>
         <view>
           <view class="text-title">今日订单（单）</view>
-          <view class="text-num">{{ store.orderCount || "0"}}</view>
+          <view class="text-num">{{ store.orderCount || '0' }}</view>
         </view>
       </view>
     </view>
@@ -161,6 +161,11 @@ export default {
             url: '/pages/merchant/store/myTeam',
           });
           break;
+        case 9:
+          uni.navigateTo({
+            url: '/pages/merchant/store/appointList',
+          });
+          break;
       }
     },
     async getOrderQuantity(id) {

src/pages/merchant/store/shopManage.vue

@@ -1,51 +1,86 @@
 <template>
   <view class="u-wrap">
-
     <view class="top-box">
       <view class="switch-box">
-        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click='handlerChangeTab' :activeStyle="{
+        <u-tabs
+          :list="list1"
+          lineWidth="30"
+          lineColor="$uni-bg-color-primary"
+          @click="handlerChangeTab"
+          :activeStyle="{
             color: '#000',
             fontSize: '28rpx',
             transform: 'scale(1.05)',
             marginBottom: '15rpx',
-          }" :inactiveStyle="{
+          }"
+          :inactiveStyle="{
             color: '#333',
             fontSize: '30rpx',
             transform: 'scale(1)',
             marginBottom: '15rpx',
-          }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
+          }"
+          itemStyle="width:50%;padding:0;margin:5px 0;"
+        ></u-tabs>
       </view>
       <view class="search-box">
-        <u--input v-model='search' prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
-          class="search-ipt" placeholder="请输入内容" border="surround" clearable></u--input>
+        <u--input
+          v-model="search"
+          prefixIcon="search"
+          prefixIconStyle="font-size: 22px;color: #909399"
+          class="search-ipt"
+          placeholder="请输入内容"
+          border="surround"
+          clearable
+        ></u--input>
         <button class="btn" @click="handlerSearchBtn">搜索</button>
       </view>
     </view>
 
     <!-- 在售中 -->
     <view class="u-menu-wrap" v-if="delete_type == 0">
-      <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 tabbar" :key="index" class="u-tab-item"
-          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
-          <text class="u-line-1">{{item.name}}</text>
+      <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 tabbar"
+          :key="index"
+          class="u-tab-item"
+          :class="[current == index ? 'u-tab-item-active' : '']"
+          @tap.stop="swichMenu(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 tabbar" :key="index">
+          <view
+            class="class-item"
+            :id="'item' + index"
+            v-for="(item, index) in tabbar"
+            :key="index"
+          >
             <view class="item-title">
-              <text>{{item.name}}</text>
+              <text>{{ item.name }}</text>
             </view>
-            <view class="item-box" v-for="itm of item.foods" :key="idx">
+            <view class="item-box" v-for="(itm, index) of item.foods" :key="index">
               <view class="item-l">
-                <img class="l-img" src="@/static/QR57a.jpg" alt="">
+                <img class="l-img" src="@/static/QR57a.jpg" alt="" />
               </view>
               <view class="item-r">
-                <p class='p1'>yizhiyang的鲜花{{itm.name}}11111111111111</p>
-                <p class='p2'>月售100</p>
-                <p class='p2'>库存90</p>
-                <p class='p3'>￥100起</p>
+                <p class="p1">yizhiyang的鲜花{{ itm.name }}11111111111111</p>
+                <p class="p2">月售100</p>
+                <p class="p2">库存90</p>
+                <p class="p3">￥100起</p>
               </view>
             </view>
           </view>
@@ -55,21 +90,32 @@
 
     <!-- 已下架 -->
     <view class="u-menu-wrap" v-if="delete_type == 1">
-      <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-item2" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
-            <view class="item-box" v-for="itm of item.foods" :key="idx">
-               <u-checkbox-group>
-               	<u-checkbox v-model="checked" shape="circle" ></u-checkbox>
-               </u-checkbox-group>
+          <view
+            class="class-item2"
+            :id="'item' + index"
+            v-for="(item, index) in tabbar"
+            :key="index"
+          >
+            <view class="item-box" v-for="(itm, index) of item.foods" :key="index">
+              <u-checkbox-group>
+                <u-checkbox v-model="checked" shape="circle"></u-checkbox>
+              </u-checkbox-group>
               <view class="item-l">
-                <img class="l-img" src="@/static/QR57a.jpg" alt="">
+                <img class="l-img" src="@/static/QR57a.jpg" alt="" />
               </view>
               <view class="item-r">
-                <p class='type_p1'>yizhiyang的鲜花{{itm.name}}11111111111111</p>
-                <p class='p2'>月售100</p>
-                <p class='p2'>库存90</p>
-                <p class='p3'>￥100起</p>
+                <p class="type_p1">yizhiyang的鲜花{{ itm.name }}11111111111111</p>
+                <p class="p2">月售100</p>
+                <p class="p2">库存90</p>
+                <p class="p3">￥100起</p>
               </view>
             </view>
           </view>
@@ -84,230 +130,248 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        scrollTop: 0, //tab标题的滚动条位置
-        oldScrollTop: 0, // tab标题的滚动条旧位置
-        current: 0, // 预设当前项的值
-        menuHeight: 0, // 左边菜单的高度
-        menuItemHeight: 0, // 左边菜单item的高度
-        itemId: '', // 栏目右边scroll-view用于滚动的id
-        arr: [], // 储存距离顶部高度的数组
-        scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-        timer: null, // 定时器
-        tabbar: [{
-            "name": "蔬菜水果",
-            "foods": [{
-                "cat": 383,
-                "name": "蔬菜",
-                "icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
-                "key": "蔬菜"
-              },
-              {
-                "cat": 384,
-                "name": "食用菌",
-                "icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
-                "key": "食用菌"
-              },
-              {
-                "cat": 385,
-                "name": "水果",
-                "icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
-                "key": "水果"
-              }
-            ]
-          },
-          {
-            "name": "畜禽养殖",
-            "foods": [{
-                "cat": 388,
-                "name": "禽类",
-                "icon": "http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png",
-                "key": "禽类"
-              },
-              {
-                "cat": 389,
-                "name": "畜类",
-                "icon": "http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png",
-                "key": "畜类"
-              },
-              {
-                "cat": 391,
-                "name": "蛋类",
-                "icon": "http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png",
-                "key": "蛋类"
-              },
-              {
-                "cat": 390,
-                "name": "水产",
-                "icon": "http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png",
-                "key": "水产"
-              }
-            ]
-          },
-
-          {
-            "name": "粮油副食",
-            "foods": [{
-                "cat": 393,
-                "name": "米面粮油",
-                "icon": "http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png",
-                "key": "米面粮油"
-              },
-              {
-                "cat": 394,
-                "name": "坚果干果",
-                "icon": "http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png",
-                "key": "坚果干果"
-              },
-              {
-                "cat": 395,
-                "name": "加工食品",
-                "icon": "http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png",
-                "key": "加工食品"
-              },
-              {
-                "cat": 396,
-                "name": "茶烟酒",
-                "icon": "http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png",
-                "key": "茶烟酒"
-              }
-            ]
-          },
-          {
-            "name": "花卉苗木",
-            "foods": [{
-                "cat": 398,
-                "name": "鲜花盆景",
-                "icon": "http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png",
-                "key": "鲜花盆景"
-              },
-              {
-                "cat": 399,
-                "name": "果树苗",
-                "icon": "http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png",
-                "key": "果树苗"
-              },
-              {
-                "cat": 400,
-                "name": "蔬瓜种子",
-                "icon": "http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png",
-                "key": "蔬瓜种子"
-              },
-              {
-                "cat": 401,
-                "name": "经济作物",
-                "icon": "http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png",
-                "key": "经济作物"
-              }
-            ]
-          },
-          {
-            "name": "中草药材",
-            "foods": [{
-                "cat": 403,
-                "name": "全草类",
-                "icon": "http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png",
-                "key": "全草类"
-              },
-              {
-                "cat": 405,
-                "name": "根茎皮叶花",
-                "icon": "http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png",
-                "key": "根茎皮叶花"
-              },
-              {
-                "cat": 406,
-                "name": "滋补品类",
-                "icon": "http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png",
-                "key": "滋补品类"
-              },
-              {
-                "cat": 404,
-                "name": "果实籽仁类",
-                "icon": "http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png",
-                "key": "果实籽仁类"
-              }
-            ]
-          },
-          {
-            "name": "其他",
-            "foods": [{
-                "cat": 434,
-                "name": "包装",
-                "icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
-                "key": "包装"
-              },
-              {
-                "cat": 435,
-                "name": "安全溯源",
-                "icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
-                "key": "安全溯源"
-              },
-              {
-                "cat": 436,
-                "name": "农用百货",
-                "icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
-                "key": "农用百货"
-              },
-              {
-                "cat": 437,
-                "name": "仓储物流",
-                "icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
-                "key": "仓储物流"
-              }
-            ]
-          }
-        ],
-        list1: [{
+export default {
+  data() {
+    return {
+      scrollTop: 0, //tab标题的滚动条位置
+      oldScrollTop: 0, // tab标题的滚动条旧位置
+      current: 0, // 预设当前项的值
+      menuHeight: 0, // 左边菜单的高度
+      menuItemHeight: 0, // 左边菜单item的高度
+      itemId: '', // 栏目右边scroll-view用于滚动的id
+      arr: [], // 储存距离顶部高度的数组
+      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+      timer: null, // 定时器
+      tabbar: [
+        {
+          name: '蔬菜水果',
+          foods: [
+            {
+              cat: 383,
+              name: '蔬菜',
+              icon: 'http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png',
+              key: '蔬菜',
+            },
+            {
+              cat: 384,
+              name: '食用菌',
+              icon: 'http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png',
+              key: '食用菌',
+            },
+            {
+              cat: 385,
+              name: '水果',
+              icon: 'http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png',
+              key: '水果',
+            },
+          ],
+        },
+        {
+          name: '畜禽养殖',
+          foods: [
+            {
+              cat: 388,
+              name: '禽类',
+              icon: 'http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png',
+              key: '禽类',
+            },
+            {
+              cat: 389,
+              name: '畜类',
+              icon: 'http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png',
+              key: '畜类',
+            },
+            {
+              cat: 391,
+              name: '蛋类',
+              icon: 'http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png',
+              key: '蛋类',
+            },
+            {
+              cat: 390,
+              name: '水产',
+              icon: 'http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png',
+              key: '水产',
+            },
+          ],
+        },
+
+        {
+          name: '粮油副食',
+          foods: [
+            {
+              cat: 393,
+              name: '米面粮油',
+              icon: 'http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png',
+              key: '米面粮油',
+            },
+            {
+              cat: 394,
+              name: '坚果干果',
+              icon: 'http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png',
+              key: '坚果干果',
+            },
+            {
+              cat: 395,
+              name: '加工食品',
+              icon: 'http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png',
+              key: '加工食品',
+            },
+            {
+              cat: 396,
+              name: '茶烟酒',
+              icon: 'http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png',
+              key: '茶烟酒',
+            },
+          ],
+        },
+        {
+          name: '花卉苗木',
+          foods: [
+            {
+              cat: 398,
+              name: '鲜花盆景',
+              icon: 'http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png',
+              key: '鲜花盆景',
+            },
+            {
+              cat: 399,
+              name: '果树苗',
+              icon: 'http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png',
+              key: '果树苗',
+            },
+            {
+              cat: 400,
+              name: '蔬瓜种子',
+              icon: 'http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png',
+              key: '蔬瓜种子',
+            },
+            {
+              cat: 401,
+              name: '经济作物',
+              icon: 'http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png',
+              key: '经济作物',
+            },
+          ],
+        },
+        {
+          name: '中草药材',
+          foods: [
+            {
+              cat: 403,
+              name: '全草类',
+              icon: 'http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png',
+              key: '全草类',
+            },
+            {
+              cat: 405,
+              name: '根茎皮叶花',
+              icon: 'http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png',
+              key: '根茎皮叶花',
+            },
+            {
+              cat: 406,
+              name: '滋补品类',
+              icon: 'http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png',
+              key: '滋补品类',
+            },
+            {
+              cat: 404,
+              name: '果实籽仁类',
+              icon: 'http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png',
+              key: '果实籽仁类',
+            },
+          ],
+        },
+        {
+          name: '其他',
+          foods: [
+            {
+              cat: 434,
+              name: '包装',
+              icon: 'http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png',
+              key: '包装',
+            },
+            {
+              cat: 435,
+              name: '安全溯源',
+              icon: 'http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png',
+              key: '安全溯源',
+            },
+            {
+              cat: 436,
+              name: '农用百货',
+              icon: 'http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png',
+              key: '农用百货',
+            },
+            {
+              cat: 437,
+              name: '仓储物流',
+              icon: 'http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png',
+              key: '仓储物流',
+            },
+          ],
+        },
+      ],
+      list1: [
+        {
           name: '在售中',
-        }, {
+        },
+        {
           name: '已下架',
-        }],
-        checked:false,
-        search: '',
-        delete_type: false,
-      }
+        },
+      ],
+      checked: false,
+      search: '',
+      delete_type: false,
+    };
+  },
+  /**
+   * 获取一个目标元素的高度
+   * @elClass 元素的类名
+   * @dataVal 储存高度的对象
+   */
+  onReady() {
+    this.getMenuItemTop();
+  },
+  watch: {
+    delete_type(newValue) {
+      this.scrollRightTop = 0;
+      this.current = 0;
     },
-    /**
-     * 获取一个目标元素的高度
-     * @elClass 元素的类名
-     * @dataVal 储存高度的对象
-     */
-    onReady() {
-      this.getMenuItemTop()
-    },
-    watch: {
-      delete_type(newValue) {
-        this.scrollRightTop = 0
-        this.current = 0
-      }
+  },
+  methods: {
+    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();
+      });
     },
-    methods: {
-      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();
-        })
-      },
-
-      getMenuItemTop() {
-        new Promise(resolve => {
-          let selectorQuery = uni.createSelectorQuery();
-          selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+
+    getMenuItemTop() {
+      new Promise(resolve => {
+        let selectorQuery = uni.createSelectorQuery();
+        selectorQuery
+          .selectAll('.class-item')
+          .boundingClientRect(rects => {
             // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
             if (!rects.length) {
               setTimeout(() => {
@@ -315,289 +379,289 @@
               }, 10);
               return;
             }
-            rects.forEach((rect) => {
+            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.tabbar.map((val, index) => {
-          let observer = uni.createIntersectionObserver(this);
-          observer.relativeTo('.right-box', {
-            top: 0
-          }).observe('#item' + index, res => {
+            });
+          })
+          .exec();
+      });
+    },
+    /**
+     * 观测元素相交状态
+     * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+     * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+     */
+    async observer() {
+      this.tabbar.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) {
+          });
+      });
+    },
+    /**
+     * 设置左边菜单的滚动状态
+     * @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 swichMenu(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;
-        // 如果为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 swichMenu(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;
-            }
+        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)
-      },
-
-      // 搜索按钮
-      handlerSearchBtn() {
-        console.log('search', this.search);
-      },
-      // 切换tab
-      handlerChangeTab(e) {
-        if (e.index == 1) {
-          this.delete_type = true
-        } else {
-          this.delete_type = false
         }
-      }
-    }
+      }, 10);
+    },
 
-  }
+    // 搜索按钮
+    handlerSearchBtn() {
+      console.log('search', this.search);
+    },
+    // 切换tab
+    handlerChangeTab(e) {
+      if (e.index == 1) {
+        this.delete_type = true;
+      } else {
+        this.delete_type = false;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .top-box {
-    padding: 0 0 20rpx;
-    width: 100%;
-
-    .switch-box {
-      width: 100%;
-    }
-
-    .search-box {
-      display: flex;
-      justify-content: space-around;
-      width: 90%;
-      margin: 20rpx auto 0;
-
-      .btn {
-        width: 160rpx;
-        height: 70rpx;
-        background-color: #5992BB;
-        color: #fff;
-        text-align: center;
-        line-height: 70rpx;
-        font-size: 26rpx;
-        border-radius: 30rpx;
-        margin-left: 20rpx;
-      }
-    }
-  }
-
-  .u-wrap {
-    /* #ifdef H5 */
-    height: calc(100vh - var(--window-top));
-    /* #endif */
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .u-search-box {
-    padding: 18rpx 30rpx;
-  }
+.top-box {
+  padding: 0 0 20rpx;
+  width: 100%;
 
-  .u-menu-wrap {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .u-tab-view {
-    width: 200rpx;
-    background-color: #f6f6f6;
+  .switch-box {
+    width: 100%;
   }
 
-  .u-tab-item {
-    height: 110rpx;
-    background: #f6f6f6;
-    box-sizing: border-box;
+  .search-box {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 26rpx;
-    color: #444;
-    font-weight: 400;
-    line-height: 1;
-    padding: 16rpx 0;
-
-  }
-
-  .u-tab-item-active {
-    position: relative;
-    color: #5F96BE;
-    font-size: 30rpx;
-    font-weight: 500;
-    background: #FFF;
-  }
-
-  .u-tab-item-active::before {
-    content: "";
-    position: absolute;
-    border-left: 4px solid #5F96BE;
-    height: 52rpx;
-    left: 0;
-    top: 29rpx;
-  }
-
-  .u-tab-view {
-    height: 100%;
-  }
-
-  .right-box {
-    background-color: rgb(250, 250, 250);
-  }
-
-  .page-view {
-    padding: 16rpx;
-  }
-
-  .class-item,
-  .class-item2 {
-    margin-bottom: 30rpx;
-    background-color: #fff;
-    padding: 16rpx;
-    border-radius: 8rpx;
-  }
-
-  .class-item2 {
-    margin-bottom: 0;
-  }
-
-  .item-title {
-    font-size: 26rpx;
-    text-align: center;
-    color: #5F96BE;
-    margin-bottom: 20rpx;
+    justify-content: space-around;
+    width: 90%;
+    margin: 20rpx auto 0;
+
+    .btn {
+      width: 160rpx;
+      height: 70rpx;
+      background-color: #5992bb;
+      color: #fff;
+      text-align: center;
+      line-height: 70rpx;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+      margin-left: 20rpx;
+    }
   }
-
-  .item-box {
-    display: flex;
-    margin-bottom: 10rpx;
-
-    .item-l {
-      border: 2rpx solid #EEF0F0;
+}
+
+.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-menu-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.u-tab-view {
+  width: 200rpx;
+  background-color: #f6f6f6;
+}
+
+.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;
+  padding: 16rpx 0;
+}
+
+.u-tab-item-active {
+  position: relative;
+  color: #5f96be;
+  font-size: 30rpx;
+  font-weight: 500;
+  background: #fff;
+}
+
+.u-tab-item-active::before {
+  content: '';
+  position: absolute;
+  border-left: 4px solid #5f96be;
+  height: 52rpx;
+  left: 0;
+  top: 29rpx;
+}
+
+.u-tab-view {
+  height: 100%;
+}
+
+.right-box {
+  background-color: rgb(250, 250, 250);
+}
+
+.page-view {
+  padding: 16rpx;
+}
+
+.class-item,
+.class-item2 {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
+
+.class-item2 {
+  margin-bottom: 0;
+}
+
+.item-title {
+  font-size: 26rpx;
+  text-align: center;
+  color: #5f96be;
+  margin-bottom: 20rpx;
+}
+
+.item-box {
+  display: flex;
+  margin-bottom: 10rpx;
+
+  .item-l {
+    border: 2rpx solid #eef0f0;
+    border-radius: 20rpx;
+    margin-right: 20rpx;
+
+    .l-img {
+      width: 140rpx;
+      height: 130rpx;
       border-radius: 20rpx;
-      margin-right: 20rpx;
-
-      .l-img {
-        width: 140rpx;
-        height: 130rpx;
-        border-radius: 20rpx;
-      }
     }
+  }
 
-    .item-r {
-
-      .p1,
-      .type_p1 {
-        width: 350rpx;
-        font-size: 28rpx;
-        color: #000;
-        margin-bottom: 5rpx;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .type_p1 {
-        width: 480rpx;
-      }
-
-      .p2 {
-        font-size: 24rpx;
-        color: #A4A5AD;
-      }
-
-      .p3 {
-        font-size: 26rpx;
-        color: #D6534D;
-      }
+  .item-r {
+    .p1,
+    .type_p1 {
+      width: 350rpx;
+      font-size: 28rpx;
+      color: #000;
+      margin-bottom: 5rpx;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-  }
 
-  .bottom-box {
-    width: 100%;
-    background-color: #fff;
-    padding: 10rpx 20rpx;
-    height: 100rpx;
-    border-top: 2rpx solid #F7F7F7;
-    box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
-    display: flex;
-    justify-content: space-around;
-    line-height: 100rpx;
-    font-size: 28rpx;
+    .type_p1 {
+      width: 480rpx;
+    }
 
-  }
+    .p2 {
+      font-size: 24rpx;
+      color: #a4a5ad;
+    }
 
-  ::v-deep .u-input--radius.data-v-fdbb9fe6,
-  .u-input--square.data-v-fdbb9fe6 {
-    background-color: #F7F7F7 !important;
-    padding: 40rpx;
-    border-radius: 50rpx;
+    .p3 {
+      font-size: 26rpx;
+      color: #d6534d;
+    }
   }
+}
+
+.bottom-box {
+  width: 100%;
+  background-color: #fff;
+  padding: 10rpx 20rpx;
+  height: 100rpx;
+  border-top: 2rpx solid #f7f7f7;
+  box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-around;
+  line-height: 100rpx;
+  font-size: 28rpx;
+}
+
+::v-deep .u-input--radius.data-v-fdbb9fe6,
+.u-input--square.data-v-fdbb9fe6 {
+  background-color: #f7f7f7 !important;
+  padding: 40rpx;
+  border-radius: 50rpx;
+}
 </style>