YY_MP_REFACTOR/src/pages-mine/compliance-evaluation/ability-test.vue

<template>
  <view class="ability-test-page">
    <view class="ability-test-header">
      <view class="ability-test-header-title">能力测试</view>
      <view class="ability-test-header-desc">请认真完成以下合规测评内容</view>
    </view>

    <view v-for="quizItem in pkgQuizList" :key="quizItem.quiz.quizId" class="quiz-card">
      <view class="quiz-card-header">
        <view class="quiz-card-title">
          {{ quizItem.quiz.title }}
        </view>

        <view class="quiz-card-meta">
          <text>共 {{ quizItem.items.length }} 题</text>
        </view>
      </view>

      <view v-for="(item, index) in quizItem.items" :key="item.itemId" class="question-card">
        <view class="question-title-row">
          <view class="question-index">
            {{ index + 1 }}
          </view>

          <view class="question-title">
            {{ item.label }}
          </view>
        </view>

        <radio-group class="question-radio-group" @change="handleRadioChange(item, $event)">
          <label
            v-for="optionItem in item.options"
            :key="optionItem.no"
            class="option-item"
            :class="item.userAnswer === optionItem.no ? 'option-item-active' : ''"
          >
            <radio
              class="option-radio"
              :value="optionItem.no"
              :checked="item.userAnswer === optionItem.no"
              color="#2f73ff"
            />

            <view class="option-content">
              <text class="option-no">{{ optionItem.no }}</text>
              <text class="option-text">{{ optionItem.text }}</text>
            </view>
          </label>
        </radio-group>
      </view>
    </view>

    <view v-if="!pkgQuizList.length" class="empty">
      {{ loading ? '加载中...' : '暂无测试内容' }}
    </view>

    <view class="ability-test-footer">
      <button
        class="submit-button"
        :class="submitting ? 'submit-button-disabled' : ''"
        :disabled="submitting"
        hover-class="submit-button-hover"
        @click="submitFn"
      >
        {{ submitting ? '提交中...' : '提 交' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { onLoad } from '@dcloudio/uni-app'

import type {
  QuizInfo,
  QuizItem,
  QuizPltDetailResponse,
  QuizPltSubmitParams,
} from '@/services/modules/mine/complianceEvaluation'
import {
  getQuizPltAvailApi,
  getQuizPltDetailsApi,
  quizTestResultCreateApi,
} from '@/services/modules/mine/complianceEvaluation'

interface PageQuery {
  fromHome?: string
}

interface RadioChangeEvent {
  detail: {
    value: string
  }
}

interface AnswerQuizItem extends QuizItem {
  userAnswer: string
}

interface AnswerQuizDetail extends Omit<QuizPltDetailResponse, 'items'> {
  quizId: number
  items: AnswerQuizItem[]
}

interface PassedQuizResult extends AnswerQuizDetail {
  finalMark: number
}

const fromHome = ref('')
const loading = ref(false)
const submitting = ref(false)

const originPkgQuizList = ref<AnswerQuizDetail[]>([])
const pkgQuizList = ref<AnswerQuizDetail[]>([])
const passedQuizResultMap = ref<Record<number, PassedQuizResult>>({})

const cloneData = <T,>(data: T): T => {
  return JSON.parse(JSON.stringify(data))
}

const normalizeQuizDetail = (data: QuizPltDetailResponse): AnswerQuizDetail => {
  return {
    ...data,
    quizId: data.quiz.quizId,
    items: data.items.map((item) => ({
      ...item,
      userAnswer: '',
    })),
  }
}

const handleRadioChange = (item: AnswerQuizItem, event: RadioChangeEvent) => {
  item.userAnswer = event.detail.value
}

const validateAnswered = () => {
  const hasUnanswered = pkgQuizList.value.some((quizItem) => {
    return quizItem.items.some((item) => !item.userAnswer)
  })

  if (!hasUnanswered) return true

  uni.showToast({
    title: '请完成所有题目后提交',
    icon: 'none',
  })

  return false
}

const calcQuizMark = (quizItem: AnswerQuizDetail) => {
  return quizItem.items.reduce((total, item) => {
    return item.userAnswer === item.answer ? total + item.mark : total
  }, 0)
}

const buildSubmitItems = (quizItem: PassedQuizResult) => {
  return quizItem.items.map((item) => {
    const { userAnswer, ...rest } = item

    return {
      ...rest,
      answered: userAnswer,
    }
  })
}

const buildSubmitParams = (): QuizPltSubmitParams => {
  const quizResults = originPkgQuizList.value.map((originItem) => {
    const quizId = originItem.quiz.quizId
    const passedQuizItem = passedQuizResultMap.value[quizId]
    const quiz = originItem.quiz

    return {
      quizId: quiz.quizId,
      title: quiz.title,
      itemQty: quiz.expand.itemQty,
      totalMark: quiz.expand.totalMark,
      passingMark: quiz.expand.passingMark,
      finalMark: passedQuizItem.finalMark,
      items: buildSubmitItems(passedQuizItem),
    }
  })

  return {
    quizResults,
  }
}

const resetCurrentQuizAnswers = () => {
  pkgQuizList.value = pkgQuizList.value.map((quizItem) => ({
    ...quizItem,
    items: quizItem.items.map((item) => ({
      ...item,
      userAnswer: '',
    })),
  }))
}

const updatePassedQuizResult = () => {
  pkgQuizList.value.forEach((quizItem) => {
    const finalMark = calcQuizMark(quizItem)
    const passingMark = quizItem.quiz.expand.passingMark

    if (finalMark >= passingMark) {
      passedQuizResultMap.value[quizItem.quiz.quizId] = {
        ...cloneData(quizItem),
        finalMark,
      }
    }
  })
}

const getFailedQuizList = () => {
  return originPkgQuizList.value.filter((quizItem) => {
    return !passedQuizResultMap.value[quizItem.quiz.quizId]
  })
}

const isEveryQuizPassed = () => {
  return originPkgQuizList.value.every((quizItem) => {
    return !!passedQuizResultMap.value[quizItem.quiz.quizId]
  })
}

const cancelFn = () => {
  uni.navigateBack()
}

const confirmFn = () => {
  pkgQuizList.value = cloneData(getFailedQuizList())
  resetCurrentQuizAnswers()
}

const showFailTip = () => {
  uni.showModal({
    title: '测试未通过',
    content: '您可以选择重新进行答题',
    confirmText: '重新测试',
    cancelText: '返回',
    success: (result) => {
      if (result.confirm) {
        confirmFn()
        return
      }

      cancelFn()
    },
  })
}

const submitFn = async () => {
  if (submitting.value) return
  if (!validateAnswered()) return

  updatePassedQuizResult()

  if (!isEveryQuizPassed()) {
    showFailTip()
    return
  }

  try {
    submitting.value = true

    const params = buildSubmitParams()
    const res = await quizTestResultCreateApi(params)

    if (res.code !== 0) {
      uni.showToast({
        title: '提交失败',
        icon: 'none',
      })
      return
    }

    uni.showToast({
      title: '测验通过',
      icon: 'none',
    })

    if (fromHome.value === 'home') {
      uni.reLaunch({
        url: '/pages/index/index',
      })
      return
    }

    uni.reLaunch({
      url: '/pages/mine/index',
    })
  } catch (error) {
    console.error('quizTestResultCreateApi error:', error)
    uni.showToast({
      title: '提交失败',
      icon: 'none',
    })
  } finally {
    submitting.value = false
  }
}

const getPltAvailQuizListFn = async () => {
  try {
    loading.value = true

    const res = await getQuizPltAvailApi()

    if (res.code !== 0) {
      uni.showToast({
        title: '获取测试列表失败',
        icon: 'none',
      })
      return
    }

    const quizList: QuizInfo[] = res.data || []

    const detailList = await Promise.all(
      quizList.map(async (quizItem) => {
        const detailRes = await getQuizPltDetailsApi(quizItem.quizId)

        if (detailRes.code !== 0 || !detailRes.data) {
          return null
        }

        return normalizeQuizDetail(detailRes.data)
      })
    )

    const validDetailList = detailList.filter(Boolean) as AnswerQuizDetail[]

    originPkgQuizList.value = cloneData(validDetailList)
    pkgQuizList.value = cloneData(validDetailList)
    resetCurrentQuizAnswers()
  } catch (error) {
    console.error('getPltAvailQuizListFn error:', error)

    uni.showToast({
      title: '获取测试列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

onLoad((query?: PageQuery) => {
  fromHome.value = query?.fromHome || ''
  getPltAvailQuizListFn()
})
</script>

<style lang="scss" scoped>
.ability-test-page {
  min-height: 100vh;
  padding: 28rpx 28rpx 180rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f1f6ff 0%, #f7f8fa 360rpx, #f7f8fa 100%);
}

.ability-test-header {
  padding: 38rpx 32rpx 42rpx;
  margin-bottom: 28rpx;
  box-sizing: border-box;
  border-radius: 28rpx;
  background: linear-gradient(135deg, #2f73ff 0%, #438dff 100%);
  box-shadow: 0 20rpx 44rpx rgba(47, 115, 255, 0.22);
}

.ability-test-header-title {
  font-size: 44rpx;
  font-weight: 700;
  line-height: 60rpx;
  color: #ffffff;
}

.ability-test-header-desc {
  margin-top: 12rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(255, 255, 255, 0.84);
}

.quiz-card {
  margin-bottom: 28rpx;
  border-radius: 28rpx;
  background-color: #ffffff;
  box-shadow: 0 18rpx 44rpx rgba(32, 52, 89, 0.06);
  overflow: hidden;
}

.quiz-card-header {
  padding: 34rpx 30rpx 28rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #eef1f6;
}

.quiz-card-title {
  font-size: 38rpx;
  font-weight: 700;
  line-height: 54rpx;
  color: #202938;
}

.quiz-card-meta {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
  font-size: 26rpx;
  line-height: 36rpx;
  color: #8a94a6;
}

.question-card {
  padding: 32rpx 30rpx 36rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f2f6;
}

.question-card:last-child {
  border-bottom: none;
}

.question-title-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 26rpx;
}

.question-index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46rpx;
  height: 46rpx;
  margin-right: 18rpx;
  border-radius: 14rpx;
  font-size: 26rpx;
  font-weight: 700;
  color: #2f73ff;
  background-color: #eef4ff;
}

.question-title {
  flex: 1;
  min-width: 0;
  font-size: 34rpx;
  font-weight: 600;
  line-height: 48rpx;
  color: #263041;
}

.question-radio-group {
  width: 100%;
}

.option-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #eef1f6;
  border-radius: 20rpx;
  background-color: #f8faff;
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-item-active {
  border-color: #2f73ff;
  background-color: #eef4ff;
  box-shadow: 0 12rpx 26rpx rgba(47, 115, 255, 0.1);
}

.option-radio {
  flex-shrink: 0;
  transform: scale(0.86);
}

.option-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-left: 12rpx;
}

.option-no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42rpx;
  height: 42rpx;
  margin-right: 18rpx;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: 700;
  color: #2f73ff;
  background-color: #ffffff;
}

.option-text {
  flex: 1;
  min-width: 0;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #303846;
}

.empty {
  padding: 120rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #9aa3b2;
}

.ability-test-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 20rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 -8rpx 24rpx rgba(33, 57, 96, 0.06);
}

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88rpx;
  padding: 0;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 88rpx;
  color: #ffffff;
  background: linear-gradient(135deg, #2f73ff 0%, #438dff 100%);
  box-shadow: 0 14rpx 28rpx rgba(47, 115, 255, 0.24);
}

.submit-button::after {
  border: none;
}

.submit-button-hover {
  opacity: 0.86;
}

.submit-button-disabled {
  opacity: 0.65;
}
</style>