dz-app/pages/test-center/mental-health/report.vue

<template>
    <view class="page-content">
        <mx-nav-bar title="心理健康诊断报告" :sub-title="subTitle"/>
        <scroll-view :scroll-top="scrollTop" scroll-y scroll-with-animation class="report-container"
                     @scroll="handleScrolling">
            <uv-cell-group title="心理健康诊断测验介绍">
                <template #title>
                    <view class="fx-row items-center">
                        <uv-line direction="col" :custom-style="titleLineStyle"/>
                        心理健康诊断测验介绍
                    </view>
                </template>
                <uv-cell class="bg-white">
                    <template #title>
                        <div class="indent-50">
                            本测验按焦虑情绪所指向的对象和由焦虑情绪而产生的行为这两个方面进行测定。
                            全量表由8个内容量表构成，把这8个内容量表的结果综合起来得到全量表分数，全量表分数从整体上表示焦虑程度强不强、焦虑范围广不广，分数越高，表明学生的焦虑程度越强：
                            而8个内容量表的结果可诊断出个人的焦虑中，哪个方面问题较大，主要包括；学习焦虑、对人焦虑、孤独倾向、自责倾向、过敏倾向、身体症状、恐怖倾向、冲动倾向。
                        </div>
                    </template>
                </uv-cell>
                <uv-cell class="bg-white" title="这是按照焦虑反应的表现方式和场合来分类的:" :border="false"/>
                <view class="p-20">
                    <uv-cell class="bg-white mx-card" :border="false">
                        <template #title>
                            <view class="sub-title">学习焦虑</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                近年来，随着升学考试和就业考试的难度增加，学生和父母都很关心学习。每天把学习挂在心上，担心被老师提问，上课时一直不放心，一有考试就怕得坏分数而无法安心学习，这些就是学习焦虑的表现。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">对人焦虑</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                青少年时期，由于自我过强，不会与人交往，很怕生人，所以，与他人讲话时，担心会不会脸红，受到教师或父母责备时，一直放在心上，并担心朋友也会背地里说自己的坏话，因而经常感到焦躁。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">孤独倾向</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                被父母疏远的儿童，娇生惯养在家称大王在外懦弱的儿童，腼腆抑郁的青少年，都经常因孤独而烦恼。这类儿童和青少年，和大家一起做某件事时，由于技术差、经验不足，经常感到失败的威胁。因此，感到和大家一起玩还不如一个人玩。这样，就越来越不会和大家一起相处。当别人高兴地相互谈话时，就有一种我不仅不能参加，而且还被人家排挤的心情。这样恶性循环下去，最后只要是人们聚集在一起，就会感到恐怖。这样，既想加入到伙伴当中去，又想避免在伙伴们面前出现失败，因而产生不安倾向。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">自责倾向</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                像打篮球、排球那样，如果自己的队输了，有些儿童和青少年就认为是因为自己加入了才输的，而一直放在心上。在受到责备、打架之后或成绩不好时，常会认为是自己不好。这样，就对自己所做的事失去了信心。经常担心，阻碍自己的行动。当发生不如意的事情时，不认为是他人的问题，而经常认为是自己不好，对自己所做的事抱有恐惧倾向，称为自责倾向。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">过敏倾向</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                感受性太强，就连小事都放心不下，行动受到严重损害的倾向，称为过敏倾问。对周围的噪声特别敏感，担心家属中有人会受伤，生病或死亡，决定事情不果断，即使做了好事也感到烦恼。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">身体症状</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                当焦虑急剧袭来时，感到将要死去，呼吸感到困难，心跳加快，感到喘不过气，出虚汗，头晕、知觉异常。如果焦虑是慢慢产生的，就会心神不定，心跳异常，脉搏混乱，想呕吐，食欲不振，肚子痛或失眠等，这种身体上的症状是比较明显的，所以，过去也曾用于焦虑的诊断。本测验除了这种身体症状外，还包括身体某个部分是否有毛病，身体某个部分是否比别人难看，对身体缺陷不放心等，这些都能用身体症状的内容量表来测定。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">恐怖倾向</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                恐怖和焦虑通常是区别开来使用的。这里所说的是，客观上一点不需要恐惧，主观上也不知道为什么要恐惧，然而却抱有一种恐惧心理，这称为恐惧倾向。例如，只要登上高处就怕得不能站立，无缘无故地恐惧黑暗，晚上开灯睡觉等，都是用来测定这种倾向的。
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell class="bg-white mx-card mt-10" :border="false">
                        <template #title>
                            <view class="sub-title">冲动倾向</view>
                        </template>
                        <template #label>
                            <view class="mt-20 text-content text-xs">
                                有时无缘无故地想大声哭、大声叫，或者一看到想要的东西，就一定要拿到手，毫无理由地想到远处去，或想死，这些称为冲动倾向。这种想干危险的事或愚蠢的事的观念，是因为内部具有焦虑倾向而产生的。
                            </view>
                        </template>
                    </uv-cell>
                </view>
            </uv-cell-group>
            <uv-gap bg-color="white" :height="12"/>
            <uv-cell-group title="测评结果及辅导建议">
                <template #title>
                    <view class="fx-row items-center">
                        <uv-line direction="col" :custom-style="titleLineStyle"/>
                        测评结果及辅导建议
                    </view>
                </template>
            </uv-cell-group>
            <template v-for="(rule,idx) in firedRules">
                <uv-gap v-if="idx>0" bg-color="#eeeeee" :height="5"/>
                <uv-cell-group :title="rule.title" class="bg-white">
                    <template #title>
                        <view class="font-[FZBangSKJW]" :class="rule.result.className">{{ rule.title }}</view>
                    </template>
                    <uv-cell>
                        <template #title>
                            <view class="text-xs text-content">结果解释</view>
                        </template>
                        <template #label>
                            <view v-for="(ex,i) in rule.result.explain" :key="i" class="mt-15 text-sm"
                                  :style="{paddingLeft: ex.indent+'em'}">
                                {{ ex.text }}
                            </view>
                        </template>
                    </uv-cell>
                    <uv-cell>
                        <template #title>
                            <view class="text-xs text-content">辅导建议</view>
                        </template>
                        <template #label>
                            <view v-for="(ad,i) in rule.result.advice" :key="i" class="mt-15 text-sm"
                                  :style="{paddingLeft: ad.indent+'em'}">
                                {{ ad.text }}
                            </view>
                        </template>
                    </uv-cell>
                </uv-cell-group>
            </template>
            <uv-divider text="已经到底啦~" custom-style="margin:0; padding:30px 0;"/>
            <uv-back-top :scroll-top="scrollTop" :icon-style="{color: 'var(--primary-color)'}" @click="backToTop"/>
        </scroll-view>
    </view>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {getMentalHealthReport} from "@/api/webApi/mental-health"
import {useTransfer} from "@/hooks/useTransfer";
import ReportRules from "@/pages/test-center/mental-health/report-rules";
import {useUserStore} from "@/hooks/useUserStore";
import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test";

const {currentUser} = useUserStore()
const {prevData} = useTransfer()
const scrollTop = ref(0)
const report = ref({})
const titleLineStyle = {
    marginRight: '5px',
    height: '15px',
    borderLeft: '8px solid var(--primary-color)',
}

const subTitle = computed(() => {
    const title = [currentUser.value.nickName]
    if (report.value.endTime) title.push(report.value.endTime)
    return title.join('/')
})
const firedRules = computed(() => {
    if (empty(report.value)) return []

    const formatValue = val => {
        if (typeof val === 'string') return {text: val, indent: 0}
        if (Array.isArray(val)) return val.map(formatValue)
        return val
    }
    const formatResult = (result) => {
        if (!result) return
        const r = {...result} // create a new result
        r.explain = formatValue(result.explain)
        r.advice = formatValue(result.advice)
        if (!Array.isArray(r.explain)) r.explain = [r.explain]
        if (!Array.isArray(r.advice)) r.advice = [r.advice]
        return r
    }
    return ReportRules.map(rule => ({
        ...rule,
        result: formatResult(rule.results.find(r => r.matcher(report.value[rule.key])))
    }))
})

onMounted(async () => {
    const {examineeId, testType} = prevData.value
    if (!examineeId || !testType) return
    const res = await getMentalHealthReport({examineeId, testType})
    report.value = res.data
})

const handleScrolling = (e) => {
    scrollTop.value = e.detail.scrollTop
}
const backToTop = () => {
    scrollTop.value = 0
}

</script>

<style lang="scss" scoped>
.report-container {
    height: calc(100vh - 44px);
}

.direction-item + .direction-item {
    margin-top: 10px;
}

.report-content {
    .rule-item + .rule-item {
        margin-top: 5px;
    }
}

/* 短横线 BEGIN */
.sub-title {
    position: relative;
    display: inline-block;
}

.sub-title::after {
    content: '';
    position: absolute;
    bottom: -5px; /* 调整横线位置 */
    left: 0;
    width: 20px;
    height: 4px; /* 横线高度 */
    background-color: var(--primary-color); /* 横线颜色 */
}

/* 短横线 END */
</style>