zc_saas_h5/pages2/bank/questionBank.vue

<template>
	<view id="questionBank">
		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" :statusBar="true" title="试卷"></uni-nav-bar>
		<swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
			<swiper-item v-for="(bank, bankIndex) in questionList" :key="bankIndex">
				<view class="pageContent">
					<view class="pad_8 titBox">
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">
									<text v-if="bank.type == 1">单选</text>
									<text v-if="bank.type == 2">多选</text>
									<text v-if="bank.type == 3">判断</text>
									<text v-if="bank.type == 4">案例题</text>
									<text v-if="bank.type == 5">简答题</text>
								</view>
								<text>{{ bankIndex + 1 }}/{{ questionList.length }}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;">{{ countdown(lastTime) }}</view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles"><rich-text :nodes="bank.content"></rich-text></view>
					</view>
					<view class="pad_8 titBox">
						<template v-if="bank.type == 1">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="radioSelect(item.optionsId, bankIndex)">
									<view class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text
										:class="{ right: item.optionsId == bank.ques || item.optionsId == bank.ans, wrong: item.optionsId == bank.ques && bank.ques != bank.ans }"
										class="activeTI"
									>
										{{ ast[index] }}
									</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view class="pad_8 answer">
									<view>正确答案：{{ ast[bank.ans - 1] }}</view>
									<view>我的答案：{{ ast[bank.ques - 1] }}</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent"><rich-text :nodes="bank.analysisContent"></rich-text></view>
								</view>
							</view>
						</template>

						<template v-if="bank.type == 2">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="checkboxSelect(item.optionsId, bankIndex, index)">
									<view :class="{ checked: item.checked }" class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="!bank.ques" class="submit_checkbox" @click="checkboxSubmit(bankIndex)">确认答案</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text
										:class="{
											right: bank.ques.indexOf(item.optionsId) != -1 || bank.ans.indexOf(item.optionsId) != -1,
											wrong: bank.ques.indexOf(item.optionsId) != -1 && bank.ans.indexOf(item.optionsId) == -1
										}"
										class="activeTI"
									>
										{{ ast[index] }}
									</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view class="pad_8 answer">
									<view>
										正确答案：
										<text v-for="ansItem in bank.ans">{{ ast[ansItem - 1] }}</text>
									</view>
									<view>
										我的答案：
										<text v-for="quesItem in bank.ques">{{ ast[quesItem - 1] }}</text>
									</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent"><rich-text :nodes="bank.analysisContent"></rich-text></view>
								</view>
							</view>
						</template>

						<template v-if="bank.type == 3">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty" @click="judgeSelect(index, bankIndex)">
									<view class="activeTI">{{ ast[index] }}</view>
									{{ item }}
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty">
									<text :class="{ right: index == bank.ques || index == bank.ans, wrong: index == bank.ques && bank.ques != bank.ans }" class="activeTI">
										{{ ast[index] }}
									</text>
									{{ item }}
								</view>
							</view>
							<view v-if="bank.ques">
								<view class="pad_8 answer">
									<view>正确答案：{{ ast[bank.ans] }}</view>
									<view>我的答案：{{ ast[bank.ques] }}</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent"><rich-text :nodes="bank.analysisContent"></rich-text></view>
								</view>
							</view>
						</template>

						<!-- 简答题 -->
						<template v-if="bank.type == 5">
							<view class="ans">
								<view class="ans_input" v-if="!bank.ques">
									<view class="top flex">
										<image :data-index="bankIndex" class="icon" @click="chooseImg(bankIndex)" src="/static/08-10_032.jpg" mode=""></image>
										<view class="progress">0/4</view>
										<view class="submit" @click="submitAns(bankIndex)">确认答案</view>
									</view>
									<view class="textarea"><textarea v-model="bank.ansText.text" placeholder="在此输入答案"></textarea></view>
									<view class="imgs">
										<view class="img" v-for="(img, imgIndex) in bank.ansText.imageList">
											<text @click="deleteImg(imgIndex, bankIndex)">x</text>
											<image :src="$method.splitImgHost(img, true)"></image>
										</view>
									</view>
								</view>
								<view class="ans_submit answerInfos" v-if="bank.ques">
									<view class="answerTitle">答案我的</view>
									{{ bank.ques.text }}
									<view class="imgs"><image class="img" v-for="ques in bank.ques.imageList" :src="$method.splitImgHost(ques, true)"></image></view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent"><rich-text :nodes="bank.analysisContent"></rich-text></view>
								</view>
							</view>
						</template>

						<!-- 案例题 -->
						<template v-if="bank.type == 4">
							<view class="tabs">
								<view
									class="tab"
									:class="{ current: tabIndex == bank.current }"
									:key="tabIndex"
									v-for="(tab, tabIndex) in bank.jsonStr"
									@click="tabSelect(tabIndex, bankIndex)"
								>
									问题{{ tabIndex }}
								</view>
							</view>
							<view v-for="(ansItem, ansIndex) in bank.jsonStr" v-if="bank.current == ansIndex" :key="ansIndex">
								<view class="titles"><rich-text :nodes="ansItem.content"></rich-text></view>
								<template v-if="ansItem.type == 1">
									<view v-if="!bank.ques[ansIndex]">
										<view
											v-for="(option, childIndex) in ansItem.optionsList"
											:key="childIndex"
											class="lisSty"
											@click="radioSelectChild(option.optionsId, ansIndex, bankIndex)"
										>
											<view class="activeTI">{{ ast[childIndex] }}</view>
											<rich-text class="textChild" :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="index" class="lisSty">
											<text
												:class="{
													right: option.optionsId == bank.ques[ansIndex] || option.optionsId == bank.ans[ansIndex],
													wrong: option.optionsId == bank.ques[ansIndex] && bank.ques[ansIndex] != bank.ans[ansIndex]
												}"
												class="activeTI"
											>
												{{ ast[childIndex] }}
											</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view class="pad_8 answer">
											<view>正确答案：{{ ast[bank.ans[ansIndex] - 1] }}</view>
											<view>我的答案：{{ ast[bank.ques[ansIndex] - 1] }}</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent"><rich-text :nodes="option.analysisContent"></rich-text></view>
										</view>
									</view>
								</template>

								<template v-if="ansItem.type == 2">
									<view v-if="!bank.ques[ansIndex]">
										<view
											v-for="(option, childindex) in ansItem.optionsList"
											:key="childindex"
											class="lisSty"
											@click="checkboxSelectChild(bankIndex, ansIndex, childindex)"
										>
											<view :class="{ checked: option.checked }" class="activeTI">{{ ast[childindex] }}</view>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="!bank.ques[ansIndex]" class="submit_checkbox" @click="checkboxSubmitChild(bankIndex, ansIndex)">确认答案</view>
									<view v-if="bank.ques && bank.ques[ansIndex]">
										<view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty">
											<text :class="{ right: right(bankIndex, ansIndex, option), wrong: wrong(bankIndex, ansIndex, option) }" class="activeTI">
												{{ ast[childindex] }}
											</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view class="pad_8 answer">
											<view>
												正确答案：
												<text v-for="ansItem1 in bank.ans[ansIndex]">{{ ast[ansItem1 - 1] }}</text>
											</view>
											<view>
												我的答案：
												<text v-for="quesItem in bank.ques[ansIndex]">{{ ast[quesItem - 1] }}</text>
											</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent"><rich-text :nodes="ansItem.analysisContent"></rich-text></view>
										</view>
									</view>
								</template>

								<template v-if="ansItem.type == 3">
									<view v-if="!bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty" @click="judgeSelectChild(ansIndex, childindex, bankIndex)">
											<view class="activeTI">{{ ast[childindex] }}</view>
											{{ option }}
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty">
											<text
												:class="{
													right: childindex == bank.ques[ansIndex] || childindex == bank.ans[ansIndex],
													wrong: childindex == bank.ques[ansIndex] && bank.ques[ansIndex] != bank.ans[ansIndex]
												}"
												class="activeTI"
											>
												{{ ast[childindex] }}
											</text>
											{{ option }}
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view class="pad_8 answer">
											<view>正确答案：{{ ast[bank.ans[ansIndex]] }}</view>
											<view>我的答案：{{ ast[bank.ques[ansIndex]] }}</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent"><rich-text :nodes="ansItem.analysisContent"></rich-text></view>
										</view>
									</view>
								</template>

								<!-- 简答题 -->
								<template v-if="ansItem.type == 5">
									<view class="ans">
										<view class="ans_input" v-if="!bank.ques[ansIndex]">
											<view class="top flex">
												<image class="icon" @click="chooseImgChild(bankIndex, ansIndex)" src="/static/08-10_032.jpg" mode=""></image>
												<view class="progress">0/4</view>
												<view class="submit" @click="submitAnsChild(bankIndex, ansIndex)">确认答案</view>
											</view>
											<view class="textarea"><textarea v-model="ansItem.ansText.text" placeholder="在此输入答案"></textarea></view>
											<view class="imgs">
												<view class="img" v-for="(img, imgIndex) in ansItem.ansText.imageList">
													<text @click="deleteImgChild(imgIndex, bankIndex, ansIndex)">x</text>
													<image :src="$method.splitImgHost(img, true)"></image>
												</view>
											</view>
										</view>
										<view class="ans_submit answerInfos" v-if="bank.ques[ansIndex]">
											<view class="answerTitle">答案我的</view>
											{{ bank.ques[ansIndex].text }}
											<view class="imgs">
												<image class="img" v-for="ques in bank.ques[ansIndex].imageList" :src="$method.splitImgHost(ques, true)"></image>
											</view>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent"><rich-text :nodes="ansItem.analysisContent"></rich-text></view>
										</view>
									</view>
								</template>
							</view>
						</template>
					</view>

					<view class="footer_btn">
						<view class="collect" :class="{ show: goodsId ? true : false }" @click="collect(collectList[bankIndex], bankIndex)">
							{{ collectList[bankIndex] ? '已收藏' : '未收藏' }}
						</view>
						<view @click="openFooterTab">答题卡</view>
						<view @click="pdsubmit">交卷</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
			<view class="popupView">
				<view class="popupTops">
					<view class="topIcon"></view>
					点击编号即可跳转至对应题目
				</view>
				<view class="popupContent">
					<scroll-view scroll-y="true" style="height: 506rpx;">
						<view class="boxSty">
							<view
								v-for="(item, index) in questionList"
								:key="index"
								@click="changeIndex(index)"
								:class="{ isRight: isRight(item, index), isWrong: isWrong(item, index) }"
								class="liListSty"
							>
								{{ index + 1 }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<view class="dialog" v-if="showDialog">
			<view class="text">左右滑动切换上下题</view>
			<view class="btn" @click="hideDialog">我知道了</view>
		</view>

		<view class="dialog_wrap" v-if="testOver">
			<view class="bg"></view>
			<view class="dialog">
				<view class="title">温馨提示</view>
				<view class="content">
					<view>您已完成所有题目，</view>
					<view>快去交卷吧！</view>
				</view>
				<view class="btns">
					<view class="btn" @click="noSubmit()">暂不交卷</view>
					<view class="btn active" @click="submitNow()">立即交卷</view>
				</view>
			</view>
		</view>

		<view class="dialog_wrap" v-if="isLastCount">
			<view class="bg"></view>
			<view class="dialog">
				<view class="title">温馨提示</view>
				<view class="content">
					<view>您当前正在测试，还剩{{ lastCount }}道题未完成，离开视为交卷</view>
				</view>
				<view class="btns">
					<view class="btn" @click="noLeave()">暂不离开</view>
					<view class="btn active" @click="leaveNow()">继续离开</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showpopups" mode="center" border-radius="24" height="439rpx" width="640rpx" :mask-close-able="false">
			<view class="popboxs">
				<view class="classTops">温馨提示</view>
				<view class="textStys">
					{{
						cgType === 7
							? '您还未交卷,确定结束做题吗？'
							: cgType === 8
							? `您还有${lastCount}道题未作答， 现在继续作答，还是下次继续？`
							: cgType === 6
							? `您还有${lastCount}道题未作答， 您确定要交卷吗？`
							: ''
					}}
				</view>
				<view class="classFootsty" v-if="cgType === 6">
					<view class="btnsty btns1" @click="submit">立即交卷</view>
					<view class="btnsty btns2" @click="showpopups = false">继续做题</view>
				</view>
				<view class="classFootsty" v-if="cgType === 7">
					<view class="btnsty btns1" @click="showpopups = false">下次继续</view>
					<view class="btnsty btns2" @click="backPages">结束做题</view>
				</view>
				<view class="classFootsty" v-if="cgType === 8">
					<view class="btnsty btns1" @click="submit">立即交卷</view>
					<view class="btnsty btns2" @click="showpopups = false">继续做题</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showpopups: false,
			id: '',
			current: 0,
			questionList: [],
			ast: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
			judge: ['错误', '正确'],
			ans: [],
			ques: [],
			show: false,
			showDialog: true,
			bankList: [],
			collectList: [],
			goodsId: '',
			recordId: '',
			isSubmit: false,
			lastTime: 0,
			timer: null,
			wrongList: [],
			bankType: 0, //试卷类型
			needBack: false, //是否是考试
			testOver: false,
			isLastCount: false, //是否有未答题目
			lastCount: 0, //剩余没有回答的题目数
			chapterId: 0,
			moduleId: 0,
			cgType: 0 //对应设计稿弹窗编码
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.goodsId = option.goodsid;
		this.chapterId = option.chapterId;
		this.moduleId = option.moduleId;
		let isBack = option.isback;

		if (isBack) {
			console.log(getApp());
			let app = getApp();
			let globalData = app.globalData;

			for (var k in globalData.bankData) {
				this[k] = globalData.bankData[k];
			}
		} else {
			this.goodsQuestionList();
			// this.wrongRecordExamQuestionList();
			this.bankExam();
		}
	},
	onUnload() {
		if (this.isSubmit) {
			return;
		}
		//考试试卷 阻止ios手势返回，自动跳回答题页
		if (this.needBack) {
			let app = getApp();
			app.globalData.bankData = this.$data;
			uni.navigateTo({
				url: '/pages2/bank/questionBank?id=' + this.id + '&goodsid=' + this.goodsId + '&isback=true'
			});
		} else {
			//点击返回按钮确认允许退出，记录答题记录

			this.examRecordEdit();
		}
	},
	methods: {
		bankExam() {
			this.$api.bankExam(this.id).then(res => {
				this.bankType = res.data.data.doType;
				if (this.bankType == 2) {
					this.needBack = true;
				}
			});
		},
		/**
		 * 获取错题集
		 */
		wrongRecordExamQuestionList() {
			this.$api
				.wrongRecordExamQuestionList({
					examId: this.id,
					goodsId: this.goodsId
				})
				.then(res => {
					this.wrongList = res.data.rows;
				});
		},
		/**
		 * 点击后退按钮
		 */
		clickLeft() {
			if (this.bankType == 1) {
				let ansCount = this.questionOverNum(); //已答题数
				this.lastCount = this.questionList.length - ansCount; //统计未答完的题数

				//所有题目答完
				if (this.lastCount == 0) {
					// this.testOver = true;
					this.cgType = 7;
					//未答完
				} else {
					this.cgType = 8;
					// this.isLastCount = true;
				}
				this.showpopups = true;
			} else if (this.bankType == 2) {
				let ansCount = this.questionOverNum(); //已答题数
				this.lastCount = this.questionList.length - ansCount; //统计未答完的题数

				//所有题目答完
				if (this.lastCount == 0) {
					this.testOver = true;
					//未答完
				} else {
					this.isLastCount = true;
				}
			}
		},
		/**
		 * 返回上一页
		 */
		backPages() {
			this.needBack = false;
			uni.navigateBack({
				delta: 1
			});
		},
		/**
		 * 获取已经回答的题目数
		 */
		questionOverNum() {
			let count = 0;
			this.questionList.forEach(item => {
				if (item.type == 1 || item.type == 2 || item.type == 3) {
					if (item.ques) {
						count++;
					}
				} else if (item.type == 4) {
					//案例题
					let isOver = item.jsonStr.every(jsonItem => {
						if (jsonItem.type == 1 || jsonItem.type == 2 || jsonItem.type == 3) {
							if (jsonItem.ques) {
								return true;
							} else {
								return false;
							}
						} else if (jsonItem.type == 5) {
							if (jsonItem.ansText.text.length || jsonItem.ansText.imageList.length) {
								return true;
							} else {
								return false;
							}
						}
					});

					if (isOver) {
						count++;
						console.log(item,444)
					}
				} else if (item.type == 5) {
					//简答题
					if (item.ansText.text.length || item.ansText.imageList.length) {
						count++;
					}
				}
			});

			return count;
		},
		/**
		 * 暂不交卷
		 */
		noSubmit() {
			//设为允许退出页面
			this.needBack = false;
			uni.navigateBack({
				delta: 1
			});
		},
		/**
		 * 不离开
		 */
		noLeave() {
			this.isLastCount = false;
		},
		/**
		 * 立即离开并交卷
		 */
		leaveNow() {
			this.needBack = false;
			uni.navigateBack({
				delta: 1
			});
			let score = 0; //计算总分
			let reportStatus = 0;
			let number = 0;
			this.questionList.forEach((item, index) => {
				if (item.type == 1) {
					if (item.ques == item.ans) {
						score += item.score;
						number++;
					}
				} else if (item.type == 2) {
					let isRight =
						item.ques &&
						item.ques.every((quesItem, quesIndex) => {
							return item.ques[quesIndex] == item.ans[quesIndex];
						});

					if (isRight) {
						score += item.score;
						number++;
					}
				} else if (item.type == 3) {
					if (item.ques == item.ans) {
						score += item.score;
						number++;
					}
				}
			});

			// if(score >= 60) {
			// 	reportStatus = 1
			// } else {
			// 	reportStatus = 0
			// }

			this.$api
				.examRecordEdit({
					examId: this.id,
					goodsId: this.goodsId,
					// reportStatus:reportStatus,
					doQuestionNum: this.questionOverNum(),
					recordId: this.recordId,
					rightQuestionNum: number,
					status: 1,
					score: score,
					historyExamJson: JSON.stringify(this.questionList)
				})
				.then(res => {});
		},
		/**
		 * 立即交卷
		 */
		submitNow() {
			this.showpopups = false;
			this.needBack = false;
			this.submit();
		},
		/**
		 * 离开页面统计回答正确题数
		 */
		examRecordEdit() {
					if(!this.isSubmit) {
							
							let number = 0;
							let score = 0;
							let doQuestionNum = 0;
							this.questionList.forEach((item,index) => {
								if(item.type == 1) {
									if(item.ques == item.ans) { 
										score += item.score;
										number++
									}
									
									if(item.ques) {
										doQuestionNum++;
									}
								} else if(item.type == 2) {
									let isRight = item.ques && item.ques.every((quesItem,quesIndex) => {
										return item.ques[quesIndex] == item.ans[quesIndex]
									})
									
									if(isRight) {
										score += item.score;
										number++
									}
									
									if(item.ques && item.ques.length) {
										doQuestionNum++;
									}
								} else if(item.type == 3) {
									if(item.ques == item.ans) {
										score += item.score;
										number++
									}
									
									if(item.ques) {
										doQuestionNum++;
									}
								} else if(item == 4) {
									if(item.ques.length) {
										doQuestionNum++;
									}
								} else if(item.type == 5) {
									if(item.ques) {
										doQuestionNum++;
									}
								}
							})
							
							this.$api.examRecordEdit({
								examId:this.id,
								goodsId:this.goodsId,
								recordId: this.recordId,
								rightQuestionNum:number,
								status:0,
								doQuestionNum:doQuestionNum,
								historyExamJson:JSON.stringify(this.questionList)
							}).then(res => {
								
							})
						}
		},
		/**
		 * 记录总题数
		 */
		examRecord() {
			this.$api
				.examRecord({
					chapterExamId: this.chapterId || 0,
					moduleExamId: this.moduleId || 0,
					examId: this.id,
					goodsId: this.goodsId,
					totalQuestionNum: this.questionList.length
				})
				.then(res => {
					this.recordId = res.data.data;
				});
		},
		/**
		 * @param {Object} second倒计时过滤器
		 */
		countdown(second) {
			if (second) {
				let h = parseInt((second / 60 / 60) % 24); //   计算小时
				let m = parseInt((second / 60) % 60); //   计算分数
				let s = parseInt(second % 60); //   计算当前秒数

				if (h < 10) h = '0' + h;
				if (m < 10) m = '0' + m;
				if (s < 10) s = '0' + s;

				return h + ':' + m + ':' + s;
			} else {
				return '';
			}
		},
		/**
		 * 请求题目列表
		 */
		goodsQuestionList() {
			this.$api
				.goodsQuestionList({
					examId: this.id
				})
				.then(res => {
					this.lastTime = res.data.data[0].answerTime && res.data.data[0].answerTime * 60;
					//考试时间到了自动交卷
					if (this.lastTime) {
						this.timer = setInterval(() => {
							if (this.lastTime <= 0) {
								clearInterval(this.timer);
								uni.showModal({
									title: '提示',
									content: '考试时间到，自动交卷',
									confirmText: '确定',
									showCancel: false,
									success: res => {
										this.submit();
									}
								});
								return;
							}
							this.lastTime--;
						}, 1000);
					} else {
					}
					res.data.data.forEach((item, index) => {
						if (typeof item.jsonStr == 'string') {
							item.jsonStr = JSON.parse(item.jsonStr);

							if (item.type == 2) {
								//多选
								item.jsonStr.forEach(str => {
									str.optionsId = '' + str.optionsId;
								});
								let arr = item.answerQuestion.split(',');
								arr.forEach((a, i) => {
									arr[i] = '' + a;
								});
								item.ans = arr;
								return;
							} else if (item.type == 5) {
								//简答题
								item.ansText = {
									text: '',
									imageList: []
								};
							} else if (item.type == 4) {
								//案例题
								console.log(item.jsonStr);
								item.ques = [];
								item.current = 0;
								let ansArr = [];
								item.jsonStr.forEach((json, index) => {
									if (json.type == 1) {
										ansArr[index] = json.answerQuestion;
									} else if (json.type == 2) {
										json.optionsList.forEach(str => {
											str.optionsId = '' + str.optionsId;
										});
										let arr = json.answerQuestion.split(',');
										arr.forEach((a, i) => {
											arr[i] = '' + a;
										});
										ansArr[index] = arr;
									} else if (json.type == 3) {
										ansArr[index] = json.answerQuestion;
									} else if (json.type == 5) {
										ansArr[index] = {
											text: '',
											imageList: []
										};
										json.ansText = {
											text: '',
											imageList: []
										};
									}
								});

								item.ans = ansArr;
								return;
							}

							item.ans = item.answerQuestion;
						}
					});

					this.questionList = res.data.data;
					this.lastCount = this.questionList.length;
					this.examRecord();
					this.getCollectInfo(this.current);
				});
		},
		/**
		 * @param {Object} e单选点击
		 */
		radioSelect(optionsId, bindex) {
			if (this.questionList[bindex].ques) return;
			this.$set(this.questionList[bindex], 'ques', optionsId);

			// 回答错误
			if (this.questionList[bindex].ques != this.questionList[bindex].ans) {
				this.$api
					.examWrongRecord({
						examId: this.id,
						goodsId: this.goodsId,
						questionId: this.questionList[bindex].questionId,
						recordId: this.recordId
					})
					.then(res => {});
			} else {
				// let question = this.wrongList.find(item => item.questionId == this.questionList[bindex].questionId);
				// if(question) {
				// 	this.$api.wrongRecordDelete({
				// 		"examId": +this.id,
				// 		"goodsId": +this.goodsId,
				// 		"questionId": this.questionList[bindex].questionId,
				// 	}).then(res => {
				// 	})
				// }
			}
		},

		/**
		 * @param {Object} e案例单选点击
		 */
		radioSelectChild(optionsId, ansIndex, bindex) {
			if (this.questionList[bindex].ques[ansIndex]) return;
			this.$set(this.questionList[bindex].ques, ansIndex, optionsId);
		},

		/**
		 * @param {Object} 多选点击
		 */
		checkboxSelect(optionsId, bindex, index) {
			this.$set(this.questionList[bindex].jsonStr[index], 'checked', !this.questionList[bindex].jsonStr[index].checked);
		},

		/**
		 * @param {Object} 案例多选点击
		 */
		checkboxSelectChild(bindex, ansIndex, childIndex) {
			this.$set(this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex], 'checked', !this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex].checked);
		},

		/**
		 * @param {Object} 多选确认
		 */
		checkboxSubmit(bindex) {
			if (this.questionList[bindex].ques) return;
			let arr = [];
			this.questionList[bindex].jsonStr.forEach(item => {
				if (item.checked) {
					arr.push(item.optionsId);
				}
			});

			this.$set(this.questionList[bindex], 'ques', arr);

			let isWrong = this.questionList[bindex].ques.some((quesItem, quesIndex) => {
				return this.questionList[bindex].ques[quesIndex] != this.questionList[bindex].ans[quesIndex];
			});
			// 回答错误
			if (isWrong) {
				this.$api
					.examWrongRecord({
						examId: this.id,
						goodsId: this.goodsId,
						questionId: this.questionList[bindex].questionId,
						recordId: this.recordId
					})
					.then(res => {});
			} else {
				// let question = this.wrongList.find(item => item.questionId == this.questionList[bindex].questionId);
				// if(question) {
				// 	this.$api.wrongRecordDelete({
				// 		"examId": +this.id,
				// 		"goodsId": +this.goodsId,
				// 		"questionId": this.questionList[bindex].questionId,
				// 	}).then(res => {
				// 	})
				// }
			}
		},

		/**
		 * @param {Object} 案例多选确认
		 */
		checkboxSubmitChild(bindex, ansIndex) {
			if (this.questionList[bindex].ques[ansIndex]) return;
			let arr = [];
			this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(item => {
				if (item.checked) {
					arr.push(item.optionsId);
				}
			});

			this.$set(this.questionList[bindex].ques, ansIndex, arr);
		},

		/**
		 * @param {Object} index
		 * @param {Object} bindex
		 * 判断题
		 */
		judgeSelect(index, bindex) {
			if (this.questionList[bindex].ques) return;
			this.$set(this.questionList[bindex], 'ques', index + '');
			// 回答错误
			if (this.questionList[bindex].ques != this.questionList[bindex].ans) {
				this.$api
					.examWrongRecord({
						examId: this.id,
						goodsId: this.goodsId,
						questionId: this.questionList[bindex].questionId,
						recordId: this.recordId
					})
					.then(res => {});
			} else {
				// let question = this.wrongList.find(item => item.questionId == this.questionList[bindex].questionId);
				// if(question) {
				// 	this.$api.wrongRecordDelete({
				// 		"examId": +this.id,
				// 		"goodsId": +this.goodsId,
				// 		"questionId": this.questionList[bindex].questionId,
				// 	}).then(res => {
				// 	})
				// }
			}
		},

		/**
		 * @param {Object} ansindex
		 * @param {Object} childindex
		 * @param {Object} bindex
		 * 案例判断题
		 */
		judgeSelectChild(ansindex, childindex, bindex) {
			if (this.questionList[bindex].ques[ansindex]) return;
			this.$set(this.questionList[bindex].ques, ansindex, childindex + '');
		},

		openFooterTab() {
			this.show = true;
		},
		hideDialog() {
			this.showDialog = false;
		},
		changeIndex(index) {
			this.current = index;
		},

		swiperChange(e) {
			this.current = e.detail.current;
			this.getCollectInfo(this.current);
		},

		/**
		 * @param {Object} current
		 * 获取收藏信息
		 */
		getCollectInfo(current) {
			this.$api
				.getCollectInfo({
					examId: this.id,
					questionId: this.questionList[current].questionId,
					goodsId: this.goodsId
				})
				.then(res => {
					if (res.data.code == 500) {
						this.$set(this.collectList, current, false);
					} else if (res.data.code == 200) {
						this.$set(this.collectList, current, res.data.data);
					}
				});
		},
		pdsubmit(){
			if (this.bankType == 1) {
				let ansCount = this.questionOverNum(); //已答题数
				this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
				//没有答完
				if (this.lastCount !== 0) {
					this.cgType = 6;
					this.showpopups = true;
					return
				}
			}
			this.submit()
		},
		/**
		 * 提交数据
		 */
		submit() {
			let score = 0; //计算总分
			let reportStatus = 0;
			let number = 0;
			let doQuestionNum = 0;
			this.questionList.forEach((item,index) => {
				if(item.type == 1) {
					if(item.ques == item.ans) { 
						score += item.score;
						number++
					}
					
					if(item.ques) {
						doQuestionNum++;
					}
				} else if(item.type == 2) {
					let isRight = item.ques && item.ques.every((quesItem,quesIndex) => {
						return item.ques[quesIndex] == item.ans[quesIndex]
					})
					
					if(isRight) {
						score += item.score;
						number++
					}
					
					if(item.ques && item.ques.length) {
						doQuestionNum++;
					}
				} else if(item.type == 3) {
					if(item.ques == item.ans) {
						score += item.score;
						number++
					}
					
					if(item.ques) {
						doQuestionNum++;
					}
				} else if(item.type == 4) {
					if(item.ques && item.ques.length) {
						doQuestionNum++;
					}
				} else if(item.type == 5) {
					if(item.ques) {
						doQuestionNum++;
					}
				}
			})
			
			// if(score >= 60) {
			// 	reportStatus = 1
			// } else {
			// 	reportStatus = 0
			// }
			
			this.$api.examRecordEdit({
				examId:this.id,
				goodsId:this.goodsId,
				// reportStatus:reportStatus,
				recordId: this.recordId,
				rightQuestionNum:number,
				status:1,
				doQuestionNum:doQuestionNum,
				score:score,
				historyExamJson:JSON.stringify(this.questionList)
			}).then(res => {
				this.isSubmit = true;
				if(res.data.code == 200) {
					
					uni.showToast({
						title: '交卷成功',
						duration: 2000,
						icon:'none'
					});
					
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages2/bank/question_report?id='+this.recordId
						})
					},2000)
				}
			})
		},

		/**
		 * @param {Object} state
		 * @param {Object} index
		 * 收藏
		 */
		collect(state, index) {
			if (!state) {
				this.$api
					.collectQuestion({
						examId: this.id,
						questionId: this.questionList[index].questionId,
						goodsId: this.goodsId || ''
					})
					.then(res => {
						if (res.data.code == 200) {
							this.$set(this.collectList, index, true);
							uni.showToast({
								title: '收藏成功',
								duration: 2000,
								icon: 'none'
							});
						}
					});
			} else {
				this.$api.deleteCollectQuestion(this.collectList[index].collectQuestionId).then(res => {
					if (res.data.code == 200) {
						this.$set(this.collectList, index, false);
						uni.showToast({
							title: '取消收藏成功',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			}
			return;
		},

		/**
		 * @param {Object} imgIndex
		 * @param {Object} bankIndex
		 * 删除简答图片
		 */
		deleteImg(imgIndex, bankIndex) {
			this.questionList[bankIndex].ansText.imageList.splice(imgIndex, 1);
		},

		/**
		 * @param {Object} imgIndex
		 * @param {Object} bankIndex
		 * @param {Object} ansIndex
		 * 删除案例题简答图片
		 */
		deleteImgChild(imgIndex, bankIndex, ansIndex) {
			this.questionList[bankIndex].jsonStr[ansIndex].ansText.imageList.splice(imgIndex, 1);
		},

		/**
		 * @param {Object} bankindex
		 * 选择上传图片
		 */
		chooseImg(bankindex) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					let self = this;
					// console.log(JSON.stringify(res.tempFilePaths));
					let img = res.tempFilePaths[0];
					uni.getImageInfo({
						src: img,
						success: async res => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: img,
									quality: 75,
									width: '50%',
									height: '50%',
									success: async rest => {
										const dir = await self.uploadFile(rest.tempFilePath, 0);
										this.questionList[bankindex].ansText.imageList.push(dir);
									}
								});
							} else {
								const dir = await self.uploadFile(img, 0);
								this.questionList[bankindex].ansText.imageList.push(dir);
							}
						}
					});
				}
			});
		},

		/**
		 * @param {Object} bankindex
		 * @param {Object} ansindex
		 * 案例题选择上传图片
		 */
		chooseImgChild(bankindex, ansindex) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					let self = this;
					// console.log(JSON.stringify(res.tempFilePaths));
					let img = res.tempFilePaths[0];
					uni.getImageInfo({
						src: img,
						success: async res => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: img,
									quality: 75,
									width: '50%',
									height: '50%',
									success: async rest => {
										const dir = await self.uploadFile(rest.tempFilePath, 0);
										this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.push(dir);
									}
								});
							} else {
								const dir = await self.uploadFile(img, 0);
								this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.push(dir);
							}
						}
					});
				}
			});
		},

		uploadFile(options, int) {
			var self = this;
			return new Promise((resolve, reject) => {
				var data = {
					imageStatus: int
				};
				self.$api.aliyunpolicy(data).then(res => {
					console.log(res.data, 6);
					if (res.data.code != 200) {
						self.$method.showToast('签名错误' + JSON.stringify(res.data));
						return;
					}
					var ossToken = res.data.data.resultContent;
					if (ossToken.host == null || ossToken.host == undefined) {
						self.$method.showToast('上传路径报错' + JSON.stringify(res.data));
						return;
					}
					uni.uploadFile({
						url: ossToken.host,
						name: 'file',
						filePath: options,
						fileType: 'image',
						header: {
							AuthorizationToken: 'WX ' + uni.getStorageSync('token')
						},
						formData: {
							key: ossToken.dir,
							OSSAccessKeyId: ossToken.accessid,
							policy: ossToken.policy,
							Signature: ossToken.signature,
							callback: ossToken.callback,
							success_action_status: 200
						},
						success: result => {
							if (result.statusCode === 200) {
								resolve(ossToken.dir);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								return;
							}
						},
						fail: error => {
							uni.showToast({
								title: '上传接口报错' + error,
								icon: 'none'
							});
							return;
						}
					});
				});
			});
		},
		/**
		 * @param {Object} type
		 * @param {Object} bankindex
		 * 简答题答案确认
		 */
		submitAns(bankindex) {
			console.log(this.questionList[bankindex]);
			if (!this.questionList[bankindex].ansText.text && !this.questionList[bankindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}

			this.$set(this.questionList[bankindex], 'ques', {
				imageList: this.questionList[bankindex].ansText.imageList,
				text: this.questionList[bankindex].ansText.text
			});
		},

		/**
		 * @param {Object} bankindex
		 * @param {Object} ansindex
		 * 案例题简答答案确认
		 */
		submitAnsChild(bankindex, ansindex) {
			if (!this.questionList[bankindex].jsonStr[ansindex].ansText.text && !this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}

			this.$set(this.questionList[bankindex].ques, ansindex, {
				imageList: this.questionList[bankindex].jsonStr[ansindex].ansText.imageList,
				text: this.questionList[bankindex].jsonStr[ansindex].ansText.text
			});
		},

		isRight(item, index) {
			//单选
			if (this.questionList[index].ques) {
				if (item.type == 1) {
					return this.questionList[index].ques == this.questionList[index].ans;
					//多选
				} else if (item.type == 2) {
					//每一项都相等
					return this.questionList[index].ques.every((item, i) => {
						return item == this.questionList[index].ans[i];
					});
					//判断
				} else if (item.type == 3) {
					return this.questionList[index].ques == this.questionList[index].ans;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},

		right(bankIndex, ansIndex, option) {
			if (this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
				if (this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 || this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) != -1) {
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},

		wrong(bankIndex, ansIndex, option) {
			if (this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
				if (this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 && this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) == -1) {
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},

		isWrong(item, index) {
			if (this.questionList[index].ques) {
				//单选
				if (item.type == 1) {
					return this.questionList[index].ques != this.questionList[index].ans;
					//多选
				} else if (item.type == 2) {
					//每一项都相等
					return this.questionList[index].ques.some((item, index) => {
						return item != this.questionList[index].ans;
					});
					//判断
				} else if (item.type == 3) {
					return this.questionList[index].ques != this.questionList[index].ans;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},

		tabSelect(index, bankindex) {
			this.$set(this.questionList[bankindex], 'current', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;
	height: calc(100vh - 44px);
}
.lisSty {
	margin-bottom: 16rpx;
	display: flex;

	.flex_auto {
		flex: 1;
	}
}
.activeTI {
	vertical-align: middle;
	display: inline-block;
	border: 1rpx solid #eee;
	border-radius: 50rpx;
	height: 48rpx;
	line-height: 46rpx;
	text-align: center;
	width: 48rpx;
	margin-right: 15rpx;
	color: #666;
	font-size: 30rpx;

	&.right {
		color: #fff;
		background: green;
	}

	&.wrong {
		color: #fff;
		background: red;
	}

	&.checked {
		color: #fff;
		background: blue;
	}
}

.submit_checkbox {
	margin: 20rpx auto;
	width: 526rpx;
	height: 80rpx;
	background: rgba(0, 122, 255, 1);
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
}
.titles {
	overflow: hidden;
	margin-bottom: 24rpx;
}
.titBox {
	padding: 41rpx 25rpx 24rpx 25rpx;
}

.tabs {
	margin: 10rpx;
	display: flex;
	.tab {
		margin: 0 10rpx;
		width: 96rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: #007aff;
		font-size: 28rpx;
		border-radius: 16rpx;

		&.current {
			color: #fff;
			background: #007aff;
		}
	}
}

.ans {
	margin: 8rpx 8rpx 8rpx;

	.ans_input {
		border-radius: 16rpx;
		background: #fff;
		.top {
			border-bottom: 1rpx solid #eeeeee;
			padding: 16rpx;
			display: flex;
			align-items: center;

			.icon {
				margin-right: 20rpx;
				width: 40rpx;
				height: 38rpx;
			}

			.progress {
				flex: 1;
			}

			.submit {
				width: 168rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
				background: #007aff;
				border-radius: 24rpx;
			}
		}

		.textarea {
			textarea {
				width: 100%;
				height: 287rpx;
				padding: 10rpx;
			}
		}

		.imgs {
			overflow: hidden;
			display: flex;
			width: 100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position: relative;
				margin: 20rpx;

				text {
					position: absolute;
					right: -15rpx;
					top: -15rpx;
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					color: #fff;
					background: red;
					border-radius: 50%;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.ans_submit {
		padding: 16rpx;
		border-radius: 16rpx;
		background: #fff;

		.imgs {
			overflow: hidden;
			display: flex;
			width: 100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position: relative;
				margin: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.firstLetter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.leftLetters {
		display: flex;
		align-items: center;
		width: 220rpx;
		.btnType {
			padding: 5rpx 10rpx;
			border: 1rpx solid #007aff;
			border-radius: 10rpx;
			background-color: rgba(0, 122, 255, 0.1);
			font-size: 28rpx;
			color: #007aff;
			margin-right: 15rpx;
		}
	}
}
.popupView {
	height: 100%;
	padding-bottom: 100rpx;
	.popupTops {
		height: 77rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		line-height: 77rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		.topIcon {
			position: absolute;
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 80rpx;
			height: 8rpx;
			background-color: #999;
			border-radius: 4rpx;
		}
	}
	.popupContent {
	}
}
.pageContent {
	position: relative;
	background-color: #eaeef1;
	min-height: 100vh;
	padding-top: 8rpx;
	padding-bottom: 100rpx;
}
.pad_8 {
	background-color: #fff;
	margin: 0rpx 8rpx 8rpx;
	border-radius: 16rpx;
}
.answer {
	height: 80rpx;
	line-height: 80rpx;
	padding: 0rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	font-size: 30rpx;
}
.footer_btn {
	background-color: #fff;
	z-index: 10078;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98rpx;
	padding: 0rpx 38rpx;
	border-top: 1rpx solid #eee;

	.collect {
		visibility: hidden;

		&.show {
			visibility: visible;
		}
	}
}
.boxSty {
	padding: 44rpx 41rpx 0rpx;
}
.liListSty {
	border: 1rpx solid #eeeeee;
	width: 88rpx;
	height: 88rpx;
	border-radius: 32rpx;
	text-align: center;
	line-height: 88rpx;
	color: #333;
	font-size: 32rpx;
	float: left;
	margin: 20rpx 23rpx;

	&.isRight {
		border: 1rpx solid #eeeeee;
		color: #fff;
		background: green;
	}

	&.isWrong {
		border: 1rpx solid #eeeeee;
		color: #fff;
		background: red;
	}
}
.answerInfos {
	padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
	margin-bottom: 28rpx;
	color: #666;
	font-size: 30rpx;
}
.answerContent {
	font-size: 30rpx;
	color: #666;
}

.textChild {
	display: inline-block;
	vertical-align: middle;
}

.dialog {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20000;

	.text {
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
	}

	.btn {
		width: 242rpx;
		height: 82rpx;
		border: 2rpx solid #ffffff;
		border-radius: 16rpx;
		text-align: center;
		line-height: 82rpx;
		margin: 41rpx auto;
		color: #fff;
		font-size: 32rpx;
	}
}

.dialog_wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999999;

	.bg {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.dialog {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3D(-50%, -50%, 0);
		width: 640rpx;
		height: 439rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.content {
			margin: 35rpx 35rpx 0;
			font-size: 30rpx;
			color: #666666;
			line-height: 48rpx;
		}

		.btns {
			margin-top: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #f5f5f5;
				border-radius: 40rpx;
				font-size: 30rpx;
				color: rgba(0, 122, 255, 1);
				background: #f5f5f5;
				margin: 0 20rpx;

				&.active {
					color: #f5f5f5;
					background: rgba(0, 122, 255, 1);
				}
			}
		}
	}
}
.popboxs {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.classTops {
	flex-shrink: 0;
	padding: 39rpx 0rpx 4rpx;
	font-weight: bold;
	color: #333;
	font-size: 30rpx;
}
.textStys {
	width: 100%;
	flex: 1;
	padding: 36rpx;
}
.classFootsty {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 0rpx 40rpx;
	.btnsty {
		width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.btns1 {
		background-color: #f5f5f5;
		color: #007aff;
	}
	.btns2 {
		margin-left: 40rpx;
		background-color: #007aff;
		color: #ffffff;
	}
}
</style>