dz-app/pages/topic-center/paper-objective/paper-objective.vue

<template>
    <view class="page-content">
        <mx-nav-bar title="必刷题"/>
        <view class="p-30">
            <view class="bg-white p-30 mx-card">
                <view class="fx-row fx-bet-sta">
                    <view class="fx-col gap-5">
                        <view class="text-main font-[FZBangSKJW] objective-paper-major">
                            {{ prevData.subjectName }}
                        </view>
                        <view class="text-2xs text-tips">{{ statTips }}</view>
                    </view>
                    <view v-if="showTendency">
                        <mx-subsection v-model="current" :list="chartTypes" width="140px"/>
                    </view>
                </view>
                <template v-if="chartData">
                    <accuracy-chart v-if="current==0" :value="chartData.accuracy"/>
                    <recent-detail-chart v-if="current==1" :data="chartData.recentDetails"/>
                </template>
                <uv-gap v-else height="240"/>
                <completed-progress :accuracy="chartData&&chartData.accuracy"
                                    :completed="chartData&&chartData.completed"
                                    :total="chartData&&chartData.total"/>
            </view>
        </view>
        <view class="my-20 text-center">
            <text v-if="showExamTip" class="text-2xs text-tips">没有做题记录，快来开始做题吧！</text>
        </view>
        <view class="mb-40 flex justify-center">
            <uv-button type="primary" shape="circle" size="large" text="开始刷题"
                       color="linear-gradient(to right, var(--primary-light-color), var(--primary-deep-color))"
                       :custom-style="{width: '55vw', height: '44px'}" @click="handleExam"/>
        </view>
    </view>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {useTransfer} from "@/hooks/useTransfer";
import mxConst from "@/common/mxConst";
import {getObjectivePaperStatistic} from "@/api/webApi/paper";
import CompletedProgress from "@/pages/topic-center/paper-objective/components/completed-progress.vue";
import AccuracyChart from "@/pages/topic-center/paper-objective/components/accuracy-chart.vue";
import RecentDetailChart from "@/pages/topic-center/paper-objective/components/recent-detail-chart.vue";

const loaded = ref(false)
const chartTypes = ref(['正确率', '趋势图'])
const current = ref(0)
const chartData = ref(null)
const {prevData, transferTo, onPageCallback} = useTransfer()

const statTips = computed(() => current.value == 0 ? '必刷题分析' : '最近刷题正确率趋势')
const showExamTip = computed(() => chartData.value?.recentDetails?.length == 0)
const showTendency = computed(() => chartData.value?.recentDetails?.length > 2)

onMounted(() => loadChartData())
onPageCallback((data) => {
    if (data) {
        loaded.value = false
        loadChartData()
    }
})

const loadChartData = () => {
    if (loaded.value) return
    loaded.value = true
    const {subjectId} = prevData.value
    getObjectivePaperStatistic({subjectId}).then(res => {
        chartData.value = res.data || {}
    })
}

const handleExam = () => {
    const {type, testType, subjectId} = prevData.value
    const next = {
        type, testType, subjectId,
        title: '必刷题',
        callback: mxConst.globalEvents.paperCompleted
    }
    transferTo('/pages/topic-center/paper-exam/paper-exam', next)
}
</script>

<style lang="scss">
.objective-paper-major {
    position: relative;
    z-index: 1;
}

.objective-paper-major::before {
    content: " ";
    position: absolute;
    width: 40px;
    height: 8px;
    left: -3px;
    bottom: 0;
    z-index: -1;
    border-radius: 4px;
    background: linear-gradient(90deg, #62B6FF, #fff);
}
</style>