zc_saas_h5/pages2/bank/question_detail.vue

<template>
	<view>
		<nav-bar title="进入刷题"></nav-bar>
		<view class="top">
			<navigator  hover-class="none" :url="'/pages2/bank/question_statistics?id=' + id">
				<view class="left">
					<view class="title">做题统计</view>
					<view class="progress">
						<view class="item-left">
							<view class="desc"><text>总进度</text></view>
							<view class="percent">
								{{
									goodsCount.totalNum > 0
										? ((goodsCount.doNum / goodsCount.totalNum) * 100).toFixed((goodsCount.doNum / goodsCount.totalNum) * 100 == 100 ? 0 : 1)
										: 0
								}}
								<text class="per">%</text>
							</view>
						</view>
						<view class="item-right">
							<view class="up">
								<text class="orange">已答</text>
								<text>/未答</text>
							</view>
							
							<view class="down">
								<text class="orange">{{ goodsCount.doNum }}</text>
								<text>/{{ goodsCount.totalNum - goodsCount.doNum }}</text>
							</view>

						</view>
					</view>
				</view>
			</navigator>
			<navigator  hover-class="none" :url="'/pages2/bank/wrongById?goodsid=' + id">
				<view class="right">
					<view class="title">
						错题集
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="number">{{ goodsCount.wrongNum || '0' }}</view>
				</view>
			</navigator>
			<navigator  hover-class="none" :url="'/pages2/bank/collectById?goodsid=' + id">
				<view class="right">
					<view class="title">
						收藏集
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="number">{{ goodsCount.collectNum || '0' }}</view>
				</view>
			</navigator>
		</view>
		<view class="title-list">
			<view class="content">
				<view class="list" v-for="(item1, index1) in bankList" :key="index1">
					<template v-if="item1.type == 1">
						<view class="moduleItem" @click="clickModule(item1.majorId, index1)">
							<view class="courseName">{{ item1.name }}</view>
							<view>
								<image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
								<image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
							</view>
						</view>

						<template v-if="item1.showList">
							<view v-for="(item2, index2) in item1.list" :key="index2">
								<view class="section" @click="changeItem(index1, item2.chapterExamId, item1.type, index2)">
									<image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image>
									<image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
									<!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item2.showList"></u-icon>
									<u-icon name="arrow-down" color="#999" size="24" v-if="!item2.showList"></u-icon> -->
									<text style="margin-left:34rpx;">{{ item2.name }}</text>
								</view>
								<view v-if="item2.showList">
									<view class="article active" style="margin-left:62rpx;" v-for="(article, index3) in item2.list" :key="index3">
										<view class="flex_auto">{{ article.examName }}</view>
										<view class="btn" @click="toDo(article.examId, goodsData.goodsId, item1.majorId, item2.chapterExamId)" v-if="article.recordStatus == -1">做题</view>
										<view class="btn" @click="continueDo(article.recordId,article.examId, goodsData.goodsId, item2.chapterExamId, item1.majorId)" v-if="article.recordStatus == 0 && article.doType == 1">继续</view>
										<view class="btn" @click="doRepeat(article.recordId,article.examId, goodsData.goodsId, item2.chapterExamId, item1.majorId)" v-if="article.recordStatus == 1 || (article.recordStatus == 0 && article.doType == 2)">重做</view>
									</view>
								</view>
								<u-line v-if="item1.length > 1"></u-line>
							</view>
						</template>
					</template>

					<template v-if="item1.type == 2">
						<view class="section" @click="changeItem(index1, item1.majorId, item1.type)">
							<image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image>
							<image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
							<!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item1.showList"></u-icon>
							<u-icon name="arrow-down" color="#999" size="24" v-if="!item1.showList"></u-icon> -->
							<text style="margin-left:34rpx;">{{ item1.name }}</text>
						</view>
						<view v-if="item1.showList">
							<view class="article active" style="margin-left:64rpx;" v-for="(article, index2) in item1.list" :key="index2">
								<view class="flex_auto">{{ article.examName }}</view>
								<view class="btn" @click="toDo(article.examId, goodsData.goodsId, 0, item1.majorId)" v-if="article.recordStatus == -1">做题</view>
								<view class="btn" @click="continueDo(article.recordId,article.examId, goodsData.goodsId, 0, item1.majorId)" v-if="article.recordStatus == 0 && article.doType == 1">继续</view>
								<view class="btn" @click="doRepeat(article.recordId,article.examId, goodsData.goodsId, item1.majorId,0)" v-if="article.recordStatus == 1 || (article.recordStatus == 0 && article.doType == 2)">重做</view>
							</view>
						</view>
					</template>

					<template v-if="item1.type == 3">
						<view class="article active">
							<view class="flex_auto">{{ item1.name }}</view>
							<view class="btn" @click="toDo(item1.majorId, goodsData.goodsId, 0, 0)" v-if="item1.recordStatus == -1">做题</view>
							<view class="btn" @click="continueDo(item1.recordId,item1.majorId, goodsData.goodsId, 0, 0)" v-if="item1.recordStatus == 0 && item1.doType == 1">继续</view>
							<view class="btn" @click="doRepeat(item1.recordId,item1.majorId, goodsData.goodsId, 0, 0)" v-if="item1.recordStatus == 1 || (item1.recordStatus == 0 && item1.doType == 2)">重做</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			goodsData: {},
			bankList: [],
			id: '',
			goodsCount: {
				totalNum: 0
			},
			firstEnter:true,
		};
	},
	onUnload() {
		
	},
	computed: { ...mapGetters(['userInfo']) },
	onLoad(option) {
		this.id = option.id;
		this.getDetail();
		// this.goodsBankList();
		// this.getCollectNum();
		// this.getWrongNum()
	},
	onShow() {
		
		this.goodsBankQuestionNum();
		this.goodsBank();
	},
	methods: {
		/**
		 * 继续做题
		 */
		continueDo(recordId,examId,goodsId,chapterId = 0,moduleId = 0) {
			uni.navigateTo({
				url:'/pages2/bank/questionBankContinue?recordId=' +recordId +'&id=' +examId +'&goodsid=' +goodsId +'&chapterId='+chapterId+'&moduleId='+moduleId
			})
		},
		/**
		 * 重做
		 * @param {Object} recordId
		 * @param {Object} examId
		 * @param {Object} goodsId
		 * @param {Object} chapterExamId
		 */
		async doRepeat(recordId,examId,goodsId,chapterExamId=0,moduleId=0) {
			let count = await this.examRecordCount(examId);
			let answerNum = await this.getExamDetail(examId);
			//超过答题次数
			if (answerNum > 0 && count >= answerNum) {
				this.$u.toast('该试卷只能答题' + answerNum + '次!');
				return;
			}
			
			uni.showModal({
			    title: '提示',
			    content: '是否清空答案重做？',
				cancelText:'查看上次',
				cancelColor:'',
				confirmText:'重做',
				confirmColor:'',
			    success: (res) => {
			        if (res.confirm) {
						uni.navigateTo({
							url:'/pages2/bank/questionBank?id=' +examId +'&goodsid=' +goodsId +'&moduleId='+moduleId+'&chapterId=' +chapterExamId
						})
			        } else if (res.cancel) {
						uni.navigateTo({
							url:'/pages2/bank/questionBankAllExplain?id=' + examId +
									'&goodsid=' + goodsId +
									'&moduleId=' + moduleId +
									'&chapterId=' + chapterExamId +
									'&recordId='+ recordId
							
						})
			            console.log('查看上次答题');
			        }
			    }
			});
		},
		/**
		 * 获取课程目录
		 */
		goodsBank() {
			this.$api.goodsBank({
				goodsId: this.id
			}).then(res => {
				this.bankList = res.data.data;
				if(this.firstEnter) {
					this.showAllCharpter();
					this.firstEnter = false;
				}
				
			});
		},
		/**
		 * 展示第一个章下的节内容
		 */
		showAllCharpter() {
			for(let i = 0; i < this.bankList.length; i++) {
				if(this.bankList[i].type == 1) { //第一个是模块直接展开，再展开章下面的节
					this.$api
						.goodsChapterList({
							moduleExamId: this.bankList[i].majorId
						})
						.then(res => {
							this.$set(this.bankList[i], 'showList', true);
							this.$set(this.bankList[i], 'list', res.data.data);
							this.changeItem(i,this.bankList[i].list[0].chapterExamId,this.bankList[i].type,0)
						});
					break;
				} else if(this.bankList[i].type == 2) { //第一个章展开下面的节
					this.changeItem(i,this.bankList[i].majorId,this.bankList[i].type,'')
					break;
				}
			}
		},
		getDetail() {
			this.$api.commonGoodsDetail(this.id).then(res => {
				console.log(res);
				this.goodsData = res.data.data;
			});
		},

		/**
		 * 去做题
		 */
		async toDo(id, goodsId, moduleId = 0, chapterId = 0) {
			console.log(id,goodsId,moduleId,chapterId)
			let count = await this.examRecordCount(id);
			let answerNum = await this.getExamDetail(id);
			//超过答题次数

			if (answerNum > 0 && count >= answerNum) {
				this.$u.toast('该试卷只能答题' + answerNum + '次!');
				return;
			}

			uni.navigateTo({
				url: '/pages2/bank/questionBank?id=' + id + '&goodsid=' + goodsId + '&moduleId=' + moduleId + '&chapterId=' + chapterId + ''
			});
		},

		/**
		 * 查询试卷历史做题次数
		 */
		examRecordCount(examId) {
			return new Promise(resolve => {
				this.$api
					.examRecordCount({
						examId: examId,
						goodsId: this.id
					})
					.then(res => {
						resolve(res.data.data);
					});
			});
		},
		/**
		 * @param {Object} exam_id
		 * 获取试卷可以做的次数
		 */
		getExamDetail(exam_id) {
			return new Promise(resolve => {
				this.$api.getExamDetail(exam_id).then(res => {
					resolve(res.data.data.answerNum);
				});
			});
		},
		/**
		 * 获取用户商品统计数据
		 */
		goodsBankQuestionNum() {
			this.$api.goodsBankQuestionNum(this.id).then(res => {
				this.goodsCount = res.data.data;
			});
		},

		goodsBankList() {
			this.$api
				.goodsBankList({
					goodsId: this.id
				})
				.then(res => {
					console.log(res);
					this.bankList = res.data.data;
				});
		},
		getCollectNum() {
			this.$api
				.goodsCollectExamList({
					goodsId: this.id
				})
				.then(res => {
					let total = 0;
					res.data.rows.forEach(item => {
						total += item.questionNum;
					});

					this.collectTotal = total;
				});
		},
		getWrongNum() {
			this.$api
				.wrongRecordList({
					goodsId: this.id
				})
				.then(res => {
					let total = 0;
					res.data.rows.forEach(item => {
						total += item.wrongQuestionNum;
					});

					this.wrongTotal = total;
				});
		},
		clickModule(id, index) {
			if (this.bankList[index].list) {
				this.$set(this.bankList[index], 'showList', !this.bankList[index].showList);
				return;
			}

			this.$api
				.goodsChapterList({
					moduleExamId: id,
					goodsId:this.id
				})
				.then(res => {
					this.$set(this.bankList[index], 'showList', true);
					this.$set(this.bankList[index], 'list', res.data.data);
				});
		},
		changeItem(index1, id, type, index2) {
			if (type == 1) {
				if (this.bankList[index1].list[index2].list) {
					this.$set(this.bankList[index1].list[index2], 'showList', !this.bankList[index1].list[index2].showList);
					return;
				}

				this.$api
					.bankExamExamList({
						chapterExamId: id,
						goodsId:this.id
					})
					.then(res => {
						this.$set(this.bankList[index1].list[index2], 'showList', true);
						this.$set(this.bankList[index1].list[index2], 'list', res.data.data);
					});
			} else if (type == 2) {
				if (this.bankList[index1].list) {
					this.$set(this.bankList[index1], 'showList', !this.bankList[index1].showList);
					return;
				}

				this.$api
					.bankExamExamList({
						chapterExamId: id,
						goodsId: this.id
					})
					.then(res => {
						this.$set(this.bankList[index1], 'showList', true);
						this.$set(this.bankList[index1], 'list', res.data.data);
					});
			}
		}
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
.top {
	padding: 16rpx 16rpx 0;
	display: flex;
	justify-content: space-between;
	.left {
		width: 326rpx;
		height: 180rpx;
		background: #ffffff;
		box-shadow: 0px 0px 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;

		.title {
			font-size: 24rpx;
			line-height: 24rpx;
			color: #333333;
		}

		.progress {
			margin-top: 10rpx;
			display: flex;

			.item-left {
				flex: 1;
				border-right: 1rpx solid #eeeeee;
				.desc {
					text {
						line-height: 24rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.percent {
					margin-top: 10rpx;
					line-height: 64rpx;
					font-size: 64rpx;
					font-weight: bold;
					color: #007aff;
				}

				.per {
					font-size: 30rpx;
					color: #007aff;
				}
			}

			.item-right {
				padding-left: 10rpx;
				flex: 1;

				text {
					line-height: 24rpx;
					font-size: 24rpx;
					color: #999999;
				}

				.orange {
					line-height: 24rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #ff9500;
				}

				.down {
					margin-top: 40rpx;
				}
			}
		}
	}

	.right {
		width: 180rpx;
		height: 180rpx;
		background: #ffffff;
		box-shadow: 0px 0px 16rpx 4rpx rgba(145, 156, 178, 0.1);
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;

		.title {
			font-size: 24rpx;
			line-height: 24rpx;
			color: #333333;
		}

		.number {
			font-weight: bold;
			text-align: center;
			margin-top: 46rpx;
			font-size: 64rpx;
			line-height: 64rpx;
			color: #007aff;
		}
	}
}

.courseName {
	font-size: 30rpx;
	color:#666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moduleItem {
	height: 80rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 80rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.icon_up {
	width: 32rpx;
	height: 32rpx;
}

.title-list {
	background: #eaeef1;
	padding: 16rpx 16rpx 124rpx;
	.content {
		.list {
			background: #fff;
			margin-bottom: 30rpx;
			overflow: hidden;
			border-radius: 16rpx;
			padding: 10rpx 16rpx;

			.module {
				font-size: 30rpx;
				color: #333333;

				.icon {
					margin-right: 10rpx;
				}
			}

			.section {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
			}

			.article {
				height: 80rpx;
				display: flex;
				align-items: center;

				font-size: 26rpx;
				color: #666666;
				border-bottom: 1rpx solid #eeeeee;
				display: flex;

				.flex_auto {
					flex: 1;
				}

				&:nth-last-of-type(1) {
					border: 0;
				}

				&.active {
					color: #007aff;

					.btn {
						width: 96rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: #fff;
						font-size: 30rpx;
						border-radius: 24rpx;
						background: #007aff;
						margin-left: 36rpx;
						border-radius: 24rpx;
					}
				}
			}
		}
	}
}
</style>