zhishifufei_uniapp/pages/topic/certificate_list.vue

<template>
  
  <BaseContainer class="honor-list-page" :fixedNav="false">
    <NavBarTitle title="我的证书" :height="200"/>
    <view class="list" v-if="certificateList.length">
      <view class="item" v-for="item in certificateList" :key="item.id">
        <view class="name">
          {{ item.content.title }}
        </view>
        <view class="desc">
          <view v-if="item.obtain === 1">您已学完关联的所有课程/专栏</view>
          <view v-else class="attr">
            <view class="cell">
              题目数
              <view>{{ item.content.item_number }}</view>
            </view>
            <view class="cell">
              错题数
              <view>{{ item.content.wrong_question }}</view>
            </view>
            <view class="cell">
              本次用时
              <view>{{ item.content.duration | formatTime }}</view>
            </view>
          </view>
          <navigator
            :url="`/pages/topic/certificate_detail?obtain=${item.obtain}&id=${item.id}`"
            >查看证书</navigator
          >
        </view>
      </view>
    </view>
    <image
      v-else-if="page > 1 && !loading"
      mode="aspectFit"
      class="empty"
      :src="getImgPath('/wap/first/zsff/images/no_certificate.png')"
    />
  </BaseContainer>
</template>

<script>
import { getCertificateList } from "@/api/topic";

export default {
  filters: {
    formatTime(time) {
      let hour = Math.floor(time / 3600000);
      let minute = Math.floor((time - hour * 3600000) / 60000);
      let second = Math.floor((time - hour * 3600000 - minute * 60000) / 1000);

      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }

      return hour + ":" + minute + ":" + second;
    },
  },
  data() {
    return {
      page: 1,
      limit: 15,
      loading: false,
      finished: false,
      certificateList: [],
    };
  },
  onLoad() {
    this.getCertificateList();
  },
  onReachBottom() {
    this.getCertificateList();
  },
  methods: {
    async getCertificateList() {
      if (this.loading || this.finished) return;
      this.loading = true;
      uni.showLoading({ mask: true });

      try {
        const { data: certificateList } = await getCertificateList({
          page: this.page++,
          limit: this.limit,
        });
        uni.hideLoading();

        this.certificateList = this.certificateList.concat(certificateList);
        this.loading = false;
        this.finished = this.limit > certificateList.length;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
    },
  },
};
</script>
<style>
   page{
      background: #F7F8F9;
    }
</style>
<style scoped lang="scss">


.honor-list-page .list {
  padding: 20rpx 30rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: calc(128rpx + var(--safe-top));
    border-radius: 24rpx;
    z-index: 999;
}

.honor-list-page .item {
  padding-right: 30rpx;
  padding-left: 30rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  height: 160rpx;
}

.honor-list-page .item ~ .item {
  margin-top: 20rpx;
}

.honor-list-page .item .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 30rpx;
  font-size: 28rpx;
  color: #23272E;
}

.honor-list-page .item .name image {
  width: 25rpx;
  margin-right: 5rpx;
  pointer-events: none;
  -webkit-touch-callout: none;
}

.honor-list-page .item .desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #9e9e9e;
}

.honor-list-page .item .attr {
  display: flex;
  margin-left: -30rpx;
  font-size: 24rpx;
  text-align: center;
  color: #999999;
}

.honor-list-page .item .cell {
  position: relative;
  padding-right: 35rpx;
  padding-left: 35rpx;
}

.honor-list-page .item .cell::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 40rpx;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  transform: translateY(-50%);
}

.honor-list-page .item .cell:first-child::before {
  display: none;
}

.honor-list-page .item navigator {
  height: 50rpx;
  padding-right: 27rpx;
  padding-left: 27rpx;
  border: 1px solid #2c8eff;
  border-radius: 25rpx;
  font-size: 24rpx;
  line-height: 50rpx;
  text-align: center;
  color: #2c8eff;
}

.empty {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 414rpx;
  height: 414rpx;
  transform: translate(-50%, -50%);
  -webkit-touch-callout: none;
  pointer-events: none;
}
</style>