zc_saas_h5/pages2/class/questionBank.vue

<template>
  <view class="questionBank">
    <uni-nav-bar
      class="navbar"
      @clickLeft="clickLeft"
      left-icon="back"
      :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 class="leftLetters"></view>
            </view>
            <view class="titles">
              <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>
                </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>
                </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>
                </view>
              </view>
              <view
                v-if="bankType == 2 || (bankType == 1 && !bank.ques)"
                class="submit_checkbox"
                :class="{ disabled: !isCheckboxChecked(bank.jsonStr) }"
                @click="checkboxSubmit(bankIndex)"
                >确认答案</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>
                </view>
              </view>
            </view>
            <view v-if="bankType == 1 && bank.ques">
              <view class="pad_8 answer">
                <view>
                  题目答案：
                  <text
                    v-for="(ansItem, ansItemIndex) in bank.ans"
                    :key="ansItemIndex"
                    >{{ ast[ansItem - 1] }}</text
                  >
                </view>
                <view>
                  我的答案：
                  <text
                    v-for="(quesItem, quesItemIndex) in bank.ques"
                    :key="quesItemIndex"
                    >{{ 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>
                </view>
              </view>
              <view v-if="bank.ques">
                <view
                  v-for="(item, index) in judge"
                  :key="index"
                  class="lisSty"
                  @click="judgeSelect(index, bankIndex)"
                >
                  <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>
                </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.text || bank.ques.imageList.length)
                  "
                >
                  <view class="answerTitle">我的答案:</view>
                  {{ bank.ques.text }}
                  <view class="imgs">
                    <image
                      class="img"
                      v-for="(ques, quesIndex) in bank.ques.imageList"
                      :key="quesIndex"
                      :src="$method.splitImgHost(ques, true)"
                    ></image>
                  </view>
                </view>
              </view>
            </view>
            <view
              v-if="
                bankType == 1 &&
                bank.ques &&
                (bank.ques.text || bank.ques.imageList.length)
              "
            >
              <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>
                    </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>
                    </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>
                    </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>
                    </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>
                    </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>
                    </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 class="titles">
                    <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/08-10_032.jpg"
                          mode=""
                        ></image>
                        <view class="progress"
                          >{{ ansItem.ansText.imageList.length || "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"
                          :key="imgIndex"
                          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="bankType == 1 && bank.ques[ansIndex]"
                    >
                      <view class="answerTitle">我的答案</view>
                      {{ bank.ques[ansIndex].text }}
                      <view class="imgs">
                        <image
                          class="img"
                          :key="quesIndex"
                          v-for="(ques, quesIndex) in bank.ques[ansIndex]
                            .imageList"
                          :src="$method.splitImgHost(ques, true)"
                        ></image>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="bankType == 1 && 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 class="footer_btn">
            <!-- <view class="collect">
              <view v-if="collectList[bankIndex]">
                <image src="/static/icon/collected.png" mode=""></image>
                <view>取消收藏</view>
              </view>
            </view> -->
            <view
              class="collect show"
              @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">
      <view class="text">左右滑动切换上下题</view>
      <view class="btn" @click="hideDialog">我知道了</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="showpopups = false">下次继续</view>
          <view class="btnsty btns2" @click="backPages">结束做题</view>
        </view>
        <view class="classFootsty" v-if="cgType === 8">
          <view class="btnsty btns1" @click="leaveNow()">下次继续</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>
    <!-- 节卷不需要拍照 -->
    <!-- :show="examType != 2 && photoPopup" -->
    <u-popup
      v-model="photoPopup"
      mode="bottom"
      border-radius="40"
      :mask-close-able="false"
    >
      <!-- 播放前拍照start -->
      <!-- :mask-close-able="false" -->
      <!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
      <view v-if="examType != 2 && photoPopup">
        <view class="photoBox">
          <view class="photoTop">
            <view class="sqzz" v-if="false">
              <u-icon
                name="close"
                color="#333333"
                size="30"
                @click="closePhoto"
              ></u-icon>
            </view>
            <view class="centersq">请正视手机屏幕</view>
            <view class="sqzz"></view>
          </view>
          <view class="photoCenter">
            <view class="center_camera" v-if="photoPopup && isTaking">
              <!-- #ifdef MP-WEIXIN -->
              <camera
                device-position="front"
                flash="off"
                @error="error"
                style="width: 100%; height: 100%"
              >
                <!-- 加人脸框 -->
                <cover-view class="head_take">
                  <cover-view class="headTake_up color"></cover-view>
                  <cover-view class="headTake_minddle">
                    <cover-view class="min_left color"></cover-view>
                    <cover-view class="min_img"></cover-view>
                    <cover-view class="min_right color"></cover-view>
                  </cover-view>
                  <cover-view class="headTake_down color"></cover-view>
                </cover-view>
              </camera>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <video
                :controls="false"
                id="video"
                width="400"
                height="300"
                class="photo_v"
              ></video>
              <view class="mask"></view>
              <!-- #endif -->
            </view>
            <view class="custom" v-if="!isTaking">
              <!-- #ifdef MP-WEIXIN -->
              <image :src="avatarUrl" mode=""></image>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <image :src="faceUrl" mode=""></image>
              <!-- #endif -->
            </view>
          </view>
          <view class="photoBoxbtns">
            <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
              >拍照</view
            > -->
            <view v-if="isTaking" class="takePhoto_btn">
              <view style="width: 100rpx; height: 2rpx"></view>
              <view class="middle_btn" @click="takePhoto">
                <view class="square"></view>
              </view>
              <view class="rights" @click="takePhTips()">
                <text>拍照提示</text>
                <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
              </view>
            </view>
            <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
            <view class="btnResult" v-if="!isTaking" @click="submitPhoto"
              >确认</view
            >
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 拍照提示 -->
    <popup-photo
      :popupPhotoShow.sync="popupPhotoShow"
      @takePhoto="toTakePhoto()"
    ></popup-photo>
  </view>
</template>

<script>
import PopupPhoto from "@/components/popup/index.vue";
export default {
  components: {
    PopupPhoto,
  },
  data() {
    return {
      photoPopup: false,
      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,
      sectionId: 0,
      showArrow: false, //退出提示
      isFromVideo: "",
      gradeId: "",
      courseId: 0,
      cgType: 0, //对应设计稿弹窗编码,
      avatarUrl: "",
      ossAvatarUrl: "",
      goodsDetail: {},
      isTakePhoto: false,
      orderGoodsId: 0,
      isTaking: true, //是否正在拍照
      needPhoto: false, //是否需要拍照
      examType: 0, // 3-模块，1-章，2-节
      compareFaceData: 0, // 拍照匹配相似度
      learning: false, // 1合格，0不合格
      originShowDialog: false,
      uploadLock: false, //上传图片
      examData: {},
      popupPhotoShow: false,
      // h5
      faceUrl: "",
      simulateExamId: undefined,
    };
  },
  watch: {
    photoPopup(n) {
      // 拍照弹窗和showDialog同时出现时，先展示拍照弹窗再展示showDialog弹窗
      if (n) {
        this.showDialog && (this.showDialog = false);
      } else {
        this.originShowDialog && (this.showDialog = true);
      }
    },
  },
  async onLoad(option) {
    this.examType = option.type;
    this.id = option.id;
    this.goodsId = option.goodsid;
    this.chapterId = option.chapterId;
    this.courseId = option.courseId;
    this.sectionId = option.sectionId;
    this.moduleId = option.moduleId;
    this.isFromVideo = option.isFromVideo || "";
    this.gradeId = option.gradeId || "";
    this.orderGoodsId = Number(option.orderGoodsId);
    let isBack = option.isback;

    let showDialog = uni.getStorageSync("showDialog");

    if (showDialog) {
      this.showDialog = false;
    } else {
      this.showDialog = true;
      this.originShowDialog = 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;

      //需要拍没拍过直接弹出摄像头
      if (this.needPhoto && !this.isTakePhoto) {
        if (!this.learning && this.examType != 2) {
          if (uni.getStorageSync("tabkePhotoShow")) {
            // #ifdef MP-WEIXIN
            this.photoPopup = true;
            this.isTaking = true;
            // #endif
            this.avatarUrl = "";
            // #ifdef H5
            this.isHadCamera();
            // #endif
          } else {
            this.popupPhotoShow = true;
            uni.setStorageSync("tabkePhotoShow", 1); // 本地缓存用来判断是否已经弹出过弹窗
          }
        }
      } else {
        //不需要拍照
        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 {
      await this.getGoodsDetail();
      this.needPhoto && (await this.getExamLearnStatus());
      // 请求题目列表
      await this.bankExam();
      this.goodsQuestionList();
    }
  },
  mounted() {},
  onUnload() {
    if (this.isSubmit) {
      clearInterval(this.timer);
      return;
    }

    if (this.needPhoto && !this.isTakePhoto) {
      return;
    }

    //考试试卷 阻止ios手势返回，自动跳回答题页
    if (this.needBack) {
      let app = getApp();
      app.globalData.bankData = this.$data;
      clearInterval(this.timer);
      uni.navigateTo({
        url:
          "/pages2/class/questionBank?id=" +
          this.id +
          "&goodsid=" +
          this.goodsId +
          "&isback=true&orderGoodsId=" +
          this.orderGoodsId,
      });
    } else {
      //点击返回按钮确认允许退出，交卷
      clearInterval(this.timer);
      this.examRecordEdit();
    }
  },
  computed: {
    doMode() {
      // 做题模式 1章卷 2随机练习 3模拟组卷
      return this.examData.simulateStatus ? 3 : undefined;
    },
  },
  methods: {
    getExamLearnStatus() {
      return this.$api
        .getExamLearnStatus({
          goodsId: this.goodsId,
          gradeId: this.gradeId,
          chapterId: this.chapterId,
          courseId: this.courseId,
          moduleId: this.moduleId,
          type: this.examType,
          examId: this.id,
        })
        .then((res) => {
          this.learning = res.data.data;
          return Promise.resolve();
        });
    },
    getGoodsDetail() {
      return new Promise((resolve) => {
        let self = this;
        this.$api.goodsDetail(this.goodsId).then((res) => {
          self.goodsDetail = res.data.data;
          if (self.goodsDetail.goodsPhotoExamConfig) {
            let goodsPhotoExamConfig = JSON.parse(
              self.goodsDetail.goodsPhotoExamConfig
            );
            if (goodsPhotoExamConfig.photograph > 0) {
              self.needPhoto = true;
            }
          }

          resolve();
        });
      });
    },
    reTake() {
      this.isTaking = true;
      // #ifdef H5
      this.faceUrl = "";
      this.getUserMedia({
        video: {
          width: 400,
          height: 300,
        },
      });
      // #endif
    },
    postStudyRecord() {
      let self = this;
      let data = {
        photo: self.ossAvatarUrl,
        recordId: self.recordId,
      };
      if (this.ossAvatarUrl) {
        data.similarity = this.compareFaceData; // 相似度
      }
      // console.log(data, "拍照提交");
      this.$api.studyExamPhotoRecord(data).then((res) => {
        // console.log(res, "拍照提交结果");
        if (res.data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: res.data.msg,
            duration: 10000,
          });
          return;
        }
        self.ossAvatarUrl = "";
        self.isTakePhoto = true;
        //拍照
        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);
        }
      });
    },
    uploadFile(options, int) {
      var self = this;
      return new Promise((resolve, reject) => {
        var data = {
          imageStatus: int,
          gradeId: this.gradeId,
        };
        self.$api.aliyunpolicy(data).then((res) => {
          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;
          }
          let filePath = "";
          // #ifdef H5
          var localData = options; //dataUrl为base64位
          let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码，去掉data:image/png;base64部分
          let length = base.length;
          let url = new Uint8Array(length);
          while (length--) {
            url[length] = base.charCodeAt(length);
          }
          filePath = new File([url], "a.jpg", {
            type: "image/jpg",
          });
          console.log("filePath:", filePath);

          uni.uploadFile({
            url: ossToken.host,
            name: "file",
            file: filePath,
            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) => {
              this.$u.toast("上传成功");
              this.ossAvatarUrl = ossToken.dir;
              console.log("h5上传成功--:", this.ossAvatarUrl);
              resolve();
            },
            fail: (error) => {
              console.log("h5上传失败:", error);
              uni.showToast({
                title: "上传接口报错，请重新拍照上传" + error,
                icon: "none",
              });
              this.openPhoto();
              return;
            },
          });
          // #endif
          // #ifdef MP-WEIXIN
          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) {
              self.ossAvatarUrl = ossToken.dir;
              resolve(ossToken.dir);
              // } else {
              //   uni.showToast({
              //     title: "上传失败",
              //     icon: "none",
              //   });
              //   return;
              // }
            },
            fail: (error) => {
              uni.showToast({
                title: "上传接口报错" + error,
                icon: "none",
              });
              this.uploadLock = false;
              this.openPhoto();
              return;
            },
          });
          // #endif
        });
      });
    },
    imageInfos() {
      var self = this;
      return new Promise(async (resolve, reject) => {
        // #ifdef MP-WEIXIN
        uni.getImageInfo({
          src: self.avatarUrl,
          success: async (res) => {
            let canvasWidth = res.width; //图片原始长宽
            let canvasHeight = res.height;
            if (canvasWidth > 2000 || canvasHeight > 2000) {
              uni.compressImage({
                src: self.avatarUrl,
                quality: 75,
                width: "35%",
                height: "35%",
                success: async (rest) => {
                  const waitUpload = await self.uploadFile(
                    rest.tempFilePath,
                    0
                  );
                  resolve(waitUpload);
                },
              });
            } else if (canvasWidth > 1000 || canvasHeight > 1000) {
              uni.compressImage({
                src: self.avatarUrl,
                quality: 75,
                width: "50%",
                height: "50%",
                success: async (rest) => {
                  const waitUpload = await self.uploadFile(
                    rest.tempFilePath,
                    0
                  );
                  resolve(waitUpload);
                },
              });
            } else {
              console.log("无需压缩");
              const waitUpload = await self.uploadFile(self.avatarUrl, 0);
              resolve(waitUpload);
            }
          },
        });
        // #endif
        // #ifdef H5
        const waitUpload = await this.uploadFile(this.faceUrl, 0);
        resolve(waitUpload);
        // #endif
      });
    },
    /**
     * 人脸匹配
     */
    faceRecognition() {
      return new Promise((resolve) => {
        // #ifdef MP-WEIXIN
        let fileSystem = uni.getFileSystemManager();
        fileSystem.readFile({
          filePath: `${this.avatarUrl}`,
          encoding: "base64",
          position: 0,
          success: (res) => {
            let base64 = "data:image/jpg;base64," + res.data;

            console.log("试卷-base64Data人脸识别参数：", {
              imageA: base64,
              orderGoodsId: this.orderGoodsId,
              gradeId: this.gradeId,
            });
            this.CompareFace(base64, resolve);
          },
          fail(err) {
            console.error(err, "err");
          },
        });
        // #endif
        // #ifdef H5
        this.CompareFace(this.faceUrl, resolve);
        // #endif
      });
    },
    CompareFace(url, resolve) {
      let timer = setTimeout(() => {
        uni.showToast({
          icon: "none",
          title: "拍照超时，请重新拍照",
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          },
        });
      }, 10 * 1000);

      this.$api
        .faceCertificationCompareFace({
          imageA: url,
          orderGoodsId: this.orderGoodsId,
          gradeId: this.gradeId,
        })
        .then((res) => {
          clearTimeout(timer);
          console.log(res, "人脸识别成功res");
          resolve(res.data.data);
        })
        .catch((err) => {
          clearTimeout(timer);
          // 当前网络延迟，
          console.log("人脸识别错误:", err);
          uni.showModal({
            content: "当前网络延迟",
            showCancel: false,
            success: (resultst) => {
              if (resultst.confirm) {
                uni.navigateBack();
              }
            },
          });
        });
    },
    toTakePhoto() {
      this.popupPhotoShow = false;
      this.openPhoto();
    },
    takePhTips() {
      this.popupPhotoShow = true;
      this.isTaking = false;
      this.photoPopup = false;
    },
    // 确认拍照
    async submitPhoto() {
      if (this.uploadLock) {
        return;
      }
      this.uploadLock = true;

      let compareFaceData = await this.faceRecognition();
      this.compareFaceData = compareFaceData;
      if (compareFaceData >= 80) {
        const waitYS = await this.imageInfos();
        this.postStudyRecord(); //提交记录
        this.photoPopup = false;
      } else {
        uni.showToast({
          title: "人脸匹配不通过，请重新拍照上传",
          icon: "none",
          duration: 2000,
        });

        setTimeout(() => {
          this.uploadLock = false;
          this.openPhoto();
        }, 2000);
      }
    },
    //拍照
    openPhoto() {
      console.log("开始拍照");
      // this.enableAutoRotation = false;
      // #ifdef MP-WEIXIN
      this.photoPopup = true;
      this.isTaking = true;
      uni.setKeepScreenOn({
        keepScreenOn: true,
      });
      uni.authorize({
        scope: "scope.camera",
        success() {},
      });
      // #endif
      // #ifdef H5
      this.isHadCamera();
      // #endif
    },
    isHadCamera() {
      if (
        (window.navigator.mediaDevices &&
          window.navigator.mediaDevices.getUserMedia) ||
        window.navigator.getUserMedia ||
        window.navigator.webkitGetUserMedia ||
        window.navigator.mozGetUserMedia
      ) {
        console.log("getUserMedia----");
        // 调用用户媒体设备, 访问摄像头
        this.getUserMedia(
          {
            video: {
              width: 400,
              height: 300,
            },
          },
          this.photographSuccess,
          this.photographError
        );
      } else {
        console.log("1111没有摄像");
        this.photographError();
      }
    },
    //确认拍照
    takePhoto() {
      // #ifdef MP-WEIXIN
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          console.log(res.tempImagePath);
          this.avatarUrl = res.tempImagePath;
          // self.submitPhoto();
          this.isTaking = false;
        },
        fail: (err) => {
          console.log(err);
        },
      });
      // #endif
      // #ifdef H5
      const canvas = document.createElement("canvas");
      canvas.width = 400;
      canvas.height = 400;
      const context = canvas.getContext("2d");
      const video = document.querySelector("video");
      context.drawImage(video, 0, 0, 400, 400);
      this.faceUrl = canvas.toDataURL("image/png");
      this.isTaking = false;
      // #endif
    },
    /**
     * 是否有上传图片
     */
    hasImgs(bank) {
      return bank.ansText.imageList.length == 0;
    },
    /**
     * 获取试卷类型2考试,1练习
     */
    bankExam() {
      return this.$api.bankExam(this.id).then((res) => {
        this.bankType = res.data.data.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;
        }
        return Promise.resolve();
      });
    },
    /**
     * 点击后退按钮
     */
    clickLeft() {
      //需要拍照没有拍直接返回
      if (this.needPhoto && !this.isTakePhoto) {
        this.isSubmit = true;
        uni.navigateBack({
          delta: 1,
        });
        return;
      }
      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,
      });
    },
    /**
     * 获取已经回答的题目数
     * 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) {
                console.log(jsonItem, 111);
                if (
                  item.ques[indexs] &&
                  (item.ques[indexs].text.length ||
                    item.ques[indexs].imageList.length)
                ) {
                  return true;
                } else {
                  return false;
                }
              }
            });

            if (isOver) {
              count++;
              console.log(item, 444);
            }
          }
        } else if (item.type == 5) {
          //简答题
          if (hasSpecail) {
            if (
              item.ques &&
              (item.ques.text.length || item.ques.imageList.length)
            ) {
              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.isSubmit = true;
      uni.navigateBack({
        delta: 1,
      });

      //需要拍照没有拍，返回不扣次数
      if (this.needPhoto && !this.isTakePhoto) {
        return;
      }
      this.submit("leaveNow");
    },
    /**
     * 立即交卷
     */
    submitNow() {
      this.showpopups = false;
      this.needBack = false;
      this.submit();
    },
    /**
     * 离开页面统计回答正确题数
     */
    examRecordEdit() {
      if (!this.isSubmit) {
        this.submit("leave");
      }
    },

    /**
     * @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 "";
      }
    },
    noListTip(content = "该试卷暂无题目") {
      this.hideDialog();
      uni.showModal({
        showCancel: false,
        content,
        success: (k) => {
          if (k.confirm) {
            this.isSubmit = true;
            uni.navigateBack();
          }
        },
      });
    },
    /**
     * 请求题目列表
     */
    goodsQuestionList() {
      this.$api[
        this.doMode == 3 ? "goodsRandomQuestionList" : "goodsQuestionList"
      ]({
        examId: this.id,
        goodsId: this.goodsId,
        orderGoodsId: this.orderGoodsId,
        from: 2,
      }).then(async (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();
        }
        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;
              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) {
              //案例题
              console.log(item.jsonStr);
              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: "",
                    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.content &&
              (item.content = item.content.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              ));
            item.ans = item.answerQuestion;
          }
        });

        this.questionList = data;
        this.lastCount = this.questionList.length;
        this.getCollectInfo(this.current);
        await this.examRecord();
      });
    },
    /**
     * 记录总题数,获取recordId
     * hasSpecial (是否包含简答和案例) true 包含  false 不包含
     */
    examRecord(hasSpecial) {
      return new Promise((resolve) => {
        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;
        // }

        this.$api
          .bankRecord({
            courseId: this.courseId,
            // chapterExamId: this.chapterId || 0,
            // moduleExamId: this.moduleId || 0,
            chapterId: this.chapterId || 0,
            moduleId: this.moduleId || 0,
            sectionId: this.sectionId || 0,
            examId: this.id,
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
            gradeId: this.gradeId,
            totalQuestionNum: questionList,
            allQuestionNum: this.questionList.length,
            type: this.examType,
            simulateExamId: this.simulateExamId,
            doMode: this.doMode,
          })
          .then((res) => {
            this.recordId = res.data.data;

            if (this.needPhoto) {
              if (!this.learning && this.examType != 2) {
                if (uni.getStorageSync("tabkePhotoShow")) {
                  // #ifdef MP-WEIXIN
                  this.photoPopup = true; //拍照
                  this.isTaking = true;
                  // #endif
                  // #ifdef H5
                  this.isHadCamera();
                  // #endif
                } else {
                  this.popupPhotoShow = true;
                  uni.setStorageSync("tabkePhotoShow", 1); // 本地缓存用来判断是否已经弹出过弹窗
                }
              }
            } else {
              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);
              }

              resolve();
            }
          });
      });
    },
    /**
     * @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();
    },

    /**
     * @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) return;
      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();

      // let isWrong = this.questionList[bindex].ques.some(
      //   (quesItem, quesIndex) => {
      //     return (
      //       this.questionList[bindex].ques[quesIndex] !=
      //       this.questionList[bindex].ans[quesIndex]
      //     );
      //   }
      // );
      // let isWrong = this.questionList[bindex].ques.some((item, i) => {
      //   return this.questionList[bindex].ans.indexOf(item) == -1;
      // })
    },

    /**
     * @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();
    },

    /**
     * @param {Object} index
     * @param {Object} bindex
     * 判断题
     */
    judgeSelect(index, bindex) {
      // if (this.questionList[bindex].ques) return;
      if (this.questionList[bindex].ques && this.bankType == 1) {
        return;
      }
      this.$set(this.questionList[bindex], "ques", index == 0 ? "1" : "0");
      this.isDoOver();
    },

    /**
     * @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;
    },
    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,
          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);
          }
        });
    },
    /**
     * @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;
    },
    pdsubmit() {
      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(typesubmit) {
      let form = this.$method.calculateScore(this.questionList);
      clearInterval(this.timer);
      //交卷
      this.$api
        .bankRecordEdit({
          moduleId: this.moduleId || 0,
          chapterId: this.chapterId || 0,
          sectionId: this.sectionId || 0,
          gradeId: this.gradeId,
          examId: this.id,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          recordId: this.recordId,
          courseId: this.courseId,
          status: 1,
          type: this.examType,
          examTime: parseInt(this.allTimes),
          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
          ...form,
        })
        .then((res) => {
          this.isSubmit = true;
          if (res.data.code == 200) {
            uni.showToast({
              title: "交卷成功",
              duration: 1000,
              mask: true,
              icon: "none",
            });
            if (!typesubmit) {
              console.log("跳转----");
              setTimeout(() => {
                uni.redirectTo({
                  url:
                    "/pages2/class/question_report?rightQuestionNum=" +
                    form.rightQuestionNum +
                    "&doWrongQuestionNum=" +
                    form.questionIds.length +
                    "&score=" +
                    form.performance +
                    "&totalScore=" +
                    form.totalScore +
                    "&reportStatus=" +
                    form.reportStatus +
                    "&lessQuestionNum=" +
                    form.lessQuestionNum +
                    "&examId=" +
                    this.id +
                    "&recordId=" +
                    this.recordId +
                    "&type=" +
                    this.examType +
                    "&orderGoodsId=" +
                    this.orderGoodsId,
                });
              }, 1000);
            }
          }
        });

      //错题集id提交（客观题）
      this.$api
        .examWrongRecord({
          moduleId: this.moduleId || 0,
          chapterId: this.chapterId || 0,
          sectionId: this.sectionId || 0,
          gradeId: this.gradeId,
          courseId: this.courseId,
          examId: this.id,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          questionIds: form.questionIds,
          recordId: this.recordId,
          type: 2, // 视频课程的传2
          doMode: this.doMode,
        })
        .then((res) => {})
        .catch((err) => {});
    },

    /**
     * @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) {
      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);
              }
            },
          });
        },
      });
    },
    /**
     * @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,
      });
      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) {
      if (this.questionList[index].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);
    },

    /**
     * 退出全屏
     */
    exitFullscreen() {
      try {
        var de = document;
        // console.log(de);
        if (de.exitFullscreen) {
          de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
          de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
          de.webkitCancelFullScreen();
        }
      } catch (err) {}
    },

    fullele() {
      return (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        null
      );
    },
    //判断是否全屏
    isFullScreen() {
      return !!(document.webkitIsFullScreen || this.fullele());
    },
    getUserMedia(constraints, success, error) {
      console.log("getUserMedia===", constraints, "success:", success);
      if (window.navigator.mediaDevices.getUserMedia) {
        // 最新的标准API
        window.navigator.mediaDevices
          .getUserMedia(constraints)
          .then(success)
          .catch(error);
      } else if (window.navigator.webkitGetUserMedia) {
        // webkit核心浏览器
        window.navigator.webkitGetUserMedia(constraints, success, error);
      } else if (window.navigator.mozGetUserMedia) {
        // firfox浏览器
        window.navigator.mozGetUserMedia(constraints, success, error);
      } else if (window.navigator.getUserMedia) {
        // 旧版API
        window.navigator.getUserMedia(constraints, success, error);
      }
    },
    photographSuccess(stream) {
      console.log("有摄像头---", stream);
      this.photoPopup = true;
      this.isTaking = true;
      this.$nextTick(() => {
        const video = document.querySelector("video");
        console.log("video:", video);
        video.srcObject = stream;
        video.play();
      });
    },
    photographError(err) {
      console.log("没有摄像头：", err);
      uni.showModal({
        title: "提示",
        content:
          "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.photoBox {
  width: 100%;

  // background-color: #ffffff;
  // border-radius: 24px 24px 0px 0px;
  .photoTop {
    width: 100%;
    height: 74rpx;
    border-radius: 20px 20px 0px 0px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rpx 38rpx;

    .sqzz {
      width: 28rpx;
      height: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .centersq {
      color: #333;
      font-size: 30rpx;
      font-weight: 500;
    }
  }

  .photoCenter {
    width: 750rpx;
    height: 75vh;
    position: relative;

    .center_camera {
      width: 100%;
      height: 75vh;
      position: fixed;

      .head_take {
        width: 100%;
        height: 75vh;
        display: flex;
        flex-direction: column;
      }

      .headTake_up {
        width: 100%;
        height: 100rpx;
      }

      .headTake_minddle {
        display: flex;

        .min_img {
          width: 500rpx;
          height: 550rpx;
        }

        .min_left,
        .min_right {
          flex: 1;
          height: 550rpx;
        }
      }

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

      .color {
        background-color: #333;
        opacity: 0.5;
      }

      .photo_v {
        width: 100%;
        height: 100%;
      }

      .mask {
        width: 500rpx;
        height: 550rpx;
        position: absolute;
        top: 100rpx;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
      }
    }

    .custom {
      width: 750rpx;
      height: 75vh;
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;

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

  .photoBoxbtns {
    display: flex;

    .takePhoto_btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #a9a7a9;
      padding: 40rpx 26rpx;

      .middle_btn {
        width: 120rpx;
        height: 120rpx;
        border-radius: 40rpx;
        border: 4rpx solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .square {
        width: 96rpx;
        height: 96rpx;
        background: #ffffff;
        border-radius: 28rpx;
      }

      .rights {
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }

    .btnResult {
      height: 100rpx;
      width: 100%;
      background-color: #07c160;
      text-align: center;
      line-height: 100rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.navbar {
  position: relative;
  z-index: 20000;
}

.questionBank {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

  .flex_auto {
    flex: 1;
    word-break: break-all;
  }
}

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

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