yicangzongtai_app_240321/pages/workbench/goods/classify.vue

<template>
  <view class="container-classify">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="main">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="label">{{item.name}}</view>
        <view class="tools">
          <view class="btn edit" @click="edit(item)">
            <view class="iconfont3 icon">&#xe63a;</view>编辑
          </view>
          <view class="btn del" @click="del(item)">
            <view class="iconfont3 icon">&#xe8b6;</view>删除
          </view>
        </view>
      </view>
      <noData v-if="list.length<=0"></noData>
    </view>
    <view class="footer">
      <view class="btn" @click="addClassify">新增分类</view>
    </view>
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue";
  export default {
    components: {
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '分类管理',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        list: []
      }
    },
    onLoad() {},
    onShow() {
      this.getClassify()
    },
    methods: {
      // 获取店铺信息
      getShopInfo() {
        this.$http.get('/yxt/shop/my-shop', {
          union_business: true
        }).then(res => {
          if (res.code == 200 && res.data) {
            
          }
        })
      },
      // 获取商品分类
      getClassify() {
        this.$http.get('/offlinetype/goods/my_list', {
          isGoods: 1
        }).then(res => {
          if (res.code == 200) {
            if (res.list.length > 0) {
              this.list = res.list
            }
          }
        })
      },
      addClassify() {
        uni.navigateTo({
          url: `/pages/workbench/goods/addClassify`
        })
      },
      edit(item) {
        uni.navigateTo({
          url: `/pages/workbench/goods/addClassify?id=${item.id}&label=${item.name}`
        })
      },
      del(item) {
        uni.showModal({
          title: '提示',
          content: '确定删除此分类?',
          success: (res) => {
            if (res.confirm) {
              this.$http.delete(`/offlinetype/goods/delete/${item.id}`).then(res => {
                if (res.code == 200) {
                  this.$mUtil.toast('删除成功')
                  this.getClassify()
                }
              })
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-classify {
    .main {
      padding: 0 60rpx 200rpx;

      .item {
        width: 100%;
        height: 95rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #1a1a1a;
        border-bottom: 1rpx solid #f1f1f1;
        
          
        .label {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .tools {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #FA6138;
          flex-shrink: 0;

          .btn {
            display: flex;
            align-items: center;

            .icon {
              margin-right: 8rpx;
              font-size: 30rpx;
            }
          }

          .del {
            color: #FF6600;
            margin-left: 30rpx;
          }
        }
      }
    }

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

      .btn {
        width: 100%;
        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>