uni-xiudoyou/src/pages/shop/classify.vue

<!-- 管理分类 -->
<template>
  <view class="classify">
    <Header :title="title" />
    <view class="addClass" @tap="addClass">
      <image src="../../static/images/addicon.png" class="addicon"></image>
    </view>
    <view style="height: 94upx;"></view>
    <view class="content">
      <view class="item-warp" v-for="item in lineList" :key="item.id">
        <view class="warp-top">
          <view class="bar"
            >分组名称：<text class="name">{{ item.name }}</text></view
          >
          <view class="bar"
            >分组标识：<text class="name">{{ item.code }}</text></view
          >
          <view class="bar"
            >一级分类：<text class="name">{{
              item.typeName ? item.typeName : 'none'
            }}</text></view
          >
          <view class="bar"
            >所属店铺：<text class="name">{{
              item.shopName ? item.shopName : 'none'
            }}</text></view
          >
        </view>
        <view class="warp-bottom">
          <view class="btn edtil" @tap="compile(item.id)">编辑</view>
          <view class="btn delet" @tap="delet(item.id)">删除</view>
        </view>
      </view>
    </view>

    <rf-loading v-if="loading"></rf-loading>
  </view>
</template>

<script>
import Header from '../components/header';
export default {
  name: 'classify',
  components: { Header },
  data() {
    //这里存放数据
    return {
      loading: true,
      title: '管理自定义分类',
      storeId: uni.getStorageSync('shopid'),
      lineList: [],
      gradeList: [],
    };
  },

     
  onLoad() {
    this.getCustomList();
  },
  //方法集合
  methods: {
    addClass() {
      this.$mRouter.push({ route: '/pages/shop/editclassify' });
    },
    // 自定义分类列表
    async getCustomList() {
      this.loading = true;
      await this.$http
        .get('/goods/getCustomGroupList', {
          shopId: this.storeId,
        })
        .then(async (res) => {
          if (res.code === 200) {
            this.lineList = res.data.customGroupList;
            this.loading = false;
          }
        });
    },

    // 编辑
    compile(id) {
      console.log(id);
    },
    // 删除
    delet(id) {
      console.log(id);
    },
  },
};
</script>
<style lang='scss' scoped>
.classify {
  .addClass {
    position: fixed;
    top: 24.5upx;
    right: 33upx;
    width: 48upx;
    height: 48upx;
    z-index: 100;
    .addicon {
      width: 48upx;
      height: 48upx;
    }
  }
  .content {
    width: 100%;
    padding: 24upx 32upx 100upx;
    .item-warp {
      width: 100%;
      padding: 28upx 31upx 0;
      border-radius: 10upx;
      background-color: #ffffff;
      .warp-top {
        padding-bottom: 30upx;
        border-bottom: 1px solid #e7e7e7;
        .bar {
          color: #7a7c7c;
          font-size: 28upx;
          margin-top: 10upx;
          &:first-child {
            margin-top: 0;
          }
          .name {
            color: #202020;
            margin-left: 5upx;
          }
        }
      }
      .warp-bottom {
        display: flex;
        padding: 17upx 0;
        .btn {
          width: 158upx;
          height: 58upx;
          text-align: center;
          line-height: 58upx;
          border: 1px solid #e2e2e2;
          color: #7a7c7c;
          margin-left: 275upx;
        }
        .delet {
          color: #ffffff;
          border: none;
          margin-left: 23upx;
          background-color: #ff6a5e;
        }
      }
    }
  }
}
</style>