|
|
@@ -0,0 +1,566 @@
|
|
|
+<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/compliance-evaluation'
|
|
|
+import {
|
|
|
+ getQuizPltAvailApi,
|
|
|
+ getQuizPltDetailsApi,
|
|
|
+ quizTestResultCreateApi,
|
|
|
+} from '@/services/modules/mine/compliance-evaluation'
|
|
|
+
|
|
|
+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>
|
