f

src/ui/CIVYZ5733.vue

@@ -0,0 +1,120 @@
+<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>