cnbg_mp/src/pages-sub-mine/quizDetail/index.vue

<template>
  <view class="quiz-detail">
    <view class="quiz-title">
      {{ quiz?.title }}
    </view>
    <view class="quiz-list">
      <view class="question-item" v-for="(item, index) in quizItems" :key="item.itemId">
        <view class="question-title">{{ index + 1 }}.{{ item.label }}</view>
        <uv-radio-group v-model="item.answered" placement="column" :disabled="submitted">
          <uv-radio
            class="question-radio"
            :customStyle="{ margin: '8px' }"
            v-for="(iten, indey) in item.options"
            :key="indey"
            :label="iten.text"
            :name="iten.no"
          >
            <template v-if="iten?.type === 'text'">
              {{ iten.text }}
            </template>
            <template v-if="iten?.type === 'img'">
              <uv-image
                :src="getImgUrl(iten?.text)"
                width="210rpx"
                height="180rpx"
                @click.stop.self="preImg(iten?.text)"
              />
            </template>
          </uv-radio>
        </uv-radio-group>
      </view>
    </view>
    <view class="sign-up-btn">
      <template v-if="!submitted">
        <button class="btn" @click="submitFn">提 交</button>
      </template>
      <template v-else>
        <div class="result">
          {{ quiz?.expand?.finalMark >= quiz?.expand?.passingMark ? '考试通过' : '考试不通过' }}
          <text>考试成绩： {{ quiz?.expand?.finalMark }}</text>
        </div>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { quizDetailApi, quizResultCreateApi } from '@/service/modules/quiz'
import { ref } from 'vue'

const id = ref('')
onLoad((e: any) => {
  if (e?.id) {
    id.value = e.id
    getDetail()
  }
})

const quizItems = ref<any[]>([])
const quiz = ref()
const submitted = ref(false)

const getDetail = async () => {
  const res = await quizDetailApi({ quizId: id.value })
  if (res.code === 0) {
    if (!res.data.submitted) {
      res.data.items.forEach((item: any) => (item.answered = ''))
    }
    // 是否已经提交
    submitted.value = res.data.submitted
    quizItems.value = res.data.items
    quiz.value = res.data.quiz
  }
}

const getImgUrl = (path: string) => import.meta.env.VITE_APP_URL + path

const preImg = (path: string) => {
  const url = getImgUrl(path)
  const arr = [url]
  uni.previewImage({
    urls: arr
  })
}

const submitFn = async () => {
  const flag = quizItems.value?.every((item: any) => item.answered)
  if (!flag) {
    return uni.showToast({
      title: '请检查是否遗漏',
      icon: 'none',
      duration: 800
    })
  }

  let finalMark = quizItems.value.reduce((accumulator, item) => {
    if (item.answer === item.answered) {
      return accumulator + item.mark
    }
    return accumulator + 0
  }, 0)

  const obj = {
    quizId: quiz.value.quizId,
    title: quiz.value.title,
    itemQty: quiz.value.expand.itemQty,
    totalMark: quiz.value.expand.totalMark,
    passingMark: quiz.value.expand.passingMark,
    finalMark: finalMark,
    items: quizItems.value
  }
  const res = await quizResultCreateApi({ quizResults: [obj] })
  if (res.code === 0) {
    uni.showToast({
      title: '提交成功',
      icon: 'none',
      duration: 800
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
    // getDetail()
  }
}
</script>

<style lang="scss" scoped>
.quiz-detail {
  .quiz-title {
    text-align: center;
    margin: 20rpx auto;
    font-weight: 600;
    font-size: 36rpx;
  }
  .quiz-list {
    margin-top: 30rpx;
    padding-bottom: 120rpx;

    .question-item {
      .question-title {
        font-weight: 36rpx;
        margin-bottom: 20rpx;
      }
      padding: 40rpx 24rpx;
      background-color: #fff;
      border-bottom: 1px solid #f6f6f6;
    }
  }
  .sign-up-btn {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    .btn {
      width: 690rpx;
      margin: 20rpx 30rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      font-size: 30rpx;
      color: #fff;
      background-color: #6eb657;
      border-radius: 20rpx;
    }
    .result {
      width: 690rpx;
      margin: 20rpx 30rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      font-size: 30rpx;
      color: #fff;
      background-color: #ccc;
      border-radius: 20rpx;
    }
    .disabled {
      background-color: #ccc;
    }
  }
}
</style>