zhishifufei_uniapp/pages/special/grade_list.vue

<template>
  
  <BaseContainer class="favorite" :fixedNav="false">
    <NavBarTitle title="我的收藏"   :height="300"/>
    <view v-if="type" ref="tabbar" class="tabbar">
      <view :class="{ on: active === 1 }" @click="tab(1)">资料</view>
      <view :class="{ on: active === 0 }" @click="tab(0)">课程</view>
    </view>
    <view v-if="makeGradeList.length" :class="{ material: active }" class="list">
      <navigator v-for="item in makeGradeList" :key="item.id" :url="item.path">
        <view>
          <image mode="aspectFill" :src="item.image" alt="" />
          <view v-if="!active">{{ type == 1 ? item.types : item.type }}</view>
        </view>
        <view>
          <view>{{ item.title }}</view>
          <template v-if="active">
            <view :class="{ money: item.pay_type }" style="color:#23272E;">
              <template v-if="item.pay_type"> ￥<text >{{item.money}}</text> </template>
              <template v-else> 免费 </template>
            </view>
            <view>
              <view>{{ item.ficti + item.sales }}人已下载</view>
              <view class="button">去下载</view>
            </view>
          </template>
          <template v-else>
            <view v-if="item.label.length">
              <template v-for="(label, index) in item.label">
                <view v-if="index < 2" :key="index">{{ label }}</view>
              </template>
            </view>
            <view>
              <view :class="{ money: item.pay_type }">
                <template v-if="item.pay_type">
                  ￥<text>{{ item.is_pink ? item.pink_money : item.money }}</text>
                </template>
                <template v-else> 免费 </template>
              </view>
              <view v-if="!item.is_light && item.types !== 4">共{{ item.count }}节</view>
            </view>
          </template>
        </view>
      </navigator>
    </view>
    <view v-show="loading" class="loading">
      <text class="fa fa-spinner"></text>
    </view>
    <view v-if="loadend && gradeList.length" class="loaded">已全部加载</view>
    <view v-if="loadend && !gradeList.length">
      <image
        class="nothing"
        :src="getImgPath('/wap/first/zsff/images/no_collection.png')"
        v-if="type"
      />
      <image
        v-else
        class="nothing"
        :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
      />
    </view>
  </BaseContainer>
</template>

<script>
import { getGradeList } from "@/api/special";
import specialType from "@/constants/special-type";

export default {
  data() {
    return {
      navlist: [{ title: "我的课程" }, { title: "我的收藏" }],
      loadend: false,
      loading: false,
      active: 0,
      type: 1,
      gradeList: [],
      min: 2,
      page: 1,
      limit: 10,
      count: 0,
    };
  },
  computed: {
    makeGradeList() {
      return this.gradeList.map((value) => {
        if (this.type) {
          value.types = specialType[value.type];
        }
        if ("is_light" in value) {
          if (value.is_light) {
            value.path = `/pages/special/single_details?id=${value.s_id}`;
          } else {
            value.path = `/pages/special/details?id=${value.s_id}`;
          }
        } else {
          value.path = `/pages/special/data_details?id=${value.id}`;
        }
        return value;
      });
    },
  },
  watch: {
    active() {
      this.$set(this, "gradeList", []);
      this.page = 1;
      this.loadend = false;
      this.getGradeList();
    },
  },
  onLoad({ type = 1 }) {
    this.type = type;
    if (type == 1) {
      this.active = 1;
    }
    this.getGradeList();
  },
  onReachBottom() {
    this.getGradeList();
  },
  methods: {
    // 获取课程
    async getGradeList() {
      if (this.loading || this.loadend) return;
      this.loading = true;

      uni.showLoading({ mask: true });
      try {
        const { data } = await getGradeList(this.active, this.page, this.limit);
        const { list, page } = data;
        this.gradeList.push.apply(this.gradeList, list);
        this.loadend = list.length < this.limit;
        this.page = page;
        this.$set(this, "gradeList", this.gradeList);
        uni.hideLoading();
      } catch (err) {}

      this.loading = false;
      uni.hideLoading();
    },
    tab(active) {
      if (this.loading) return;
      this.active = active;
      this.gradeList = [];
      this.page = 1;
      this.loadend = false;
      this.getGradeList();
    },
  },
};
</script>

<style lang="scss">
@import "@/static/style/favorite.scss";
page{
  background: #F7F8F9;

}

</style>

<style scoped lang="scss">
.favorite .tabbar {
    position: absolute;
    left: 0;
    right: 0;
    width: 686rpx;
    margin: 0 auto;
    margin-top: calc(100rpx + var(--safe-top));
    border-radius: 24rpx;
    z-index: 999;
    background: none;
    border-bottom:none;
}

.list {
  // padding-top: calc(88rpx + var(--safe-top) + 90rpx) !important;
    position: absolute;
    left: 0;
    right: 0;
    width: 686rpx;
    margin: 0 auto;
    margin-top: calc(230rpx + var(--safe-top));
    border-radius: 24rpx;
    z-index: 999;
    background: #ffffff;
}
.money{
  width: 134rpx;
height: 48rpx;
font-size: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #23272E;
line-height: 48rpx;
}

.mask .box {
  position: relative;
}

.mask .box .iconfont {
  color: #ffffff;
  font-size: 40rpx;
  left: 50%;
  margin-left: -20rpx;
  bottom: 30rpx;
}

.public_list .item .text {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

.loading {
  font-size: 40rpx;
  text-align: center;
  color: #999999;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 414rpx;
  height: 336rpx;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.button{
  width: 120rpx;
height: 56rpx;
background: #1D8DFF;
border-radius: 28rpx;
text-align: center;
line-height: 56rpx;
color: #ffffff;
}
</style>