volunteer-secondary/src/chart-sub/evaluate/studyReport/LearnSkillReport.vue

168 lines
3.7 KiB
Vue

<template>
<view :scroll-y="true" class="flex flex-col h-screen relative custom-bg">
<Navbar
safeAreaInsetTop
:bordered="false"
leftArrow
@clickLeft="handleBack"
bg-color="transparent"
>
<template #title>
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">学习技能报告</text>
</template>
</Navbar>
<view class="flex-1 overflow-auto relative">
<view class="flex flex-col flex-1 overflow-auto pb-[20rpx]">
<!-- 顶部卡片 -->
<view class="mt-[60rpx] mx-[24rpx]">
<StatusCard
:score="score"
:rules="anxietyRules"
tip="测评结果只做参考。"
:level="level"
:description="studyRecord.description"
:tagName="studyRecord.tagName"
/>
</view>
<view class="mx-[24rpx]">
<LearnSkillSuggestion
v-for="(item, index) in suggestions"
:key="index"
:items="item.items"
:title="item.title"
></LearnSkillSuggestion>
</view>
</view>
<!-- 底部AI智能顾问 -->
<AiFooter :pageId="pageId" :pageType="pageType" />
</view>
</view>
</template>
<script setup lang="ts">
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import StatusCard from '../components/StatusCard.vue'
import LearnSkillSuggestion from '../components/LearnSkillSuggestion.vue'
import AiFooter from '../components/AiFooter.vue'
import { getCustomScaleExplains } from '@/service'
import { handleBack } from '../hooks/useEvaluateBack'
// #ifdef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
},
excludeLoginPath: false,
})
// #endif
// #ifndef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
transparentTitle: 'always',
navigationBarTitleText: ''
},
excludeLoginPath: false,
})
// #endif
const pageType = ref(0)
const pageId = ref(0)
const anxietyRules = [
{
label: '很差',
range: '≤80分',
color: '#F5663E',
},
{
label: '较差',
range: '81-104分',
color: '#F8B801',
},
{
label: '一般',
range: '105-136分',
color: '#F3A953',
},
{
label: '较好',
range: '137-160分',
color: '#55E5C5',
},
{
label: '优秀',
range: '≥161分',
color: '#00B281',
},
]
const score = ref(0)
const level = ref(0)
const studyRecord = ref({
description: '',
title: '',
result: '',
tagName: '',
suggestions: '',
})
const calcLevel = (val: string) => {
let _s = JSON.parse(val)
if (_s[0].Total >= 161) {
return 4
} else if (_s[0].Total >= 137) {
return 3
} else if (_s[0].Total >= 105) {
return 2
} else if (_s[0].Total >= 81) {
return 1
} else {
return 0
}
}
const suggestions = ref([])
onLoad((options) => {
pageType.value = +options.type
pageId.value = options.id
// getCustomScaleExplains({ CustomScaleId: pageId.value }).then((resp) => {
// if (resp.code === 200) {
// studyRecord.value = resp.result as {
// description: string
// title: string
// result: string
// tagName: string
// suggestions: string
// }
// level.value = calcLevel(studyRecord.value.result)
// score.value = JSON.parse(studyRecord.value.result)[0].Total
// suggestions.value = JSON.parse(studyRecord.value.suggestions).succestions
// }
// })
})
</script>
<style scoped lang="scss">
.custom-bg {
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
}
:deep(.icon-class) {
color: #fff !important;
}
.custom-border {
width: 162rpx;
height: 162rpx;
border-radius: 50%;
border: 6rpx dashed;
border-color: #05d69c transparent transparent transparent;
}
</style>