dz-app/pages/test-center/list/components/mbti-list-item.vue

<template>
    <view class="bg-white mx-card rounded-lg overflow-hidden">
        <view class="p-30 fx-row fx-bet-cen">
            <view class="text-main fx-row gap-8">
                <text class="text-orange-400">{{ item.ruleCode }}</text>
            </view>
            <uv-text type="tips" prefix-icon="clock" :text="reportDate" class="!justify-end"/>
        </view>
        <view class="mx-20 grid grid-cols-4 text-sm mx-grid-border">
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">外向(E)</view>
                <view class="text-main">{{ item.scoreE }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">内向(I)</view>
                <view class="text-main">{{ item.scoreI }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">实感(S)</view>
                <view class="text-main">{{ item.scoreS }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">直觉(N)</view>
                <view class="text-main">{{ item.scoreN }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">思考(T)</view>
                <view class="text-main">{{ item.scoreT }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">情感(F)</view>
                <view class="text-main">{{ item.scoreF }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">判断(J)</view>
                <view class="text-main">{{ item.scoreJ }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">认知(P)</view>
                <view class="text-main">{{ item.scoreP }}</view>
            </view>
        </view>
        <view class="py-20 fx-row justify-center">
            <mx-tag-button text="查看报告" icon="arrow-right" reverse @click="handleReport"/>
        </view>
    </view>
</template>

<script setup>
import _ from 'lodash'
import {computed} from 'vue'
import {createPropDefine} from "@/utils";
import {useTransfer} from "@/hooks/useTransfer";

const props = defineProps({
    item: createPropDefine({}, Object)
})

const {transferTo} = useTransfer()

const map = {
    R: '现实型',
    A: '艺术型',
    I: '研究型',
    S: '社会型',
    E: '企业型',
    C: '传统型'
}

const typeName = computed(() => map[_.first(props.item.ruleCode)] || '')
const reportDate = computed(() => getDateStr(props.item.createTime))

const getDateStr = (str) => {
    return str.substring(0, 10)
}

const handleReport = () => {
    transferTo('/pages/test-center/mbti/mbti', {code: props.item.code})
}
</script>

<style scoped>

</style>