zc_saas_h5/pages2/learn/details.vue

<template>
  <view class="safeArea">
    <nav-bar title="详情"></nav-bar>
    <view class="detailsWrap">
      <view class="topTitle">
        <u-icon
          name="info-circle-fill"
          style="color: #ff3b30; margin-right: 8rpx"
        ></u-icon>
        <text
          >您的学时审核不通过，不通过原因如下，请查阅，并重学不通过的课程内容。</text
        >
        <!-- <view style="margin-left:34rpx;">致电<text @click="call">020-87085982</text>咨询</view> -->
      </view>
      <view class="detailsItem" v-for="(item, index) in listData" :key="index">
        <view class="head">
          <view class="tap">{{ getTypeName(item.type) }}</view>
          <view class="title">{{ item.name }}</view>
        </view>
        <!-- <u-line color="#EEEEEE" />
				<view class="info">
					<view class="item" v-for="(items, indexs) in item.userStudyRecordPhoto" :key="indexs">
						<view class="imgbox">
							<image :src="$method.splitImgHost(items.photo)" style="width:100%" mode="widthFix" @click="seePhoto(item.userStudyRecordPhoto, indexs)"></image>
						</view>
						<view class="time">{{ $method.timestampToTime(items.createTime, false) }}</view>
					</view>
				</view> -->
        <u-line color="#EEEEEE" />
        <view class="reason">
          <view class="label">原因：</view>
          <view class="val">{{ item.auditReason }}</view>
        </view>
      </view>
    </view>
    <view class="btn" @click="getBtn" v-if="rebuildShow">确认已阅读</view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      goodsId: null,
      gradeId: null,
      listData: [],
      orderGoodsId: "",
      rebuildShow: false,
    };
  },
  onLoad(option) {
    this.orderGoodsId = option.orderGoodsId || "";
    this.goodsId = Number(option.goodsId);
    this.gradeId = Number(option.gradeId);
    this.getInfo();
    this.orderInfo();
  },
  onShow() {},
  methods: {
    orderInfo() {
      this.$api
        .orderInfo({
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let sysTime = this.$method.timest();
            console.log(res.data.data.serviceEndTime);
            console.log(sysTime);

            if (
              res.data.data.serviceEndTime &&
              res.data.data.serviceEndTime > +sysTime
            ) {
              //学习有效期范围内
              this.rebuildShow = true;
            } else {
              //不在学校有效期范围内隐藏
              this.rebuildShow = false;
              return;
            }

            if (res.data.data.classEndTime) {
              //配了班级有效期

              if (res.data.data.classEndTime > +sysTime) {
                //班级有效期没过期
                this.rebuildShow = true;
              } else {
                //过期
                this.rebuildShow = false;
                return;
              }
            } else {
              //没配按学习有效期
            }
          }
        });
    },
    seePhoto(option, index) {
      var arrays = option.map((item, indexs) => {
        return this.$method.splitImgHost(item.photo) + `?${indexs}`;
      });
      uni.previewImage({
        current: index,
        urls: arrays,
      });
    },
    getInfo() {
      this.$api
        .getcourseperiodcheat({
          goodsId: this.goodsId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.listData = res.data.rows;
          }
        });
    },
    //重学
    getBtn() {
      var self = this;
      self.$api
        .courseperiodrebuild({
          goodsId: self.goodsId,
          gradeId: self.gradeId,
          orderGoodsId: self.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.redirectTo({
              url:
                "/pages2/wd/course?gid=" +
                self.gradeId +
                "&id=" +
                self.goodsId +
                "&orderGoodsId=" +
                self.orderGoodsId,
            });
          }
        });
      // uni.showModal({
      // 	title:"注意",
      // 	content:`如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询`,
      // 	confirmText:"确认重学",
      // 	success:function(res){
      // 		if(res.confirm){
      // 			self.$api.courseperiodrebuild({
      // 				goodsId: self.goodsId,
      // 				gradeId: self.gradeId,
      // 				orderGoodsId:self.orderGoodsId
      // 			}).then(res => {
      // 				if(res.data.code === 200){
      // 					uni.redirectTo({
      // 						url: '/pages2/wd/course?gid='+self.gradeId+'&id=' + self.goodsId+'&orderGoodsId='+ self.orderGoodsId
      // 					})
      // 				}
      // 			})
      // 		}
      // 	}
      // })
    },
    getTypeName(int) {
      if (int === 0) {
        return "测试";
      }
      if (int === 1) {
        return "录播";
      }
      if (int === 2) {
        return "直播";
      }
      if (int === 3) {
        return "回放";
      }
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: "020-87085982",
      });
    },
  },
  onReachBottom() {},
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.detailsWrap {
  padding: 8rpx 8rpx 140rpx;
}
.topTitle {
  border-radius: 24rpx;
  background-color: #ffebea;
  padding: 10rpx 24rpx;
  color: #ff3b30;
  font-size: 24rpx;
  margin-bottom: 8rpx;
}
.detailsItem {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  .head {
    padding: 26rpx 24rpx;
    display: flex;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #666666;
    .tap {
      width: 56rpx;
      height: 28rpx;
      line-height: 26rpx;
      text-align: center;
      border: 2rpx solid #666666;
      border-radius: 8rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-right: 8rpx;
      flex-shrink: 0;
      position: relative;
      top: 6rpx;
    }
  }
  .info {
    padding: 17rpx 24rpx;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 160rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      margin: 0 8rpx 16rpx 0;
      .imgbox {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 7rpx;
      }
    }
  }
  .reason {
    display: flex;
    padding: 21rpx 24rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    .label {
      color: #666666;
    }

    .val {
      flex: 1;
    }
  }
}
.btn {
  width: 526rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  margin-left: -263rpx;
  bottom: 50rpx;
}
</style>