153 lines
3.2 KiB
Vue
153 lines
3.2 KiB
Vue
<route lang="json5" type="page">
|
|
{
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<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 pb-safe relative mx-[24rpx]">
|
|
<!-- 顶部卡片 -->
|
|
<view class="mt-[60rpx]">
|
|
<StatusCard
|
|
:score="score"
|
|
:rules="anxietyRules"
|
|
tip="测评结果只做参考。"
|
|
:level="level"
|
|
:description="studyRecord.description"
|
|
:tagName="studyRecord.tagName"
|
|
/>
|
|
</view>
|
|
<view>
|
|
<LearnSkillSuggestion
|
|
v-for="(item, index) in suggestions"
|
|
:key="index"
|
|
:items="item.items"
|
|
:title="item.title"
|
|
></LearnSkillSuggestion>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
|
|
import StatusCard from '../components/StatusCard.vue'
|
|
import LearnSkillSuggestion from '../components/LearnSkillSuggestion.vue'
|
|
|
|
import { getCustomScaleExplains } from '@/service/index/api'
|
|
|
|
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 handleBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
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
|
|
console.log(suggestions)
|
|
}
|
|
})
|
|
})
|
|
</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>
|