kailin_mp/pages/video/exam.vue

<template>
  <view>
    <swiper class="question_content">
      <swiper-item v-for="(item, index) in question_Info.question_list" :key="index">
        <view class="question_item">
          <view class="question_content_text">{{ item.question_title }}</view>
          <view class="question_options">
            <view v-for="(option, cIndex) in item.answer_list" :key="index" :class="['question_answer', { active: item.checkAnswer == option.id }]" @click="_selectAnswer(index, option.id)">
              <view :class="['question_index', { active: item.checkAnswer == option.id }]">{{ option.value.substring(0, 1) }}</view>
              {{ option.value.substring(2) }}
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="bottom_btn">
      <view class="answer_info"
        >已答&nbsp;<view style="color: #5045e6">{{ answeredCount }}</view
        >&nbsp;题，共&nbsp;{{ question_Info.question_total }}&nbsp;题</view
      >
      <view class="submit-btn" @click="_handleSubmit">交卷</view>
    </view>
    <uni-popup ref="tipRef" type="center" @change="_changeTip">
      <view class="tip_content">
        <view code>&nbsp;{{ "<" }}&nbsp; &nbsp;{{ ">" }}&nbsp;</view>
        <view>左右滑动切换题目</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      course_id: null,
      question_Info: {},
    };
  },
  onLoad(param) {
    this.course_id = param.id;
    if (!uni.getStorageSync("isShowExamTip")) {
      this.$refs.tipRef.open("center");
    }

    uni.enableAlertBeforeUnload({
      message: "您确定要退出答题吗?",
      success: function (res) {
        console.log("方法注册成功：", res);
      },
      fail: function (errMsg) {
        console.log("方法注册失败：", errMsg);
      },
    });
  },
  onShow() {
    this._getDetail();
  },
  computed: {
    answeredCount() {
      if (!this.question_Info.question_list) return 0;
      return this.question_Info.question_list.filter((item) => item.checkAnswer).length;
    },
  },
  methods: {
    _changeTip() {
      uni.setStorageSync("isShowExamTip", true);
    },
    _getDetail() {
      this.$http
        .request("api/video_exam_question/get_list", {
          course_id: this.course_id,
        })
        .then((re) => {
          if (re.code == "success") {
            this.question_Info = re.data;
          }
        });
    },
    _selectAnswer(index, id) {
      this.question_Info.question_list[index].checkAnswer = id;
    },
    _handleSubmit() {
      if (this.answeredCount !== this.question_Info.question_total) {
        uni.showModal({
          title: "温馨提示",
          content: "还有未完成的题目，是否交卷",
          confirmText: "继续交卷",
          cancelText: "继续答题",
          success: (res) => {
            if (res.confirm) {
              this._handleIn();
            }
          },
        });
      } else {
        this._handleIn();
      }
    },
    _handleIn() {
      const _this = this
      const question_list = this.question_Info.question_list.filter((item) => item.checkAnswer);
      const answer_list = question_list.map((item) => {
        return { question_id: item.question_id, answer_id: item.checkAnswer };
      });
      this.$http
        .request(
          "api/video_exam_record/hand_in",
          {
            record_id: this.question_Info.record_id,
            answer_list: JSON.stringify(answer_list),
          },
          "POST"
        )
        .then((re) => {
          if (re.code == "success") {
            uni.showModal({
              title: "完成测评",
              content: "恭喜您完成测评，是否查看报告",
              confirmText: "查看报告",
              cancelText: "返回列表",
              success(res) {
                if (res.confirm) {
                  uni.redirectTo({
                    url: `/pages/video/record?type=exam&record_id=${_this.question_Info.record_id}`,
                  });
                } else {
                  uni.redirectTo({
                    url: `/pages/video/index`,
                  });
                }
              },
            });
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.tip_content {
  font-size: 64rpx;
  font-weight: bold;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
}
.question_content {
  height: calc(100vh - 150rpx);
  background-color: #f2f2f2;
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  .question_item {
    width: 100%;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
    .question_content_text {
      font-size: 32rpx;
      margin-bottom: 80rpx;
      font-weight: bold;
    }
    .question_options {
      display: flex;
      flex-direction: column;
      gap: 40rpx;
      width: 100%;
      .question_index {
        border: 2rpx solid #ddd;
        border-radius: 50%;
        width: 50rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        margin-right: 20rpx;
        &.active {
          border-color: #5045e6;
          background-color: #5045e6;
          color: #fff;
        }
      }
      .question_answer {
        height: 80rpx;
        width: 100%;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        &.active {
          color: #5045e6;
        }
      }
    }
  }
}
.bottom_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  border-top: 4rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
  box-sizing: border-box;
  .answer_info {
    display: flex;
    align-items: baseline;
  }
  .submit-btn {
    background-color: #5045e6;
    color: #fff;
    font-size: 28rpx;
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 8rpx;
    box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
    text-align: center;
  }
}
</style>