yicangzongtai_app_240321/pages/workbench/goods/index.vue

<template>
  <view class="container-shop">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="top-nav" :style="{'top': stickyHeight + 'px'}">
      <view class="tabs">
        <view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabs" :key="item.i"
          @click="changeTab(index)">
          {{item.label}}
        </view>
      </view>
      <view class="popup">
        <view class="item" @click="classifyPopup = true">
          <view class="text">{{typeId === '' ? '全部分类' : classifyList[classsIndex].name}}</view>
          <view class="iconfont3 icon">&#xe65e;</view>
        </view>
        <view class="item" @click="typePopup = true">
          <view class="text">{{type === '' ? '全部类型' : typeList[typeIndex].label}}</view>
          <view class="iconfont3 icon">&#xe65e;</view>
        </view>
      </view>
    </view>
    <view :style="{'height': headerHeight + 'px'}"></view>
    <view class="main">
      <template v-if="goodsList && goodsList.length">
        <view class="goodsitem" v-for="item in goodsList" :key="item.id">
          <view class="goods-title">
            <view class="goods-name">{{item.name}}({{item.type == 0 ? '商品' : '服务'}})</view>
            <view class="time">更新时间 {{item.update_time}}</view>
          </view>
          <shop-goods :goodsDetail="item"></shop-goods>
          <view class="goods-tools">
            <view class="btn" @click="isUp(item)">{{item.is_up == 1 ? '下架' : '上架'}}</view>
            <template v-if="item.is_up == 0">
              <view class="btn edit" @click="edit(item)">编辑</view>
              <view class="btn del" @click="del(item)">
                <view class="iconfont3 icon">&#xe8b6;</view>删除
              </view>
            </template>
          </view>
        </view>
        <u-loadmore :status="status" />
      </template>
      <noData v-if="goodsList.length<=0"></noData>
    </view>
    <view class="footer">
      <view class="online-btn btn" @click="classifyMent">分类管理</view>
      <view class="btn" @click="releaseGoods">发布商品</view>
    </view>
    <u-picker mode="selector" v-model="classifyPopup" :range="classifyList" range-key="name"
      :default-selector="[classsIndex]" @confirm="confirmClassifySelect"></u-picker>
    <u-picker mode="selector" v-model="typePopup" :range="typeList" range-key="label" :default-selector="[typeIndex]"
      @confirm="confirmTypeSelect"></u-picker>
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue"
  import shopGoods from "@/components/shop-goods.vue";
  export default {
    components: {
      noData,
      shopGoods
    },
    data() {
      return {
        config: {
          back: true,
          title: '商品管理',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        headerHeight: 0,
        stickyHeight: 0,
        tabs: [{
            label: '已上架',
            i: 0,
          },
          {
            label: '已下架',
            i: 1,
          }
        ],
        currentTab: 0,
        classifyList: [],
        typeId: '',
        type: '',
        classifyPopup: false,
        typePopup: false,
        classsIndex: 0,
        typeIndex: 0,
        typeList: [{
            label: '全部类型',
            value: 0,
            type: ''
          },
          {
            label: '商品',
            value: 1,
            type: 0
          },
          {
            label: '服务',
            value: 2,
            type: 1
          }
        ],
        goodsList: [],
        params: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        currPage: 1,
        refresh: false,
        status: 'loadmore',
      }
    },
    onShow() {
      this.getGoodsClassify()
      this.getGoodsList(true)
      this.$nextTick(() => {
        let sysInfo = uni.getSystemInfoSync()
        this.$u.getRect('.top-nav').then(res => {
          this.headerHeight = res.height
          this.stickyHeight = sysInfo.statusBarHeight + 44
        })
      })
    },
    onPullDownRefresh() {
      this.getGoodsList(true)
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onReachBottom() {
      if (this.currPage == this.totalPage) {
        return this.status = 'nomore';
      } else {
        this.params.page++
        this.getGoodsList(false)
      }
    },
    methods: {
      // 获取店铺信息
      getShopInfo() {
        this.$http.get('/yxt/shop/my-shop', {
          union_business: true
        }).then(res => {
          if (res.code == 200 && res.data) {
          }
        })
      },
      // 获取商品分类
      getGoodsClassify() {
        this.$http.get('/offlinetype/goods/my_list', {
          isGoods: 1
        }).then(res => {
          if (res.code == 200) {
            if (res.list.length > 0) {
              this.classifyList = [{
                id: '',
                name: '全部分类'
              }, ...res.list]
            }
          }
        })
      },
      // 获取商品
      getGoodsList(refresh) {
        this.params.page = refresh ? 1 : this.params.page
        this.$http.get('/offline/goods/my_page', {
          isUp: this.currentTab == 0 ? 1 : 0,
          type: this.type,
          typeId: this.typeId,
          isGoods: 1,
          ...this.params
        }).then(res => {
          if (res.code == 200) {
            if (this.params.page == 1) this.goodsList = []
            this.goodsList = [...this.goodsList, ...res.page.list]
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage
            if (this.currPage == this.totalPage) this.status = 'nomore';
          }
        })
      },
      changeTab(i) {
        if (this.currentTab == i) {
          return false
        }
        this.currentTab = i
        this.getGoodsList(true)
      },
      confirmClassifySelect(e) {
        this.classsIndex = e[0]
        this.typeId = this.classifyList[e[0]].id
        this.getGoodsList(true)
      },
      confirmTypeSelect(e) {
        this.typeIndex = e[0]
        this.type = this.typeList[e[0]].type
        this.getGoodsList(true)
      },
      isUp(item) {
        this.$http.put(`/offline/goods/upOrOffShelf/${item.id}`).then(res => {
          if (res.code == 200) {
            this.$mUtil.toast(item.is_up == 1 ? '下架成功' : '上架成功')
            this.getGoodsList(true)
          }
        })
      },
      edit(item) {
        uni.navigateTo({
          url: `/pages/workbench/goods/release?goodsId=${item.id}`
        })
      },
      del(item) {
        uni.showModal({
          title: '提示',
          content: '确定删除此商品?',
          success: (res) => {
            if (res.confirm) {
              this.$http.delete(`/offline/goods/delete/${item.id}`).then(res => {
                if (res.code == 200) {
                  this.$mUtil.toast('删除成功')
                  this.getGoodsList(true)
                }
              })
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      classifyMent() {
        uni.navigateTo({
          url: `/pages/workbench/goods/classify`
        })
      },
      releaseGoods() {
        uni.navigateTo({
          url: `/pages/workbench/goods/release`
        })
      }
    }
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  .container-shop {
    .top-nav {
      position: fixed;
      width: 100%;
      z-index: 9;
      background-color: #fff;

      .tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 76rpx;
        padding: 0 198rpx;
        border: 1rpx solid #f2f2f2;

        .tab {
          position: relative;
          height: 100%;
          line-height: 76rpx;
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #1a1a1a;
        }

        .activeTab {
          color: #FA6138;

          &::after {
            display: block;
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 4rpx;
            background: #FA6138;
            border-radius: 2rpx;
            z-index: 1;
          }
        }
      }

      .popup {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;

        .item {
          display: flex;
          align-items: center;
          margin-right: 70rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          color: #1a1a1a;
          ;

          .icon {
            font-size: 24rpx;
            margin-left: 8rpx;
            color: #333333;
          }
        }
      }
    }
    
    .main {
      padding-top: 20rpx;
      padding-bottom: 200rpx;
    }

    .goodsitem {
      height: 383rpx;
      margin: 0 30rpx 30rpx;
      padding: 0 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);

      .goods-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 92rpx;
        border-bottom: 1rpx solid #ededed;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #1a1a1a;

        .goods-name {
          flex: 1;
          width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .time {
          font-size: 24rpx;
          color: #808080;
          flex-shrink: 0;
        }
      }

      /deep/ .goods {
        border: none;
        padding: 30rpx 0;
        margin-bottom: 0;
      }

      .goods-tools {
        display: flex;
        justify-content: flex-end;

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150rpx;
          height: 70rpx;
          color: #fff;
          text-align: center;
          background: #ff6600;
          border-radius: 35rpx;
        }

        .edit {
          margin-left: 20rpx;
          background: #FA6138;
        }

        .del {
          margin-left: 20rpx;
          background: #DB1313;
        }
      }
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      z-index: 9;

      .btn {
        width: 298rpx;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #3775F6;
        border-radius: 44rpx;
        background-color: #FA6138;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }

      .online-btn {
        color: #FA6138;
        border: 1rpx solid #3775F6;
        background-color: #e7eefc;
      }
    }
  }
</style>