初始化提交
This commit is contained in:
478
src/views/Report.vue
Normal file
478
src/views/Report.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<script setup>
|
||||
const featureMap = {
|
||||
G09SC02: {
|
||||
name: '单人婚姻',
|
||||
component: defineAsyncComponent(() => import('@/ui/CMarriage.vue')),
|
||||
},
|
||||
IDV044: {
|
||||
name: '婚姻状态',
|
||||
component: defineAsyncComponent(() => import('@/ui/CIDV044.vue')),
|
||||
},
|
||||
G27BJ05: {
|
||||
name: '借贷意向',
|
||||
component: defineAsyncComponent(() =>
|
||||
import('@/ui/CBankLoanApplication.vue')
|
||||
),
|
||||
},
|
||||
G28BJ05: {
|
||||
name: '借贷行为',
|
||||
component: defineAsyncComponent(() =>
|
||||
import('@/ui/CBankLoanBehavior.vue')
|
||||
),
|
||||
},
|
||||
G26BJ05: {
|
||||
name: '特殊名单',
|
||||
component: defineAsyncComponent(() =>
|
||||
import('@/ui/CSpecialList.vue')
|
||||
),
|
||||
},
|
||||
G34BJ03: {
|
||||
name: '个人不良',
|
||||
component: defineAsyncComponent(() => import('@/ui/CBad.vue')),
|
||||
},
|
||||
G35SC01: {
|
||||
name: '个人诉讼',
|
||||
component: defineAsyncComponent(() => import('@/ui/CLawsuit.vue')),
|
||||
},
|
||||
G22SC01: {
|
||||
name: '个人涉诉',
|
||||
component: defineAsyncComponent(() => import('@/ui/CLawsuitPP.vue')),
|
||||
},
|
||||
G05HZ01: {
|
||||
name: '股东人企关系',
|
||||
component: defineAsyncComponent(() => import('@/ui/CRelatedEnterprises.vue')),
|
||||
},
|
||||
Q23SC01: {
|
||||
name: '企业涉诉',
|
||||
component: defineAsyncComponent(() => import('@/ui/CLawsuit.vue')),
|
||||
},
|
||||
Q03SC01: {
|
||||
name: '企业涉诉',
|
||||
component: defineAsyncComponent(() => import('@/ui/CLawsuitPP.vue')),
|
||||
},
|
||||
G37SC01: {
|
||||
name: '个人失信',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPersonalDiscredit.vue')),
|
||||
},
|
||||
G36SC01: {
|
||||
name: '个人限高',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPersonalConsumptionRestriction.vue')),
|
||||
},
|
||||
G15BJ02: {
|
||||
name: '手机三要素',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPhoneThreeElements.vue')),
|
||||
},
|
||||
KZEYS: {
|
||||
name: '身份证二要素',
|
||||
component: defineAsyncComponent(() => import('@/ui/CIDCardTwoElements.vue')),
|
||||
},
|
||||
G17BJ02: {
|
||||
name: '手机号二要素',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPhoneTwoElements.vue')),
|
||||
},
|
||||
G10SC02: {
|
||||
name: '双人婚姻核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CDualMarriage.vue')),
|
||||
},
|
||||
P_C_B332: {
|
||||
name: '人车核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CP_C_B332.vue')),
|
||||
},
|
||||
FIN019: {
|
||||
name: '银行卡黑名单',
|
||||
component: defineAsyncComponent(() => import('@/ui/CFIN019.vue')),
|
||||
},
|
||||
G20GZ01: {
|
||||
name: '银行卡四要素核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CG20GZ01.vue')),
|
||||
},
|
||||
G03HZ01: {
|
||||
name: '手机号码风险',
|
||||
component: defineAsyncComponent(() => import('@/ui/CG03HZ01.vue')),
|
||||
},
|
||||
G19BJ02: {
|
||||
name: '手机二次卡',
|
||||
component: defineAsyncComponent(() => import('@/ui/CG19BJ02.vue')),
|
||||
},
|
||||
G02BJ02: {
|
||||
name: '手机在网时长',
|
||||
component: defineAsyncComponent(() => import('@/ui/CG02BJ02.vue')),
|
||||
},
|
||||
CAR061: {
|
||||
name: '名下车辆',
|
||||
component: defineAsyncComponent(() => import('@/ui/CCAR061.vue')),
|
||||
},
|
||||
COM187: {
|
||||
name: '限制出境查询',
|
||||
component: defineAsyncComponent(() => import('@/ui/CCOM187.vue')),
|
||||
},
|
||||
MOB035: {
|
||||
name: '手机月消费档次',
|
||||
component: defineAsyncComponent(() => import('@/ui/CMOB035.vue')),
|
||||
},
|
||||
RIS031: {
|
||||
name: '反诈反赌风险核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CRIS031.vue')),
|
||||
},
|
||||
PCB601: {
|
||||
name: '手机号空号检测',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPCB601.vue')),
|
||||
},
|
||||
PCB148: {
|
||||
name: '银行卡归属地查询',
|
||||
component: defineAsyncComponent(() => import('@/ui/CPCB148.vue')),
|
||||
},
|
||||
FIN011: {
|
||||
name: '银行卡姓名二要素验证',
|
||||
component: defineAsyncComponent(() => import('@/ui/CFIN011.vue')),
|
||||
},
|
||||
FIN020: {
|
||||
name: '银行卡身份证号二要素验证',
|
||||
component: defineAsyncComponent(() => import('@/ui/CFIN020.vue')),
|
||||
},
|
||||
FIN018: {
|
||||
name: '银行卡三要素综合验证',
|
||||
component: defineAsyncComponent(() => import('@/ui/CFIN018.vue')),
|
||||
},
|
||||
MOB032: {
|
||||
name: '高风险特殊手机号核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CMOB032.vue')),
|
||||
},
|
||||
mobilelocal: {
|
||||
name: '手机归属地查询',
|
||||
component: defineAsyncComponent(() => import('@/ui/CMobileLocal.vue')),
|
||||
},
|
||||
sfz: {
|
||||
name: '身份证归属地查询',
|
||||
component: defineAsyncComponent(() => import('@/ui/CSFZ.vue')),
|
||||
},
|
||||
PCB915: {
|
||||
name: '学历核验',
|
||||
component: defineAsyncComponent(() => import('@/ui/CEducationVerification.vue')),
|
||||
},
|
||||
CAR066: {
|
||||
name: '车辆过户次数',
|
||||
component: defineAsyncComponent(() => import('@/ui/CCAR066.vue')),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
import LEmpty from "@/components/LEmpty.vue";
|
||||
import LPendding from "@/components/LPendding.vue";
|
||||
import LTitle from "@/components/LTitle.vue";
|
||||
const route = useRoute();
|
||||
|
||||
const productId = ref(null);
|
||||
const isDone = ref(true);
|
||||
|
||||
const reportData = ref([])
|
||||
const reportParams = ref({})
|
||||
const reportName = ref("")
|
||||
const reportDateTime = ref(null)
|
||||
const orderId = ref(null);
|
||||
const orderNo = ref("")
|
||||
const isEmpty = ref(false)
|
||||
const isPending = ref(false)
|
||||
onMounted(() => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
orderNo.value = query.get("out_trade_no");
|
||||
orderId.value = query.get("order_id");
|
||||
if (!orderNo.value && !orderId.value) {
|
||||
orderId.value = route.query.orderId;
|
||||
orderNo.value = route.query.orderNo;
|
||||
}
|
||||
if (!orderId.value && !orderNo.value) return;
|
||||
|
||||
getReport()
|
||||
});
|
||||
|
||||
const getReport = async () => {
|
||||
let queryUrl = ""
|
||||
if (orderNo.value) {
|
||||
queryUrl = `/query/orderNo/${orderNo.value}`
|
||||
} else if (orderId.value) {
|
||||
queryUrl = `/query/orderId/${orderId.value}`
|
||||
} else {
|
||||
return
|
||||
}
|
||||
const { data, error } = await useApiFetch(queryUrl)
|
||||
.get()
|
||||
.json()
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
if (data.value.data.product_name === '婚姻评估') {
|
||||
reportData.value = data.value.data.query_data.reverse()
|
||||
} else {
|
||||
reportData.value = data.value.data.query_data
|
||||
}
|
||||
productId.value = data.value.data.product_id;
|
||||
reportParams.value = data.value.data.query_params
|
||||
reportName.value = data.value.data.product_name
|
||||
reportDateTime.value = data.value.data.create_time
|
||||
} else if (data.value.code === 200003) {
|
||||
isEmpty.value = true
|
||||
} else if (data.value.code === 200002) {
|
||||
isPending.value = true
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 对请求参数进行脱敏处理
|
||||
const maskValue = computed(() => {
|
||||
return (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 === "certificate_number") {
|
||||
// 证书编号脱敏(保留前4位和后4位,中间用*替代)
|
||||
if (value.length <= 8) {
|
||||
return value.slice(0, 4) + "*".repeat(value.length - 4);
|
||||
} else {
|
||||
return value.slice(0, 4) + "*".repeat(value.length - 8) + value.slice(-4);
|
||||
}
|
||||
} 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 位,直接返回原手机号
|
||||
} else if (type === "bank_card") {
|
||||
// 银行卡号脱敏(保留前6位和后4位)
|
||||
return value.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2");
|
||||
} else if (type === "ent_name") {
|
||||
// 企业名称脱敏(保留前3个字符和后3个字符,中间部分用 "*" 替代)
|
||||
if (value.length <= 6) {
|
||||
return value[0] + "*".repeat(value.length - 1); // 少于6个字符时,只保留第一个字符,其他用 * 替代
|
||||
} else {
|
||||
return value.slice(0, 3) + "*".repeat(value.length - 6) + value.slice(-3); // 多于6个字符时保留前3和后3
|
||||
}
|
||||
} else if (type === "ent_code") {
|
||||
// 企业代码脱敏(保留前4个字符和后4个字符,中间部分用 "*" 替代)
|
||||
if (value.length <= 8) {
|
||||
return value.slice(0, 4) + "*".repeat(value.length - 4); // 长度不超过8时,保留前4个字符,其他用 * 替代
|
||||
} else {
|
||||
return value.slice(0, 4) + "*".repeat(value.length - 8) + value.slice(-4); // 长度超过8时,保留前4个字符和后4个字符
|
||||
}
|
||||
} else if (type === "car_license") {
|
||||
// 车牌号脱敏(保留前2个字符,后2个字符,其他部分用 "*" 替代)
|
||||
if (value.length <= 4) {
|
||||
return value[0] + "*".repeat(value.length - 1); // 如果车牌号长度小于等于4,只保留首字符
|
||||
} else {
|
||||
// 如果车牌号较长,保留前2个字符,后2个字符,其余部分用 "*" 替代
|
||||
return value.slice(0, 2) + "*".repeat(value.length - 4) + value.slice(-2);
|
||||
}
|
||||
} else if (type === "vin_code") {
|
||||
// 车架号脱敏(保留前6位和后4位,中间用*替代)
|
||||
if (value.length <= 10) {
|
||||
return value.slice(0, 6) + "*".repeat(value.length - 6);
|
||||
} else {
|
||||
return value.slice(0, 6) + "*".repeat(value.length - 10) + value.slice(-4);
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
});
|
||||
|
||||
// 类型映射
|
||||
const typeMap = {
|
||||
1: "手机号",
|
||||
2: "银行卡号",
|
||||
3: "身份证号"
|
||||
};
|
||||
|
||||
// 根据type获取keyword的掩码类型
|
||||
const getKeywordMaskType = (type) => {
|
||||
if (type === 1) return "mobile";
|
||||
if (type === 2) return "bank_card";
|
||||
if (type === 3) return "id_card";
|
||||
return "id_card"; // 默认按身份证号处理
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-full from-blue-100 to-white bg-gradient-to-b">
|
||||
<van-notice-bar color="#e03131" background="#ecf9ff" left-icon="info-o"
|
||||
text="由于天远查APP暂未上线,建议将此网站加入收藏夹或书签,或关注微信天远查公众号" />
|
||||
<!-- <CTabs :tabs="sortedTabs" type="blue-green" /> -->
|
||||
<template v-if="isDone">
|
||||
<div class="flex flex-col gap-y-4 p-4">
|
||||
<template v-if="!isEmpty && !isPending">
|
||||
<div id="overdiv" class="title">报告概述</div>
|
||||
<div class="card">
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<LTitle title="报告信息" type="blue-green"></LTitle>
|
||||
<div class="flex flex-col gap-2 my-2">
|
||||
<div class="flex justify-between border-b pb-2 pl-2">
|
||||
<span class="text-gray-700 font-bold">报告时间:</span>
|
||||
<span class="text-gray-600">{{ reportDateTime }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="!isEmpty">
|
||||
<span class="text-gray-700 font-bold">报告项目:</span>
|
||||
<span class="text-gray-600">
|
||||
{{ reportName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="Object.keys(reportParams).length != 0">
|
||||
<LTitle title="报告对象" type="blue-green"></LTitle>
|
||||
<div class="flex flex-col gap-2 my-2">
|
||||
<div class="flex justify-between border-b pb-2 pl-2"
|
||||
v-if="reportParams?.keyword && reportParams?.type">
|
||||
<span class="text-gray-700 font-bold">{{ typeMap[reportParams.type] || '查询对象'
|
||||
}}</span>
|
||||
<span class="text-gray-600">{{ maskValue(getKeywordMaskType(reportParams.type),
|
||||
reportParams.keyword) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.name">
|
||||
<span class="text-gray-700 font-bold">姓名</span>
|
||||
<span class="text-gray-600">{{ maskValue("name", reportParams?.name) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.id_card">
|
||||
<span class="text-gray-700 font-bold">身份证号</span>
|
||||
<span class="text-gray-600">
|
||||
{{ maskValue("id_card", reportParams?.id_card) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.nameMan">
|
||||
<span class="text-gray-700 font-bold">男方姓名</span>
|
||||
<span class="text-gray-600">{{ maskValue("name", reportParams?.nameMan)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.idCardMan">
|
||||
<span class="text-gray-700 font-bold">男方身份证号</span>
|
||||
<span class="text-gray-600">{{ maskValue("id_card", reportParams?.idCardMan)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.nameWoman">
|
||||
<span class="text-gray-700 font-bold">女方姓名</span>
|
||||
<span class="text-gray-600">{{ maskValue("name", reportParams?.nameWoman)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2"
|
||||
v-if="reportParams?.idCardWoman">
|
||||
<span class="text-gray-700 font-bold">女方身份证号</span>
|
||||
<span class="text-gray-600">{{ maskValue("id_card", reportParams?.idCardWoman)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.bank_card">
|
||||
<span class="text-gray-700 font-bold">银行卡号</span>
|
||||
<span class="text-gray-600">{{ maskValue("bank_card", reportParams?.bank_card)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.mobile">
|
||||
<span class="text-gray-700 font-bold">手机号</span>
|
||||
<span class="text-gray-600">{{ maskValue("mobile", reportParams?.mobile)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2"
|
||||
v-if="reportParams?.verification_code">
|
||||
<span class="text-gray-700 font-bold">验证码</span>
|
||||
<span class="text-gray-600">{{ maskValue("code",
|
||||
reportParams?.verification_code)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2"
|
||||
v-if="reportParams?.car_license">
|
||||
<span class="text-gray-700 font-bold">车牌号</span>
|
||||
<span class="text-gray-600">{{ maskValue("car_license",
|
||||
reportParams?.car_license)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.ent_name">
|
||||
<span class="text-gray-700 font-bold">企业名称</span>
|
||||
<span class="text-gray-600">{{ maskValue("ent_name", reportParams?.ent_name)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.ent_code">
|
||||
<span class="text-gray-700 font-bold">企业代码</span>
|
||||
<span class="text-gray-600">{{ maskValue("ent_code", reportParams?.ent_code)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2"
|
||||
v-if="reportParams?.certificate_number">
|
||||
<span class="text-gray-700 font-bold">证书编号</span>
|
||||
<span class="text-gray-600">{{ maskValue("certificate_number",
|
||||
reportParams?.certificate_number) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b pb-2 pl-2" v-if="reportParams?.vin_code">
|
||||
<span class="text-gray-700 font-bold">车架号</span>
|
||||
<span class="text-gray-600">{{ maskValue("vin_code", reportParams?.vin_code)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<LEmpty v-if="isEmpty" />
|
||||
<LPendding v-if="isPending" />
|
||||
<template v-for="(item, index) in reportData" :key="index">
|
||||
<div id="lawsuit" class="title">{{ featureMap[item.apiID].name }}</div>
|
||||
<component :is="featureMap[item.apiID].component" :data="item.data" :params="reportParams">
|
||||
</component>
|
||||
</template>
|
||||
<div class="card">
|
||||
<div>
|
||||
<div class="text-bold text-blue-500 mb-2">报告说明</div>
|
||||
<div>
|
||||
本报告的数据由用户本人明确授权后,我们才向相关合法存有用户个人数据的机构调取本报告相关内容,本平台只做大数据的获取与分析,仅向用户个人展示参考。
|
||||
</div>
|
||||
<p>
|
||||
报告有效期<strong class="text-red-500">30天</strong>,过期自动删除。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
若您的数据不全面,可能是数据具有延迟性或者合作信息机构未获取到您的数据。若数据有错误请联系客服
|
||||
</p>
|
||||
<p>
|
||||
本产品所有数据均来自第三方。可能部分数据未公开、数据更新延迟或信息受到限制,贵司不对数据的准确性、真实性、完整性做任何承诺。用户需根据实际情况,结合报告内容自行判断与决策。
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<a class="text-blue-500" href="https://beian.miit.gov.cn">
|
||||
桂ICP备2024038462号
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
广西福铭网络科技有限公司版权所有
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
@apply mx-auto mt-2 w-64 border rounded-3xl bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 py-2 text-center text-white font-bold;
|
||||
}
|
||||
|
||||
.a {
|
||||
color: #e03131;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
/* margin-top: 24px; */
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding-bottom: 60px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user