zc_saas_h5/pages2/bank/questionBank.vue

<template>
	<view class="questionBank">
		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" ref="navbar" :statusBar="true"
			:title="examData.examName"></uni-nav-bar>
		<swiper class="swiper" :current="current" @change="swiperChange">
			<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>
						<view class="titles" @click="showPhoto(bank.content)"><rich-text
								:nodes="bank.content"></rich-text></view>
					</view>

					<template v-if="bank.type == 1">
						<view class="pad_8 titBox no-margin">
							<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 v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty"
									@click="radioSelect(item.optionsId, bankIndex)">
									<text :class="{
                      right:
                        bankType == 1 &&
                        (item.optionsId == bank.ques ||
                          item.optionsId == bank.ans),
                      wrong:
                        bankType == 1 &&
                        item.optionsId == bank.ques &&
                        bank.ques != bank.ans,
                      user_choose: bankType == 2 && item.optionsId == bank.ques,
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">
										{{ item.content }}
										<view v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="bankType == 1 && 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 class="pad_8 titBox no-margin">
							<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 v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty"
									@click="checkboxSelect(item.optionsId, bankIndex, index)">
									<text :class="{
                      right:
                        bankType == 1 &&
                        (bank.ques.indexOf(item.optionsId) != -1 ||
                          bank.ans.indexOf(item.optionsId) != -1),
                      wrong:
                        bankType == 1 &&
                        bank.ques.indexOf(item.optionsId) != -1 &&
                        bank.ans.indexOf(item.optionsId) == -1,
                      user_choose: bankType == 2 && item.checked,
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">
										{{ item.content }}
										<view v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
							<view v-if="bankType == 2 || (bankType == 1 && !bank.ques)" class="submit_checkbox"
								:class="{ disabled: !isCheckboxChecked(bank.jsonStr) }"
								@click="checkboxSubmit(bankIndex)">确认答案</view>
						</view>
						<view v-if="bankType == 1 && bank.ques">
							<view class="pad_8 answer">
								<view>
									题目答案：
									<text v-for="(ansItem, ansIndex) in bank.ans"
										:key="ansIndex">{{ ast[ansItem - 1] }}</text>
								</view>
								<view>
									我的答案：
									<text v-for="(quesItem, quesIndex) in bank.ques"
										:key="quesIndex">{{ 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 class="pad_8 titBox no-margin">
							<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>
									<view class="flex_auto">
										{{ item }}
										<view v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty"
									@click="judgeSelect(index, bankIndex)">
									<!-- right: bankType == 1 && (index == bank.ques || index == bank.ans),
                      wrong: bankType == 1 && (index == bank.ques && bank.ques != bank.ans),
                      user_choose: bankType == 2 && (index == bank.ques), -->
									<text :class="{
                      right:
                        bankType == 1 &&
                        (index == (bank.ques == 1 ? 0 : 1) ||
                          index != bank.ans),
                      wrong:
                        bankType == 1 &&
                        index == (bank.ques == 1 ? 0 : 1) &&
                        bank.ques != bank.ans,
                      user_choose:
                        bankType == 2 && index == (bank.ques == 1 ? 0 : 1),
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">
										{{ item }}
										<view v-if="item.imgUrl">
											<image style="width: 600rpx" mode="widthFix"
												:src="$method.splitImgHost(item.imgUrl)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="bankType == 1 && bank.ques">
							<view class="pad_8 answer">
								<view>题目答案：{{ ast[bank.ans == 1 ? 0 : 1] }}</view>
								<view>我的答案：{{ ast[bank.ques == 1 ? 0 : 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 == 5">
						<view class="pad_8 titBox">
							<view class="ans">
								<view class="ans_input" v-if="
                    bankType == 2 ||
                    (bankType == 1 &&
                      (!bank.ques ||
                        (!bank.ques.imageList.length && !bank.ques.text)))
                  ">
									<view class="top flex">
										<image :data-index="bankIndex" class="icon" @click="chooseImg(bankIndex)"
											src="/static/camera.png" mode=""></image>
										<view class="progress">{{ bank.ansText.imageList.length || "0" }}/4</view>
										<view class="submit" :class="{ disabled: !bank.ansText.text && hasImgs(bank) }"
											@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"
											:key="imgIndex">
											<text @click="deleteImg(imgIndex, bankIndex)">x</text>
											<image :src="$method.splitImgHost(img, true)"></image>
										</view>
									</view>
								</view>
								<view class="ans_submit answerInfos" v-if="
                    bankType == 1 &&
                    bank.ques &&
                    (bank.ques.imageList.length || bank.ques.text)
                  ">
									<view class="answerTitle">我的答案:</view>
									{{ bank.ques.text }}
									<view class="imgs">
										<image class="img" :key="quesIndex"
											v-for="(ques, quesIndex) in bank.ques.imageList"
											:src="$method.splitImgHost(ques, true)"></image>
									</view>
								</view>
							</view>
						</view>

						<view v-if="
                bankType == 1 &&
                bank.ques &&
                (bank.ques.imageList.length || bank.ques.text)
              ">
							<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 + 1 }}
							</view>
						</view>

						<view v-for="(ansItem, ansIndex) in bank.jsonStr" v-if="bank.current == ansIndex"
							:key="ansIndex">
							<template v-if="ansItem.type == 1">
								<view class="pad_8 titBox">
									<view class="leftLetters">
										<view class="btnType">
											<text>单选</text>
										</view>
									</view>
									<view class="titles"><rich-text :nodes="ansItem.content"></rich-text></view>
									<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>
											<view class="flex_auto">
												<rich-text class="textChild" :nodes="option.content"></rich-text>
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex"
											class="lisSty" @click="
                        radioSelectChild(option.optionsId, ansIndex, bankIndex)
                      ">
											<text :class="{
                          right:
                            bankType == 1 &&
                            (option.optionsId == bank.ques[ansIndex] ||
                              option.optionsId == bank.ans[ansIndex]),
                          wrong:
                            bankType == 1 &&
                            option.optionsId == bank.ques[ansIndex] &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                          user_choose:
                            bankType == 2 &&
                            option.optionsId == bank.ques[ansIndex],
                        }" class="activeTI">
												{{ ast[childIndex] }}
											</text>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
								</view>

								<view v-if="bankType == 1 && 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 class="pad_8 titBox">
									<view class="leftLetters">
										<view class="btnType">
											<text>多选</text>
										</view>
									</view>
									<view class="titles"><rich-text :nodes="ansItem.content"></rich-text></view>
									<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>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
									<view v-if="
                      bankType == 2 || (bankType == 1 && !bank.ques[ansIndex])
                    " class="submit_checkbox" :class="{
                      disabled: !isCheckboxChecked(ansItem.optionsList),
                    }" @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" @click="
                        checkboxSelectChild(bankIndex, ansIndex, childindex)
                      ">
											<text :class="{
                          right:
                            bankType == 1 && right(bankIndex, ansIndex, option),
                          wrong:
                            bankType == 1 && wrong(bankIndex, ansIndex, option),
                          user_choose: bankType == 2 && option.checked,
                        }" class="activeTI">
												{{ ast[childindex] }}
											</text>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="bankType == 1 && bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>
											题目答案：
											<text :key="ansItemIndex1"
												v-for="(ansItem1, ansItemIndex1) in bank.ans[ansIndex]">{{ ast[ansItem1 - 1] }}</text>
										</view>
										<view>
											我的答案：
											<text :key="quesItemIndex"
												v-for="(quesItem, quesItemIndex) 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 class="pad_8 titBox">
									<view class="leftLetters">
										<view class="btnType">
											<text>判断</text>
										</view>
									</view>
									<view class="titles"><rich-text :nodes="ansItem.content"></rich-text></view>
									<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>
											<view class="flex_auto">
												{{ option }}
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty"
											@click="judgeSelectChild(ansIndex, childindex, bankIndex)">
											<text :class="{
                          right:
                            bankType == 1 &&
                            (childindex == (bank.ques[ansIndex] == 1 ? 0 : 1) ||
                              childindex != bank.ans[ansIndex]),
                          wrong:
                            bankType == 1 &&
                            childindex == (bank.ques[ansIndex] == 1 ? 0 : 1) &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                          user_choose:
                            bankType == 2 &&
                            childindex == (bank.ques[ansIndex] == 1 ? 0 : 1),
                        }" class="activeTI">
												{{ ast[childindex] }}
											</text>
											<view class="flex_auto">
												{{ option }}
												<view v-if="option.imgUrl">
													<image style="width: 600rpx" mode="widthFix"
														:src="$method.splitImgHost(option.imgUrl)"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="bankType == 1 && bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>题目答案：{{
                        ast[bank.ans[ansIndex] == 1 ? 0 : 1]
                      }}</view>
										<view>我的答案：{{
                        ast[bank.ques[ansIndex] == 1 ? 0 : 1]
                      }}</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="pad_8 titBox_title">
									<view class="leftLetters">
										<view class="btnType">
											<text>简答</text>
										</view>
									</view>
									<view><rich-text :nodes="ansItem.content"></rich-text></view>
								</view>
								<view class="pad_8 titBox_title">
									<view class="ans">
										<view class="ans_input" v-if="
                        bankType == 2 ||
                        (bankType == 1 &&
                          (!bank.ques[ansIndex] ||
                            (!bank.ques[ansIndex].text &&
                              !bank.ques[ansIndex].imageList.length)))
                      ">
											<view class="top flex">
												<image class="icon" @click="chooseImgChild(bankIndex, ansIndex)"
													src="/static/camera.png" mode=""></image>
												<view class="progress">{{ ansItem.ansText.imageList.length || "0" }}/4
												</view>
												<view class="submit" :class="{
                            disabled: !ansItem.ansText.text && hasImgs(ansItem),
                          }" @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"
													:key="imgIndex">
													<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="
                        bankType == 1 &&
                        bank.ques[ansIndex] &&
                        (bank.ques[ansIndex].imageList.length ||
                          bank.ques[ansIndex].text)
                      ">
											<view class="answerTitle">我的答案</view>
											{{ bank.ques[ansIndex].text || "" }}
											<view class="imgs">
												<image class="img" v-for="(ques, quesIndex) in bank.ques[ansIndex]
                            .imageList" :key="quesIndex" :src="$method.splitImgHost(ques, true)"></image>
											</view>
										</view>
									</view>
								</view>
								<view v-if="
                    bankType == 1 &&
                    (bank.ques[ansIndex].imageList.length ||
                      bank.ques[ansIndex].text)
                  ">
									<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 class="footer_btn">
						<view class="collect" :class="{ show: goodsId && !isFromVideo ? true : false }"
							@click="collect(collectList[bankIndex], bankIndex)">
							<view v-if="collectList[bankIndex]">
								<image src="/static/icon/collected.png" mode=""></image>
								<view>取消收藏</view>
							</view>
							<view v-if="!collectList[bankIndex]">
								<image src="/static/icon/collect.png" mode=""></image>
								<view>收藏</view>
							</view>
						</view>
						<view class="flex_center" @click="openFooterTab">
							<view class="up-icon">
								<image src="/static/up.png"></image>
							</view>
							答题卡
						</view>
						<view class="collect show" @click="pdsubmit">
							<view>
								<image src="/static/jj.png" mode=""></image>
								<view>交卷</view>
							</view>
						</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: bankType == 1 && isRight(item, index),
                  isWrong: bankType == 1 && isWrong(item, index),
                  isPart: bankType == 1 && isPart(item, index),
                  isOver: bankType == 1 && isOver(item, index),
                  check_ans: bankType == 2 && isCheck(item, index),
                }" class="liListSty">
								{{ index + 1 }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<view class="dialog" v-if="showDialog">
			<image class="pointer" src="/static/pointer.png" mode=""></image>
			<view class="text">左右滑动切换上下题</view>
			<view class="btn" @click="showDialog = false">我知道了</view>
		</view>

		<view class="dialog-arrow" v-if="showArrow">
			<image class="pointer" src="/static/arrow-left.png" mode=""></image>
			<view class="text">您当前正在测试， 若想退出请点击左上角返回按钮。</view>
			<view class="btn" @click="showArrow = false">我知道了</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}道题未作答， 您确定要交卷吗？`
              : cgType == 9
              ? `您已完成所有题目，快去交卷吧！`
              : ""
          }}
				</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="backPages">下次继续</view>
					<view class="btnsty btns2" @click="submit">结束做题</view>
				</view>
				<view class="classFootsty" v-if="cgType === 8">
					<view class="btnsty btns1" @click="backPages()">下次继续</view>
					<view class="btnsty btns2" @click="showpopups = false">继续作答</view>
				</view>
				<view class="classFootsty" v-if="cgType === 9">
					<view class="btnsty btns1" @click="showpopups = false">暂不交卷</view>
					<view class="btnsty btns2" @click="submit">立即交卷</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goodsExamIsCanLearn,
		examClientCanLearn
	} from "@/utils/authority";
	export default {
		data() {
			return {
				showpopups: false,
				id: "",
				current: 0,
				questionList: [],
				ast: ["A", "B", "C", "D", "E", "F", "G"],
				judge: ["正确", "错误"],
				ans: [],
				ques: [],
				show: false,
				showDialog: false,
				bankList: [],
				collectList: [],
				goodsId: "",
				recordId: "",
				isSubmit: false,
				lastTime: 0, //剩余考试时长
				allTimes: 0, //总考试时长
				timer: null,
				wrongList: [],
				bankType: 0, //试卷类型
				needBack: false, //是否是考试
				testOver: false,
				isLastCount: false, //是否有未答题目
				lastCount: 0, //剩余没有回答的题目数
				chapterId: 0,
				moduleId: 0,
				showArrow: false, //退出提示
				isFromVideo: "",
				gradeId: "",
				examData: {},
				orderGoodsId: "",
				cgType: 0, //对应设计稿弹窗编码
				// courseId: '',
				entryType: "", // 进入做题页面的入口类型，daily-每日一练进来，random-随机练习, 其他的-题库做题进入
				bankNum: 5, // 随机练习的题目数量
				simulateExamId: undefined,
			};
		},
		async onLoad(option) {
			await goodsExamIsCanLearn(option.goodsid);
			this.entryType = option.entryType || "";
			this.bankNum = option.bankNum;
			// this.courseId = option.courseId || ''
			this.orderGoodsId = option.orderGoodsId || 0;
			this.current = +option.current || 0;
			this.id = option.id;
			this.goodsId = option.goodsid;
			this.chapterId = option.chapterId || 0;
			this.moduleId = option.moduleId || 0;
			this.isFromVideo = option.isFromVideo || "";
			this.gradeId = option.gradeId || "";
			let isBack = option.isback;
			let showDialog = uni.getStorageSync("showDialog");
			if (showDialog) {
				this.showDialog = false;
			} else {
				this.showDialog = true;
				uni.setStorageSync("showDialog", "1");
			}

			//考试被迫返回
			if (isBack) {
				let app = getApp();
				let globalData = app.globalData;

				for (var k in globalData.bankData) {
					this[k] = globalData.bankData[k];
				}
				this.showArrow = true;

				this.timer = setInterval(() => {
					if (this.lastTime <= 0) {
						clearInterval(this.timer);
						uni.showToast({
							icon: "none",
							mask: true,
							title: "考试时间已到，系统将自动交卷",
							duration: 10000,
						});

						this.submit();
						return;
					}
					this.lastTime--;
				}, 1000);
			} else {
				if (this.entryType == "random") {
					this.bankType = 1; // 随机练习全部都是练习类型
					this.randomQuestionList();
				} else {
					//进入页面
					await this.bankExam();
					// 请求题目列表
					this.goodsQuestionList();
				}
			}
		},
		onUnload() {
			if (this.isSubmit) {
				clearInterval(this.timer);
				return;
			}
			//考试试卷 阻止ios手势返回，自动跳回答题页
			if (this.needBack) {
				let app = getApp();
				app.globalData.bankData = this.$data;
				clearInterval(this.timer);
				uni.navigateTo({
					url: "/pages2/bank/questionBank?id=" +
						this.id +
						"&goodsid=" +
						this.goodsId +
						"&isback=true&orderGoodsId=" +
						this.orderGoodsId,
				});
			} else {
				//点击返回按钮确认允许退出，记录答题记录
				clearInterval(this.timer);

				this.examRecordEdit();
			}
		},
		methods: {
			/**
			 * 是否有上传图片
			 */
			hasImgs(bank) {
				return bank.ansText.imageList.length == 0;
			},
			/**
			 * 获取试卷类型2考试,1练习
			 * bank/exam + data
			 */
			bankExam() {
				return new Promise((resolve, reject) => {
					this.$api.bankExam(this.id).then((res) => {
						const {
							doType,
							examLimitClient
						} = res.data.data;
						if (!examClientCanLearn(examLimitClient)) {
							return;
						}
						if (this.entryType == "daily") {
							// 每日一练类型都是为练习
							this.bankType = 1;
						} else {
							this.bankType = doType;
						}
						this.examData = res.data.data;
						this.allTimes = this.examData.answerTime * 60;
						this.lastTime =
							this.examData.answerTime && this.examData.answerTime * 60;
						if (this.bankType == 2) {
							this.needBack = true;
						}
						resolve();
					});
				});
			},
			/**
			 * 点击后退按钮
			 */
			clickLeft() {
				if (this.bankType == 1) {
					let ansCount = this.questionOverNum(true); //已答题数
					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(true); //已答题数
					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,
				});
			},
			/**
			 * 获取已经回答的题目数
			 * hasSpecail (是否包含简答和案例)
			 */
			questionOverNum(hasSpecail) {
				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) {
						//案例题
						if (hasSpecail) {
							let isOver = item.jsonStr.every((jsonItem, indexs) => {
								if (
									jsonItem.type == 1 ||
									jsonItem.type == 2 ||
									jsonItem.type == 3
								) {
									if (item.ques[indexs]) {
										return true;
									} else {
										return false;
									}
								} else if (jsonItem.type == 5) {
									if (
										item.ques[indexs] &&
										(item.ques[indexs].text || item.ques[indexs].imageList.length)
									) {
										console.log("chil");
										return true;
									} else {
										return false;
									}
								}
							});

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

				return count;
			},
			/**
			 * 是否做完所有题目
			 */
			isDoOver() {
				let questionOverNum = this.questionOverNum(true); //获取已经回答的题目数(包括简答和案例)
				if (this.questionList.length == questionOverNum) {
					//全部做完弹窗
					this.cgType = 9;
					this.showpopups = true;
				}
			},
			/**
			 * 暂不交卷
			 */
			noSubmit() {
				//设为允许退出页面
				this.needBack = false;
				uni.navigateBack({
					delta: 1,
				});
			},
			/**
			 * 不离开
			 */
			noLeave() {
				this.isLastCount = false;
			},
			/**
			 * 立即离开并交卷
			 */
			leaveNow() {
				this.needBack = false;
				this.isSubmit = true;
				this.submit(false);
				uni.navigateBack({
					delta: 1,
				});
			},
			/**
			 * 立即交卷
			 */
			submitNow() {
				this.showpopups = false;
				this.needBack = false;
				this.submit();
			},
			/**
			 * 离开页面统计回答正确题数
			 */
			examRecordEdit() {
				if (!this.isSubmit) {
					let {
						doQuestionNum,
						doQuestionIds,
						rightQuestionNum,
						historyExamJson,
					} = this.$method.calculateScore(this.questionList);
					this.$api
						.examRecordEdit({
							orderGoodsId: this.orderGoodsId,
							examId: this.id,
							goodsId: this.goodsId,
							recordId: this.recordId,
							doQuestionIds,
							rightQuestionNum,
							moduleExamId: this.moduleId || 0,
							chapterExamId: this.chapterId || 0,
							status: 0,
							doQuestionNum,
							historyExamJson,
						})
						.then((res) => {
							if (res.data.code == 200) {
								this.entryType == "daily" && this.dailyExam();
							}
						});
				}
			},
			/**
			 * 记录总题数
			 * hasSpecial (是否包含简答和案例) true 包含  false 不包含
			 */
			examRecord(hasSpecial) {
				let questionList = 0;
				// if(!hasSpecial) {
				this.questionList.forEach((item, index) => {
					if (item.type == 1 || item.type == 2 || item.type == 3) {
						questionList++;
					}
				});
				// } else {
				// 	questionList = this.questionList.length;
				// }

				// #ifdef MP-WEIXIN
				let fromPlat = 1
				// #endif
				// #ifdef H5
				let fromPlat = 3
				// #endif
				this.$api
					.examRecord({
						fromPlat: fromPlat, //"来源平台 1小程序 2PC网站 3h5"
						chapterExamId: this.chapterId || 0,
						orderGoodsId: this.orderGoodsId,
						moduleExamId: this.moduleId || 0,
						examId: this.id,
						goodsId: this.goodsId,
						totalQuestionNum: questionList,
						allQuestionNum: this.questionList.length,
						doMode: this.doMode,
						simulateExamId: this.simulateExamId,
					})
					.then((res) => {
						this.recordId = res.data.data;
						//获取recordId 初始化先提交题目 以防突然下次继续做题退出报错
						if (this.bankType == 1) {
							this.examRecordEdit();
						}
					});
			},
			/**
			 * @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 "";
				}
			},

			hideDialog() {
				this.showDialog = false;
			},
			// 请求随机练习题目列表
			randomQuestionList() {
				this.$http({
					url: "/bank/exam/temp",
					method: "post",
					data: {
						goodsId: this.goodsId,
						orderGoodsId: this.orderGoodsId,
						number: this.bankNum,
					},
				}).then((res) => {
					if (res.data.code == 200) {
						this.examData = res.data.data || {};
						this.id = this.examData.examId;
						if (!this.examData.questionList.length) {
							return this.noListTip();
						}
						this.dataAnlyze(this.examData.questionList || []);
					} else {
						this.$u.toast(res.data.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					}
				});
			},
			noListTip(content = "该试卷暂无题目") {
				this.hideDialog();
				uni.showModal({
					showCancel: false,
					content,
					success: (k) => {
						if (k.confirm) {
							this.isSubmit = true;
							uni.navigateBack();
						}
					},
				});
			},
			/**
			 * 请求题目列表 app/common/bank/question/list
			 */
			goodsQuestionList() {
				this.$api[
					this.doMode == 3 ? "goodsRandomQuestionList" : "goodsQuestionList"
				]({
					examId: this.id,
					goodsId: this.goodsId,
					orderGoodsId: this.orderGoodsId,
					from: 1,
				}).then((res) => {
					if (res.data.code == 500) {
						return this.noListTip("你已完成所有题目");
					}
					let data = res.data.data;
					if (this.doMode == 3) {
						this.simulateExamId = data.simulateExamId;
						data = data.questionList;
					}
					if (!data.length) {
						return this.noListTip();
					}
					//考试时间到了自动交卷
					if (this.lastTime) {
						this.timer = setInterval(() => {
							if (this.lastTime <= 0) {
								clearInterval(this.timer);
								uni.showToast({
									icon: "none",
									mask: true,
									title: "考试时间已到，系统将自动交卷",
									duration: 10000,
								});

								this.submit();
								return;
							}
							this.lastTime--;
						}, 1000);
					} else {}
					this.dataAnlyze(data);
				});
			},
			dataAnlyze(datas = []) {
				console.log("datas:", datas);
				datas.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;
						item.analysisContent &&
							(item.analysisContent = item.analysisContent.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
						item.content &&
							(item.content = item.content.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
						return;
					} else if (item.type == 5) {
						//简答题
						item.ansText = {
							text: "",
							imageList: [],
						};

						item.ques = {
							text: "",
							imageList: [],
						};
						item.analysisContent &&
							(item.analysisContent = item.analysisContent.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
						item.content &&
							(item.content = item.content.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
					} else if (item.type == 4) {
						//案例题

						item.ques = [];
						item.current = 0;
						let ansArr = [];
						item.jsonStr.forEach((json, index) => {
							if (json.type == 1) {
								ansArr[index] = json.answerQuestion;
								json.content &&
									(json.content = json.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
							} 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;
								json.content &&
									(json.content = json.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
							} else if (json.type == 3) {
								ansArr[index] = json.answerQuestion;
								json.content &&
									(json.content = json.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
							} else if (json.type == 5) {
								ansArr[index] = {
									text: json.answerQuestion,
									imageList: [],
								};
								json.ansText = {
									text: "",
									imageList: [],
								};
								json.content &&
									(json.content = json.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
							}
						});

						item.analysisContent &&
							(item.analysisContent = item.analysisContent.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
						item.content &&
							(item.content = item.content.replace(
								/<img/gi,
								'<img style="max-width:100%;"'
							));
						item.ans = ansArr;
						return;
					}

					item.analysisContent &&
						(item.analysisContent = item.analysisContent.replace(
							/<img/gi,
							'<img style="max-width:100%;"'
						));
					item.content &&
						(item.content = item.content.replace(
							/<img/gi,
							'<img style="max-width:100%;"'
						));
					item.ans = item.answerQuestion;
					// }
				});

				this.questionList = datas;

				this.lastCount = this.questionList.length;
				this.examRecord();
				this.getCollectInfo(this.current);
			},
			/**
			 * @param {Object} e单选点击
			 */
			radioSelect(optionsId, bindex) {
				// if (this.questionList[bindex].ques) return;
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				this.$set(this.questionList[bindex], "ques", optionsId);
				// if ((bindex + 1) < this.questionList.length) {
				//   this.current = bindex + 1
				// }
				this.isDoOver();

				// 回答错误
				// if (this.questionList[bindex].ques != this.questionList[bindex].ans) {
				//   // /exam/wwrong/record
				//   this.$api
				//     .examWrongRecord({
				//       orderGoodsId: this.orderGoodsId,
				//       examId: this.id,
				//       goodsId: this.goodsId,
				//       moduleExamId: this.moduleId || 0,
				//       chapterExamId: this.chapterId || 0,
				//       questionIds: [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;
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				this.$set(this.questionList[bindex].ques, ansIndex, optionsId);
				this.isDoOver();
			},

			/**
			 * @param {Object} 多选点击
			 */
			checkboxSelect(optionsId, bindex, index) {
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].jsonStr[index],
					"checked",
					!this.questionList[bindex].jsonStr[index].checked
				);
			},

			/**
			 * @param {Object} 案例多选点击
			 */
			checkboxSelectChild(bindex, ansIndex, childIndex) {
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex],
					"checked",
					!this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex]
					.checked
				);
			},

			isCheckboxChecked(arr) {
				return arr.some((item) => {
					if (item.checked) {
						return true;
					}
				});
			},

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

				if (!arr.length) {
					delete this.questionList[bindex].ques;
					uni.showToast({
						title: "请选择答案",
						icon: "none",
					});
					return;
				}

				this.$set(this.questionList[bindex], "ques", arr);
				this.$u.toast("已确认答案");
				this.isDoOver();
				// 切换下一题
				if (
					this.bankType != 1 &&
					this.cgType != 9 &&
					bindex != this.questionList.length - 1
				) {
					this.current = bindex + 1;
					this.getCollectInfo(this.current);
				}
			},
			/**
			 * @param {Object} 案例多选确认
			 */
			checkboxSubmitChild(bindex, ansIndex) {
				// if (this.questionList[bindex].ques[ansIndex]) return;
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				let arr = [];
				this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(
					(item) => {
						if (item.checked) {
							arr.push(item.optionsId);
						}
					}
				);

				if (!arr.length) {
					delete this.questionList[bindex].ques[ansIndex];
					uni.showToast({
						title: "请选择答案",
						icon: "none",
					});
					return;
				}

				this.$set(this.questionList[bindex].ques, ansIndex, arr);
				this.$u.toast("已确认答案");
				this.isDoOver();
				// 切换下一题
				if (
					this.bankType != 1 &&
					this.cgType != 9 &&
					ansIndex != this.questionList[bindex].ques.length - 1
				) {
					this.questionList[bindex].current += 1;
				}
			},

			/**
			 * @param {Object} index
			 * @param {Object} bindex
			 * 判断题
			 */
			judgeSelect(index, bindex) {
				// if (this.questionList[bindex].ques) return;
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				} // 答案: 判断题1正确 0错误
				this.$set(this.questionList[bindex], "ques", index == 0 ? "1" : "0");
				console.log(
					"this.questionList[bindex]:",
					this.questionList[bindex].ques,
					this.questionList[bindex].ans
				);
				this.isDoOver();
				// 回答错误
				// if (this.questionList[bindex].ques != this.questionList[bindex].ans) {
				//   this.$api
				//     .examWrongRecord({
				//       orderGoodsId: this.orderGoodsId,
				//       examId: this.id,
				//       goodsId: this.goodsId,
				//       moduleExamId: this.moduleId || 0,
				//       chapterExamId: this.chapterId || 0,
				//       questionIds: [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;
				if (this.questionList[bindex].ques[ansindex] && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].ques,
					ansindex,
					childindex == 0 ? "1" : "0"
				);
				this.isDoOver();
			},

			openFooterTab() {
				this.show = true;
			},
			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,
						orderGoodsId: this.orderGoodsId,
					})
					.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(true); //已答题数
				this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
				//没有答完
				if (this.lastCount !== 0) {
					this.cgType = 6;
					this.showpopups = true;
					return;
				}
				// }

				if (this.bankType == 2) {
					if (this.lastTime > 0) {
						let lastTime = this.countdown(this.lastTime);
						uni.showModal({
							title: "提示",
							content: `时间还剩余${lastTime},确定交卷吗?`,
							confirmText: "交卷",
							cancelText: "继续答题",
							success: (res) => {
								if (res.confirm) {
									//确定
									this.submit();
								} else {
									//取消
								}
							},
						});
						return;
					}
				}
				this.submit();
			},
			/**
			 * 交卷
			 */
			submit(isShowTip = true) {
				let form = this.$method.calculateScore(this.questionList);
				//交卷
				this.$api
					.examRecordEdit({
						examId: this.id,
						goodsId: this.goodsId,
						recordId: this.recordId,
						orderGoodsId: this.orderGoodsId,
						status: 1, // 1是交卷 2是中途离开
						moduleExamId: this.moduleId || 0,
						chapterExamId: this.chapterId || 0,
						examTime: parseInt(this.allTimes),
						doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
						...form,
					})
					.then((res) => {
						this.isSubmit = true;
						if (res.data.code == 200) {
							this.entryType == "daily" && this.dailyExam();
							if (!isShowTip) {
								return;
							}
							uni.showToast({
								title: "交卷成功",
								duration: 1000,
								icon: "none",
							});
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages2/bank/question_report?goodsId=" +
										this.goodsId +
										"&chapterId=" +
										this.chapterId +
										"&moduleId=" +
										this.moduleId +
										"&examId=" +
										this.id +
										"&id=" +
										this.recordId +
										"&orderGoodsId=" +
										this.orderGoodsId +
										"&entryType=" +
										this.entryType +
										"&bankNum=" +
										this.bankNum +
										"&doMode=" +
										this.doMode +
										"&courseType=1",
								});
							}, 1000);
						}
					});

				//错题集id提交（客观题）
				this.$api.examWrongRecord({
					examId: this.id,
					goodsId: this.goodsId,
					orderGoodsId: this.orderGoodsId,
					questionIds: form.questionIds,
					recordId: this.recordId,
					type: 1, // 题库试卷传1
					doMode: this.doMode,
				});
			},
			// 每日一练试卷打卡
			dailyExam() {
				const dateStamp = parseInt(
					new Date(new Date().toLocaleDateString()).getTime() / 1000
				);
				this.$http({
					url: "/bank/question/special/exam/record",
					method: "post",
					data: {
						examId: this.id,
						chapterExamId: this.chapterId, // 章卷ID
						moduleExamId: this.moduleId, //模块卷ID
						goodsId: this.goodsId,
						recordTime: dateStamp, // 传当天0点时间戳(秒)
					},
				}).then((res) => {
					if (res.data.code == 200) {}
				});
			},
			/**
			 * @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 || "",
							orderGoodsId: this.orderGoodsId,
							doMode: this.doMode,
						})
						.then((res) => {
							if (res.data.code == 200) {
								this.$set(this.collectList, index, true);
								uni.showToast({
									title: "收藏成功",
									duration: 2000,
									icon: "none",
								});
								this.getCollectInfo(index);
							}
						});
				} 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) {
				if (
					this.questionList[bankindex] &&
					this.questionList[bankindex].ansText &&
					this.questionList[bankindex].ansText.imageList.length >= 4
				) {
					uni.showToast({
						icon: "none",
						title: "最多选择4张",
					});
					return;
				}
				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) {
				if (
					this.questionList[bankindex].jsonStr[ansindex] &&
					this.questionList[bankindex].jsonStr[ansindex].ansText &&
					this.questionList[bankindex].jsonStr[ansindex].ansText.imageList
					.length >= 4
				) {
					uni.showToast({
						icon: "none",
						title: "最多选择4张",
					});
					return;
				}
				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 = {
						orderGoodsId: this.orderGoodsId,
						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) {
				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 || "",
				});
				this.$u.toast("已确认答案");
				this.isDoOver();
			},

			/**
			 * @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 || "",
				});
				this.$u.toast("已确认答案");
				this.isDoOver();
			},
			isCheck(item, index) {
				// 案例题处理
				let {
					ques,
					type,
					ans
				} = item;
				if (type == 4) {
					return ans.length == ques.length;
				}
				if (ques) {
					return true;
				}
			},
			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].ans.every((item, i) => {
							return item == this.questionList[index].ques[i];
						});
						//判断
					} else if (item.type == 3) {
						return this.questionList[index].ques == this.questionList[index].ans;
						// } else if (item.type == 5) {
						// 	if(this.questionList[index].ques.text){
						// 		return true
						// 	}else{
						// 		return false
						// 	}
					} 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, i) => {
							return this.questionList[index].ans.indexOf(item) == -1;
						});
						//判断
					} else if (item.type == 3) {
						return this.questionList[index].ques != this.questionList[index].ans;
					} else {
						return false;
					}
				} else {
					return false;
				}
			},
			isPart(item, index) {
				if (this.questionList[index].ques) {
					if (item.type == 2) {
						let isWrong = this.questionList[index].ques.some((item, i) => {
							return this.questionList[index].ans.indexOf(item) == -1;
						});

						let isRight = this.questionList[index].ans.every((item, i) => {
							return item == this.questionList[index].ques[i];
						});

						if (!isRight && !isWrong) {
							return true;
						}
					}
				} else {
					return false;
				}
			},
			isOver(item, index) {
				if (this.questionList[index].ques) {
					if (item.type == 4) {
						//案例题
						let isOver = item.jsonStr.every((jsonItem, indexs) => {
							if (
								jsonItem.type == 1 ||
								jsonItem.type == 2 ||
								jsonItem.type == 3
							) {
								if (item.ques[indexs]) {
									return true;
								} else {
									return false;
								}
							} else if (jsonItem.type == 5) {
								if (
									item.ques[indexs] &&
									(item.ques[indexs].text || item.ques[indexs].imageList.length)
								) {
									console.log("chil");
									return true;
								} else {
									return false;
								}
							}
						});

						if (isOver) {
							return true;
						} else {
							return false;
						}
					} else if (item.type == 5) {
						//简答题
						//每一项都相等
						if (item.ques && (item.ques.imageList.length || item.ques.text)) {
							return true;
						}
						//判断
					} else {
						return false;
					}
				} else {
					return false;
				}
			},

			tabSelect(index, bankindex) {
				this.$set(this.questionList[bankindex], "current", index);
			},

			showPhoto(contentStr) {
				if (contentStr && typeof contentStr == "string") {
					let reg = /<img[^>]*src[=\'\"\s]+([^\'\"]*)[\'\"]?[^>]*>/gi;
					let strArr = contentStr.match(reg);
					strArr.forEach((str, index) => {
						strArr[index] = str.replace(reg, "$1");
					});

					// 预览图片
					uni.previewImage({
						urls: strArr,
						longPressActions: {
							itemList: ["发送给朋友", "保存图片", "收藏"],
							success: function(data) {
								console.log(
									"选中了第" +
									(data.tapIndex + 1) +
									"个按钮,第" +
									(data.index + 1) +
									"张图片"
								);
							},
							fail: function(err) {
								console.log(err.errMsg);
							},
						},
					});
				}
			},
		},
		computed: {
			doMode() {
				// 做题模式 1章卷 2随机练习 3模拟组卷
				if (this.entryType == "sd") {
					return 4;
				}
				return this.examData.simulateStatus ?
					3 :
					this.entryType == "random" ?
					2 :
					1;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.questionBank {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.swiper {
		width: 100%;
		flex: 1;
	}

	.lisSty {
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;

		.flex_auto {
			word-break: break-all;
			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: #36c75a;
		}

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

		&.checked,
		&.user_choose {
			color: #fff;
			background: #007aff;
		}
	}

	.submit_checkbox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 120rpx;
		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;

		&.disabled {
			opacity: 0.6;
		}
	}

	.titles {
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.titBox {
		padding: 41rpx 25rpx 24rpx 25rpx;
	}

	.titBox_title {
		padding: 21rpx;
	}

	.tabs {
		margin: 10rpx;
		display: flex;

		.tab {
			margin: 0 4rpx;
			padding: 10rpx 13rpx;
			text-align: center;
			color: #007aff;
			font-size: 28rpx;
			border-radius: 16rpx;
			background: #fff;

			&.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;

					&.disabled {
						opacity: 0.6;
					}
				}
			}

			.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: #ff3b30;
						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%;
					}
				}
			}
		}
	}

	.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;
		}
	}

	.firstLetter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.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;
		height: 100%;
		padding-top: 8rpx;
		padding-bottom: 100rpx;
		overflow-y: scroll;
	}

	.pad_8 {
		background-color: #fff;
		margin: 0rpx 8rpx 8rpx;
		border-radius: 16rpx;

		&.no-margin {
			margin-top: -16rpx;
			border-radius: 0 0 16rpx 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;

		.flex_center {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin: 0 200rpx;
			font-size: 24rpx;
			color: #999999;

			.up-icon {
				margin-bottom: 18rpx;
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 58rpx;
					height: 21rpx;
				}
			}
		}

		.collect {
			visibility: hidden;
			width: 100rpx;

			&.show {
				visibility: visible;
			}

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-bottom: 6rpx;
				}

				view {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.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: #36c75a;
		}

		&.isWrong {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #ff3b30;
		}

		&.isPart {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #ffc53d;
		}

		&.isOver {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: blue;
		}

		&.check_ans {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #007aff;
		}
	}

	.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;

		.pointer {
			width: 338rpx;
			height: 240rpx;
		}

		.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-arrow {
		padding-top: 124rpx;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 20000;

		.pointer {
			margin-left: 87rpx;
			display: block;
			width: 95rpx;
			height: 98rpx;
		}

		.text {
			padding-left: 177rpx;
			font-size: 32rpx;
			color: #ffffff;
		}

		.btn {
			width: 242rpx;
			height: 82rpx;
			border: 2rpx solid #ffffff;
			border-radius: 16rpx;
			text-align: center;
			line-height: 82rpx;
			margin: 500rpx auto 0;
			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>