zc_saas_h5/pages2/learn/details.vue

<template>
	<view class="safeArea">
		<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;">致电020-87085982咨询</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">拍照异常/时间异常</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="getBtn">确认重学</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			goodsId: null,
			gradeId: null,
			listData: []
		};
	},
	onLoad(option) {
		this.goodsId = Number(option.goodsId);
		this.gradeId = Number(option.gradeId);
		this.getInfo();
	},
	onShow() {},
	methods: {
		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
				})
				.then(res => {
					if (res.data.code === 200) {
						this.listData = res.data.rows;
					}
				});
		},
		//重学
		getBtn() {
			var self = this
			uni.showModal({
				title:"注意",
				content:`如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询`,
				confirmText:"确认重学",
				success:function(res){
					if(res.confirm){
						self.$api.courseperiodrebuild({
							goodsId: self.goodsId,
							gradeId: self.gradeId
						}).then(res => {
							if(res.data.code === 200){
								uni.redirectTo({
									url: '/pages2/course/detail?id=' + self.goodsId
								})
							}
						})
					}
				}
			})
		},
		getTypeName(int) {
			if (int === 0) {
				return '测试';
			}
			if (int === 1) {
				return '录播';
			}
			if (int === 2) {
				return '直播';
			}
			if (int === 3) {
				return '回放';
			}
		}
	},
	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;
		}
	}
}
.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>