181 lines
7.3 KiB
Vue
181 lines
7.3 KiB
Vue
<template>
|
||
<div class="card" style="padding-left: 0; padding-right: 0; padding-bottom: 24px;">
|
||
<div class="flex flex-col gap-y-2">
|
||
<!-- 报告信息 -->
|
||
<div class="flex items-center justify-between py-2">
|
||
<LTitle title="报告信息"></LTitle>
|
||
<!-- 分享按钮 -->
|
||
<ShareReportButton v-if="!isShare" :order-id="orderId" :order-no="orderNo" :is-example="!orderId"
|
||
class="mr-4" />
|
||
</div>
|
||
<div class="flex flex-col gap-2 my-2 mx-4">
|
||
<div class="flex pb-2 pl-2">
|
||
<span class="text-[#666666] w-[6em]">报告时间：</span>
|
||
<span class="text-gray-600">{{
|
||
reportDateTime ||
|
||
"2025-01-01 12:00:00"
|
||
}}</span>
|
||
</div>
|
||
<div class="flex pb-2 pl-2" v-if="!isEmpty">
|
||
<span class="text-[#666666] w-[6em]">报告项目：</span>
|
||
<span class="text-gray-600 font-bold">
|
||
{{ reportName }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报告对象 -->
|
||
<template v-if="Object.keys(reportParams).length != 0">
|
||
<LTitle title="报告对象"></LTitle>
|
||
<div class="flex flex-col gap-2 my-2 mx-4">
|
||
<!-- 姓名 -->
|
||
<div class="flex pb-2 pl-2" v-if="reportParams?.name">
|
||
<span class="text-[#666666] w-[6em]">姓名</span>
|
||
<span class="text-gray-600">{{
|
||
maskValue(
|
||
"name",
|
||
reportParams?.name
|
||
)
|
||
}}</span>
|
||
</div>
|
||
|
||
<!-- 身份证号 -->
|
||
<div class="flex pb-2 pl-2" v-if="reportParams?.id_card">
|
||
<span class="text-[#666666] w-[6em]">身份证号</span>
|
||
<span class="text-gray-600">{{
|
||
maskValue(
|
||
"id_card",
|
||
reportParams?.id_card
|
||
)
|
||
}}</span>
|
||
</div>
|
||
|
||
<!-- 手机号 -->
|
||
<div class="flex pb-2 pl-2" v-if="reportParams?.mobile">
|
||
<span class="text-[#666666] w-[6em]">手机号</span>
|
||
<span class="text-gray-600">{{
|
||
maskValue(
|
||
"mobile",
|
||
reportParams?.mobile
|
||
)
|
||
}}</span>
|
||
</div>
|
||
|
||
<!-- 验证卡片 -->
|
||
<div class="flex flex-col gap-4 mt-4">
|
||
<!-- 身份证检查结果 -->
|
||
<div class="flex items-center px-4 py-3 flex-1 border border-[#EEEEEE] rounded-lg bg-[#F9F9F9]">
|
||
<div class="w-11 h-11 flex items-center justify-center mr-4">
|
||
<img src="@/assets/images/report/sfz.png" alt="身份证" class="w-10 h-10 object-contain" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-bold text-gray-800 text-lg">
|
||
身份证检查结果
|
||
</div>
|
||
<div class="text-sm text-[#999999]">
|
||
身份证信息核验通过
|
||
</div>
|
||
</div>
|
||
<div class="w-11 h-11 flex items-center justify-center ml-4">
|
||
<img src="@/assets/images/report/zq.png" alt="资金安全" class="w-10 h-10 object-contain" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 手机号检测结果 -->
|
||
<!-- <div class="flex items-center px-4 py-3 flex-1 border border-[#EEEEEE] rounded-lg bg-[#F9F9F9]">
|
||
<div class="w-11 h-11 flex items-center justify-center mr-4">
|
||
<img src="@/assets/images/report/sjh.png" alt="手机号" class="w-10 h-10 object-contain" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-bold text-gray-800 text-lg">
|
||
手机号检测结果
|
||
</div>
|
||
<div class="text-sm text-[#999999]">
|
||
被查询人姓名与运营商提供的一致
|
||
</div>
|
||
<div class="text-sm text-[#999999]">
|
||
被查询人身份证与运营商提供的一致
|
||
</div>
|
||
</div>
|
||
<div class="w-11 h-11 flex items-center justify-center ml-4">
|
||
<img src="@/assets/images/report/zq.png" alt="资金安全" class="w-10 h-10 object-contain" />
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import LTitle from './LTitle.vue'
|
||
import ShareReportButton from './ShareReportButton.vue'
|
||
|
||
const props = defineProps({
|
||
reportParams: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
reportDateTime: {
|
||
type: [String, null],
|
||
required: false,
|
||
default: null
|
||
},
|
||
reportName: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
isEmpty: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
isShare: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
},
|
||
orderId: {
|
||
type: [String, Number],
|
||
required: false,
|
||
default: null
|
||
},
|
||
orderNo: {
|
||
type: String,
|
||
required: false,
|
||
default: null
|
||
}
|
||
})
|
||
|
||
// 脱敏函数
|
||
const maskValue = (type, value) => {
|
||
if (!value) return value;
|
||
if (type === "name") {
|
||
// 姓名脱敏（保留首位）
|
||
if (value.length === 1) {
|
||
return "*"; // 只保留一个字，返回 "*"
|
||
} else if (value.length === 2) {
|
||
return value[0] + "*"; // 两个字，保留姓氏，第二个字用 "*" 替代
|
||
} else {
|
||
return (
|
||
value[0] +
|
||
"*".repeat(value.length - 2) +
|
||
value[value.length - 1]
|
||
); // 两个字以上，保留第一个和最后一个字，其余的用 "*" 替代
|
||
}
|
||
} else if (type === "id_card") {
|
||
// 身份证号脱敏（保留前6位和最后4位）
|
||
return value.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2");
|
||
} else if (type === "mobile") {
|
||
if (value.length === 11) {
|
||
return value.substring(0, 3) + "****" + value.substring(7);
|
||
}
|
||
return value; // 如果手机号不合法或长度不为 11 位，直接返回原手机号
|
||
}
|
||
return value;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 组件样式已通过 Tailwind CSS 类实现 */
|
||
</style>
|