2025-11-27 13:19:45 +08:00
|
|
|
|
<script setup>
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
type: Object,
|
|
|
|
|
|
required: false,
|
|
|
|
|
|
default: () => null,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
// 获取实际的数据对象
|
|
|
|
|
|
const actualData = props.data?.data;
|
|
|
|
|
|
|
|
|
|
|
|
// 日期格式化函数，将 2009-04-16 转换为 2009年04月16日
|
|
|
|
|
|
const formatDate = (dateStr) => {
|
|
|
|
|
|
if (!dateStr) return "";
|
|
|
|
|
|
const [year, month, day] = dateStr.split("-");
|
|
|
|
|
|
return `${year}年${month}月${day}日`;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 状态映射，根据 op_type 判断
|
|
|
|
|
|
const statusMap = {
|
|
|
|
|
|
IA: {
|
|
|
|
|
|
text: "已婚",
|
|
|
|
|
|
bgClass: "bg-green-100",
|
|
|
|
|
|
textClass: "text-green-700",
|
|
|
|
|
|
description: "已登记婚姻，家庭幸福美满",
|
|
|
|
|
|
},
|
|
|
|
|
|
IB: {
|
|
|
|
|
|
text: "离异",
|
|
|
|
|
|
bgClass: "bg-red-100",
|
|
|
|
|
|
textClass: "text-red-700",
|
|
|
|
|
|
description: "离异状态，未来生活可期",
|
|
|
|
|
|
},
|
|
|
|
|
|
INR: {
|
|
|
|
|
|
text: "未登记",
|
|
|
|
|
|
bgClass: "bg-yellow-100",
|
|
|
|
|
|
textClass: "text-yellow-700",
|
|
|
|
|
|
description: "未进行民政登记婚姻",
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 无记录时的状态
|
|
|
|
|
|
const noRecordStatus = {
|
|
|
|
|
|
text: "无相关记录",
|
|
|
|
|
|
bgClass: "bg-gray-200",
|
|
|
|
|
|
textClass: "text-gray-500",
|
|
|
|
|
|
description: "暂无婚姻相关记录",
|
|
|
|
|
|
opDate: null,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 根据 op_type 确定当前状态，默认值为 "无相关记录"
|
|
|
|
|
|
const currentStatus = !actualData
|
|
|
|
|
|
? noRecordStatus
|
|
|
|
|
|
: actualData.op_type
|
|
|
|
|
|
? { ...statusMap[actualData.op_type], opDate: formatDate(actualData.op_date) }
|
|
|
|
|
|
: noRecordStatus;
|
|
|
|
|
|
</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>
|
2026-03-21 11:37:24 +08:00
|
|
|
|
|
2025-11-27 13:19:45 +08:00
|
|
|
|
<p v-html="currentStatus.description" class="status-description mt-3 text-sm text-gray-600"></p>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
2026-03-21 11:37:24 +08:00
|
|
|
|
<!-- <div v-if="currentStatus.opDate" class="op-date-container mt-4 px-4 py-2 bg-blue-50 rounded-lg border border-blue-200">
|
|
|
|
|
|
<p class="op-date text-sm font-medium text-blue-700">
|
|
|
|
|
|
登记日期：{{ currentStatus.opDate }}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div> -->
|
2025-11-27 13:19:45 +08:00
|
|
|
|
|
|
|
|
|
|
<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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.op-date-container {
|
|
|
|
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.op-date-container:hover {
|
|
|
|
|
|
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
