team/tydata-webview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4b3a7b0a4e
tydata-webview/src/views/Report.vue

411 lines
22 KiB
Vue
Raw Normal View History

first commit
2025-01-20 16:39:00 +08:00
<script setup>
const featureMap = {
G09SC02: {
temp
2025-02-20 12:34:25 +08:00
name: '婚姻状况',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() => import('@/ui/CMarriage.vue')),
temp
2025-02-20 12:34:25 +08:00
remark: "查询结果为“未婚或尚未登记结婚”时，表示婚姻登记处暂无相关的登记记录。婚姻状态信息由婚姻登记处逐级上报，可能存在数据遗漏或更新滞后。当前可查询的婚姻状态包括：未婚或尚未登记结婚、已婚、离异、离异冷静期。如您对查询结果有疑问，请联系客服反馈。"
first commit
2025-01-20 16:39:00 +08:00
},
G27BJ05: {
temp
2025-02-20 12:34:25 +08:00
name: '借贷申请记录',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() =>
import('@/ui/CBankLoanApplication.vue')
),
},
G28BJ05: {
temp
2025-02-20 12:34:25 +08:00
name: '借贷行为记录',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() =>
import('@/ui/CBankLoanBehavior.vue')
),
},
G26BJ05: {
temp
2025-02-20 12:34:25 +08:00
name: '关联人异常检测',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() =>
import('@/ui/CSpecialList.vue')
),
},
G34BJ03: {
temp
2025-02-20 12:34:25 +08:00
name: '不良记录',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() => import('@/ui/CBad.vue')),
},
G35SC01: {
temp
2025-02-20 12:34:25 +08:00
name: '司法涉诉',
first commit
2025-01-20 16:39:00 +08:00
component: defineAsyncComponent(() => import('@/ui/CLawsuit.vue')),
},
G05HZ01: {
name: '股东人企关系',
component: defineAsyncComponent(() => import('@/ui/CRelatedEnterprises.vue')),
},
Q23SC01: {
name: '企业涉诉',
component: defineAsyncComponent(() => import('@/ui/CLawsuit.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')),
}
};
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);
temp
2025-02-20 12:34:25 +08:00
const active = ref(null)
first commit
2025-01-20 16:39:00 +08:00
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) {
temp
2025-02-20 12:34:25 +08:00
reportData.value = data.value.data.query_data.sort((a, b) => {
return a.feature.sort - b.feature.sort
});
first commit
2025-01-20 16:39:00 +08:00
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 === "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);
}
}
return value;
}
});
</script>
<template>
<div class="min-h-full from-blue-100 to-white bg-gradient-to-b">
temp
2025-02-20 12:34:25 +08:00
<!-- <van-notice-bar color="#e03131" background="#ecf9ff" left-icon="info-o"
text="由于天远数据APP暂未上线，建议将此网站加入收藏夹或书签，或可以百度搜索天远数据，以及在微信天远数据小程序复制链接打开" /> -->
first commit
2025-01-20 16:39:00 +08:00
<template v-if="isDone">
temp
2025-02-20 12:34:25 +08:00
<van-tabs v-model:active="active" scrollspy sticky :offset-top="46">
<div class="flex flex-col gap-y-4 p-4">
<LEmpty v-if="isEmpty" />
<template v-if="!isEmpty && !isPending">
<van-tab title="基本信息">
<div id="overdiv" class="title mb-4">基本信息</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>
first commit
2025-01-20 16:39:00 +08:00
</div>
temp
2025-02-20 12:34:25 +08:00
<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?.name">
<span class="text-gray-700 font-bold">姓名</span>
<span class="text-gray-600">{{ maskValue("name", reportParams?.name)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</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)
代理版
2025-03-07 04:09:24 +08:00
}}</span>
temp
2025-02-20 12:34:25 +08:00
</div>
<div class="flex flex-col gap-4">
<div class="flex items-center bg-blue-100 rounded-xl px-4 py-2 flex-1">
<div
class="bg-green-500 w-12 h-12 text-white text-xl flex items-center justify-center rounded-full mr-4">
✔</div>
<div>
<div class="font-bold text-lg">身份证检查结果</div>
<div class="text-sm text-gray-600">身份证信息核验通过</div>
</div>
</div>
<div class="flex items-center bg-blue-100 rounded-xl px-4 py-2 flex-1">
<div
class="bg-green-500 w-12 h-12 text-white text-xl flex items-center justify-center rounded-full mr-4">
✔</div>
<div>
<div class="font-bold text-lg">手机号检测结果</div>
<div class="text-sm text-gray-600">被查询人姓名与运营商提供的一致</div>
<div class="text-sm text-gray-600">被查询人身份证与运营商提供的一致</div>
</div>
</div>
</div>
</div>
</template>
first commit
2025-01-20 16:39:00 +08:00
</div>
temp
2025-02-20 12:34:25 +08:00
</div>
<LRemark content="如查询的姓名/身份证与运营商提供的不一致，可能会存在报告内容不匹配的情况" />
</van-tab>
</template>
<LPendding v-if="isPending" />
<van-tab v-for="(item, index) in reportData" :key="index" :title="featureMap[item.data.apiID].name">
<div id="lawsuit" class="title mb-4">{{ featureMap[item.data.apiID].name }}</div>
<component :is="featureMap[item.data.apiID].component" :data="item.data.data"
:params="reportParams">
</component>
<LRemark v-if="featureMap[item.data.apiID].remark"
:content="featureMap[item.data.apiID].remark" />
</van-tab>
<div class="card">
first commit
2025-01-20 16:39:00 +08:00
<div>
temp
2025-02-20 12:34:25 +08:00
<div class="text-bold text-blue-500 mb-2">报告说明</div>
<div>
&nbsp; &nbsp;本报告的数据由用户本人明确授权后，我们才向相关合法存有用户个人数据的机构调取本报告相关内容，本平台只做大数据的获取与分析，仅向用户个人展示参考。
</div>
<p>
&nbsp; &nbsp; 报告有效期<strong class="text-red-500">30天</strong>，过期自动删除。
</p>
<p>
&nbsp; &nbsp;
若您的数据不全面，可能是数据具有延迟性或者合作信息机构未获取到您的数据。若数据有错误请联系客服
</p>
<p> &nbsp;
&nbsp;本产品所有数据均来自第三方。可能部分数据未公开、数据更新延迟或信息受到限制，贵司不对数据的准确性、真实性、完整性做任何承诺。用户需根据实际情况，结合报告内容自行判断与决策。
</p>
first commit
2025-01-20 16:39:00 +08:00
temp
2025-02-20 12:34:25 +08:00
</div>
first commit
2025-01-20 16:39:00 +08:00
</div>
</div>
temp
2025-02-20 12:34:25 +08:00
</van-tabs>
first commit
2025-01-20 16:39:00 +08:00
</template>
</div>
<div class="disclaimer">
<div class="flex flex-col items-center">
<!-- <div class="flex items-center">
<img class="w-4 h-4 mr-2" src="@/assets/images/public_security_record_icon.png" alt="公安备案" />
<text>琼公网安备46010002000443号</text>
</div> -->
<div>
<a class="text-blue-500" href="https://beian.miit.gov.cn">
代理版
2025-03-07 04:09:24 +08:00
琼ICP备2024048057号-1
first commit
2025-01-20 16:39:00 +08:00
</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 Copy Permalink