商铺

src/api/client/goods.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request';
+
+/**
+ * 获取当前位置
+ * @returns
+ */
+export function getGoodsList(data) {
+  return request({
+    url: '/maintain/merchant/goodsList',
+    method: 'post',
+    data: data,
+    headers: {
+      'content-type': 'application/json',
+    },
+  });
+}
+// 上架商品
+
+export function upGoods(goodsIds) {
+  return request({
+    url: `/maintain/merchant/list-goods/${goodsIds}`,
+    method: 'PUT',
+    data: data,
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/pageMerchant/storeModule/shopManage.vue

@@ -2,85 +2,69 @@
   <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)"
-        >
+      <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-into-view="itemId" 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="" style="margin-top: 40rpx;" v-if="!tabbar.length">
+            <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
+              icon="https://cdn.uviewui.com/uview/demo/empty/search.png" v-if="!tabbar.length&&search.length!=0">
+
+            </u-empty>
+            <u-empty mode="list" text="暂无下架商品" iconColor="#dae2ef" width="100" height="100"
+              icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!tabbar.length">
+
+            </u-empty>
+          </view>
+
+
+          <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
             <view class="item-title">
               <text>{{ item.name }}</text>
             </view>
-            <view class="item-box" v-for="itm of item.foods" :key="idx">
+            <view class="item-box" v-for="itm of item.children" :key="idx">
               <view class="item-l">
                 <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">{{ itm.name }}</p>
+                <p class="p2 ws2 ">{{itm.description}}</p>
+                <view class=" flex-c">
+                  <view class="mar-right-20 p3">
+                    ￥{{itm.specialPrice}}起
+                  </view>
+                  <view class="gray-color originalPrice">
+                    ￥{{itm.originalPrice}}
+                  </view>
+                </view>
               </view>
             </view>
           </view>
@@ -90,32 +74,37 @@
 
     <!-- 已下架 -->
     <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>
+          <view class="" style="margin-top: 40rpx;" v-if="!tabbar.length">
+            <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
+              icon="https://cdn.uviewui.com/uview/demo/empty/search.png" v-if="!tabbar.length&&search.length!=0">
+
+            </u-empty>
+            <u-empty mode="list" text="暂无下架商品" iconColor="#dae2ef" width="100" height="100"
+              icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!tabbar.length">
+
+            </u-empty>
+          </view>
+          <view class="class-item2" :id="'item' + index" v-for="(item, index) in rightTabbar" :key="index">
+            <view class="item-box" >
+              <u-checkbox-group >
+                <u-checkbox v-model="item.checked" shape="circle" @change="checkeChange(item)"></u-checkbox>
               </u-checkbox-group>
               <view class="item-l">
                 <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="p1">{{ item.name }}</p>
+                <p class="p2 ws2 ">{{item.description}}</p>
+                <view class=" flex-c">
+                  <view class="mar-right-20 p3">
+                    ￥{{item.specialPrice}}起
+                  </view>
+                  <view class="gray-color originalPrice">
+                    ￥{{item.originalPrice}}
+                  </view>
+                </view>
               </view>
             </view>
           </view>
@@ -123,545 +112,631 @@
       </scroll-view>
     </view>
     <view class="bottom-box" v-if="delete_type == 1">
-      <p>批量上架</p>
-      <p>批量删除</p>
+      <p @click="upStore">批量上架</p>
+      <p @click="deleteShop">批量删除</p>
     </view>
   </view>
 </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: [
-        {
-          name: '在售中',
-        },
-        {
-          name: '已下架',
-        },
-      ],
-      checked: false,
-      search: '',
-      delete_type: false,
-    };
-  },
-  /**
-   * 获取一个目标元素的高度
-   * @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();
-      });
-    },
-
-    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.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);
-            }
-          });
-      });
+  import {
+    getGoodsList,
+    upGoods
+  } from '@/api/client/goods.js'
+  export default {
+    data() {
+      return {
+        checkboxValue1:[],
+        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: [],
+        tabbar1: [{
+            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,
+        rightTabbar:[]
+      };
     },
     /**
-     * 设置左边菜单的滚动状态
-     * @index 传入的 ID
+     * 获取一个目标元素的高度
+     * @elClass 元素的类名
+     * @dataVal 储存高度的对象
      */
-    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;
+    onReady() {
+      this.getMenuItemTop();
     },
-    /**
-     * 点击左边的栏目切换
-     * @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);
-      });
+    watch: {
+      delete_type(newValue) {
+        this.scrollRightTop = 0;
+        this.current = 0;
+      },
     },
-    /**
-     * 右边菜单滚动
-     * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-     */
-    async rightScroll(e) {
-      this.oldScrollTop = e.detail.scrollTop;
-      if (this.arr.length == 0) {
-        await this.getMenuItemTop();
+    computed: {
+      merchantId() {
+        return this.$store.state.data.merchantInfo.merchant.id
       }
-      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);
     },
+    created() {
 
-    // 搜索按钮
-    handlerSearchBtn() {
-      console.log('search', this.search);
     },
-    // 切换tab
-    handlerChangeTab(e) {
-      if (e.index == 1) {
-        this.delete_type = true;
-      } else {
-        this.delete_type = false;
-      }
+    onShow() {
+      this.getGoodsList()
+    },
+    methods: {
+      checkeChange(item){
+        console.log(item.checked);
+        item.checked = !item.checked
+
+      },
+      deleteShop() {
+
+      },
+      async upStore() {
+      console.log(this.rightTabbar)
+        const res = await upGoods()
+      },
+
+      async getGoodsList() {
+        const res = await getGoodsList({
+          merchantId: this.merchantId,
+          size: 100,
+          goodsName: this.search,
+          status: this.delete_type ? 'OFFLINE' : 'ONLINE'
+        })
+        console.log(res);
+        if (res.code == 'OK' && res.data.categories && res.data.goodsList) {
+          res.data.categories.forEach(obj => {
+            res.data.goodsList.forEach(item => {
+              if (obj.id == item.categoryId) {
+                obj.children.push(item )
+              }
+
+            })
+          })
+
+          this.tabbar = res.data.categories
+            res.data.categories.forEach(item=>{
+            item.children.forEach(obj=>{
+              this.rightTabbar.push({checked:false,...obj})
+            })
+          })
+
+        } else {
+          this.tabbar = []
+        }
+
+      },
+      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 => {
+              // 如果节点尚未生成，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.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) {
+        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) {
+        this.$nextTick(() => {
+          this.itemId = 'item' + 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);
+      },
+
+      // 搜索按钮
+      handlerSearchBtn() {
+        console.log('search', this.search);
+        this.getGoodsList()
+      },
+      // 切换tab
+      handlerChangeTab(e) {
+        if (e.index == 1) {
+          this.delete_type = true;
+        } else {
+          this.delete_type = false;
+        }
+        // this.getGoodsList()
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.top-box {
-  padding: 0 0 20rpx;
-  width: 100%;
-
-  .switch-box {
+  .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;
+      }
+    }
   }
 
-  .search-box {
+  .u-wrap {
+    /* #ifdef H5 */
+    height: calc(100vh - var(--window-top));
+    /* #endif */
     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;
-    }
+    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-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;
-    }
+  .u-search-box {
+    padding: 18rpx 30rpx;
   }
 
-  .item-r {
-    .p1,
-    .type_p1 {
-      width: 350rpx;
-      font-size: 28rpx;
-      color: #000;
-      margin-bottom: 5rpx;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  .u-menu-wrap {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
 
-    .type_p1 {
-      width: 480rpx;
-    }
+  .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;
+  }
 
-    .p2 {
-      font-size: 24rpx;
-      color: #a4a5ad;
+  .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;
+      }
     }
 
-    .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;
+      }
+
+      .type_p1 {
+        width: 480rpx;
+      }
+
+      .p2 {
+        font-size: 24rpx;
+        color: #a4a5ad;
+      }
+
+      .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;
-}
+
+  .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;
+  }
+
+  .ws2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; //两行
+    -webkit-box-orient: vertical;
+    height: 70rpx;
+  }
+
+  .flex-c {
+    display: flex;
+    align-items: center;
+  }
+
+  .gray-color {
+    color: #a4a5ad
+  }
+
+  .mar-right-20 {
+    margin-right: 20rpx;
+
+  }
+
+  .originalPrice {
+    text-decoration: line-through
+  }
 </style>

src/pages/login/phoneLogin.vue

@@ -101,6 +101,7 @@ export default {
       // this.loading = true
       this.$store.dispatch('LoginBySmsCode', data)
         .then(() => {
+          debugger
           // this.$store.dispatch('SwitchIdentity','CUSTOMER')
           this.$Router.pushTab('/pages/client/tabBar/home/index');
           // this.loading = false;
@@ -108,6 +109,10 @@ export default {
           uni.$u.toast('登录成功');
         })
         .catch(() => {
+
+
+
+
           // this.loading = false;
           uni.$u.toast('登录失败');
         });