chelvc-custom/src/pageMerchant/storeModule/shopManage.vue

<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="{
            color: '#000',
            fontSize: '28rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }" 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>
        <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>
        </view>
      </scroll-view>
      <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="" 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.children" :key="idx">
              <view class="item-l">
                <img class="l-img" src="@/static/QR57a.jpg" alt="" />
              </view>
              <view class="item-r">
                <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>
        </view>
      </scroll-view>
    </view>

    <!-- 已下架 -->
    <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">
        <view class="page-view">
          <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="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>
        </view>
      </scroll-view>
    </view>
    <view class="bottom-box" v-if="delete_type == 1">
      <p @click="upStore">批量上架</p>
      <p @click="deleteShop">批量删除</p>
    </view>
  </view>
</template>

<script>
  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:[]
      };
    },
    /**
     * 获取一个目标元素的高度
     * @elClass 元素的类名
     * @dataVal 储存高度的对象
     */
    onReady() {
      this.getMenuItemTop();
    },
    watch: {
      delete_type(newValue) {
        this.scrollRightTop = 0;
        this.current = 0;
      },
    },
    computed: {
      merchantId() {
        return this.$store.state.data.merchantInfo.merchant.id
      }
    },
    created() {

    },
    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 {
      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;
  }

  .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;
      }
    }

    .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;
  }

  .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>