saas_miniprogram/pages2/wd/stuff.vue

<template>
  <view>
    <nav-logo title="我的资料"></nav-logo>
    <view v-if="goodsList.length" class="my_courses">
      <view v-for="(item, index) in goodsList" :key="index" class="course_item">
        <view class="c_downs">
          <view class="lefts">
            <image
              class="lefet_img"
              :src="$method.splitImgHost(item.coverUrl, true)"
              mode=""
            ></image>
          </view>
          <view class="rights">
            <view class="learn_progress">
              <view class="progress_up">
                <view class="cou_titles line2">{{ item.goodsName }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="course_item_info" v-if="item.goodsType !== 6">
          <view>
            <text>商品有效期：</text>
            <template v-if="item.validityEndTime">
              <text
                :class="{
                  'line-through':
                    sysTime <= item.validityStartTime ||
                    sysTime >= item.validityEndTime,
                }"
              >
                {{ $method.formDate(item.validityStartTime, "yyyy/mm/dd") }}至{{
                  $method.formDate(item.validityEndTime, "yyyy/mm/dd")
                }}</text
              >
            </template>
            <text v-else>——</text>
          </view>
        </view>
        <view class="study_btns">
          <view @click="studyIn(item)" class="exam_word intos">进入学习</view>
        </view>
      </view>
    </view>
    <view v-else class="no_datas">
      <image class="courses" src="/static/learn/no_course.png" mode=""></image>
      <view class="no_learns">您目前没有可学习的课程</view>
      <view class="choose" @click="toChoose()">立即去选购</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "SaasMiniprogramStuff",

  data() {
    return {
      param: {},
      goodsList: [],
      total: 0,
      sysTime: "",
    };
  },

  onLoad() {
    this.init();
  },
  onReachBottom() {
    if (this.goodsList.length < this.total) {
      this.param.pageNum++;
      this.getGoodsHandoutsList();
    }
  },
  methods: {
    init() {
      this.param = {
        pageNum: 1,
        pageSize: 10,
      };
      this.sysTime = +this.$method.timest();
      this.goodsList = [];
      this.getGoodsHandoutsList();
    },
    getGoodsHandoutsList() {
      this.$api.goodsHandoutsList(this.param).then((res) => {
        this.goodsList.push(...res.data.rows);
        this.total = res.data.total;
      });
    },
    studyIn(item) {
      if (
        item.validityStartTime &&
        (this.sysTime <= item.validityStartTime ||
          this.sysTime >= item.validityEndTime)
      ) {
        uni.showToast({
          icon: "none",
          title: "不在商品有效期，不能进入学习",
        });
        return;
      }
    },
    toChoose() {
      uni.reLaunch({
        url: "/pages/information/index",
      });
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scoped>
.my_courses {
  padding: 24rpx;
  .titles {
    font-size: 32rpx;
    color: #333333;
    margin: 44rpx 0rpx 24rpx 43rpx;
    font-weight: bold;
    display: block;
  }
  .course_item {
    width: 100%;
    // height: 278rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
    border-radius: 24rpx;
    padding: 29rpx 29rpx 20rpx 24rpx;
    margin-bottom: 20rpx;
    .course_item_info {
      border-radius: 16rpx;
      background: #f8f8f8;
      padding: 24rpx 24rpx 10rpx;
      margin-top: 24rpx;
      & > view {
        margin-bottom: 10rpx;
      }
      view {
        text {
          font-size: 24rpx;
          &:nth-of-type(1) {
            color: #969696;
          }
          &:nth-of-type(2) {
            color: #4b4b4b;
          }
        }
        .eb {
          color: #eb5757 !important;
        }
      }
    }
    .titlews {
      padding-bottom: 24rpx;
    }
    .cou_titles {
      color: #222222;
      font-size: 28rpx;
      font-weight: bold;
      width: 100%;
    }
    .learn_ranges {
      color: #666;
      font-size: 24rpx;
      .l_range {
        width: 20rpx;
        height: 24rpx;
        margin-right: 9rpx;
      }
      .l_time {
        color: #333;
      }
    }
    .c_downs {
      display: flex;
      align-items: center;
    }
    // 状态
    .all_status {
      width: 654rpx;
      background: #f8f8f8;
      border-radius: 16rpx;
    }
    .class-warm {
      display: flex;
      align-items: flex-start;

      &__icon {
        margin-right: 10rpx;
      }

      &__text {
        .date {
          color: #ff3b30;
          font-size: 22rpx;
          font-weight: 400;
        }
      }
    }
    .box_progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      // .disabled {
      // 	opacity: 0.6;
      // }
    }
    .study_tips {
      color: #eb5757;
      font-size: 24rpx;
      margin-top: 20rpx;
    }
    .study_btns {
      width: 100%;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .exam_btns {
        // width: 64%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .box_appoint {
      // width: 35%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
    .exam_word {
      font-size: 24rpx;
      font-weight: 500;
      width: 144rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 66rpx;
      margin-left: 32rpx;
    }
    .ones {
      color: #484848;
      border: 2rpx solid #b9b9b9;
    }
    .intos {
      color: #498afe;
      border: 2rpx solid #498afe;
    }
  }
  .lefts {
    width: 204rpx;
    height: 120rpx;
    border-radius: 12rpx;
    margin-right: 26rpx;
    position: relative;
    top: 0;
    left: 0;
    .lefet_img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 16rpx;
    }
    .live_icon {
      width: 65rpx;
      height: 35rpx;
      line-height: 35rpx;
      border-radius: 12rpx 0rpx 12rpx 0rpx;
      background-color: #ffb102;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .rights {
    width: 400rpx;
    height: 120rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .learn_progress {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .progress_up {
      width: 100%;
      .classHour {
        padding-top: 16rpx;
        font-size: 24rpx;
        color: #666666;
      }
      .scheduling {
        display: flex;
        align-items: center;
      }
      .sche_bar {
        font-size: 24rpx;
        color: #999999;
        margin-right: 20rpx;
      }
      .progress_bar {
        flex: 1;
      }
    }
    .progress_down {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .enter_into {
      width: 144rpx;
      height: 52rpx;
      line-height: 52rpx;
      background: #ffb102;
      border-radius: 16rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }
  // 收藏集，做题记录
  .bottoms {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
    .item {
      width: 335rpx;
      &.collect {
        position: relative;
        font-size: 32rpx;
        color: #ffffff;
        height: 240rpx;
        border-radius: 24rpx;
        padding: 32rpx;

        .text {
          position: relative;
          z-index: 10;
          font-size: 32rpx;
          font-weight: bold;
          color: #ffffff;
        }

        .img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }

      &.list {
        .list-in {
          position: relative;
          width: 335rpx;
          height: 112rpx;
          background: #007aff;
          border-radius: 24rpx;
          display: flex;
          align-items: center;
          font-size: 32rpx;
          color: #fff;

          &:first-of-type {
            margin-bottom: 16rpx;
          }

          .text {
            padding-left: 91rpx;
            position: relative;
            z-index: 10;
            font-size: 32rpx;
            font-weight: bold;
            color: #ffffff;
          }

          .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.no_datas {
  margin-top: 70rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .courses {
    width: 360rpx;
    height: 349rpx;
  }
  .no_learns {
    font-size: 32rpx;
    color: #999;
    margin: 46rpx 0rpx 56rpx;
  }
  .choose {
    width: 280rpx;
    height: 64rpx;
    line-height: 62rpx;
    border-radius: 32rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
  }
}
</style>