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>
|