121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
|
<script setup>
|
|||
|
|
import LTitle from "@/components/LTitle.vue";
|
|||
|
|
import { computed, watch } from "vue";
|
|||
|
|
import { useRiskNotifier } from "@/composables/useRiskNotifier";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
apiId: {
|
|||
|
|
type: String,
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
index: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
notifyRiskStatus: {
|
|||
|
|
type: Function,
|
|||
|
|
default: () => { },
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
const { data } = props;
|
|||
|
|
|
|||
|
|
// 状态映射，包括显示的文字和样式
|
|||
|
|
const statusMap = {
|
|||
|
|
0: {
|
|||
|
|
text: "未婚或尚未登记结婚",
|
|||
|
|
bgClass: "bg-yellow-100",
|
|||
|
|
textClass: "text-yellow-700",
|
|||
|
|
description: "未进行民政登记婚姻",
|
|||
|
|
},
|
|||
|
|
1: {
|
|||
|
|
text: "已婚",
|
|||
|
|
bgClass: "bg-green-100",
|
|||
|
|
textClass: "text-green-700",
|
|||
|
|
description: "已登记婚姻，家庭幸福美满",
|
|||
|
|
},
|
|||
|
|
2: {
|
|||
|
|
text: "离异",
|
|||
|
|
bgClass: "bg-red-100",
|
|||
|
|
textClass: "text-red-700",
|
|||
|
|
description: "离异状态，未来生活可期",
|
|||
|
|
},
|
|||
|
|
3: {
|
|||
|
|
text: "离婚冷静期",
|
|||
|
|
bgClass: "bg-blue-100",
|
|||
|
|
textClass: "text-blue-700",
|
|||
|
|
description: "目前处于离婚冷静期，请谨慎决策",
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据 `data.status` 确定当前状态，默认值为 "无相关记录"
|
|||
|
|
const currentStatus =
|
|||
|
|
data && data.status !== undefined
|
|||
|
|
? statusMap[data.status] || statusMap["0"]
|
|||
|
|
: {
|
|||
|
|
text: "无相关记录",
|
|||
|
|
bgClass: "bg-gray-200",
|
|||
|
|
textClass: "text-gray-500",
|
|||
|
|
description: "暂无婚姻相关记录",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 计算风险评分（0-100分，分数越高越安全）
|
|||
|
|
const riskScore = computed(() => {
|
|||
|
|
// 未婚(0)或已婚(1)：100分（最安全）
|
|||
|
|
// 离异(2)：30分（有风险）
|
|||
|
|
// 离婚冷静期(3)：20分（高风险）
|
|||
|
|
if (data?.status === 0 || data?.status === 1) return 100;
|
|||
|
|
if (data?.status === 2) return 30;
|
|||
|
|
if (data?.status === 3) return 20;
|
|||
|
|
return 100; // 默认最安全
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 使用 composable 通知父组件风险评分
|
|||
|
|
useRiskNotifier(props, riskScore);
|
|||
|
|
|
|||
|
|
// 暴露给父组件
|
|||
|
|
defineExpose({
|
|||
|
|
riskScore
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="status-info flex flex-col items-center">
|
|||
|
|
<div
|
|||
|
|
:class="`status-label rounded-full px-6 py-3 text-center font-bold shadow-md ${currentStatus.bgClass} ${currentStatus.textClass}`">
|
|||
|
|
{{ currentStatus.text }}
|
|||
|
|
</div>
|
|||
|
|
<p class="status-description mt-3 text-sm text-gray-600">
|
|||
|
|
{{ currentStatus.description }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.status-info {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-label {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
border-radius: 9999px;
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-description {
|
|||
|
|
color: #4a5568;
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.additional-info p {
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
</style>
|