first commit
This commit is contained in:
180
src/components/VerificationCard.vue
Normal file
180
src/components/VerificationCard.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user