saas_miniprogram/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.sectionType) }}</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,
				lock: false,
			};
		},
		onLoad(option) {
			this.orderGoodsId = option.orderGoodsId || "";
			this.goodsId = Number(option.goodsId);
			this.gradeId = Number(option.gradeId);
		},
		onShow() {
			if (this.$method.isGoLogin()) {
				// 从公众号消息进来的没登录需要跳到登录页，登录后返回
				return;
			}
			this.getInfo();
			this.orderInfo();
		},
		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() {
				if (this.lock) {
					return;
				}
				this.lock = true;
				var self = this;
				self.$api
					.courseperiodrebuild({
						goodsId: self.goodsId,
						gradeId: self.gradeId,
						orderGoodsId: self.orderGoodsId,
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.$http({
								url: "/course/courseList",
								method: "get",
								data: {
									pageNum: 1,
									pageSize: 100,
									goodsId: this.goodsId,
									gradeId: this.gradeId,
									orderGoodsId: this.orderGoodsId,
								},
							}).then((result) => {
								this.lock = false;
								if (result.data.code == 200) {
									if (result.data.total > 1) {
										uni.redirectTo({
											url: `/pages3/polyv/detail?id=''&goodsId=${this.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${this.gradeId}`,
										});
									} else if (result.data.total == 1) {
										uni.redirectTo({
											url: `/pages3/polyv/detail?id=${result.data.rows[0].courseId}&goodsId=${this.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${this.gradeId}`,
										});
									} else {
										uni.showToast({
											icon: "none",
											title: "暂无可观看的视频课程",
										});
									}
								}
							});
							// uni.navigateTo({
							//   url: `/pages3/polyv/detail?id=''&goodsId=${this.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${this.gradeId}`
							// })
						} else {
							uni.showModal({
								showCancel: false,
								title: "提示",
								content: res.data.msg,
								success: (resultst) => {
									uni.navigateBack();
								},
							});
							this.lock = false;
						}
					})
					.catch((err) => {
						this.lock = false;
					}); // 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>