exam/exam-06173-uni/pages/repo/train.vue

<template>
	<view v-if="quData!=null && quData.id!=null" style="padding-bottom: 80px;">



		<uni-row :gutter="1" v-if="mode!=='13'">
			<uni-col :span="8">
				<view class="st-item">
					<uni-icons type="checkbox-filled" size="20" color="#4c9d44" style="margin-right: 5px;" />
					{{ trueCount }}
				</view>
			</uni-col>

			<uni-col :span="8">
				<view class="st-item">
					<uni-icons type="clear" size="20" color="#ff0000" style="margin-right: 5px;" />
					{{ wrongCount }}
				</view>

			</uni-col>

			<uni-col :span="8">
				<view class="st-item">
					正确率：{{ calcRate() }}%
				</view>
			</uni-col>

		</uni-row>




		<view style="padding: 12px 15px">




			<!-- 引用题目组件 -->
			<train-qu-item v-model="quData" :card="cardItem" @rest="handleRest" :mode="mode" />



			<view class="true-next" v-if="mode!=='13'">
				<checkbox :checked="nextIfTrue" @click="nextChange">答对继续下一题</checkbox>
			</view>


			<view class="bottom-bar">

				<uni-row :gutter="20">
					<uni-col :span="6">
						<button @click="fetchPrevious" :disabled="currentSort === 1">上题</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="fetchNext" :disabled="currentSort >= maxSort">下题</button>
					</uni-col>
					<uni-col :span="6">
						<button type="warn" @click="handleFinish">结束</button>
					</uni-col>
					<uni-col :span="6">
						<button type="primary" @click="showCard">答题卡</button>
					</uni-col>
				</uni-row>

			</view>

		</view>


		<uni-drawer ref="cardDrawer">


			<view class="card-title">答题卡</view>

			<scroll-view scroll-y="true" class="scroll-y">

				<view class="card-context">

					<view v-for="item in cardList" :key="item.quId"
						:class="{'card-num': true, 'current':item.quId === quData.id, 'right':item.quId !== quData.id && item.answered && item.isRight, 'error':item.quId !== quData.id && item.answered && !item.isRight}"
						@click="switchQu(item)">
						{{ item.sort }}
					</view>

				</view>

			</scroll-view>


		</uni-drawer>


	</view>
</template>

<script>
	import {
		hasTrain,
		startTrain,
		listCard,
		finishTrain,
		quDetail
	} from '@/api/repo/train'
	import TrainQuItem from './components/TrainQuItem.vue'

	export default {
		components: {
			TrainQuItem
		},
		data() {
			return {
				trainId: '',
				cardShow: true,
				currentSort: 1,
				maxSort: 100,
				trueCount: 0,
				wrongCount: 0,
				totalCount: 0,
				rightRate: 0,
				repoId: '',
				quId: '',
				mode: 0,
				cardList: [],
				cardItem: {},
				quData: {
					quType: 1,
					content: ''
				},
				nextIfTrue: false

			}
		},

		onLoad(option) {
			this.repoId = option.repoId
			this.mode = option.mode
			this.handlerStart(true)
		},

		computed: {



		},
		methods: {

			calcRate() {

				if (this.trueCount === 0 || this.totalCount === 0) {
					return 0
				}

				let rate = parseInt(this.trueCount * 100 / this.totalCount)

				if (!rate) {
					rate = 0
				}

				return rate
			},

			nextChange(e) {
				this.nextIfTrue = !this.nextIfTrue
			},

			// 显示答题卡
			showCard() {
				this.$refs.cardDrawer.open()
			},

			handleRest(data) {

				let that = this

				this.cardItem.isRight = data.isRight
				this.cardItem.answers = data.answers
				this.cardItem.answered = true
				if (data.isRight) {
					this.trueCount += 1
					// 继续下一题
					if (this.nextIfTrue) {

						uni.showToast({
							icon: 'none',
							title: '回答正确，继续下一题...'
						})

						setTimeout(function() {
							that.fetchNext()
						}, 1500)

					}
				} else {
					this.wrongCount += 1
				}

			},

			// 查找答题卡
			fetchCard() {

				uni.showLoading({
					title: '获取答题卡...'
				})

				// 正确树立
				let that = this


				listCard(this.trainId).then(data => {
					this.cardList = data
					this.totalCount = data.length
					// 最后一个
					this.maxSort = this.cardList[this.cardList.length - 1].sort

					this.cardList.forEach(function(item) {
						if (item.isRight) {
							that.trueCount += 1
						}

						if (!item.isRight && item.answered) {
							that.wrongCount += 1
						}
					})

					// 查找第一题
					this.switchQu(this.cardList[0])

					// 关闭
					uni.hideLoading()
				})
			},

			handlerStart(clear) {
				uni.showLoading({
					title: '加载中...'
				});


				// 开始训练
				startTrain(this.mode, this.repoId, this.userId, clear).then(data => {

					// 返回训练
					this.trainId = data.id


					uni.hideLoading()

					// 获取答题卡
					this.fetchCard()

				}).catch(e => {

					setTimeout(()=>{
						// 错题训练。题库=考试
						this.handleBack()
						// 关闭
						uni.hideLoading()
					}, 1500)
				})
			},

			handleBack() {
				// 错题训练。题库=考试
				if (this.mode == 0) {

					uni.redirectTo({
						url: '/pages/paper/book?id=' + this.repoId
					});


				} else {
					// 跳回题库详情
					uni.redirectTo({
						url: '/pages/repo/detail?id=' + this.repoId + '&mode=' + this.mode
					});
				}
			},

			// 切换试题
			switchQu(item) {

				this.quId = item.quId
				this.currentSort = item.sort
				this.cardItem = item
				this.fetchQuDetail()



			},

			// 查找试题详细
			fetchQuDetail() {
				// 打开
				uni.showLoading({
					title: '加载中...'
				});

				quDetail(this.trainId, this.quId).then(data => {
					// 试题信息
					this.quData = data
					uni.hideLoading()


					// 切换题目后滑动到顶部
					uni.pageScrollTo({
						duration: 500,
						scrollTop: 0,
					})

				})
			},

			// 上一题
			fetchNext() {
				const index = this.currentSort
				const item = this.cardList[index]
				this.switchQu(item)
			},

			// 下一题
			fetchPrevious() {
				const index = this.currentSort - 2
				const item = this.cardList[index]
				this.switchQu(item)
			},

			handleFinish() {
				const that = this

				uni.showModal({
					title: '提示',
					content: '确实要结束本次训练吗？',
					success: function(res) {
						if (res.confirm) {
							finishTrain(that.trainId).then(() => {

								uni.showToast({
									title: '结束成功，您随时可以在个人中心查看此训练记录！！',
									duration: 2000
								});

								// 跳回题库详情
								that.handleBack()
							})
						}
					}
				});

			},

			// 答题卡样式
			itemClass(quId, isRight, answered) {
				if (quId === this.quData.id) {
					return 'current'
				}

				if (isRight) {
					return 'right'
				} else if (answered) {
					return 'error'
				}
			}
		}
	}
</script>

<style>
	.st-item {
		height: 50px;
		text-align: center;
		background: #eee;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.true-next {
		font-size: 12px;
		color: #666;
		margin-top: 15px;
	}

	.uni-card {
		margin: 15px 0px !important;
		z-index: 0 !important;
	}


	.scroll-y {
		width: 100%;
		height: 90%;
		white-space: nowrap;
	}
</style>