zhishifufei_uniapp/pages/special/grade_special.vue

<template>
  <BaseContainer class="favorite" :fixedNav="false">
    <NavBarTitle title="我的课程" :height="200"/>
      <view v-if="gradeList.length" class="list">
        <navigator  hover-class="none" v-for="item of gradeList" :key="item.id" :url="item.path" >
          <view>
            <image mode="aspectFill" :src="item.image" />
            <view>{{ item.typeName }}</view>
          </view>
          <view>
            <view>{{ item.title }}</view>
            <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>
          </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_data_available.png')" />
    </view>
  </BaseContainer>
</template>

<script>
import { getMyGradeList } from "@/api/special";
export default {
  data() {
    return {
      site_name: "",
      navlist: [{ title: "我的课程" }, { title: "我的收藏" }],
      loadend: false,
      loading: false,
      active: 0,
      gradeList: [],
      min: 2,
      page: 1,
      limit: 10,
      count: 0,
      codeUrl: "",
      loginShow: false,
      isfollow: false,
      url: "/pages/login/phone_check",
      tabs: [
        {
          name: "我的课程",
          value: 1,
        },
      ],
    };
  },
  onLoad() {
    this.getGradeList();
  },
  onReachBottom() {
    this.getGradeList();
  },
  methods: {
    // 获取课程
    async getGradeList() {
      if (this.loading || this.loaded) return;
      uni.showLoading({ mask: true });
      this.loading = true;
      try {
        const { data } = await getMyGradeList({
          page: this.page,
          limit: this.limit,
        });

        const list = data.list;

        list.forEach((item) => {
          let path = "/pages/special/details";
          let typeName = "图文";
          if (item.types === 2 || item.light_type === 2) {
            typeName = "音频";
          } else if (item.types === 3 || item.light_type === 3) {
            typeName = "视频";
          } else if (item.types === 4) {
            typeName = "直播";
          } else if (item.types === 5) {
            typeName = "专栏";
          }
          if (item.light_type) {
            path = "/pages/special/single_details";
          }
          item.path = path + "?id=" + item.s_id;
          item.typeName = typeName;
        });
        this.gradeList = this.gradeList.concat(list);
        this.loadend = this.limit > list.length;
        this.page = data.page;
        this.loading = false;
        uni.hideLoading();
      } catch (err) {
        this.loading = false;
        uni.hideLoading();
        this.$util.showMsg(err.message);
      }
    },
    // 切换
    tab(value) {
      if (this.loading) return;
      this.active = value;
      this.gradeList = [];
      this.page = 1;
      this.loadend = false;
      this.getGradeList();
    },
  },
};
</script>
<style>
    page{
      background: #F7F8F9;
    }
</style>
<style lang="scss">
@import "@/static/style/favorite.scss";

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}
.list {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: calc(128rpx + var(--safe-top));
  width: 686rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  z-index: 999;
}
</style>