front-end/hdApp/src/pagesStatistics/trainingClass.vue

<template>
  <view class="shop-page">
    <scroll-view
      scroll-y
      class="shop-list"
    >
    <block v-if="!$util.isEmpty(shopList)">
      <view
        class="shop-item"
        v-for="(item, index) in shopList"
        :key="index"
      >
        <image
          class="avatar"
          :src="item.cover"
          alt="商品图"
        />
        <view class="info">
          <view class="info-name">{{ item.name }}</view>
          <view class="info-address">
            ￥{{ item.tuition }}
          </view>
        </view>
        <view :class="['edit']">
          <text
            class="iconfont iconbianji"
            @click="editItem(item.id)"
          > </text>
          <text
            class="iconfont iconshanchu1"
            @click="delItem(item.id)"
          > </text>
        </view>
      </view>
      </block>
      <block v-else>
        <AppWrapperEmpty
            title="暂无数据"
            :is-empty="$util.isEmpty(shopList)"
          />
      </block>
    </scroll-view>
    <view class="under-bar">
      <button
        :class="['admin-button-com', 'middle', 'blue']"
        @click="addItem"
      >
        添加
      </button>
    </view>
  </view>
</template>
<script>
import { getPxClassDataApi, pxClassDel } from "@/api/product/index";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
export default {
  components: { AppWrapperEmpty },
  data () {
    return {
      shopList: []
    };
  },
  onPullDownRefresh() {
    this.getData().then(res => {
      uni.stopPullDownRefresh();
    })
  },
  methods: {
    init() {
      this.getData()
    },
    getData () {
      return getPxClassDataApi().then(res => {
        console.log(res)
        this.shopList = res.data.list
      }).catch(err => { console.log(err) })
    },
    editItem (id) {
      this.pageTo({
        url: '/pagesStatistics/trainingClassEdit?id=' + id,
      })
    },
    addItem () {
      this.pageTo({
        url: '/pagesStatistics/trainingClassEdit',
      })
    },
    delItem (id) {
      let that = this
      uni.showModal({
        content: '确定要删除吗?',
        success: function (res) {
          if (res.confirm) {
            pxClassDel({ id }).then(res => {
            	that.shopList = [];
              uni.removeStorageSync('pxClassInfoList');
              that.getData()
            }).catch(err => { console.log(err) })
          } else if (res.cancel) {

          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.shop-page {
  // height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9fbfc;
  .under-bar {
    position: fixed;
    bottom: 0;
    padding: 0 20upx;
    display: flex;

    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100upx;
    background-color: #fff;
  }
  .shop-list {
    margin-top: 20upx;
    flex: 1;
    padding-bottom: 100upx;
    .shop-item {
      margin-bottom: 20upx;
      padding: 30upx;
      display: flex;
      align-items: center;
      box-shadow: 0upx 1px 0upx 0upx #eeeeee;
      background-color: #fff;
      .avatar {
        width: 120upx;
        height: 120upx;
        image {
          width: 100%;
          height: 100%;
          background-color: #eee;
        }
      }
      .info {
        flex: 1;
        margin: 0 20upx;
        .info-name {
          font-size: 28upx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .info-address {
          margin-top: 15upx;
          font-size: 30upx;
          font-weight: 600;
          color: #333333;
        }
      }
      .edit {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-shrink: 0;
        .iconfont {
          margin: 0 20upx;
        }
        .iconshoukuanma1 {
          font-size: 40upx;
          color: $mainColor;
        }
        .iconbianji {
          font-size: 40upx;
        }
        .iconshanchu1 {
          font-size: 40upx;
        }
      }
    }
  }
}
</style>