This commit is contained in:
2026-02-08 16:56:41 +08:00
parent 9e0b38a6d5
commit 3eb3636b22
109 changed files with 6603 additions and 2118 deletions

2
.env
View File

@@ -12,6 +12,6 @@ VITE_CHAT_AES_KEY=qw5w6SFE2D1jmxyd
VITE_CHAT_AES_IV=345GDFED433223DF VITE_CHAT_AES_IV=345GDFED433223DF
VITE_SHARE_TITLE=一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用 VITE_SHARE_TITLE=一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用
VITE_SHARE_DESC=提供个人信用评估、入职背调、信贷风控、企业风险监测等服务 VITE_SHARE_DESC=提供个人风险评估、入职背调、信贷风控、企业风险监测等服务
VITE_SHARE_IMG=https://www.onecha.cn/logo.png VITE_SHARE_IMG=https://www.onecha.cn/logo.png
VITE_TOKEN_VERSION=1.5 VITE_TOKEN_VERSION=1.5

View File

@@ -3,22 +3,36 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> sizes="180x180"
<link rel="manifest" href="/site.webmanifest"> href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=no" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=no"
/> />
<!-- 基础SEO信息 --> <!-- 基础SEO信息 -->
<title> <title>
一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用 一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用
</title> </title>
<meta <meta
name="description" name="description"
content="一查查,专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。" content="一查查,专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。"
/> />
<meta <meta
name="keywords" name="keywords"
@@ -28,21 +42,33 @@
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" /> <meta name="googlebot" content="index, follow" />
<meta name="baidu-site-verification" content="" /> <meta name="baidu-site-verification" content="" />
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://www.zhinengcha.cn/" /> <meta property="og:url" content="https://www.zhinengcha.cn/" />
<meta property="og:title" content="一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用" /> <meta
<meta property="og:description" content="一查查,专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。" /> property="og:title"
content="一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用"
/>
<meta
property="og:description"
content="一查查,专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。"
/>
<meta property="og:site_name" content="一查查" /> <meta property="og:site_name" content="一查查" />
<meta property="og:locale" content="zh_CN" /> <meta property="og:locale" content="zh_CN" />
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary" /> <meta property="twitter:card" content="summary" />
<meta property="twitter:url" content="https://www.zhinengcha.cn/" /> <meta property="twitter:url" content="https://www.zhinengcha.cn/" />
<meta property="twitter:title" content="一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用" /> <meta
<meta property="twitter:description" content="一查查,专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。" /> property="twitter:title"
content="一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用"
/>
<meta
property="twitter:description"
content="一查查,专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。"
/>
<!-- 其他重要meta标签 --> <!-- 其他重要meta标签 -->
<meta name="theme-color" content="#3498db" /> <meta name="theme-color" content="#3498db" />
<meta name="msapplication-TileColor" content="#3498db" /> <meta name="msapplication-TileColor" content="#3498db" />
@@ -50,31 +76,31 @@
<meta name="apple-mobile-web-app-title" content="一查查" /> <meta name="apple-mobile-web-app-title" content="一查查" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<!-- 结构化数据 --> <!-- 结构化数据 -->
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "WebSite", "@type": "WebSite",
"name": "一查查", "name": "一查查",
"url": "https://www.zhinengcha.cn/", "url": "https://www.zhinengcha.cn/",
"description": "专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用", "description": "专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风控、贷前风险背调等多场景报告应用",
"potentialAction": { "potentialAction": {
"@type": "SearchAction", "@type": "SearchAction",
"target": "https://www.zhinengcha.cn/search?q={search_term_string}", "target": "https://www.zhinengcha.cn/search?q={search_term_string}",
"query-input": "required name=search_term_string" "query-input": "required name=search_term_string"
}
} }
}
</script> </script>
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "Organization", "@type": "Organization",
"name": "一查查", "name": "一查查",
"url": "https://www.zhinengcha.cn/", "url": "https://www.zhinengcha.cn/",
"description": "专业大数据风险报告查询与代理平台,支持个人和企业多场景风控应用" "description": "专业大数据风险报告查询与代理平台,支持个人和企业多场景风控应用"
} }
</script> </script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
@@ -82,13 +108,13 @@
window.jWeixin = window.wx; window.jWeixin = window.wx;
delete window.wx; delete window.wx;
</script> </script>
<!-- 预加载关键资源 --> <!-- 预加载关键资源 -->
<link rel="preconnect" href="https://www.zhinengcha.cn"> <link rel="preconnect" href="https://www.zhinengcha.cn" />
<link rel="preconnect" href="https://res.wx.qq.com"> <link rel="preconnect" href="https://res.wx.qq.com" />
<link rel="dns-prefetch" href="https://www.zhinengcha.cn"> <link rel="dns-prefetch" href="https://www.zhinengcha.cn" />
<link rel="dns-prefetch" href="https://res.wx.qq.com"> <link rel="dns-prefetch" href="https://res.wx.qq.com" />
<style> <style>
/* 基础样式 */ /* 基础样式 */
html { html {

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

View File

@@ -1,7 +1,7 @@
{ {
"name": "一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用", "name": "一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用",
"short_name": "一查查", "short_name": "一查查",
"description": "专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用", "description": "专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风控、贷前风险背调等多场景报告应用",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#ffffff", "background_color": "#ffffff",
@@ -34,7 +34,11 @@
"type": "image/png" "type": "image/png"
} }
], ],
"categories": ["business", "finance", "utilities"], "categories": [
"business",
"finance",
"utilities"
],
"lang": "zh-CN", "lang": "zh-CN",
"dir": "ltr" "dir": "ltr"
} }

View File

@@ -9,12 +9,10 @@ import { useAppStore } from "@/stores/appStore";
import { useWeixinShare } from "@/composables/useWeixinShare"; import { useWeixinShare } from "@/composables/useWeixinShare";
import BindPhoneDialog from "@/components/BindPhoneDialog.vue"; import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
import BindPhoneOnlyDialog from "@/components/BindPhoneOnlyDialog.vue"; import BindPhoneOnlyDialog from "@/components/BindPhoneOnlyDialog.vue";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const agentStore = useAgentStore(); const agentStore = useAgentStore();
const userStore = useUserStore(); const userStore = useUserStore();
const dialogStore = useDialogStore();
const authStore = useAuthStore(); const authStore = useAuthStore();
const appStore = useAppStore(); const appStore = useAppStore();
const { setDynamicShare } = useWeixinShare(); const { setDynamicShare } = useWeixinShare();

View File

@@ -217,14 +217,29 @@ export function getWithdrawalList(params) {
/** /**
* 申请提现 * 申请提现
* @param {object} params - 提现参数 * @param {object} params - 提现参数
* @param {number} params.withdrawal_type - 提现方式1=支付宝2=银行卡
* @param {number} params.amount - 提现金额 * @param {number} params.amount - 提现金额
* @param {string} params.payee_account - 收款账户 * @param {string} params.payee_account - 收款账户(支付宝账号)
* @param {string} params.payee_name - 收款人姓名 * @param {string} params.payee_name - 收款人姓名
* @param {string} params.bank_card_no - 银行卡号(银行卡提现时必填)
* @param {string} params.bank_name - 开户行名称(银行卡提现时必填)
*/ */
export function applyWithdrawal(params) { export function applyWithdrawal(params) {
return useApiFetch("/agent/withdrawal/apply").post(params).json(); return useApiFetch("/agent/withdrawal/apply").post(params).json();
} }
/**
* 获取上次提现信息(用于前端预填)
* @param {object} params - 查询参数
* @param {number} params.withdrawal_type - 提现方式1=支付宝2=银行卡
*/
export function getLastWithdrawalInfo(params) {
const queryString = buildQueryString(params || {});
return useApiFetch(`/agent/withdrawal/last_info${queryString}`)
.get()
.json();
}
/** /**
* 实名认证 * 实名认证
* @param {object} params - 实名认证参数 * @param {object} params - 实名认证参数
@@ -278,3 +293,67 @@ export function getInviteLink(params) {
const queryString = buildQueryString(params || {}); const queryString = buildQueryString(params || {});
return useApiFetch(`/agent/invite_link${queryString}`).get().json(); return useApiFetch(`/agent/invite_link${queryString}`).get().json();
} }
// ==================== 白名单相关接口 ====================
/**
* 获取可屏蔽的feature列表带价格
*/
export function getWhitelistFeatures() {
return useApiFetch("/agent/whitelist/features").get().json();
}
/**
* 创建白名单订单
* @param {object} params - 创建参数
* @param {string} params.id_card - 身份证号
* @param {string[]} params.feature_ids - 要屏蔽的feature ID列表
* @param {string} params.order_id - 关联的查询订单ID可选
*/
export function createWhitelistOrder(params) {
return useApiFetch("/agent/whitelist/order/create").post(params).json();
}
/**
* 查询白名单列表
* @param {object} params - 查询参数
* @param {number} params.page - 页码
* @param {number} params.page_size - 每页数量
* @param {string} params.id_card - 身份证号(可选,用于筛选)
*/
export function getWhitelistList(params) {
const queryString = buildQueryString(params || {});
return useApiFetch(`/agent/whitelist/list${queryString}`).get().json();
}
/**
* 检查模块是否已下架
* @param {object} params - 查询参数
* @param {string} params.id_card - 身份证号
* @param {string} params.feature_api_id - Feature的API标识
*/
export function checkFeatureWhitelistStatus(params) {
const queryString = buildQueryString(params || {});
return useApiFetch(`/agent/whitelist/check${queryString}`).get().json();
}
/**
* 下架单个模块(创建订单并支付)
* @param {object} params - 下架参数
* @param {string} params.id_card - 身份证号
* @param {string} params.feature_api_id - Feature的API标识
* @param {string} params.order_id - 关联的查询订单ID可选
*/
export function offlineFeature(params) {
return useApiFetch("/agent/whitelist/offline").post(params).json();
}
/**
* 检查订单是否属于当前代理推广
* @param {object} params - 查询参数
* @param {string} params.order_id - 订单ID
*/
export function checkOrderAgent(params) {
const queryString = buildQueryString(params || {});
return useApiFetch(`/agent/order/agent${queryString}`).get().json();
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 KiB

BIN
src/assets/images/ysjjt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@@ -93,7 +93,9 @@ declare global {
const shallowReadonly: typeof import('vue')['shallowReadonly'] const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef'] const shallowRef: typeof import('vue')['shallowRef']
const showConfirmDialog: typeof import('vant/es')['showConfirmDialog'] const showConfirmDialog: typeof import('vant/es')['showConfirmDialog']
const showFailToast: typeof import('vant/es')['showFailToast']
const showLoadingToast: typeof import('vant/es')['showLoadingToast'] const showLoadingToast: typeof import('vant/es')['showLoadingToast']
const showSuccessToast: typeof import('vant/es')['showSuccessToast']
const showToast: typeof import('vant/es')['showToast'] const showToast: typeof import('vant/es')['showToast']
const syncRef: typeof import('@vueuse/core')['syncRef'] const syncRef: typeof import('@vueuse/core')['syncRef']
const syncRefs: typeof import('@vueuse/core')['syncRefs'] const syncRefs: typeof import('@vueuse/core')['syncRefs']
@@ -249,6 +251,7 @@ declare global {
const useScrollLock: typeof import('@vueuse/core')['useScrollLock'] const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage'] const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
const useShare: typeof import('@vueuse/core')['useShare'] const useShare: typeof import('@vueuse/core')['useShare']
const useShareReport: typeof import('./composables/useShareReport.js')['useShareReport']
const useSlots: typeof import('vue')['useSlots'] const useSlots: typeof import('vue')['useSlots']
const useSorted: typeof import('@vueuse/core')['useSorted'] const useSorted: typeof import('@vueuse/core')['useSorted']
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition'] const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']

View File

@@ -31,7 +31,7 @@
本人在授权签署前已通过实名认证及动态验证码验证或其他身份验证手段确认本授权行为为本人真实意思表示平台已履行身份验证义务 本人在授权签署前已通过实名认证及动态验证码验证或其他身份验证手段确认本授权行为为本人真实意思表示平台已履行身份验证义务
</li> </li>
<li> <li>
本人在此声明已充分理解上述授权条款含义知晓并自愿承担因授权数据使用可能带来的后果包括但不限于影响个人信用评分生活行为等本人确认授权范围内的相关信息由本人提供并真实有效 本人在此声明已充分理解上述授权条款含义知晓并自愿承担因授权数据使用可能带来的后果包括但不限于影响个人风险评分生活行为等本人确认授权范围内的相关信息由本人提供并真实有效
</li> </li>
<li> <li>
若用户冒名签署或提供虚假信息由用户自行承担全部法律责任平台不承担任何后果 若用户冒名签署或提供虚假信息由用户自行承担全部法律责任平台不承担任何后果
@@ -87,7 +87,7 @@
<p class="mt-4 font-bold"> <p class="mt-4 font-bold">
签署人<span class="underline">{{ 签署人<span class="underline">{{
signature ? props.name : "____________" signature ? props.name : "____________"
}}</span> }}</span>
<br /> <br />
手机号码<span class="underline"> 手机号码<span class="underline">
{{ signature ? props.mobile : "____________" }} {{ signature ? props.mobile : "____________" }}

View File

@@ -3,12 +3,18 @@ import ShareReportButton from "./ShareReportButton.vue";
import TitleBanner from "./TitleBanner.vue"; import TitleBanner from "./TitleBanner.vue";
import VerificationCard from "./VerificationCard.vue"; import VerificationCard from "./VerificationCard.vue";
import StyledTabs from "./StyledTabs.vue"; import StyledTabs from "./StyledTabs.vue";
import WhitelistModuleDialog from "./WhitelistModuleDialog.vue";
import Payment from "./Payment.vue";
import { splitDWBG8B4DForTabs } from '@/ui/CDWBG8B4D/utils/simpleSplitter.js'; import { splitDWBG8B4DForTabs } from '@/ui/CDWBG8B4D/utils/simpleSplitter.js';
import { splitDWBG6A2CForTabs } from '@/ui/DWBG6A2C/utils/simpleSplitter.js'; import { splitDWBG6A2CForTabs } from '@/ui/DWBG6A2C/utils/simpleSplitter.js';
import { splitJRZQ7F1AForTabs } from '@/ui/JRZQ7F1A/utils/simpleSplitter.js'; import { splitJRZQ7F1AForTabs } from '@/ui/JRZQ7F1A/utils/simpleSplitter.js';
import { splitCJRZQ5E9FForTabs } from '@/ui/CJRZQ5E9F/utils/simpleSplitter.js'; import { splitCJRZQ5E9FForTabs } from '@/ui/CJRZQ5E9F/utils/simpleSplitter.js';
import { splitCQYGL3F8EForTabs } from '@/ui/CQYGL3F8E/utils/simpleSplitter.js'; import { splitCQYGL3F8EForTabs } from '@/ui/CQYGL3F8E/utils/simpleSplitter.js';
import { useAppStore } from "@/stores/appStore"; import { useAppStore } from "@/stores/appStore";
import { useAgentStore } from "@/stores/agentStore";
import { storeToRefs } from 'pinia';
import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant';
import { checkFeatureWhitelistStatus, offlineFeature, checkOrderAgent } from '@/api/agent';
// 动态导入产品背景图片的函数 // 动态导入产品背景图片的函数
const loadProductBackground = async (productType) => { const loadProductBackground = async (productType) => {
@@ -53,6 +59,11 @@ const props = defineProps({
type: String, type: String,
default: "", default: "",
}, },
queryId: {
type: String,
required: false,
default: "",
},
feature: { feature: {
type: String, type: String,
required: true, required: true,
@@ -98,8 +109,328 @@ const {
isEmpty, isEmpty,
isDone, isDone,
isExample, isExample,
orderId,
orderNo,
queryId,
} = toRefs(props); } = toRefs(props);
// 代理信息
const agentStore = useAgentStore()
const { isDiamond } = storeToRefs(agentStore)
// 屏蔽模块弹窗(已废弃,保留用于兼容)
const showWhitelistDialog = ref(false)
// 订单是否属于当前代理推广
const isAgentOrder = ref(false)
// 获取身份证号(从 reportParams 中,用于展示与接口)
const idCard = computed(() => {
return reportParams.value?.id_card || ''
})
// 评分用身份证键:保证所有模式(自己报告/代理推广/示例/分享都有稳定键±10 按此计算
const scoreIdCard = computed(() => {
const raw = reportParams.value?.id_card
if (raw != null && String(raw).trim() !== '') return String(raw).trim()
return `${feature.value || 'report'}_${queryId.value || orderId.value || orderNo.value || 'unknown'}`
})
// 提取主模块ID去掉下划线后的部分
// 例如JRZQ7F1A_BigDataReport -> JRZQ7F1A
const getMainApiId = (apiId) => {
if (!apiId) return ''
const index = apiId.indexOf('_')
return index > 0 ? apiId.substring(0, index) : apiId
}
// 模块下架状态映射主模块ID -> { isOfflined, whitelistPrice, isSubmitting }
// 使用主模块ID作为key这样同一组模块如JRZQ7F1A_*)会共享状态
const featureOfflineStatus = ref(new Map())
// 当前正在下架的模块信息(用于支付确认弹窗)
const currentOfflineFeature = ref(null)
const showOfflineConfirmDialog = ref(false)
// 检查模块下架状态使用主模块ID
const checkFeatureStatus = async (featureApiId, forceRefresh = false) => {
if (!idCard.value || !featureApiId) return
// 提取主模块ID
const mainApiId = getMainApiId(featureApiId)
if (!mainApiId) return
// 如果已经检查过这个主模块且不是强制刷新,跳过
if (!forceRefresh && featureOfflineStatus.value.has(mainApiId)) return
try {
const { data, error } = await checkFeatureWhitelistStatus({
id_card: idCard.value,
feature_api_id: mainApiId, // 使用主模块ID调用接口
query_id: queryId.value || '', // 传递查询记录ID用于检查报告数据是否已删除
})
if (data.value && !error.value && data.value.code === 200) {
// 使用主模块ID作为key存储状态
// 只有当白名单存在且报告数据已删除时,才认为已下架
const isWhitelisted = data.value.data.is_whitelisted || false
const dataDeleted = data.value.data.data_deleted !== undefined ? data.value.data.data_deleted : true // 默认认为已删除(保守处理)
const status = {
isOfflined: isWhitelisted && dataDeleted, // 白名单存在且数据已删除
whitelistPrice: data.value.data.whitelist_price || 0,
isSubmitting: false,
}
featureOfflineStatus.value.set(mainApiId, status)
// 调试信息
console.log(`[白名单状态] 主模块ID: ${mainApiId}, 白名单: ${isWhitelisted}, 数据已删除: ${dataDeleted}, 已下架: ${status.isOfflined}`, status)
} else {
console.warn(`[白名单状态] 检查失败:`, data.value?.msg || error.value)
}
} catch (err) {
console.error('检查模块状态失败:', err)
}
}
// 批量检查所有模块的下架状态
const checkAllFeaturesStatus = async () => {
if (!idCard.value || !isAgentOrder.value || isExample.value) return
const featureApiIds = processedReportData.value.map(item => item.data.apiID)
// 提取所有主模块ID并去重
const mainApiIds = [...new Set(featureApiIds.map(id => getMainApiId(id)))]
for (const mainApiId of mainApiIds) {
if (mainApiId) {
await checkFeatureStatus(mainApiId)
}
}
}
// 获取模块下架状态使用主模块ID
const getFeatureStatus = (featureApiId) => {
const mainApiId = getMainApiId(featureApiId)
const status = featureOfflineStatus.value.get(mainApiId) || {
isOfflined: false,
whitelistPrice: 0,
isSubmitting: false,
}
// 调试信息(仅在开发环境)
if (import.meta.env.DEV) {
console.log(`[getFeatureStatus] featureApiId: ${featureApiId}, mainApiId: ${mainApiId}, status:`, status)
}
return status
}
// 处理下架按钮点击
const handleOfflineClick = (featureApiId, featureName) => {
const mainApiId = getMainApiId(featureApiId)
const status = getFeatureStatus(mainApiId)
// 如果已下架,不允许再次点击
if (status.isOfflined) {
showFailToast('该模块已下架')
return
}
// 如果 whitelistPrice = 0直接下架免费不需要支付确认
if (status.whitelistPrice <= 0) {
confirmOfflineDirectly(mainApiId, featureName)
return
}
// 如果 whitelistPrice > 0需要支付确认
currentOfflineFeature.value = {
featureApiId: mainApiId, // 使用主模块ID
featureName,
whitelistPrice: status.whitelistPrice,
}
showOfflineConfirmDialog.value = true
}
// 直接下架(免费,不需要支付)
const confirmOfflineDirectly = async (mainApiId, featureName) => {
if (!idCard.value || !mainApiId) return
// 更新状态为提交中
const status = getFeatureStatus(mainApiId)
status.isSubmitting = true
featureOfflineStatus.value.set(mainApiId, { ...status })
try {
if (!queryId.value) {
showFailToast('缺少查询记录ID无法下架')
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
return
}
const { data, error } = await offlineFeature({
query_id: queryId.value,
feature_api_id: mainApiId,
})
if (!data.value || error.value || data.value.code !== 200) {
showFailToast(data.value?.msg || '下架失败')
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
return
}
const resp = data.value.data || {}
// 如果返回 need_pay=true说明需要支付弹出支付弹窗
if (resp.need_pay) {
// 更新状态,保存实际的价格信息
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
currentStatus.whitelistPrice = resp.amount || 0 // 更新实际价格
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
// 弹出支付弹窗
whitelistPaymentData.value = {
product_name: `${featureName || '模块'} 下架`,
sell_price: resp.amount || 0,
}
// PaymentReq.Id 约定格式:"{idCard}|{featureApiId}"
whitelistPaymentId.value = `${idCard.value}|${mainApiId}`
whitelistPaymentType.value = 'whitelist'
showWhitelistPayment.value = true
return
}
showSuccessToast('下架成功')
// 更新状态:标记为已下架
const updatedStatus = getFeatureStatus(mainApiId)
updatedStatus.isSubmitting = false
updatedStatus.isOfflined = true // 标记为已下架
featureOfflineStatus.value.set(mainApiId, { ...updatedStatus })
// 刷新报告数据(重新加载,获取后端处理后的数据)
if (queryId.value || orderId.value) {
// 触发父组件刷新报告数据
window.location.reload()
}
} catch (err) {
console.error('下架模块失败:', err)
showFailToast('下架模块失败')
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
}
}
// 确认下架
const confirmOffline = async () => {
if (!currentOfflineFeature.value) return
const { featureApiId } = currentOfflineFeature.value // 这里已经是主模块ID了
const mainApiId = featureApiId
if (!queryId.value) {
showFailToast('缺少查询记录ID无法下架')
return
}
// 更新状态为提交中
const status = getFeatureStatus(mainApiId)
status.isSubmitting = true
featureOfflineStatus.value.set(mainApiId, { ...status })
try {
const { data, error } = await offlineFeature({
query_id: queryId.value,
feature_api_id: mainApiId, // 使用主模块ID调用接口
})
if (!data.value || error.value || data.value.code !== 200) {
showFailToast(data.value?.msg || '下架失败')
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
return
}
const resp = data.value.data || {}
// 价格 > 0 的情况:
// - need_pay = true提示前端发起支付这里只做占位真正支付流程复用现有支付系统
// - success = true表示已经有支付成功订单且后端已补写白名单前端直接标记为已下架
if (resp.need_pay) {
// 关闭下架确认弹窗
showOfflineConfirmDialog.value = false
// 使用统一支付组件 Payment.vue 发起支付
whitelistPaymentData.value = {
product_name: `${currentOfflineFeature.value?.featureName || '模块'} 下架`,
sell_price: resp.amount || 0,
}
// PaymentReq.Id 约定格式:"{idCard}|{featureApiId}"
whitelistPaymentId.value = `${idCard.value}|${mainApiId}`
whitelistPaymentType.value = 'whitelist'
showWhitelistPayment.value = true
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
// 不立刻清空 currentOfflineFeature方便支付完成后可根据需要刷新状态
return
}
showSuccessToast('下架成功')
showOfflineConfirmDialog.value = false
currentOfflineFeature.value = null
// 更新状态(不再标记为已下架,因为后端已处理数据,前端正常渲染即可)
const updatedStatus = getFeatureStatus(mainApiId)
updatedStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...updatedStatus })
// 刷新报告数据(重新加载,获取后端处理后的数据)
if (queryId.value || orderId.value) {
// 触发父组件刷新报告数据
window.location.reload()
}
} catch (err) {
console.error('下架模块失败:', err)
showFailToast('下架模块失败')
const currentStatus = getFeatureStatus(mainApiId)
currentStatus.isSubmitting = false
featureOfflineStatus.value.set(mainApiId, { ...currentStatus })
}
}
// 打开屏蔽模块弹窗(已废弃,保留用于兼容)
const openWhitelistDialog = () => {
if (!idCard.value) {
console.error('无法获取身份证号')
return
}
showWhitelistDialog.value = true
}
// 屏蔽成功后的回调(已废弃,保留用于兼容)
const onWhitelistSuccess = () => {
console.log('模块已屏蔽')
}
// 白名单下架支付弹窗相关状态
const showWhitelistPayment = ref(false)
const whitelistPaymentData = ref({ product_name: '', sell_price: 0 })
const whitelistPaymentId = ref('')
const whitelistPaymentType = ref('whitelist')
// 获取当前报告页面的 URL用于支付成功后返回
const getCurrentReportUrl = () => {
if (orderNo.value) {
return `/report?orderNo=${orderNo.value}`
} else if (orderId.value) {
return `/report?orderId=${orderId.value}`
}
return ''
}
const active = ref(null); const active = ref(null);
const backgroundContainerRef = ref(null); // 背景容器的引用 const backgroundContainerRef = ref(null); // 背景容器的引用
@@ -153,6 +484,23 @@ onMounted(async () => {
// 监听窗口大小变化,重新计算高度 // 监听窗口大小变化,重新计算高度
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
// 检查订单是否属于当前代理推广(含分享页,以便分享页也能显示下线按钮)
if (!isExample.value && orderId.value) {
try {
const { data, error } = await checkOrderAgent({ order_id: orderId.value })
if (data.value && !error.value && data.value.code === 200) {
isAgentOrder.value = data.value.data.is_agent_order
}
} catch (err) {
console.error('检查订单代理状态失败:', err)
}
}
// 检查所有模块的下架状态(含分享页,当是代理推广的订单时)
if (isAgentOrder.value && idCard.value && !isExample.value) {
checkAllFeaturesStatus()
}
}); });
// 处理窗口大小变化(带防抖) // 处理窗口大小变化(带防抖)
@@ -399,7 +747,7 @@ const featureMap = {
JRZQ4B6C: { JRZQ4B6C: {
name: "信贷表现", name: "信贷表现",
component: defineAsyncComponent(() => import("@/ui/JRZQ4B6C/index.vue")), component: defineAsyncComponent(() => import("@/ui/JRZQ4B6C/index.vue")),
remark: '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人信用过滤。数据来源于多个征信机构,可能存在数据延迟或不完整的情况。' remark: '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人风险过滤。数据来源于多个征信机构,可能存在数据延迟或不完整的情况。'
}, },
JRZQ09J8: { JRZQ09J8: {
name: "收入评估", name: "收入评估",
@@ -410,7 +758,7 @@ const featureMap = {
DWBG6A2C: { DWBG6A2C: {
name: "司南报告", name: "司南报告",
component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/index.vue")), component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/index.vue")),
remark: '司南报告提供全面的个人信用风险评估,包括身份核验、风险名单、借贷行为、履约情况等多维度分析。' remark: '司南报告提供全面的个人风险风险评估,包括身份核验、风险名单、借贷行为、履约情况等多维度分析。'
}, },
// 司南报告拆分模块 // 司南报告拆分模块
// DWBG6A2C_BaseInfo: { // DWBG6A2C_BaseInfo: {
@@ -556,7 +904,7 @@ const featureMap = {
JRZQ6F2A: { JRZQ6F2A: {
name: "借贷申请", name: "借贷申请",
component: defineAsyncComponent(() => import("@/ui/JRZQ6F2A/index.vue")), component: defineAsyncComponent(() => import("@/ui/JRZQ6F2A/index.vue")),
remark: '借贷申请提供全面的借贷申请行为分析,包括申请次数、申请总次数(银行+非银)和申请机构总数(银行+非银)等多维度数据。通过不同时间段的统计分析,全面展示申请人的借贷申请行为。' remark: '【非银行类贷款】:主要有持牌网络小贷、持牌小贷、持牌消费金融、持牌融资租赁、持牌汽车金融、其他。\n【持牌网络小贷】小额贷款公司拥有相关牌照和许可证可以通过互联网为用户提供贷款服务。贷款服务包括抵押贷款、消费贷款等。\n【持牌小贷机构】是指经国家金融管理部门批准设立并颁发许可证具备合法资质可依法在注册地所在省市开展小额贷款业务的非银行类金融机构。\n【持牌消费金融】是指经银监会批准在中华人民共和国境内设立的不吸收公众存款以小额、分散为原则为中国境内居民个人提供以消费为目的的贷款的非银行金融机构。\n【持牌融资租赁】是指持有金融牌照和许可证进行的融资租赁业务的融资租赁机构。\n【持牌汽车金融机构】是经过国家金融监督管理总局批准设立的、专门提供汽车金融服务的非银行金融机构。主要职责是为中国境内的汽车购买者及销售者提供金融服务包括但不限于购车贷款、经销商贷款、汽车融资租赁等。\n【其他】指除以上分类的其他非银行类贷款机构。'
}, },
// 手机在网时长 // 手机在网时长
YYSY8B1C: { YYSY8B1C: {
@@ -564,6 +912,14 @@ const featureMap = {
component: defineAsyncComponent(() => import("@/ui/YYSY8B1C/index.vue")), component: defineAsyncComponent(() => import("@/ui/YYSY8B1C/index.vue")),
remark: '手机在网时长查询用于检测用户手机号码的在网使用时长。在网时长越长,通常表示用户身份越稳定,信用风险越低。需要注意的是,如果手机号码存在携号转网的情况,那么在网时长会从转网的时候重新计算,转网前的在网时长不计入当前在网时长。建议结合手机携号转网查询结果进行综合评估。' remark: '手机在网时长查询用于检测用户手机号码的在网使用时长。在网时长越长,通常表示用户身份越稳定,信用风险越低。需要注意的是,如果手机号码存在携号转网的情况,那么在网时长会从转网的时候重新计算,转网前的在网时长不计入当前在网时长。建议结合手机携号转网查询结果进行综合评估。'
}, },
// 支付行为指数
JRZQ3C9R: {
name: "支付表现",
component: defineAsyncComponent(() => import("@/ui/JRZQ3C9R/index.vue")),
remark: '支付表现是指数基于近两年的查验记录、还款成功与失败表现以及余额不足情况,对用户支付与还款习惯进行量化评分,用于评估其支付稳定性与违约风险。'
},
}; };
const maskValue = computed(() => { const maskValue = computed(() => {
@@ -635,87 +991,87 @@ const maskValue = computed(() => {
// ==================== 新评分系统 ==================== // ==================== 新评分系统 ====================
// Feature 风险等级配置(权重越高表示风险越大,最终分数越高越安全) // Feature 风险等级配置(权重越高表示风险越大,最终分数越高越安全)
const featureRiskLevels = { const featureRiskLevels = {
// 🔴 高风险类 - 权重 10 // 🔴 高风险类 - 权重 60有高风险直接扣约70-80分
'FLXG0V4B': 20, // 司法涉诉 'FLXG0V4B': 50, // 司法涉诉
'FLXG7E8F': 20, // 个人涉诉 'FLXG3D56': 50, // 违约失信
'FLXG3D56': 10, // 违约失信 'JRZQ8A2D': 50, // 特殊名单验证
'FLXGDEA9': 18, // 本人不良 'FLXG7E8F': 55, // 个人涉诉
'JRZQ4AA8': 10, // 还款压力 'FLXGDEA9': 55, // 本人不良
// 🟠 中高风险类 - 权重 7 // 🟡 中高风险类 - 权重 20-30
'JRZQ0A03': 7, // 借贷申请记录 'JRZQ4AA8': 45, // 还款压力
'JRZQ8203': 7, // 借贷行为记录 'JRZQ0A03': 45, // 借贷申请记录
'JRZQ4B6C': 7, // 信贷表现 'JRZQ8203': 45, // 借贷行为记录
'JRZQ6F2A': 7, // 借贷申请 'JRZQ4B6C': 45, // 信贷表现
'BehaviorRiskScan': 7, // 风险行为扫描 'JRZQ6F2A': 45, // 借贷申请
'IVYZ8I9J': 7, // 网络社交异常 'BehaviorRiskScan': 60, // 风险行为扫描
'JRZQ8A2D': 9, // 特殊名单验证 'IVYZ8I9J': 45, // 网络社交异常
'JRZQ7F1A': 8, // 全景雷达 'JRZQ7F1A': 40, // 全景雷达
'JRZQ7F1A_ApplyReport': 3, 'JRZQ7F1A_ApplyReport': 20,
'JRZQ7F1A_BehaviorReport': 3, 'JRZQ7F1A_BehaviorReport': 20,
'JRZQ7F1A_BigDataReport': 2, 'JRZQ7F1A_BigDataReport': 15,
'YYSY7D3E': 5, // 手机携号转网 'DWBG7F3A': 45, // 多头借贷
'YYSY8B1C': 5, // 手机在网时长 'YYSY7D3E': 15, // 手机携号转网
'DWBG7F3A': 8, // 多头借贷 'YYSY8B1C': 15, // 手机在网时长
// 🟢 中风险类 - 权重 8-12
'QYGL3F8E': 10, // 人企关系加强版
'QCXG7A2B': 10, // 名下车辆
'JRZQ09J8': 10, // 收入评估
'JRZQ3C9R': 10, // 支付行为指数
// 🟡 中风险类 - 权重 5 // 🔵 低风险类 - 权重 3-5
'QYGL3F8E': 5, // 人企关系加强版 'IVYZ5733': 4, // 婚姻状态
'QCXG7A2B': 5, // 名下车辆 'IVYZ9A2B': 4, // 学历信息
'JRZQ09J8': 5, // 收入评估 'IVYZ3P9M': 4, // 学历信息查询(实时版)
// 🔵 低风险类 - 权重 3
'IVYZ5733': 3, // 婚姻状态
'IVYZ9A2B': 3, // 学历信息
'IVYZ3P9M': 3, // 学历信息查询(实时版)
// 📊 复合报告类 - 按子模块动态计算 // 📊 复合报告类 - 按子模块动态计算
'DWBG8B4D': 0, // 谛听多维报告(由子模块计算) 'DWBG8B4D': 0, // 谛听多维报告(由子模块计算)
'DWBG6A2C': 0, // 司南报告(由子模块计算) 'DWBG6A2C': 0, // 司南报告(由子模块计算)
'JRZQ5E9F': 0, // 贷款风险评估(由子模块计算) 'JRZQ5E9F': 0, // 贷款风险评估(由子模块计算)
// 谛听多维报告子模块 // 谛听多维报告子模块
'DWBG8B4D_Overview': 10, 'DWBG8B4D_Overview': 30,
'DWBG8B4D_ElementVerification': 4, 'DWBG8B4D_ElementVerification': 10,
'DWBG8B4D_Identity': 4, 'DWBG8B4D_Identity': 10,
'DWBG8B4D_RiskWarning': 10, 'DWBG8B4D_RiskWarning': 35,
'DWBG8B4D_OverdueRisk': 9, 'DWBG8B4D_OverdueRisk': 30,
'DWBG8B4D_LoanEvaluation': 7, 'DWBG8B4D_LoanEvaluation': 40,
'DWBG8B4D_LeasingRisk': 6, 'DWBG8B4D_LeasingRisk': 18,
'DWBG8B4D_RiskSupervision': 8, 'DWBG8B4D_RiskSupervision': 25,
'DWBG8B4D_RiskWarningTab': 9, 'DWBG8B4D_RiskWarningTab': 30,
// 司南报告子模块 // 司南报告子模块
'DWBG6A2C_StandLiveInfo': 4, 'DWBG6A2C_StandLiveInfo': 10,
'DWBG6A2C_RiskPoint': 9, 'DWBG6A2C_RiskPoint': 28,
'DWBG6A2C_SecurityInfo': 15, 'DWBG6A2C_SecurityInfo': 45,
'DWBG6A2C_AntiFraudInfo': 15, 'DWBG6A2C_AntiFraudInfo': 45,
'DWBG6A2C_RiskList': 12, 'DWBG6A2C_RiskList': 38,
'DWBG6A2C_ApplicationStatistics': 7, 'DWBG6A2C_ApplicationStatistics': 40,
'DWBG6A2C_LendingStatistics': 6, 'DWBG6A2C_LendingStatistics': 35,
'DWBG6A2C_PerformanceStatistics': 7, 'DWBG6A2C_PerformanceStatistics': 22,
'DWBG6A2C_OverdueRecord': 9, 'DWBG6A2C_OverdueRecord': 28,
'DWBG6A2C_CreditDetail': 5, 'DWBG6A2C_CreditDetail': 15,
'DWBG6A2C_RentalBehavior': 5, 'DWBG6A2C_RentalBehavior': 15,
'DWBG6A2C_RiskSupervision': 8, 'DWBG6A2C_RiskSupervision': 25,
// 贷款风险评估子模块 // 贷款风险评估子模块
'CJRZQ5E9F_RiskOverview': 8, 'CJRZQ5E9F_RiskOverview': 25,
'CJRZQ5E9F_CreditScores': 7, 'CJRZQ5E9F_CreditScores': 22,
'CJRZQ5E9F_LoanBehaviorAnalysis': 7, 'CJRZQ5E9F_LoanBehaviorAnalysis': 40,
'CJRZQ5E9F_InstitutionAnalysis': 5, 'CJRZQ5E9F_InstitutionAnalysis': 15,
'CJRZQ5E9F_TimeTrendAnalysis': 6, 'CJRZQ5E9F_TimeTrendAnalysis': 18,
'CJRZQ5E9F_RiskIndicators': 8, 'CJRZQ5E9F_RiskIndicators': 25,
'CJRZQ5E9F_RiskAdvice': 2, 'CJRZQ5E9F_RiskAdvice': 6,
// 人企关系加强版子模块 // 人企关系加强版子模块
'CQYGL3F8E_Investment': 4, 'CQYGL3F8E_Investment': 12,
'CQYGL3F8E_SeniorExecutive': 4, 'CQYGL3F8E_SeniorExecutive': 12,
'CQYGL3F8E_Lawsuit': 8, 'CQYGL3F8E_Lawsuit': 25,
'CQYGL3F8E_InvestHistory': 3, 'CQYGL3F8E_InvestHistory': 8,
'CQYGL3F8E_FinancingHistory': 3, 'CQYGL3F8E_FinancingHistory': 8,
'CQYGL3F8E_Punishment': 7, 'CQYGL3F8E_Punishment': 22,
'CQYGL3F8E_Abnormal': 6, 'CQYGL3F8E_Abnormal': 18,
'CQYGL3F8E_TaxRisk': 7, 'CQYGL3F8E_TaxRisk': 22,
}; };
// 存储每个组件的 ref 引用 // 存储每个组件的 ref 引用
@@ -735,6 +1091,19 @@ defineExpose({
notifyRiskStatus notifyRiskStatus
}); });
// 根据身份证号生成确定性偏移(-10 ~ +10同一人每次结果一致
const getDeterministicOffset = (idCardStr) => {
if (!idCardStr || typeof idCardStr !== 'string') return 0;
let h = 0;
for (let i = 0; i < idCardStr.length; i++) {
h = ((h << 5) - h) + idCardStr.charCodeAt(i);
h = h & h;
}
const abs = Math.abs(h);
// 0~20 映射为 -10~10
return (abs % 21) - 10;
};
// 计算综合评分的函数(分数越高越安全) // 计算综合评分的函数(分数越高越安全)
const calculateScore = () => { const calculateScore = () => {
// 收集实际存在的 features 及其风险权重 // 收集实际存在的 features 及其风险权重
@@ -757,7 +1126,12 @@ const calculateScore = () => {
}); });
}); });
if (presentFeatures.length === 0) return 100; // 无有效特征时返回满分(最安全) if (presentFeatures.length === 0) {
// 无有效特征时给 20-80 范围的基础分 50再 ±10 得到最终分10-90
const base = 50; // 已在 20-80 内
const offset = getDeterministicOffset(scoreIdCard.value);
return Math.max(10, Math.min(90, Math.round(base + offset)));
}
// 累计总风险分数 // 累计总风险分数
let totalRiskScore = 0; let totalRiskScore = 0;
@@ -772,11 +1146,7 @@ const calculateScore = () => {
const componentRisk = 100 - componentScore; const componentRisk = 100 - componentScore;
// 计算该模块的风险贡献(固定分值,不按占比) // 计算该模块的风险贡献(固定分值,不按占比)
// 使用权重系数放大高风险模块的影响 const weightMultiplier = 1.2;
// 高风险模块权重10如果风险分数是0扣20分权重10 × 系数2
// 中风险模块权重7如果风险分数是0扣14分权重7 × 系数2
// 低风险模块权重3如果风险分数是0扣6分权重3 × 系数2
const weightMultiplier = 1.5; // 权重系数,可以调整这个值来控制影响程度
const riskContribution = (componentRisk / 100) * weight * weightMultiplier; const riskContribution = (componentRisk / 100) * weight * weightMultiplier;
riskDetails.push({ riskDetails.push({
@@ -789,22 +1159,45 @@ const calculateScore = () => {
hasStatus: key in componentRiskScores.value hasStatus: key in componentRiskScores.value
}); });
// 累加风险分数
totalRiskScore += riskContribution; totalRiskScore += riskContribution;
}); });
// 总风险分数限制在 0-90 范围内确保最低分为10分 // 总风险分数限制在 0-86得到安全分数 14-100
const finalRiskScore = Math.max(0, Math.min(90, Math.round(totalRiskScore))); const finalRiskScore = Math.max(0, Math.min(86, Math.round(totalRiskScore)));
// 转换为安全分数分数越高越安全100 - 风险分数)
// 最终分数范围10-100分
const safetyScore = 100 - finalRiskScore; const safetyScore = 100 - finalRiskScore;
return safetyScore; // 先得到 20-80 范围分(基础分)
const baseScore = 20 + (safetyScore - 10) * (60 / 90);
const rangeScore = Math.max(20, Math.min(80, Math.round(baseScore)));
// 再按身份证号(或报告唯一键)确定性 ±10最终 10-90同一人/同一报告每次相同
const offset = getDeterministicOffset(scoreIdCard.value);
const finalScore = Math.max(10, Math.min(90, rangeScore + offset));
return finalScore;
}; };
// 监听 reportData 和 componentRiskScores 变化并计算评分 // 监听报告数据变化,重新检查模块状态
watch([reportData, componentRiskScores], () => { watch([reportData, isDone], async () => {
if (isDone.value && isAgentOrder.value && idCard.value && !isExample.value) {
// 强制刷新状态(清除缓存,重新检查)
featureOfflineStatus.value.clear()
await checkAllFeaturesStatus();
}
}, { immediate: false });
// 监听路由变化,如果从支付结果页返回,刷新状态
const route = useRoute()
watch(() => route.path, (newPath, oldPath) => {
// 如果从支付结果页返回到报告页,刷新下架状态
if (oldPath === '/payment/result' && newPath === '/report' && isDone.value && isAgentOrder.value && idCard.value && !isExample.value) {
featureOfflineStatus.value.clear()
checkAllFeaturesStatus()
}
})
// 监听 reportData、componentRiskScores、scoreIdCard 变化并计算评分scoreIdCard 影响确定性偏移)
watch([reportData, componentRiskScores, scoreIdCard], () => {
reportScore.value = calculateScore(); reportScore.value = calculateScore();
// 将评分系统数据整理到一个对象中 // 将评分系统数据整理到一个对象中
@@ -861,7 +1254,12 @@ watch([reportData, componentRiskScores], () => {
</van-tab> </van-tab>
<van-tab v-for="(item, index) in processedReportData" :key="`${item.data.apiID}_${index}`" <van-tab v-for="(item, index) in processedReportData" :key="`${item.data.apiID}_${index}`"
:title="featureMap[item.data.apiID]?.name"> :title="featureMap[item.data.apiID]?.name">
<TitleBanner :id="item.data.apiID" class="mb-4"> <TitleBanner :id="item.data.apiID" class="mb-4"
:show-offline-button="isAgentOrder && idCard && !isExample && getFeatureStatus(item.data.apiID).whitelistPrice >= 0"
:whitelist-price="getFeatureStatus(item.data.apiID).whitelistPrice"
:is-submitting="getFeatureStatus(item.data.apiID).isSubmitting"
:is-offlined="getFeatureStatus(item.data.apiID).isOfflined"
@offline-click="handleOfflineClick(item.data.apiID, featureMap[item.data.apiID]?.name)">
{{ featureMap[item.data.apiID]?.name }} {{ featureMap[item.data.apiID]?.name }}
</TitleBanner> </TitleBanner>
<component :is="featureMap[item.data.apiID]?.component" :ref="el => { <component :is="featureMap[item.data.apiID]?.component" :ref="el => {
@@ -916,6 +1314,44 @@ watch([reportData, componentRiskScores], () => {
<div>海南海宇大数据有限公司版权所有</div> <div>海南海宇大数据有限公司版权所有</div>
</div> </div>
<!-- 屏蔽模块弹窗已废弃保留用于兼容 -->
<WhitelistModuleDialog v-if="!isShare && isDiamond" v-model:show="showWhitelistDialog" :id-card="idCard"
:order-id="orderId" @success="onWhitelistSuccess" />
<!-- 下架确认弹窗 -->
<van-popup v-model:show="showOfflineConfirmDialog" round position="center"
:style="{ width: '85%', borderRadius: '20px' }" :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.4)' }">
<div class="p-6 bg-white">
<div class="text-center space-y-4">
<h3 class="text-lg font-bold text-gray-800">确认下架模块</h3>
<div v-if="currentOfflineFeature" class="space-y-2">
<p class="text-gray-600">
模块名称<span class="font-medium">{{ currentOfflineFeature.featureName }}</span>
</p>
<p class="text-gray-600">
下架费用<span class="text-red-500 font-bold text-lg">¥{{
currentOfflineFeature.whitelistPrice.toFixed(2) }}</span>
</p>
<p class="text-sm text-gray-500">
下架后该身份证号查询时将不显示此模块的数据
</p>
</div>
<div class="flex gap-3 mt-6">
<van-button block round @click="showOfflineConfirmDialog = false">取消</van-button>
<van-button type="primary" block round
:loading="currentOfflineFeature && getFeatureStatus(currentOfflineFeature.featureApiId).isSubmitting"
@click="confirmOffline">
确认下架
</van-button>
</div>
</div>
</div>
</van-popup>
<!-- 白名单下架支付弹窗复用查询报告支付组件 -->
<Payment v-if="whitelistPaymentData.sell_price > 0" v-model="showWhitelistPayment" :data="whitelistPaymentData"
:id="whitelistPaymentId" :type="whitelistPaymentType" :return-url="getCurrentReportUrl()" />
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -4,9 +4,9 @@
分析指数是根据网络行为大数据出具的分析评估参考分数分数越高越好该指数仅对本报告有效不代表对报告查询人的综合定性评价 分析指数是根据网络行为大数据出具的分析评估参考分数分数越高越好该指数仅对本报告有效不代表对报告查询人的综合定性评价
</div> </div>
<div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div> <div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div>
<div class="risk-description"> <!-- <div class="risk-description">
{{ riskDescription }} {{ riskDescription }}
</div> </div> -->
<div class="risk-legend mt-6"> <div class="risk-legend mt-6">
<div v-for="item in legendItems" :key="item.level" class="risk-legend__item"> <div v-for="item in legendItems" :key="item.level" class="risk-legend__item">
<span class="risk-legend__pill" :style="{ backgroundColor: item.color, color: item.textColor }"> <span class="risk-legend__pill" :style="{ backgroundColor: item.color, color: item.textColor }">
@@ -29,10 +29,10 @@ const props = defineProps({
}, },
}); });
// 根据分数计算风险等级和颜色(分数越高越安全) // 根据分数计算风险等级和颜色(分数范围 10-9020-80 基础分 ±10分数越高越安全)
const riskLevel = computed(() => { const riskLevel = computed(() => {
const score = props.score; const score = props.score;
if (score >= 75 && score <= 100) { if (score >= 70 && score <= 90) {
return { return {
level: "无任何风险", level: "无任何风险",
color: "#52c41a", color: "#52c41a",
@@ -41,7 +41,7 @@ const riskLevel = computed(() => {
{ offset: 1, color: "#7fdb42" } { offset: 1, color: "#7fdb42" }
] ]
}; };
} else if (score >= 50 && score < 75) { } else if (score >= 50 && score < 70) {
return { return {
level: "风险指数较低", level: "风险指数较低",
color: "#faad14", color: "#faad14",
@@ -50,7 +50,7 @@ const riskLevel = computed(() => {
{ offset: 1, color: "#ffc53d" } { offset: 1, color: "#ffc53d" }
] ]
}; };
} else if (score >= 25 && score < 50) { } else if (score >= 30 && score < 50) {
return { return {
level: "风险指数较高", level: "风险指数较高",
color: "#fa8c16", color: "#fa8c16",
@@ -71,14 +71,14 @@ const riskLevel = computed(() => {
} }
}); });
// 评分解释文本(分数越高越安全) // 评分解释文本(分数范围 10-90分数越高越安全)
const riskDescription = computed(() => { const riskDescription = computed(() => {
const score = props.score; const score = props.score;
if (score >= 75 && score <= 100) { if (score >= 70 && score <= 90) {
return "根据综合分析,当前报告未检测到明显风险因素,各项指标表现正常,总体状况良好。"; return "根据综合分析,当前报告未检测到明显风险因素,各项指标表现正常,总体状况良好。";
} else if (score >= 50 && score < 75) { } else if (score >= 50 && score < 70) {
return "根据综合分析,当前报告存在少量风险信号,建议关注相关指标变化,保持警惕。"; return "根据综合分析,当前报告存在少量风险信号,建议关注相关指标变化,保持警惕。";
} else if (score >= 25 && score < 50) { } else if (score >= 30 && score < 50) {
return "根据综合分析,当前报告风险指数较高,多项指标显示异常,建议进一步核实相关情况。"; return "根据综合分析,当前报告风险指数较高,多项指标显示异常,建议进一步核实相关情况。";
} else { } else {
return "根据综合分析,当前报告显示高度风险状态,多项重要指标严重异常,请立即采取相应措施。"; return "根据综合分析,当前报告显示高度风险状态,多项重要指标严重异常,请立即采取相应措施。";
@@ -89,10 +89,10 @@ const chartRef = ref(null);
let chartInstance = null; let chartInstance = null;
const legendItems = [ const legendItems = [
{ level: "高风险", color: "#f5222d", range: "0-24", textColor: "#ffffff" }, { level: "高风险", color: "#f5222d", range: "0-29", textColor: "#ffffff" },
{ level: "一般", color: "#fa8c16", range: "25-49", textColor: "#ffffff" }, { level: "一般", color: "#fa8c16", range: "30-49", textColor: "#ffffff" },
{ level: "良好", color: "#faad14", range: "50-74", textColor: "#ffffff" }, { level: "良好", color: "#faad14", range: "50-69", textColor: "#ffffff" },
{ level: "优秀", color: "#52c41a", range: "75-100", textColor: "#ffffff" } { level: "优秀", color: "#52c41a", range: "70-100", textColor: "#ffffff" }
]; ];
const initChart = () => { const initChart = () => {
@@ -116,8 +116,8 @@ const updateChart = () => {
type: "gauge", type: "gauge",
startAngle: 180, startAngle: 180,
endAngle: 0, endAngle: 0,
min: 0, min: 10,
max: 100, max: 90,
radius: "100%", radius: "100%",
center: ["50%", "80%"], center: ["50%", "80%"],
itemStyle: { itemStyle: {
@@ -153,7 +153,7 @@ const updateChart = () => {
show: true, show: true,
distance: -30, distance: -30,
length: 6, length: 6,
splitNumber: 10, // 每1分一个小刻度 splitNumber: 8, // 刻度数量10-90 共 80 分)
lineStyle: { lineStyle: {
color: risk.color, color: risk.color,
width: 1, width: 1,
@@ -164,7 +164,7 @@ const updateChart = () => {
show: true, show: true,
distance: -36, distance: -36,
length: 12, length: 12,
splitNumber: 9, // 9个大刻度100分分成9个区间 splitNumber: 8, // 8个大刻度10-90 分成 8 个区间
lineStyle: { lineStyle: {
color: risk.color, color: risk.color,
width: 2, width: 2,
@@ -195,7 +195,7 @@ const updateChart = () => {
color: risk.color, color: risk.color,
offsetCenter: [0, "-25%"], offsetCenter: [0, "-25%"],
formatter: function (value) { formatter: function (value) {
return `{value|${value}分}\n{level|${risk.level}}`; return `{value|${value}分}`;
}, },
rich: { rich: {
value: { value: {
@@ -264,11 +264,12 @@ onUnmounted(() => {
.risk-description { .risk-description {
margin-bottom: 4px; margin-bottom: 4px;
padding: 0 12px; padding: 0 12px;
color: #666666; color: #666666;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
text-align: center; text-align: center;
} }
.risk-legend { .risk-legend {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -66,7 +66,7 @@
class="w-full bg-primary-second text-white py-4 rounded-[48px] text-lg font-medium mb-4 flex items-center justify-center mt-10" class="w-full bg-primary-second text-white py-4 rounded-[48px] text-lg font-medium mb-4 flex items-center justify-center mt-10"
@click="handleSubmit"> @click="handleSubmit">
<span>{{ buttonText }}</span> <span>{{ buttonText }}</span>
<span class="ml-4">¥{{ featureData.sell_price }}</span> <span v-if="!isWeChat" class="ml-4">¥{{ featureData.sell_price }}</span>
</button> </button>
<!-- <div class="text-gray-500 leading-relaxed mt-8" v-html="featureData.description"> <!-- <div class="text-gray-500 leading-relaxed mt-8" v-html="featureData.description">
</div> --> </div> -->
@@ -95,7 +95,7 @@
<div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);"> <div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);">
{{ featureData.product_name }} {{ featureData.product_name }}
</div> </div>
<div class="mb-4 flex items-start justify-between"> <div v-if="!isWeChat" class="mb-4 flex items-start justify-between">
<div class="text-lg" style="color: var(--van-text-color-2);">价格</div> <div class="text-lg" style="color: var(--van-text-color-2);">价格</div>
<div> <div>
<div class="text-2xl font-semibold text-danger"> <div class="text-2xl font-semibold text-danger">

View File

@@ -1,6 +1,15 @@
<template> <template>
<van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6" <van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6"
:style="{ height: '50%' }"> :style="{ height: '50%' }">
<!-- Logo和应用名 -->
<div class="flex items-center justify-center mb-2">
<img src="/logo.png" alt="一查查" class="w-8 h-8 mr-2" />
<span class="text-base font-semibold">一查查</span>
</div>
<!-- 日期时间 -->
<div class="text-center mb-2">
<div class="text-sm text-gray-600">{{ currentDateTime }}</div>
</div>
<div class="text-center"> <div class="text-center">
<h3 class="text-lg font-bold">支付</h3> <h3 class="text-lg font-bold">支付</h3>
</div> </div>
@@ -67,7 +76,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from "vue"; import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const { isWeChat } = useEnv(); const { isWeChat } = useEnv();
@@ -84,6 +93,11 @@ const props = defineProps({
type: String, type: String,
required: true, required: true,
}, },
returnUrl: {
type: String,
required: false,
default: "",
},
}); });
const show = defineModel(); const show = defineModel();
@@ -106,12 +120,44 @@ onMounted(() => {
selectedPaymentMethod.value = "alipay"; selectedPaymentMethod.value = "alipay";
} }
} }
// 初始化日期时间并启动定时器
updateDateTime();
dateTimeTimer = setInterval(updateDateTime, 1000);
});
onUnmounted(() => {
// 清理定时器
if (dateTimeTimer) {
clearInterval(dateTimeTimer);
dateTimeTimer = null;
}
}); });
const orderNo = ref(""); const orderNo = ref("");
const router = useRouter(); const router = useRouter();
const discountPrice = ref(false); // 是否应用折扣 const discountPrice = ref(false); // 是否应用折扣
// 当前日期时间
const currentDateTime = ref("");
let dateTimeTimer = null;
// 格式化日期时间YYYY年MM月DD日 h:m:s
function formatDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
return `${year}${month}${day}${hours}:${minutes}:${seconds}`;
}
// 更新日期时间
function updateDateTime() {
currentDateTime.value = formatDateTime();
}
async function getPayment() { async function getPayment() {
const { data, error } = await useApiFetch("/pay/payment") const { data, error } = await useApiFetch("/pay/payment")
.post({ .post({
@@ -125,9 +171,13 @@ async function getPayment() {
// 测试支付模式:直接跳转到结果页面 // 测试支付模式:直接跳转到结果页面
if (selectedPaymentMethod.value === "test" || selectedPaymentMethod.value === "test_empty") { if (selectedPaymentMethod.value === "test" || selectedPaymentMethod.value === "test_empty") {
orderNo.value = data.value.data.order_no; orderNo.value = data.value.data.order_no;
const queryParams = { orderNo: data.value.data.order_no };
if (props.returnUrl) {
queryParams.returnUrl = props.returnUrl;
}
router.push({ router.push({
path: "/payment/result", path: "/payment/result",
query: { orderNo: data.value.data.order_no }, query: queryParams,
}); });
} else if (selectedPaymentMethod.value === "alipay") { } else if (selectedPaymentMethod.value === "alipay") {
orderNo.value = data.value.data.order_no; orderNo.value = data.value.data.order_no;
@@ -147,9 +197,13 @@ async function getPayment() {
function (res) { function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") { if (res.err_msg == "get_brand_wcpay_request:ok") {
// 支付成功,直接跳转到结果页面 // 支付成功,直接跳转到结果页面
const queryParams = { orderNo: data.value.data.order_no };
if (props.returnUrl) {
queryParams.returnUrl = props.returnUrl;
}
router.push({ router.push({
path: "/payment/result", path: "/payment/result",
query: { orderNo: data.value.data.order_no }, query: queryParams,
}); });
} }
} }

View File

@@ -1,20 +1,25 @@
<template> <template>
<template v-if="asPage"> <div class="qrcode-popup-container">
<div class="qrcode-popup-container"> <div class="qrcode-content">
<div class="qrcode-content"> <!-- 网格布局显示4张海报 -->
<van-swipe class="poster-swiper rounded-lg sm:rounded-xl shadow" indicator-color="white" <div class="poster-grid">
@change="onSwipeChange"> <div v-for="(_, index) in posterImages" :key="index"
<van-swipe-item v-for="(_, index) in posterImages" :key="index"> :class="['poster-item', { 'poster-item-selected': currentIndex === index }]"
<canvas :ref="(el) => (posterCanvasRefs[index] = el)" @click="selectPoster(index)">
class="poster-canvas rounded-lg sm:rounded-xl m-auto"></canvas> <canvas :ref="(el) => (posterCanvasRefs[index] = el)"
</van-swipe-item> class="poster-canvas rounded-lg sm:rounded-xl"></canvas>
</van-swipe> <!-- 单张海报加载占位 -->
<div v-if="posterLoading[index]" class="poster-skeleton">
<van-loading size="20px" vertical>生成中</van-loading>
</div>
</div>
</div> </div>
<div v-if="mode === 'promote'" <!-- 整体加载状态提示 -->
class="swipe-tip text-center text-gray-700 text-xs sm:text-sm mb-1 sm:mb-2 px-2"> <div v-if="isGeneratingPosters" class="poster-loading-overlay">
<span class="swipe-icon"></span> 左右滑动切换海报 <van-loading size="24px" vertical>海报生成中...</van-loading>
<span class="swipe-icon"></span>
</div> </div>
</div>
<div class="fixed bottom-0 left-0 right-0 bg-white">
<van-divider class="my-2 sm:my-3">分享到好友</van-divider> <van-divider class="my-2 sm:my-3">分享到好友</van-divider>
<div class="flex items-center justify-around pb-3 sm:pb-4 px-4"> <div class="flex items-center justify-around pb-3 sm:pb-4 px-4">
@@ -44,56 +49,7 @@
</template> </template>
</div> </div>
</div> </div>
</template> </div>
<template v-else>
<van-popup v-model:show="show" round position="bottom" :style="{ maxHeight: '95vh' }">
<div class="qrcode-popup-container">
<div class="qrcode-content">
<van-swipe class="poster-swiper rounded-lg sm:rounded-xl shadow" indicator-color="white"
@change="onSwipeChange">
<van-swipe-item v-for="(_, index) in posterImages" :key="index">
<canvas :ref="(el) => (posterCanvasRefs[index] = el)"
class="poster-canvas rounded-lg sm:rounded-xl m-auto"></canvas>
</van-swipe-item>
</van-swipe>
</div>
<div v-if="mode === 'promote'"
class="swipe-tip text-center text-gray-700 text-xs sm:text-sm mb-1 sm:mb-2 px-2">
<span class="swipe-icon"></span> 左右滑动切换海报
<span class="swipe-icon"></span>
</div>
<van-divider class="my-2 sm:my-3">分享到好友</van-divider>
<div class="flex items-center justify-around pb-3 sm:pb-4 px-4">
<template v-if="isWeChat">
<div class="flex flex-col items-center justify-center cursor-pointer"
@click="savePosterForWeChat">
<img src="@/assets/images/icon_share_img.svg"
class="share-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full" />
<div class="text-center mt-1 text-gray-600 text-xs">保存图片</div>
</div>
<div class="flex flex-col items-center justify-center cursor-pointer" @click="copyUrl">
<img src="@/assets/images/icon_share_url.svg"
class="share-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full" />
<div class="text-center mt-1 text-gray-600 text-xs">复制链接</div>
</div>
</template>
<template v-else>
<div class="flex flex-col items-center justify-center cursor-pointer" @click="savePoster">
<img src="@/assets/images/icon_share_img.svg"
class="share-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full" />
<div class="text-center mt-1 text-gray-600 text-xs">保存图片</div>
</div>
<div class="flex flex-col items-center justify-center cursor-pointer" @click="copyUrl">
<img src="@/assets/images/icon_share_url.svg"
class="share-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full" />
<div class="text-center mt-1 text-gray-600 text-xs">复制链接</div>
</div>
</template>
</div>
</div>
</van-popup>
</template>
<!-- 图片保存指引遮罩层 --> <!-- 图片保存指引遮罩层 -->
<ImageSaveGuide :show="showImageGuide" :image-url="currentImageUrl" :title="imageGuideTitle" <ImageSaveGuide :show="showImageGuide" :image-url="currentImageUrl" :title="imageGuideTitle"
@@ -128,16 +84,18 @@ const props = defineProps({
type: String, type: String,
default: "promote", // 例如 "promote" | "invitation" default: "promote", // 例如 "promote" | "invitation"
}, },
asPage: { productType: {
type: Boolean, type: String,
default: false, required: false, // 产品类型,用于确定海报目录(推广模式需要)
}, },
}); });
const { linkIdentifier, fullLink, inviteLink, qrCodeUrl, mode, asPage } = toRefs(props); const { linkIdentifier, fullLink, inviteLink, qrCodeUrl, mode, productType } = toRefs(props);
const posterCanvasRefs = ref([]); // 用于绘制海报的canvas数组 const posterCanvasRefs = ref([]); // 用于绘制海报的canvas数组
const currentIndex = ref(0); // 当前显示的海报索引 const currentIndex = ref(0); // 当前选中的海报索引
const postersGenerated = ref([]); // 标记海报是否已经生成过将在onMounted中初始化 const postersGenerated = ref([]); // 标记海报是否已经生成过将在onMounted中初始化
const show = defineModel("show"); const posterLoading = ref([]); // 单张海报加载状态
const isGeneratingPosters = ref(true); // 是否正在生成所有海报
const generatedCount = ref(0); // 已生成的海报数量
// 微信环境检测 // 微信环境检测
const isWeChat = computed(() => { const isWeChat = computed(() => {
@@ -168,26 +126,74 @@ const url = computed(() => {
// 海报图片数组 // 海报图片数组
const posterImages = ref([]); const posterImages = ref([]);
// QR码位置配置为每个海报单独配置 // 产品类型到海报目录的映射
const qrCodePositions = ref({ const productTypeToDirMap = {
promote: [ 'riskassessment': 'riskassessment',
{ x: 180, y: 1440, size: 300 }, // tg_qrcode_1.png 'companyinfo': 'companyinfo',
{ x: 525, y: 1955, size: 500 }, // tg_qrcode_2.jpg 'preloanbackgroundcheck': 'backgroundcheck',
{ x: 525, y: 1955, size: 500 }, // tg_qrcode_3.jpg 'marriage': 'marriage',
{ x: 525, y: 1955, size: 500 }, // tg_qrcode_4.jpg 'homeservice': 'homeservice',
{ x: 525, y: 1955, size: 500 }, // tg_qrcode_5.jpg 'backgroundcheck': 'backgroundcheck',
{ x: 525, y: 1955, size: 500 }, // tg_qrcode_6.jpg 'consumerFinanceReport': 'consumerFinanceReport',
{ x: 255, y: 940, size: 250 }, // tg_qrcode_7.jpg 'invitation': 'invitation'
{ x: 255, y: 940, size: 250 }, // tg_qrcode_8.jpg };
],
// invitation模式的配置 (yq_qrcode)
invitation: [
{ x: 360, y: -1370, size: 360 }, // yq_qrcode_1.png
],
});
// 处理轮播图切换事件 // QR码位置配置为每个产品类型的每张海报单独配置
const onSwipeChange = (index) => { // 格式:{ 产品类型: [{ x, y, size }, ...] }索引对应海报编号01-04
const qrCodePositions = {
// 风险评估
riskassessment: [
{ x: 602, y: 1000, size: 680 }, // riskassessment_01.jpg
{ x: 602, y: 570, size: 680 }, // riskassessment_02.jpg
{ x: 602, y: 670, size: 680 }, // riskassessment_03.jpg
{ x: 602, y: 1150, size: 680 }, // riskassessment_04.jpg
],
// 企业信息
companyinfo: [
{ x: 602, y: 1305, size: 680 }, // companyinfo_01.jpg
{ x: 602, y: 1280, size: 680 }, // companyinfo_02.jpg
{ x: 602, y: 1450, size: 680 }, // companyinfo_03.jpg
{ x: 602, y: 800, size: 680 }, // companyinfo_04.jpg
],
// 入职背调
backgroundcheck: [
{ x: 602, y: 800, size: 680 }, // backgroundcheck_01.jpg
{ x: 602, y: 1535, size: 680 }, // backgroundcheck_02.jpg
{ x: 602, y: 850, size: 680 }, // backgroundcheck_03.jpg
{ x: 602, y: 1080, size: 680 }, // backgroundcheck_04.jpg
],
// 婚姻风险
marriage: [
{ x: 965, y: 1050, size: 680 }, // marriage_01.jpg
{ x: 602, y: 1050, size: 680 }, // marriage_02.jpg
{ x: 225, y: 1855, size: 680 }, // marriage_03.jpg
{ x: 602, y: 880, size: 680 }, // marriage_04.jpg
],
// 家政服务
homeservice: [
{ x: 1080, y: 700, size: 680 }, // homeservice_01.jpg
{ x: 1080, y: 1155, size: 680 }, // homeservice_02.jpg
{ x: 965, y: 768, size: 680 }, // homeservice_03.jpg
{ x: 998, y: 1012, size: 680 }, // homeservice_04.jpg
],
// 消费金融报告
consumerFinanceReport: [
{ x: 602, y: 920, size: 680 }, // consumerFinanceReport_01.jpg
{ x: 602, y: 920, size: 680 }, // consumerFinanceReport_02.jpg
{ x: 1012, y: 1160, size: 680 }, // consumerFinanceReport_03.jpg
{ x: 1055, y: 1060, size: 680 }, // consumerFinanceReport_04.jpg
],
// 邀请好友
invitation: [
{ x: 602, y: 1035, size: 680 }, // invitation_01.jpg
{ x: 135, y: 1150, size: 680 }, // invitation_02.jpg
{ x: 602, y: 970, size: 680 }, // invitation_03.jpg
{ x: 945, y: 1150, size: 680 }, // invitation_04.jpg
],
};
// 选择海报
const selectPoster = (index) => {
currentIndex.value = index; currentIndex.value = index;
if (!postersGenerated.value[index]) { if (!postersGenerated.value[index]) {
generatePoster(index); generatePoster(index);
@@ -197,45 +203,46 @@ const onSwipeChange = (index) => {
// 加载海报图片 // 加载海报图片
const loadPosterImages = async () => { const loadPosterImages = async () => {
const images = []; const images = [];
const basePrefix = mode.value === "promote" ? "tg_qrcode_" : "yq_qrcode_";
// 根据模式确定要加载的图片编号 // 确定海报目录
const imageNumbers = mode.value === "promote" ? [1, 2, 3, 4, 5, 6, 7, 8] : [1]; let posterDir = 'invitation'; // 默认使用邀请目录
if (mode.value === "promote" && productType.value) {
// 推广模式:根据产品类型确定目录
posterDir = productTypeToDirMap[productType.value] || 'riskassessment';
} else if (mode.value === "invitation") {
// 邀请模式:使用邀请目录
posterDir = 'invitation';
}
// 加载4张海报01-04
const imageNumbers = [1, 2, 3, 4];
// 加载图片
for (const i of imageNumbers) { for (const i of imageNumbers) {
// 尝试加载 .png 文件 const imagePath = `/image/poster/${posterDir}/${posterDir}_${String(i).padStart(2, '0')}.jpg`;
try {
const module = await import( // 使用 new Image() 预加载图片,确保图片存在
`@/assets/images/${basePrefix}${i}.png` const img = new Image();
); img.crossOrigin = 'anonymous'; // 如果需要跨域
images.push(module.default);
continue; // 如果成功加载了 png则跳过后续的 jpg 尝试
} catch (error) {
console.warn(
`Image ${basePrefix}${i}.png not found, trying jpg...`
);
}
// 如果 .png 不存在,尝试加载 .jpg 文件
try { try {
const module = await import( await new Promise((resolve, reject) => {
`@/assets/images/${basePrefix}${i}.jpg` img.onload = () => {
); // 图片加载成功,使用完整路径
images.push(module.default); images.push(imagePath);
resolve();
};
img.onerror = () => {
console.warn(`Failed to load poster: ${imagePath}`);
// 如果加载失败,仍然添加路径,让 canvas 处理错误
images.push(imagePath);
resolve(); // 继续加载其他图片
};
img.src = imagePath;
});
} catch (error) { } catch (error) {
console.warn( console.error(`Error loading poster ${i}:`, error);
`Image ${basePrefix}${i}.jpg not found either, using fallback.` // 即使出错也添加路径
); images.push(imagePath);
if (i === 1) {
// 如果第一张也不存在,创建一个空白图片
const emptyImg = new Image();
emptyImg.width = 600;
emptyImg.height = 800;
images.push(emptyImg.src);
} else if (images.length > 0) {
images.push(images[0]);
}
} }
} }
@@ -246,8 +253,14 @@ onMounted(async () => {
posterImages.value = await loadPosterImages(); posterImages.value = await loadPosterImages();
// 根据加载的图片数量初始化postersGenerated数组 // 根据加载的图片数量初始化postersGenerated数组
postersGenerated.value = Array(posterImages.value.length).fill(false); postersGenerated.value = Array(posterImages.value.length).fill(false);
if (asPage.value && url.value && !postersGenerated.value[0]) { posterLoading.value = Array(posterImages.value.length).fill(true);
generatePoster(0); generatedCount.value = 0;
isGeneratingPosters.value = true;
// 自动生成所有海报
if (url.value) {
for (let i = 0; i < posterImages.value.length; i++) {
generatePoster(i);
}
} }
}); });
@@ -283,8 +296,23 @@ const generatePoster = async (index) => {
qrCodeImg.src = qrCodeDataUrl; qrCodeImg.src = qrCodeDataUrl;
qrCodeImg.onload = () => { qrCodeImg.onload = () => {
// 获取当前海报的二维码位置配置 // 获取当前海报的二维码位置配置
const positions = qrCodePositions.value[mode.value]; let positionConfig = null;
const position = positions[index] || positions[0]; // 如果没有对应索引的配置,则使用第一个配置
if (mode.value === "promote" && productType.value) {
// 推广模式:根据产品类型获取配置
const dirName = productTypeToDirMap[productType.value] || 'riskassessment';
const positions = qrCodePositions[dirName] || qrCodePositions['riskassessment'];
positionConfig = positions[index] || positions[0];
} else if (mode.value === "invitation") {
// 邀请模式:使用邀请配置
const positions = qrCodePositions['invitation'];
positionConfig = positions[index] || positions[0];
} else {
// 默认配置
positionConfig = { x: 180, y: 1440, size: 300 };
}
const position = positionConfig;
// 计算Y坐标负值表示从底部算起的位置 // 计算Y坐标负值表示从底部算起的位置
const qrY = const qrY =
@@ -303,6 +331,11 @@ const generatePoster = async (index) => {
// 标记海报已生成 // 标记海报已生成
postersGenerated.value[index] = true; postersGenerated.value[index] = true;
posterLoading.value[index] = false;
generatedCount.value += 1;
if (generatedCount.value >= posterImages.value.length) {
isGeneratingPosters.value = false;
}
}; };
}; };
@@ -327,16 +360,27 @@ const generatePoster = async (index) => {
}; };
}; };
// 监听 show 变化show 为 true 时生成海报 watch(url, (newVal) => {
watch(show, (newVal) => { if (newVal && posterImages.value.length > 0) {
if (!asPage.value && newVal && !postersGenerated.value[currentIndex.value]) { for (let i = 0; i < posterImages.value.length; i++) {
generatePoster(currentIndex.value); if (!postersGenerated.value[i]) {
generatePoster(i);
}
}
} }
}); });
watch(url, (newVal) => { // 监听产品类型变化,重新加载海报
if (asPage.value && newVal && !postersGenerated.value[currentIndex.value]) { watch([productType, mode], async () => {
generatePoster(currentIndex.value); posterImages.value = await loadPosterImages();
postersGenerated.value = Array(posterImages.value.length).fill(false);
posterLoading.value = Array(posterImages.value.length).fill(true);
generatedCount.value = 0;
isGeneratingPosters.value = true;
if (url.value) {
for (let i = 0; i < posterImages.value.length; i++) {
generatePoster(i);
}
} }
}); });
@@ -595,82 +639,109 @@ const copyToClipboard = (text) => {
.qrcode-popup-container { .qrcode-popup-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 95vh; height: calc(100vh - 46px);
max-height: calc(100vh - 46px);
overflow: hidden; overflow: hidden;
width: 100%;
max-width: 100vw;
} }
.qrcode-content { .qrcode-content {
position: relative;
flex-shrink: 0; flex-shrink: 0;
padding: 0.75rem; overflow-y: auto;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
} }
/* 小屏设备优化 */ /* 小屏设备优化 */
@media (max-width: 375px) { @media (max-width: 375px) {
.qrcode-content { .qrcode-content {
padding: 0.5rem; padding: 0.25rem;
} }
} }
/* 中等及以上屏幕 */ /* 中等及以上屏幕 */
@media (min-width: 640px) { @media (min-width: 640px) {
.qrcode-content { .qrcode-content {
padding: 1rem; padding: 0.75rem;
} }
} }
.poster-swiper { /* 网格布局2x2显示4张海报 */
height: calc(95vh - 180px); .poster-grid {
min-height: 300px; display: grid;
max-height: 500px; grid-template-columns: repeat(2, 1fr);
gap: 0.3rem;
width: 100%; width: 100%;
max-width: 100%;
align-items: start;
justify-items: center;
box-sizing: border-box;
} }
/* 小屏设备:更小的海报高度 */ /* 小屏设备优化 */
@media (max-width: 375px) { @media (max-width: 375px) {
.poster-swiper { .poster-grid {
height: calc(95vh - 160px); gap: 0.25rem;
min-height: 280px;
max-height: 400px;
} }
} }
/* 中等屏幕 */ /* 中等及以上屏幕 */
@media (min-width: 640px) and (max-width: 767px) { @media (min-width: 640px) {
.poster-swiper { .poster-grid {
height: calc(95vh - 190px); gap: 0.75rem;
max-height: 520px;
} }
} }
/* 大屏幕 */ .poster-item {
@media (min-width: 768px) { position: relative;
.poster-swiper { width: 100%;
height: calc(95vh - 200px); /* 海报比例 1889:3425 ≈ 0.551 */
max-height: 600px; cursor: pointer;
} border: 3px solid transparent;
border-radius: 0.5rem;
box-sizing: border-box;
overflow: hidden;
}
.poster-skeleton {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 0.5rem;
}
.poster-loading-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(249, 250, 251, 0.6));
}
.poster-item-selected {
border-color: #64b5f6;
border-width: 3px;
} }
.poster-canvas { .poster-canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} border-radius: 0.25rem;
display: block;
.swipe-tip {
animation: fadeInOut 2s infinite;
flex-shrink: 0;
}
.swipe-icon {
display: inline-block;
animation: slideLeftRight 1.5s infinite;
font-size: 14px;
}
@media (min-width: 640px) {
.swipe-icon {
font-size: 16px;
}
} }
.share-icon { .share-icon {

View File

@@ -1,11 +1,15 @@
<template> <template>
<div class=" m-4"> <div class=" m-4">
<div class="flex items-center"> <div class="flex items-center">
<img src="@/assets/images/report/wxts_icon.png" alt="温馨提示" class="tips-icon" /> <img src="@/assets/images/report/wxts_icon.png" :alt="title" class="tips-icon" />
<span class="tips-title">温馨提示!</span> <span class="tips-title">{{ title }}</span>
</div> </div>
<div class="mt-1 ml-4"> <div class="mt-1 ml-4">
<van-text-ellipsis rows="2" :content="content" expand-text="展开" collapse-text="收起" /> <van-text-ellipsis v-if="!defaultExpanded" :rows="2" :content="content" expand-text="展开"
collapse-text="收起" />
<div v-else class="tips-content">
{{ content }}
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -17,6 +21,14 @@ const props = defineProps({
content: { content: {
type: String, type: String,
required: true required: true
},
title: {
type: String,
default: '温馨提示!'
},
defaultExpanded: {
type: Boolean,
default: false
} }
}); });
@@ -43,7 +55,7 @@ const isExpanded = ref(false);
} }
.tips-content { .tips-content {
font-size: 14px; font-size: 16px;
color: #333; color: #333;
} }
@@ -77,8 +89,7 @@ const isExpanded = ref(false);
} }
:deep(.van-text-ellipsis) { :deep(.van-text-ellipsis) {
font-size: 12px; font-size: 14px;
color: #999999; color: #999999;
} }
</style> </style>

View File

@@ -1,6 +1,5 @@
<script setup> <script setup>
import { ref } from "vue"; import { useShareReport } from "@/composables/useShareReport";
import { showToast, showDialog } from "vant";
const props = defineProps({ const props = defineProps({
orderId: { orderId: {
@@ -21,104 +20,16 @@ const props = defineProps({
}, },
}); });
const isLoading = ref(false); const { isLoading, handleShare } = useShareReport();
const copyToClipboard = async (text) => { const onShare = () => {
await navigator.clipboard.writeText(text); handleShare(props.orderId, props.orderNo, props.isExample, props.disabled);
showToast({
type: "success",
message: "链接已复制到剪贴板",
position: "bottom",
});
};
const handleShare = async () => {
if (isLoading.value || props.disabled) return;
// 如果是示例模式直接分享当前URL
if (props.isExample) {
try {
const currentUrl = window.location.href;
await copyToClipboard(currentUrl);
showToast({
type: "success",
message: "示例链接已复制到剪贴板",
position: "bottom",
});
} catch (err) {
showToast({
type: "fail",
message: "复制链接失败",
position: "bottom",
});
}
return;
}
// 优先使用 orderId如果没有则使用 orderNo
const orderIdentifier = props.orderId || props.orderNo;
if (!orderIdentifier) {
showToast({
type: "fail",
message: "缺少订单标识",
position: "bottom",
});
return;
}
isLoading.value = true;
try {
// 根据实际使用的标识构建请求参数
const requestData = props.orderId
? { order_id: props.orderId }
: { order_no: props.orderNo };
const { data, error } = await useApiFetch("/query/generate_share_link")
.post(requestData)
.json();
if (error.value) {
throw new Error(error.value);
}
if (data.value?.code === 200 && data.value.data?.share_link) {
const baseUrl = window.location.origin;
const linkId = encodeURIComponent(data.value.data.share_link);
const fullShareUrl = `${baseUrl}/report/share/${linkId}`;
try {
// 显示确认对话框
await showDialog({
title: "分享链接已生成",
message: "链接将在7天后过期是否复制到剪贴板",
confirmButtonText: "复制链接",
cancelButtonText: "取消",
showCancelButton: true,
});
// 用户点击确认后复制链接
await copyToClipboard(fullShareUrl);
} catch (dialogErr) {
// 用户点击取消按钮时dialogErr 会是 'cancel'
// 这里不需要显示错误提示,直接返回即可
return;
}
} else {
throw new Error(data.value?.message || "生成分享链接失败");
}
} catch (err) {
showToast({
type: "fail",
message: err.message || "生成分享链接失败",
position: "bottom",
});
} finally {
isLoading.value = false;
}
}; };
</script> </script>
<template> <template>
<div class="bg-primary-second border border-primary-second rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-primary-600 transition-colors duration-200" <div class="bg-primary-second border border-primary-second rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-primary-600 transition-colors duration-200"
:class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="handleShare"> :class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="onShare">
<img src="@/assets/images/report/fx.png" alt="分享" class="w-4 h-4 mr-1" /> <img src="@/assets/images/report/fx.png" alt="分享" class="w-4 h-4 mr-1" />
<span class="text-white text-sm font-medium"> <span class="text-white text-sm font-medium">
{{ isLoading ? "生成中..." : (isExample ? "分享示例" : "分享报告") }} {{ isLoading ? "生成中..." : (isExample ? "分享示例" : "分享报告") }}

View File

@@ -0,0 +1,38 @@
<script setup>
import { useShareReport } from "@/composables/useShareReport";
const props = defineProps({
orderId: {
type: String,
default: "",
},
orderNo: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
});
const { isLoading, handleShare } = useShareReport();
const onShare = () => {
handleShare(props.orderId, props.orderNo, false, props.disabled);
};
</script>
<template>
<button
class="flex-1 px-4 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="isLoading || disabled"
@click="onShare">
{{ isLoading ? "生成中..." : "分享" }}
</button>
</template>
<style lang="scss" scoped>
/* 样式已通过 Tailwind CSS 类实现 */
</style>

View File

@@ -1,14 +1,50 @@
<template> <template>
<div class="title-banner"> <div class="title-banner-wrapper">
<slot></slot> <div class="title-banner">
<slot></slot>
</div>
<!-- 下架按钮仅钻石代理显示 -->
<button v-if="showOfflineButton" @click="handleOfflineClick" class="offline-button"
:class="{ 'offline-button-disabled': isOfflined }"
:disabled="isSubmitting || isOfflined">
{{ isSubmitting ? '下架中...' : isOfflined ? '已下架' : '下架' }}
</button>
</div> </div>
</template> </template>
<script setup> <script setup>
// 不需要额外的 props 或逻辑,只是一个简单的样式组件 import { ref } from 'vue'
const props = defineProps({
showOfflineButton: {
type: Boolean,
default: false,
},
whitelistPrice: {
type: Number,
default: 0,
},
isSubmitting: {
type: Boolean,
default: false,
},
isOfflined: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['offline-click'])
const handleOfflineClick = () => {
emit('offline-click')
}
</script> </script>
<style scoped> <style scoped>
.title-banner-wrapper {
@apply flex items-center justify-center gap-2 relative;
}
.title-banner { .title-banner {
@apply mx-auto mt-2 w-64 py-1.5 text-center text-white font-bold text-lg relative rounded-2xl; @apply mx-auto mt-2 w-64 py-1.5 text-center text-white font-bold text-lg relative rounded-2xl;
background: var(--color-primary-second); background: var(--color-primary-second);
@@ -20,4 +56,17 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.offline-button {
@apply px-3 py-1 text-xs rounded-lg bg-red-500 text-white font-medium;
@apply hover:bg-red-600 active:bg-red-700 transition-colors;
@apply disabled:opacity-50 disabled:cursor-not-allowed;
white-space: nowrap;
margin-top: 8px;
}
.offline-button-disabled {
@apply bg-gray-400 cursor-not-allowed;
@apply hover:bg-gray-400 active:bg-gray-400;
}
</style> </style>

View File

@@ -1,10 +1,14 @@
<template> <template>
<div v-if="isWeChat" class="wechat-overlay"> <div v-if="isWeChat" class="wechat-overlay">
<img src="@/assets/images/ysjjt.png" alt="Arrow" class="wechat-image" />
<div class="wechat-content"> <div class="wechat-content">
<p class="wechat-message"> <p class="wechat-message">
点击右上角<van-icon class="ml-2" name="weapp-nav" /><br />然后点击在浏览器中打开 1. 点击右上角<span class="dots">...</span><br />
2. 选择<span class="browser-text">手机浏览器</span>打开
</p>
<p class="tip-message">
如遇手机自带浏览器无法打开支付宝时可重新在此页面选择其他浏览器打开;
</p> </p>
<img src="@/assets/images/llqdk.jpg" alt="In WeChat" class="wechat-image" />
</div> </div>
</div> </div>
</template> </template>
@@ -37,36 +41,54 @@ onMounted(() => {
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
z-index: 9999; z-index: 9999;
display: flex; }
justify-content: center;
align-items: center; /* 图片样式 - 定位到右上角 */
flex-direction: column; .wechat-image {
position: absolute;
top: 30px;
right: 30px;
width: 100px;
height: auto;
} }
/* 遮罩中的内容 */ /* 遮罩中的内容 */
.wechat-content { .wechat-content {
text-align: center; position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
color: white; color: white;
font-size: 16px; width: 80%;
} max-width: 400px;
/* 图片样式 */
.wechat-image {
/* position: absolute;
bottom: 0;
left: 0; */
margin-top: 20px;
width: 100%;
} }
/* 提示信息的样式 */ /* 提示信息的样式 */
.wechat-message { .wechat-message {
font-size: 24px; font-size: 18px;
line-height: 1.8;
margin: 0 0 20px 0;
} }
/* 图标样式 */ /* 三个点特殊样式 */
.icon-more-vert { .dots {
font-size: 20px; font-size: 36px;
font-weight: bold;
margin-left: 5px; margin-left: 5px;
} }
/* 手机浏览器特殊颜色 */
.browser-text {
color: #ffd700;
font-weight: bold;
}
/* 额外提示信息样式 */
.tip-message {
font-size: 14px;
color: white;
line-height: 1.6;
margin: 0;
}
</style> </style>

View File

@@ -0,0 +1,226 @@
<template>
<van-popup v-model:show="show" position="bottom" round :style="{ height: '70%' }" class="whitelist-module-dialog">
<div class="flex flex-col h-full">
<!-- 标题栏 -->
<div class="flex items-center justify-between p-4 border-b">
<h3 class="text-lg font-bold">屏蔽模块</h3>
<van-icon name="cross" size="20" @click="close" />
</div>
<!-- 内容区域 -->
<div class="flex-1 overflow-y-auto p-4">
<div v-if="loading" class="flex items-center justify-center h-40">
<van-loading type="spinner" />
</div>
<div v-else-if="featureList.length === 0" class="flex items-center justify-center h-40 text-gray-500">
暂无可屏蔽的模块
</div>
<div v-else>
<div class="mb-4 text-sm text-gray-600">
选择要屏蔽的模块屏蔽后该身份证号查询时将不显示这些模块的数据
</div>
<!-- 模块列表 -->
<van-checkbox-group v-model="selectedFeatureIds">
<div v-for="feature in featureList" :key="feature.feature_id" class="mb-3">
<van-cell :title="feature.feature_name" :label="`价格:¥${feature.whitelist_price.toFixed(2)}`"
clickable @click="toggleFeature(feature.feature_id)">
<template #right-icon>
<van-checkbox :name="feature.feature_id" />
</template>
</van-cell>
</div>
</van-checkbox-group>
</div>
</div>
<!-- 底部操作栏 -->
<div class="p-4 border-t bg-gray-50">
<div class="mb-3 flex items-center justify-between">
<span class="text-sm text-gray-600">已选择{{ selectedFeatureIds.length }} 个模块</span>
<span class="text-lg font-bold text-red-500">
总计¥{{ totalAmount.toFixed(2) }}
</span>
</div>
<van-button type="primary" block round :loading="isSubmitting"
:disabled="selectedFeatureIds.length === 0" @click="handleConfirm">
确认屏蔽
</van-button>
</div>
</div>
<!-- 支付弹窗 -->
<Payment v-model="showPayment" :data="paymentData"
:id="paymentId" :type="paymentType" />
</van-popup>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { getWhitelistFeatures, createWhitelistOrder } from '@/api/agent'
import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'
import { useAgentStore } from '@/stores/agentStore'
import { storeToRefs } from 'pinia'
import Payment from './Payment.vue'
const props = defineProps({
idCard: {
type: String,
required: true,
},
orderId: {
type: String,
default: '',
},
})
const show = defineModel('show', { type: Boolean, default: false })
const agentStore = useAgentStore()
const { isDiamond } = storeToRefs(agentStore)
const loading = ref(false)
const featureList = ref([])
const selectedFeatureIds = ref([])
const isSubmitting = ref(false)
// 支付相关状态
const showPayment = ref(false)
const paymentData = ref({
product_name: '',
sell_price: 0,
})
const paymentId = ref('')
const paymentType = ref('whitelist')
const currentOrderId = ref('')
// 计算总金额
const totalAmount = computed(() => {
return featureList.value
.filter(f => selectedFeatureIds.value.includes(f.feature_id))
.reduce((sum, f) => sum + f.whitelist_price, 0)
})
// 切换选择
const toggleFeature = (featureId) => {
const index = selectedFeatureIds.value.indexOf(featureId)
if (index > -1) {
selectedFeatureIds.value.splice(index, 1)
} else {
selectedFeatureIds.value.push(featureId)
}
}
// 关闭弹窗
const close = () => {
show.value = false
selectedFeatureIds.value = []
}
// 加载可屏蔽的模块列表
const loadFeatures = async () => {
loading.value = true
try {
const { data, error } = await getWhitelistFeatures()
if (data.value && !error.value && data.value.code === 200) {
featureList.value = data.value.data.list || []
} else {
showFailToast(data.value?.msg || '获取模块列表失败')
}
} catch (err) {
console.error('获取模块列表失败:', err)
showFailToast('获取模块列表失败')
} finally {
loading.value = false
}
}
// 确认屏蔽
const handleConfirm = async () => {
if (selectedFeatureIds.value.length === 0) {
showFailToast('请至少选择一个模块')
return
}
// 确认对话框
try {
await showConfirmDialog({
title: '确认屏蔽',
message: `确定要屏蔽 ${selectedFeatureIds.value.length} 个模块吗?总费用:¥${totalAmount.value.toFixed(2)}`,
})
} catch {
return // 用户取消
}
isSubmitting.value = true
try {
// 1. 创建订单
const { data: orderData, error: orderError } = await createWhitelistOrder({
id_card: props.idCard,
feature_ids: selectedFeatureIds.value,
order_id: props.orderId || undefined,
})
if (!orderData.value || orderError.value || orderData.value.code !== 200) {
showFailToast(orderData.value?.msg || '创建订单失败')
return
}
const orderId = orderData.value.data.order_id
const orderNo = orderData.value.data.order_no
const totalAmount = orderData.value.data.total_amount
// 2. 使用统一支付组件进行支付
// PaymentReq.Id 约定格式:白名单订单使用 "{idCard}|{featureApiId}" 格式
// 但批量订单使用订单号,需要根据后端接口调整
// 这里先使用订单号,如果后端需要特定格式,需要调整
paymentData.value = {
product_name: `模块屏蔽(${selectedFeatureIds.value.length}个模块)`,
sell_price: totalAmount,
}
paymentId.value = orderNo // 使用订单号作为支付ID
paymentType.value = 'whitelist'
currentOrderId.value = orderId
showPayment.value = true
} catch (err) {
console.error('屏蔽模块失败:', err)
showFailToast('屏蔽模块失败')
} finally {
isSubmitting.value = false
}
}
// 监听支付弹窗关闭,如果支付成功会跳转到支付结果页面
watch(showPayment, (newVal) => {
if (!newVal && currentOrderId.value) {
// 支付弹窗关闭,可能是支付完成(会跳转到结果页面)或用户取消
// 这里不做特殊处理,因为支付成功会跳转到结果页面
currentOrderId.value = ''
}
})
const emit = defineEmits(['success'])
// 监听弹窗显示,加载数据
watch(show, (newVal) => {
if (newVal) {
// 验证是否为钻石代理
if (!isDiamond.value) {
showFailToast('只有钻石代理可以操作白名单')
close()
return
}
loadFeatures()
selectedFeatureIds.value = []
}
})
</script>
<style scoped>
.whitelist-module-dialog {
display: flex;
flex-direction: column;
}
</style>

View File

@@ -64,7 +64,8 @@ const useApiFetch = createFetch({
} }
if (data.code !== 200) { if (data.code !== 200) {
if (data.code === 100009 || data.code === 100008) { if (data.code === 100009) {
// 用户未找到:清除所有数据并刷新页面
// 改进的存储管理 // 改进的存储管理
localStorage.removeItem("token"); localStorage.removeItem("token");
localStorage.removeItem("refreshAfter"); localStorage.removeItem("refreshAfter");
@@ -84,10 +85,15 @@ const useApiFetch = createFetch({
data.code !== 200002 && data.code !== 200002 &&
data.code !== 200003 && data.code !== 200003 &&
data.code !== 200004 && data.code !== 200004 &&
data.code !== 100009 data.code !== 100009 &&
data.code !== 100008
) { ) {
showToast({ message: data.msg }); showToast({ message: data.msg });
} }
// 对于 100008自定义错误显示错误消息但不刷新页面
if (data.code === 100008) {
showToast({ message: data.msg });
}
} }
return { data, response }; return { data, response };
}, },

View File

@@ -1,197 +1,213 @@
import { ref, watch } from 'vue' import { ref, watch } from "vue";
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
export function useSEO() { export function useSEO() {
const route = useRoute() const route = useRoute();
// 默认SEO信息 // 默认SEO信息
const defaultSEO = { const defaultSEO = {
title: '一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用', title: "一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用",
description: '一查查,专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。', description:
keywords: '大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询', "一查查,专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。",
url: 'https://www.zhinengcha.cn' keywords:
} "大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风险、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询",
url: "https://www.zhinengcha.cn",
};
// 页面SEO配置 // 页面SEO配置
const pageSEO = ref({ const pageSEO = ref({
title: '', title: "",
description: '', description: "",
keywords: '', keywords: "",
url: '' url: "",
}) });
// 更新页面SEO信息 // 更新页面SEO信息
const updateSEO = (seoConfig) => { const updateSEO = (seoConfig) => {
const config = { ...defaultSEO, ...seoConfig } const config = { ...defaultSEO, ...seoConfig };
// 更新页面标题 // 更新页面标题
document.title = config.title document.title = config.title;
// 更新meta描述 // 更新meta描述
let metaDescription = document.querySelector('meta[name="description"]') let metaDescription = document.querySelector(
'meta[name="description"]'
);
if (!metaDescription) { if (!metaDescription) {
metaDescription = document.createElement('meta') metaDescription = document.createElement("meta");
metaDescription.name = 'description' metaDescription.name = "description";
document.head.appendChild(metaDescription) document.head.appendChild(metaDescription);
} }
metaDescription.content = config.description metaDescription.content = config.description;
// 更新meta关键词 // 更新meta关键词
let metaKeywords = document.querySelector('meta[name="keywords"]') let metaKeywords = document.querySelector('meta[name="keywords"]');
if (!metaKeywords) { if (!metaKeywords) {
metaKeywords = document.createElement('meta') metaKeywords = document.createElement("meta");
metaKeywords.name = 'keywords' metaKeywords.name = "keywords";
document.head.appendChild(metaKeywords) document.head.appendChild(metaKeywords);
} }
metaKeywords.content = config.keywords metaKeywords.content = config.keywords;
// 更新Open Graph标签 // 更新Open Graph标签
updateOpenGraph(config) updateOpenGraph(config);
// 更新Twitter Cards // 更新Twitter Cards
updateTwitterCards(config) updateTwitterCards(config);
// 更新canonical URL // 更新canonical URL
updateCanonicalURL(config.url) updateCanonicalURL(config.url);
// 更新结构化数据 // 更新结构化数据
updateStructuredData(config) updateStructuredData(config);
} };
// 更新Open Graph标签 // 更新Open Graph标签
const updateOpenGraph = (config) => { const updateOpenGraph = (config) => {
const ogTags = { const ogTags = {
'og:title': config.title, "og:title": config.title,
'og:description': config.description, "og:description": config.description,
'og:url': config.url, "og:url": config.url,
'og:type': 'website', "og:type": "website",
'og:site_name': '一查查', "og:site_name": "一查查",
'og:locale': 'zh_CN' "og:locale": "zh_CN",
} };
Object.entries(ogTags).forEach(([property, content]) => { Object.entries(ogTags).forEach(([property, content]) => {
let meta = document.querySelector(`meta[property="${property}"]`) let meta = document.querySelector(`meta[property="${property}"]`);
if (!meta) { if (!meta) {
meta = document.createElement('meta') meta = document.createElement("meta");
meta.setAttribute('property', property) meta.setAttribute("property", property);
document.head.appendChild(meta) document.head.appendChild(meta);
} }
meta.content = content meta.content = content;
}) });
} };
// 更新Twitter Cards // 更新Twitter Cards
const updateTwitterCards = (config) => { const updateTwitterCards = (config) => {
const twitterTags = { const twitterTags = {
'twitter:card': 'summary', "twitter:card": "summary",
'twitter:title': config.title, "twitter:title": config.title,
'twitter:description': config.description, "twitter:description": config.description,
'twitter:url': config.url "twitter:url": config.url,
} };
Object.entries(twitterTags).forEach(([name, content]) => { Object.entries(twitterTags).forEach(([name, content]) => {
let meta = document.querySelector(`meta[name="${name}"]`) let meta = document.querySelector(`meta[name="${name}"]`);
if (!meta) { if (!meta) {
meta = document.createElement('meta') meta = document.createElement("meta");
meta.name = name meta.name = name;
document.head.appendChild(meta) document.head.appendChild(meta);
} }
meta.content = content meta.content = content;
}) });
} };
// 更新canonical URL // 更新canonical URL
const updateCanonicalURL = (url) => { const updateCanonicalURL = (url) => {
let canonical = document.querySelector('link[rel="canonical"]') let canonical = document.querySelector('link[rel="canonical"]');
if (!canonical) { if (!canonical) {
canonical = document.createElement('link') canonical = document.createElement("link");
canonical.rel = 'canonical' canonical.rel = "canonical";
document.head.appendChild(canonical) document.head.appendChild(canonical);
} }
canonical.href = url canonical.href = url;
} };
// 更新结构化数据 // 更新结构化数据
const updateStructuredData = (config) => { const updateStructuredData = (config) => {
// 移除现有的结构化数据 // 移除现有的结构化数据
const existingScripts = document.querySelectorAll('script[type="application/ld+json"]') const existingScripts = document.querySelectorAll(
existingScripts.forEach(script => { 'script[type="application/ld+json"]'
);
existingScripts.forEach((script) => {
if (script.textContent.includes('"@type":"WebPage"')) { if (script.textContent.includes('"@type":"WebPage"')) {
script.remove() script.remove();
} }
}) });
// 添加新的结构化数据 // 添加新的结构化数据
const structuredData = { const structuredData = {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "WebPage", "@type": "WebPage",
"name": config.title, name: config.title,
"description": config.description, description: config.description,
"url": config.url, url: config.url,
"mainEntity": { mainEntity: {
"@type": "Organization", "@type": "Organization",
"name": "一查查", name: "一查查",
"url": "https://www.zhinengcha.cn/", url: "https://www.zhinengcha.cn/",
"description": "专业大数据风险报告查询与代理平台,支持个人和企业多场景风控应用" description:
} "专业大数据风险报告查询与代理平台,支持个人和企业多场景风控应用",
} },
};
const script = document.createElement('script')
script.type = 'application/ld+json' const script = document.createElement("script");
script.textContent = JSON.stringify(structuredData) script.type = "application/ld+json";
document.head.appendChild(script) script.textContent = JSON.stringify(structuredData);
} document.head.appendChild(script);
};
// 根据路由自动更新SEO // 根据路由自动更新SEO
const updateSEOByRoute = () => { const updateSEOByRoute = () => {
const routeConfigs = { const routeConfigs = {
'/': { "/": {
title: '一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用', title: "一查查|大数据风险报告查询与代理平台,支持个人和企业多场景风控应用",
description: '一查查,专业大数据风险报告查询与代理平台,支持个人信用查询、小微企业风控、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用与风险。', description:
keywords: '大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询' "一查查,专业大数据风险报告查询与代理平台,支持个人风险查询、小微企业风、贷前风险背调等多场景报告应用,免费开通代理权限,助力高效识别信用风险。",
keywords:
"大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风险、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询",
}, },
'/agent': { "/agent": {
title: '一查查代理 - 免费开通代理权限 | 大数据风险报告代理', title: "一查查代理 - 免费开通代理权限 | 大数据风险报告代理",
description: '一查查代理平台,免费开通代理权限,享受大数据风险报告查询服务代理收益。专业的大数据风险报告、婚姻查询、个人信用评估等服务的代理合作。', description:
keywords: '一查查代理, 免费代理, 大数据风险报告代理, 代理权限, 代理收益' "一查查代理平台,免费开通代理权限,享受大数据风险报告查询服务代理收益。专业的大数据风险报告、婚姻查询、个人风险评估等服务的代理合作。",
keywords:
"一查查代理, 免费代理, 大数据风险报告代理, 代理权限, 代理收益",
}, },
'/help': { "/help": {
title: '帮助中心 - 一查查使用指南 | 常见问题解答', title: "帮助中心 - 一查查使用指南 | 常见问题解答",
description: '一查查帮助中心,提供详细的使用指南、常见问题解答、操作教程等,帮助用户更好地使用大数据风险报告查询服务。', description:
keywords: '一查查帮助, 使用指南, 常见问题, 操作教程, 客服支持' "一查查帮助中心,提供详细的使用指南常见问题解答、操作教程等,帮助用户更好地使用大数据风险报告查询服务。",
keywords: "一查查帮助, 使用指南, 常见问题, 操作教程, 客服支持",
}, },
'/help/guide': { "/help/guide": {
title: '使用指南 - 一查查操作教程 | 功能说明', title: "使用指南 - 一查查操作教程 | 功能说明",
description: '一查查详细使用指南,包含各功能模块的操作教程、功能说明、注意事项等,让用户快速上手使用。', description:
keywords: '使用指南, 操作教程, 功能说明, 快速上手, 一查查教程' "一查查详细使用指南,包含各功能模块的操作教程功能说明、注意事项等,让用户快速上手使用。",
keywords: "使用指南, 操作教程, 功能说明, 快速上手, 一查查教程",
}, },
'/example': { "/example": {
title: '示例报告 - 一查查报告展示 | 大数据风险报告样例', title: "示例报告 - 一查查报告展示 | 大数据风险报告样例",
description: '一查查示例报告展示,包含大数据风险报告、婚姻状况查询、个人信用评估等服务的报告样例,让用户了解报告内容和格式。', description:
keywords: '示例报告, 报告展示, 报告样例, 大数据风险报告, 婚姻查询报告' "一查查示例报告展示,包含大数据风险报告、婚姻状况查询、个人风险评估等服务的报告样例,让用户了解报告内容和格式。",
keywords:
"示例报告, 报告展示, 报告样例, 大数据风险报告, 婚姻查询报告",
}, },
'/service': { "/service": {
title: '客服中心 - 一查查在线客服 | 技术支持', title: "客服中心 - 一查查在线客服 | 技术支持",
description: '一查查客服中心,提供在线客服支持、技术咨询、问题反馈等服务,确保用户获得及时有效的帮助。', description:
keywords: '客服中心, 在线客服, 技术支持, 问题反馈, 一查查客服' "一查查客服中心,提供在线客服支持、技术咨询、问题反馈等服务,确保用户获得及时有效的帮助。",
} keywords: "客服中心, 在线客服, 技术支持, 问题反馈, 一查查客服",
} },
};
const currentPath = route?.path || '/'
const config = routeConfigs[currentPath] || defaultSEO const currentPath = route?.path || "/";
const config = routeConfigs[currentPath] || defaultSEO;
updateSEO({ updateSEO({
...config, ...config,
url: `https://www.zhinengcha.cn${currentPath}` url: `https://www.zhinengcha.cn${currentPath}`,
}) });
} };
// 监听路由变化 // 监听路由变化
watch(() => route?.path, updateSEOByRoute, { immediate: true }) watch(() => route?.path, updateSEOByRoute, { immediate: true });
return { return {
updateSEO, updateSEO,
updateSEOByRoute, updateSEOByRoute,
pageSEO pageSEO,
} };
} }

View File

@@ -0,0 +1,107 @@
import { ref } from "vue";
import { showToast, showDialog } from "vant";
import useApiFetch from "@/composables/useApiFetch";
export function useShareReport() {
const isLoading = ref(false);
const copyToClipboard = async (text) => {
await navigator.clipboard.writeText(text);
showToast({
type: "success",
message: "链接已复制到剪贴板",
position: "bottom",
});
};
const handleShare = async (orderId, orderNo, isExample = false, disabled = false) => {
if (isLoading.value || disabled) return;
// 如果是示例模式直接分享当前URL
if (isExample) {
try {
const currentUrl = window.location.href;
await copyToClipboard(currentUrl);
showToast({
type: "success",
message: "示例链接已复制到剪贴板",
position: "bottom",
});
} catch (err) {
showToast({
type: "fail",
message: "复制链接失败",
position: "bottom",
});
}
return;
}
// 优先使用 orderId如果没有则使用 orderNo
const orderIdentifier = orderId || orderNo;
if (!orderIdentifier) {
showToast({
type: "fail",
message: "缺少订单标识",
position: "bottom",
});
return;
}
isLoading.value = true;
try {
// 根据实际使用的标识构建请求参数
const requestData = orderId
? { order_id: orderId }
: { order_no: orderNo };
const { data, error } = await useApiFetch("/query/generate_share_link")
.post(requestData)
.json();
if (error.value) {
throw new Error(error.value);
}
if (data.value?.code === 200 && data.value.data?.share_link) {
const baseUrl = window.location.origin;
const linkId = encodeURIComponent(data.value.data.share_link);
const fullShareUrl = `${baseUrl}/report/share/${linkId}`;
try {
// 显示确认对话框
await showDialog({
title: "分享链接已生成",
message: "链接将在7天后过期是否复制到剪贴板",
confirmButtonText: "复制链接",
cancelButtonText: "取消",
showCancelButton: true,
});
// 用户点击确认后复制链接
await copyToClipboard(fullShareUrl);
} catch (dialogErr) {
// 用户点击取消按钮时dialogErr 会是 'cancel'
// 这里不需要显示错误提示,直接返回即可
return;
}
} else {
throw new Error(data.value?.message || "生成分享链接失败");
}
} catch (err) {
showToast({
type: "fail",
message: err.message || "生成分享链接失败",
position: "bottom",
});
} finally {
isLoading.value = false;
}
};
return {
isLoading,
handleShare,
};
}

View File

@@ -205,6 +205,16 @@ const router = createRouter({
requiresAgent: true, requiresAgent: true,
}, },
}, },
{
path: "/agent/promote/poster",
name: "agentPromotePoster",
component: () => import("@/views/PromotePoster.vue"),
meta: {
title: "推广海报",
requiresAuth: true,
requiresAgent: true,
},
},
{ {
path: "/agent/promotion/query/list", path: "/agent/promotion/query/list",
name: "agentPromotionQueryList", name: "agentPromotionQueryList",

View File

@@ -338,7 +338,7 @@
<!-- 温馨提示 --> <!-- 温馨提示 -->
<LRemark <LRemark
content="法院曝光台信息展示申请人的各类案件信息,包括涉案公告、执行案件、失信案件和限高案件。数据来源于全国法院执行信息公开网等权威司法数据库。案件状态包括审理中、执行中、已结案等,执行金额和已还款金额直接反映债务履行情况。失信和限高记录对个人信用影响较大,建议重点关注。数据更新频率依赖于司法系统,可能存在延迟。" /> content="法院曝光台信息展示申请人的各类案件信息,包括涉案公告、执行案件、失信案件和限高案件。数据来源于全国法院执行信息公开网等权威司法数据库。案件状态包括审理中、执行中、已结案等,执行金额和已还款金额直接反映债务履行情况。失信和限高记录对个人风险影响较大,建议重点关注。数据更新频率依赖于司法系统,可能存在延迟。" />
</template> </template>
<script setup> <script setup>

View File

@@ -1,302 +1,305 @@
// 案件类型映射表 // 案件类型映射表
export const lawsuitTypeMap = { export const lawsuitTypeMap = {
sxbzxr: { sxbzxr: {
text: '失信被执行', text: "失信被执行",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
darkColor: 'bg-red-500', darkColor: "bg-red-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
xgbzxr: { xgbzxr: {
text: '限高被执行', text: "限高被执行",
color: 'text-orange-600 bg-orange-50', color: "text-orange-600 bg-orange-50",
darkColor: 'bg-orange-500', darkColor: "bg-orange-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
criminal: { criminal: {
text: '刑事案件', text: "刑事案件",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
darkColor: 'bg-red-500', darkColor: "bg-red-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
civil: { civil: {
text: '民事案件', text: "民事案件",
color: 'text-blue-600 bg-blue-50', color: "text-blue-600 bg-blue-50",
darkColor: 'bg-blue-500', darkColor: "bg-blue-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
administrative: { administrative: {
text: '行政案件', text: "行政案件",
color: 'text-purple-600 bg-purple-50', color: "text-purple-600 bg-purple-50",
darkColor: 'bg-purple-500', darkColor: "bg-purple-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
implement: { implement: {
text: '执行案件', text: "执行案件",
color: 'text-orange-600 bg-orange-50', color: "text-orange-600 bg-orange-50",
darkColor: 'bg-orange-500', darkColor: "bg-orange-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
bankrupt: { bankrupt: {
text: '强制清算与破产案件', text: "强制清算与破产案件",
color: 'text-rose-600 bg-rose-50', color: "text-rose-600 bg-rose-50",
darkColor: 'bg-rose-500', darkColor: "bg-rose-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
preservation: { preservation: {
text: '非诉保全审查', text: "非诉保全审查",
color: 'text-amber-600 bg-amber-50', color: "text-amber-600 bg-amber-50",
darkColor: 'bg-amber-500', darkColor: "bg-amber-500",
riskLevel: 'low', // 低风险 riskLevel: "low", // 低风险
}, },
} };
// 案件类型文本 // 案件类型文本
export const getCaseTypeText = type => { export const getCaseTypeText = (type) => {
return lawsuitTypeMap[type]?.text || '其他案件' return lawsuitTypeMap[type]?.text || "其他案件";
} };
// 案件类型颜色 // 案件类型颜色
export const getCaseTypeColor = type => { export const getCaseTypeColor = (type) => {
return lawsuitTypeMap[type]?.color || 'text-gray-600 bg-gray-50' return lawsuitTypeMap[type]?.color || "text-gray-600 bg-gray-50";
} };
// 案件类型深色 // 案件类型深色
export const getCaseTypeDarkColor = type => { export const getCaseTypeDarkColor = (type) => {
return lawsuitTypeMap[type]?.darkColor || 'bg-gray-500' return lawsuitTypeMap[type]?.darkColor || "bg-gray-500";
} };
// 格式化日期显示 // 格式化日期显示
export const formatDate = dateStr => { export const formatDate = (dateStr) => {
if (!dateStr) return '—' if (!dateStr) return "—";
// 转换YYYY-MM-DD为年月日格式 // 转换YYYY-MM-DD为年月日格式
if (dateStr.includes('-')) { if (dateStr.includes("-")) {
const parts = dateStr.split('-') const parts = dateStr.split("-");
if (parts.length === 3) { if (parts.length === 3) {
return `${parts[0]}${parts[1]}${parts[2]}` return `${parts[0]}${parts[1]}${parts[2]}`;
}
} }
} return dateStr; // 如果不是标准格式则返回原始字符串
return dateStr // 如果不是标准格式则返回原始字符串 };
}
// 格式化金额显示(单位:元) // 格式化金额显示(单位:元)
export const formatLawsuitMoney = money => { export const formatLawsuitMoney = (money) => {
if (!money) return '—' if (!money) return "—";
const value = parseFloat(money) const value = parseFloat(money);
if (isNaN(value)) return '—' if (isNaN(value)) return "—";
// 超过1亿显示亿元 // 直接显示原始金额(元)
if (value >= 10000) {
return ( return (
(value / 10000).toLocaleString('zh-CN', { value.toLocaleString("zh-CN", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 2, maximumFractionDigits: 2,
}) + ' 亿元' }) + " 元"
) );
} };
// 否则显示万元
return (
value.toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}) + ' 万元'
)
}
// 获取案件状态样式 // 获取案件状态样式
export const getCaseStatusClass = status => { export const getCaseStatusClass = (status) => {
if (!status) return 'bg-gray-100 text-gray-500' if (!status) return "bg-gray-100 text-gray-500";
if (status.includes('已结') || status.includes('已办结')) { if (status.includes("已结") || status.includes("已办结")) {
return 'bg-green-50 text-green-600' return "bg-green-50 text-green-600";
} else if (status.includes('执行中') || status.includes('审理中')) { } else if (status.includes("执行中") || status.includes("审理中")) {
return 'bg-blue-50 text-blue-600' return "bg-blue-50 text-blue-600";
} else if (status.includes('未执行')) { } else if (status.includes("未执行")) {
return 'bg-amber-50 text-amber-600' return "bg-amber-50 text-amber-600";
} else { } else {
return 'bg-gray-100 text-gray-500' return "bg-gray-100 text-gray-500";
} }
} };
// 获取企业状态对应的样式 // 获取企业状态对应的样式
export const getStatusClass = status => { export const getStatusClass = (status) => {
if (!status) return 'bg-gray-100 text-gray-500' if (!status) return "bg-gray-100 text-gray-500";
if (status.includes('注销') || status.includes('吊销')) { if (status.includes("注销") || status.includes("吊销")) {
return 'bg-red-50 text-red-600' return "bg-red-50 text-red-600";
} else if (status.includes('存续') || status.includes('在营')) { } else if (status.includes("存续") || status.includes("在营")) {
return 'bg-green-50 text-green-600' return "bg-green-50 text-green-600";
} else if (status.includes('筹建') || status.includes('新设')) { } else if (status.includes("筹建") || status.includes("新设")) {
return 'bg-blue-50 text-blue-600' return "bg-blue-50 text-blue-600";
} else { } else {
return 'bg-yellow-50 text-yellow-600' return "bg-yellow-50 text-yellow-600";
} }
} };
// 格式化资本金额显示 // 格式化资本金额显示
export const formatCapital = (capital, currency) => { export const formatCapital = (capital, currency) => {
if (!capital) return '—' if (!capital) return "—";
// 检查是否包含"万"字或需要显示为万元 // 检查是否包含"万"字或需要显示为万元
let unit = '' let unit = "";
let value = parseFloat(capital) let value = parseFloat(capital);
// 处理原始数据中可能带有的单位 // 处理原始数据中可能带有的单位
if (typeof capital === 'string' && capital.includes('万')) { if (typeof capital === "string" && capital.includes("万")) {
unit = '万' unit = "万";
// 提取数字部分 // 提取数字部分
const numMatch = capital.match(/[\d.]+/) const numMatch = capital.match(/[\d.]+/);
value = numMatch ? parseFloat(numMatch[0]) : 0 value = numMatch ? parseFloat(numMatch[0]) : 0;
} else if (value >= 10000) { } else if (value >= 10000) {
// 大额数字转换为万元显示 // 大额数字转换为万元显示
value = value / 10000 value = value / 10000;
unit = '万' unit = "万";
} }
// 格式化数字,保留两位小数(如果有小数部分) // 格式化数字,保留两位小数(如果有小数部分)
const formattedValue = value.toLocaleString('zh-CN', { const formattedValue = value.toLocaleString("zh-CN", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 2, maximumFractionDigits: 2,
}) });
return `${formattedValue}${unit} ${currency || '人民币'}` return `${formattedValue}${unit} ${currency || "人民币"}`;
} };
// 获取涉诉风险等级 // 获取涉诉风险等级
export const getRiskLevel = lawsuitInfo => { export const getRiskLevel = (lawsuitInfo) => {
if (!lawsuitInfo) { if (!lawsuitInfo) {
return {
level: "low",
text: "低风险",
color: "text-green-600 bg-green-50",
};
}
// 失信被执行人是最高风险
if (lawsuitInfo.sxbzxr && lawsuitInfo.sxbzxr.length > 0) {
return {
level: "high",
text: "高风险",
color: "text-red-600 bg-red-50",
};
}
// 限高被执行人是最高风险
if (lawsuitInfo.xgbzxr && lawsuitInfo.xgbzxr.length > 0) {
return {
level: "high",
text: "高风险",
color: "text-red-600 bg-red-50",
};
}
// 有涉诉数据的风险级别
if (lawsuitInfo.data && Object.keys(lawsuitInfo.data).length > 0) {
// 检查是否有未结案的案件
const data = lawsuitInfo.data;
if (data.count && data.count_wei_total && data.count_wei_total > 0) {
return {
level: "medium",
text: "中风险",
color: "text-amber-600 bg-amber-50",
};
}
// 只有已结案的为低中风险
return {
level: "low-medium",
text: "低中风险",
color: "text-yellow-600 bg-yellow-50",
};
}
return { return {
level: 'low', level: "low",
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
} };
} };
// 失信被执行人是最高风险
if (lawsuitInfo.sxbzxr && lawsuitInfo.sxbzxr.length > 0) {
return {
level: 'high',
text: '高风险',
color: 'text-red-600 bg-red-50',
}
}
// 限高被执行人是最高风险
if (lawsuitInfo.xgbzxr && lawsuitInfo.xgbzxr.length > 0) {
return {
level: 'high',
text: '高风险',
color: 'text-red-600 bg-red-50',
}
}
// 有涉诉数据的风险级别
if (lawsuitInfo.data && Object.keys(lawsuitInfo.data).length > 0) {
// 检查是否有未结案的案件
const data = lawsuitInfo.data
if (data.count && data.count_wei_total && data.count_wei_total > 0) {
return {
level: 'medium',
text: '中风险',
color: 'text-amber-600 bg-amber-50',
}
}
// 只有已结案的为低中风险
return {
level: 'low-medium',
text: '低中风险',
color: 'text-yellow-600 bg-yellow-50',
}
}
return {
level: 'low',
text: '低风险',
color: 'text-green-600 bg-green-50',
}
}
// 获取涉诉案件统计 // 获取涉诉案件统计
export const getLawsuitStats = lawsuitInfo => { export const getLawsuitStats = (lawsuitInfo) => {
if (!lawsuitInfo) return null if (!lawsuitInfo) return null;
const stats = { const stats = {
total: 0, total: 0,
types: [], types: [],
} };
// 统计各类型案件数量 // 统计各类型案件数量
Object.keys(lawsuitTypeMap).forEach(type => { Object.keys(lawsuitTypeMap).forEach((type) => {
let count = 0 let count = 0;
if (type === 'sxbzxr') { if (type === "sxbzxr") {
count = lawsuitInfo.sxbzxr && lawsuitInfo.sxbzxr.length > 0 ? lawsuitInfo.sxbzxr.length : 0 count =
} else if (type === 'xgbzxr') { lawsuitInfo.sxbzxr && lawsuitInfo.sxbzxr.length > 0
count = lawsuitInfo.xgbzxr && lawsuitInfo.xgbzxr.length > 0 ? lawsuitInfo.xgbzxr.length : 0 ? lawsuitInfo.sxbzxr.length
} else if (lawsuitInfo.data && lawsuitInfo.data[type] && Object.keys(lawsuitInfo.data[type]).length > 0) { : 0;
const typeData = lawsuitInfo.data[type] } else if (type === "xgbzxr") {
count = typeData.cases && typeData.cases.length ? typeData.cases.length : 0 count =
} lawsuitInfo.xgbzxr && lawsuitInfo.xgbzxr.length > 0
? lawsuitInfo.xgbzxr.length
: 0;
} else if (
lawsuitInfo.data &&
lawsuitInfo.data[type] &&
Object.keys(lawsuitInfo.data[type]).length > 0
) {
const typeData = lawsuitInfo.data[type];
count =
typeData.cases && typeData.cases.length
? typeData.cases.length
: 0;
}
if (count > 0) { if (count > 0) {
stats.total += count stats.total += count;
stats.types.push({ stats.types.push({
type, type,
count, count,
name: getCaseTypeText(type), name: getCaseTypeText(type),
color: getCaseTypeColor(type), color: getCaseTypeColor(type),
darkColor: getCaseTypeDarkColor(type), darkColor: getCaseTypeDarkColor(type),
}) });
} }
}) });
return stats return stats;
} };
// 获取案件类型优先级顺序 // 获取案件类型优先级顺序
export const getCaseTypePriority = () => { export const getCaseTypePriority = () => {
return [ return [
'sxbzxr', // 失信被执行人(最高风险) "sxbzxr", // 失信被执行人(最高风险)
'xgbzxr', // 限高被执行人 "xgbzxr", // 限高被执行人
'criminal', // 刑事案件 "criminal", // 刑事案件
'civil', // 民事案件 "civil", // 民事案件
'administrative', // 行政案件 "administrative", // 行政案件
'implement', // 执行案件 "implement", // 执行案件
'bankrupt', // 强制清算与破产案件 "bankrupt", // 强制清算与破产案件
'preservation', // 非诉保全审查 "preservation", // 非诉保全审查
] ];
} };
// 根据案件类型获取风险等级 // 根据案件类型获取风险等级
export const getCaseTypeRiskLevel = caseType => { export const getCaseTypeRiskLevel = (caseType) => {
const typeInfo = lawsuitTypeMap[caseType] const typeInfo = lawsuitTypeMap[caseType];
if (!typeInfo) { if (!typeInfo) {
return { return {
level: 'low', level: "low",
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
};
} }
}
const riskLevelMap = { const riskLevelMap = {
high: { high: {
text: '高风险', text: "高风险",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
}, },
medium: { medium: {
text: '中风险', text: "中风险",
color: 'text-amber-600 bg-amber-50', color: "text-amber-600 bg-amber-50",
}, },
low: { low: {
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
}, },
} };
return { return {
level: typeInfo.riskLevel, level: typeInfo.riskLevel,
...riskLevelMap[typeInfo.riskLevel], ...riskLevelMap[typeInfo.riskLevel],
} };
} };

View File

@@ -465,12 +465,12 @@ const riskScore = computed(() => {
const lowRiskCount = summaryData.value.byRiskLevel.find(item => item.id === 'low')?.triggered || 0; const lowRiskCount = summaryData.value.byRiskLevel.find(item => item.id === 'low')?.triggered || 0;
// 计算风险分数 // 计算风险分数
// 高风险项:每个扣 30 分 // 高风险项(无法收回):每个扣 40 分
// 中风险项:每个扣 15 // 中风险项(严重逾期):每个扣 20
// 低风险项:每个扣 5 分 // 低风险项(短期逾期):每个扣 5 分
let score = 100; let score = 100;
score -= highRiskCount * 30; score -= highRiskCount * 40;
score -= mediumRiskCount * 15; score -= mediumRiskCount * 20;
score -= lowRiskCount * 5; score -= lowRiskCount * 5;
return Math.max(0, Math.min(100, score)); return Math.max(0, Math.min(100, score));

View File

@@ -57,7 +57,7 @@
<!-- 所有风险类型列表 --> <!-- 所有风险类型列表 -->
<div class="space-y-3"> <div class="space-y-3">
<!-- 正常人员 --> <!-- 人员状态 -->
<div class="rounded-lg p-4 border-2 relative" :class="getRiskItemClass('0')"> <div class="rounded-lg p-4 border-2 relative" :class="getRiskItemClass('0')">
<div <div
:class="['absolute top-0 right-0 px-1.5 py-0.5 text-sm font-bold text-white rounded-bl-lg rounded-tr-lg', getRiskBadgeClass('0')]"> :class="['absolute top-0 right-0 px-1.5 py-0.5 text-sm font-bold text-white rounded-bl-lg rounded-tr-lg', getRiskBadgeClass('0')]">
@@ -65,13 +65,15 @@
</div> </div>
<div class="flex items-center pr-12"> <div class="flex items-center pr-12">
<div class="w-8 h-8 mr-3 flex-shrink-0 flex items-center justify-center"> <div class="w-8 h-8 mr-3 flex-shrink-0 flex items-center justify-center">
<img :src="getRiskItemIcon('0')" alt="正常人员" class="w-8 h-8 object-contain" /> <img :src="getRiskItemIcon('0')" :alt="isNormalPerson ? '正常人员' : '存在风险'"
class="w-8 h-8 object-contain" />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="font-bold text-sm" :class="getRiskItemTextColor('0')"> <div class="font-bold text-sm" :class="getRiskItemTextColor('0')">
{{ getRiskTypeInfo('0').text }} {{ isNormalPerson ? '正常人员' : '人员状态' }}
</div> </div>
<div class="text-sm text-[#999999] mt-0.5">{{ getRiskTypeInfo('0').description }}</div> <div class="text-sm text-[#999999] mt-0.5">{{ isNormalPerson ? '无不良记录,属于正常人员' : '存在不良记录风险'
}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -460,12 +462,12 @@ const isHit = (code) => {
// 如果level是'0',则正常人员命中 // 如果level是'0',则正常人员命中
return hitRiskCodes.value.includes('0') return hitRiskCodes.value.includes('0')
} }
// 如果直接包含该代码,则命中 // 如果直接包含该代码,则命中
if (hitRiskCodes.value.includes(code)) { if (hitRiskCodes.value.includes(code)) {
return true return true
} }
// 对于父级类型A、B、C、D如果子类型命中父类型也算命中 // 对于父级类型A、B、C、D如果子类型命中父类型也算命中
if (code === 'A') { if (code === 'A') {
// 如果 A1、A2、A3、A4、A5 任何一个命中A 也算命中 // 如果 A1、A2、A3、A4、A5 任何一个命中A 也算命中
@@ -483,7 +485,7 @@ const isHit = (code) => {
// 如果 D1、D2、D3、D4、D5 任何一个命中D 也算命中 // 如果 D1、D2、D3、D4、D5 任何一个命中D 也算命中
return ['D1', 'D2', 'D3', 'D4', 'D5'].some(subCode => hitRiskCodes.value.includes(subCode)) return ['D1', 'D2', 'D3', 'D4', 'D5'].some(subCode => hitRiskCodes.value.includes(subCode))
} }
return false return false
} }

View File

@@ -1162,29 +1162,19 @@ const getLawsuitStats = (company) => {
return stats; return stats;
}; };
// 格式化金额显示(单位:元) // 格式化金额显示(单位:元)
const formatLawsuitMoney = (money) => { const formatLawsuitMoney = (money) => {
if (!money) return "—"; if (!money) return "—";
const value = parseFloat(money); const value = parseFloat(money);
if (isNaN(value)) return "—"; if (isNaN(value)) return "—";
// 超过1亿显示亿元 // 直接显示原始金额(元)
if (value >= 10000) {
return (
(value / 10000).toLocaleString("zh-CN", {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}) + " 亿元"
);
}
// 否则显示万元
return ( return (
value.toLocaleString("zh-CN", { value.toLocaleString("zh-CN", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 2, maximumFractionDigits: 2,
}) + " 元" }) + " 元"
); );
}; };

View File

@@ -36,22 +36,22 @@
司南报告被拆分成以下14个独立模块 司南报告被拆分成以下14个独立模块
| API ID | 模块名称 | 包含数据 | 组件文件 | | API ID | 模块名称 | 包含数据 | 组件文件 |
|--------|----------|----------|----------| | -------------------------------- | ---------------- | --------------------- | -------------------------------- |
| `DWBG6A2C_BaseInfo` | 基本信息 | baseInfo | BaseInfoSection.vue | | `DWBG6A2C_BaseInfo` | 基本信息 | baseInfo | BaseInfoSection.vue |
| `DWBG6A2C_StandLiveInfo` | 身份信息核验 | standLiveInfo | StandLiveInfoSection.vue | | `DWBG6A2C_StandLiveInfo` | 身份信息核验 | standLiveInfo | StandLiveInfoSection.vue |
| `DWBG6A2C_RiskPoint` | 命中风险标注 | riskPoint | RiskPointSection.vue | | `DWBG6A2C_RiskPoint` | 命中风险标注 | riskPoint | RiskPointSection.vue |
| `DWBG6A2C_SecurityInfo` | 公安重点人员核验 | securityInfo | SecurityInfoSection.vue | | `DWBG6A2C_SecurityInfo` | 公安重点人员核验 | securityInfo | SecurityInfoSection.vue |
| `DWBG6A2C_AntiFraudInfo` | 涉赌涉诈人员核验 | antiFraudInfo | AntiFraudInfoSection.vue | | `DWBG6A2C_AntiFraudInfo` | 涉赌涉诈人员核验 | antiFraudInfo | AntiFraudInfoSection.vue |
| `DWBG6A2C_RiskList` | 风险名单 | riskList | RiskListSection.vue | | `DWBG6A2C_RiskList` | 风险名单 | riskList | RiskListSection.vue |
| `DWBG6A2C_ApplicationStatistics` | 历史借贷行为 | applicationStatistics | ApplicationStatisticsSection.vue | | `DWBG6A2C_ApplicationStatistics` | 历史借贷行为 | applicationStatistics | ApplicationStatisticsSection.vue |
| `DWBG6A2C_LendingStatistics` | 近24个月放款情况 | lendingStatistics | LendingStatisticsSection.vue | | `DWBG6A2C_LendingStatistics` | 近24个月放款情况 | lendingStatistics | LendingStatisticsSection.vue |
| `DWBG6A2C_PerformanceStatistics` | 履约情况 | performanceStatistics | PerformanceStatisticsSection.vue | | `DWBG6A2C_PerformanceStatistics` | 履约情况 | performanceStatistics | PerformanceStatisticsSection.vue |
| `DWBG6A2C_OverdueRecord` | 历史逾期记录 | overdueRecord | OverdueRecordSection.vue | | `DWBG6A2C_OverdueRecord` | 历史逾期记录 | overdueRecord | OverdueRecordSection.vue |
| `DWBG6A2C_CreditDetail` | 授信详情 | creditDetail | CreditDetailSection.vue | | `DWBG6A2C_CreditDetail` | 授信详情 | creditDetail | CreditDetailSection.vue |
| `DWBG6A2C_RentalBehavior` | 租赁行为 | rentalBehavior | RentalBehaviorSection.vue | | `DWBG6A2C_RentalBehavior` | 租赁行为 | rentalBehavior | RentalBehaviorSection.vue |
| `DWBG6A2C_RiskSupervision` | 关联风险监督 | riskSupervision | RiskSupervisionSection.vue | | `DWBG6A2C_RiskSupervision` | 关联风险监督 | riskSupervision | RiskSupervisionSection.vue |
| `DWBG6A2C_CourtRiskInfo` | 法院风险信息 | judiciaRiskInfos | CourtRiskInfoSection.vue | | `DWBG6A2C_CourtRiskInfo` | 法院风险信息 | judiciaRiskInfos | CourtRiskInfoSection.vue |
## 使用方法 ## 使用方法
@@ -85,7 +85,7 @@ BaseReport.vue 中已配置所有司南报告模块:
DWBG6A2C: { DWBG6A2C: {
name: "司南报告", name: "司南报告",
component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/index.vue")), component: defineAsyncComponent(() => import("@/ui/DWBG6A2C/index.vue")),
remark: '司南报告提供全面的个人信用风险评估,包括身份核验、风险名单、借贷行为、履约情况等多维度分析。' remark: '司南报告提供全面的个人风险风险评估,包括身份核验、风险名单、借贷行为、履约情况等多维度分析。'
}, },
// ... 其他模块配置 // ... 其他模块配置
``` ```

View File

@@ -229,7 +229,7 @@
<!-- 温馨提示 --> <!-- 温馨提示 -->
<LRemark <LRemark
content="法院风险信息展示申请人的司法风险情况,包括民事案件、执行案件、失信记录和限高消费等。数据来源于全国法院执行信息公开网等权威司法数据库。失信和限高记录对个人信用影响极大,会限制高消费和金融服务。执行案件可能涉及财产冻结和强制执行。建议对有司法风险记录的申请进行重点审查。" /> content="法院风险信息展示申请人的司法风险情况,包括民事案件、执行案件、失信记录和限高消费等。数据来源于全国法院执行信息公开网等权威司法数据库。失信和限高记录对个人风险影响极大,会限制高消费和金融服务。执行案件可能涉及财产冻结和强制执行。建议对有司法风险记录的申请进行重点审查。" />
</template> </template>
<script setup> <script setup>
@@ -556,17 +556,17 @@ watch(() => props.data, (newData) => {
&.case-item-settled { &.case-item-settled {
border: 1px solid #CAECD3; border: 1px solid #CAECD3;
background-color: #FBFDFC; background-color: #FBFDFC;
} }
&.case-item-executing { &.case-item-executing {
border: 1px solid #FFE082; border: 1px solid #FFE082;
background-color: #FFFDF9; background-color: #FFFDF9;
} }
&.case-item-hearing { &.case-item-hearing {
border: 1px solid #EBF5FF; border: 1px solid #EBF5FF;
background-color: #FAFDFF; background-color: #FAFDFF;
} }
&.case-item-default { &.case-item-default {

View File

@@ -1,303 +1,317 @@
// 案件类型映射表 // 案件类型映射表
export const lawsuitTypeMap = { export const lawsuitTypeMap = {
breachCase: { breachCase: {
text: '失信被执行', text: "失信被执行",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
darkColor: 'bg-red-500', darkColor: "bg-red-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
consumptionRestriction: { consumptionRestriction: {
text: '限高被执行', text: "限高被执行",
color: 'text-orange-600 bg-orange-50', color: "text-orange-600 bg-orange-50",
darkColor: 'bg-orange-500', darkColor: "bg-orange-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
criminal: { criminal: {
text: '刑事案件', text: "刑事案件",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
darkColor: 'bg-red-500', darkColor: "bg-red-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
civil: { civil: {
text: '民事案件', text: "民事案件",
color: 'text-blue-600 bg-blue-50', color: "text-blue-600 bg-blue-50",
darkColor: 'bg-blue-500', darkColor: "bg-blue-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
administrative: { administrative: {
text: '行政案件', text: "行政案件",
color: 'text-purple-600 bg-purple-50', color: "text-purple-600 bg-purple-50",
darkColor: 'bg-purple-500', darkColor: "bg-purple-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
implement: { implement: {
text: '执行案件', text: "执行案件",
color: 'text-orange-600 bg-orange-50', color: "text-orange-600 bg-orange-50",
darkColor: 'bg-orange-500', darkColor: "bg-orange-500",
riskLevel: 'medium', // 中风险 riskLevel: "medium", // 中风险
}, },
bankrupt: { bankrupt: {
text: '强制清算与破产案件', text: "强制清算与破产案件",
color: 'text-rose-600 bg-rose-50', color: "text-rose-600 bg-rose-50",
darkColor: 'bg-rose-500', darkColor: "bg-rose-500",
riskLevel: 'high', // 高风险 riskLevel: "high", // 高风险
}, },
preservation: { preservation: {
text: '非诉保全审查', text: "非诉保全审查",
color: 'text-amber-600 bg-amber-50', color: "text-amber-600 bg-amber-50",
darkColor: 'bg-amber-500', darkColor: "bg-amber-500",
riskLevel: 'low', // 低风险 riskLevel: "low", // 低风险
}, },
} };
// 案件类型文本 // 案件类型文本
export const getCaseTypeText = type => { export const getCaseTypeText = (type) => {
return lawsuitTypeMap[type]?.text || '其他案件' return lawsuitTypeMap[type]?.text || "其他案件";
} };
// 案件类型颜色 // 案件类型颜色
export const getCaseTypeColor = type => { export const getCaseTypeColor = (type) => {
return lawsuitTypeMap[type]?.color || 'text-gray-600 bg-gray-50' return lawsuitTypeMap[type]?.color || "text-gray-600 bg-gray-50";
} };
// 案件类型深色 // 案件类型深色
export const getCaseTypeDarkColor = type => { export const getCaseTypeDarkColor = (type) => {
return lawsuitTypeMap[type]?.darkColor || 'bg-gray-500' return lawsuitTypeMap[type]?.darkColor || "bg-gray-500";
} };
// 格式化日期显示 // 格式化日期显示
export const formatDate = dateStr => { export const formatDate = (dateStr) => {
if (!dateStr) return '—' if (!dateStr) return "—";
// 转换YYYY-MM-DD为年月日格式 // 转换YYYY-MM-DD为年月日格式
if (dateStr.includes('-')) { if (dateStr.includes("-")) {
const parts = dateStr.split('-') const parts = dateStr.split("-");
if (parts.length === 3) { if (parts.length === 3) {
return `${parts[0]}${parts[1]}${parts[2]}` return `${parts[0]}${parts[1]}${parts[2]}`;
}
} }
} return dateStr; // 如果不是标准格式则返回原始字符串
return dateStr // 如果不是标准格式则返回原始字符串 };
}
// 格式化金额显示(单位:元) // 格式化金额显示(单位:元)
export const formatLawsuitMoney = money => { export const formatLawsuitMoney = (money) => {
if (!money) return '—' if (!money) return "—";
const value = parseFloat(money) const value = parseFloat(money);
if (isNaN(value)) return '—' if (isNaN(value)) return "—";
// 超过1亿显示亿元 // 直接显示原始金额(元)
if (value >= 10000) {
return ( return (
(value / 10000).toLocaleString('zh-CN', { value.toLocaleString("zh-CN", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 2, maximumFractionDigits: 2,
}) + ' 亿元' }) + " 元"
) );
} };
// 否则显示万元
return (
value.toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}) + ' 万元'
)
}
// 获取案件状态样式 // 获取案件状态样式
export const getCaseStatusClass = status => { export const getCaseStatusClass = (status) => {
if (!status) return 'bg-gray-100 text-gray-500' if (!status) return "bg-gray-100 text-gray-500";
if (status.includes('已结') || status.includes('已办结')) { if (status.includes("已结") || status.includes("已办结")) {
return 'bg-green-50 text-green-600' return "bg-green-50 text-green-600";
} else if (status.includes('执行中') || status.includes('审理中')) { } else if (status.includes("执行中") || status.includes("审理中")) {
return 'bg-blue-50 text-blue-600' return "bg-blue-50 text-blue-600";
} else if (status.includes('未执行')) { } else if (status.includes("未执行")) {
return 'bg-amber-50 text-amber-600' return "bg-amber-50 text-amber-600";
} else { } else {
return 'bg-gray-100 text-gray-500' return "bg-gray-100 text-gray-500";
} }
} };
// 获取企业状态对应的样式 // 获取企业状态对应的样式
export const getStatusClass = status => { export const getStatusClass = (status) => {
if (!status) return 'bg-gray-100 text-gray-500' if (!status) return "bg-gray-100 text-gray-500";
if (status.includes('注销') || status.includes('吊销')) { if (status.includes("注销") || status.includes("吊销")) {
return 'bg-red-50 text-red-600' return "bg-red-50 text-red-600";
} else if (status.includes('存续') || status.includes('在营')) { } else if (status.includes("存续") || status.includes("在营")) {
return 'bg-green-50 text-green-600' return "bg-green-50 text-green-600";
} else if (status.includes('筹建') || status.includes('新设')) { } else if (status.includes("筹建") || status.includes("新设")) {
return 'bg-blue-50 text-blue-600' return "bg-blue-50 text-blue-600";
} else { } else {
return 'bg-yellow-50 text-yellow-600' return "bg-yellow-50 text-yellow-600";
} }
} };
// 格式化资本金额显示 // 格式化资本金额显示
export const formatCapital = (capital, currency) => { export const formatCapital = (capital, currency) => {
if (!capital) return '—' if (!capital) return "—";
// 检查是否包含"万"字或需要显示为万元 // 检查是否包含"万"字或需要显示为万元
let unit = '' let unit = "";
let value = parseFloat(capital) let value = parseFloat(capital);
// 处理原始数据中可能带有的单位 // 处理原始数据中可能带有的单位
if (typeof capital === 'string' && capital.includes('万')) { if (typeof capital === "string" && capital.includes("万")) {
unit = '万' unit = "万";
// 提取数字部分 // 提取数字部分
const numMatch = capital.match(/[\d.]+/) const numMatch = capital.match(/[\d.]+/);
value = numMatch ? parseFloat(numMatch[0]) : 0 value = numMatch ? parseFloat(numMatch[0]) : 0;
} else if (value >= 10000) { } else if (value >= 10000) {
// 大额数字转换为万元显示 // 大额数字转换为万元显示
value = value / 10000 value = value / 10000;
unit = '万' unit = "万";
} }
// 格式化数字,保留两位小数(如果有小数部分) // 格式化数字,保留两位小数(如果有小数部分)
const formattedValue = value.toLocaleString('zh-CN', { const formattedValue = value.toLocaleString("zh-CN", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 2, maximumFractionDigits: 2,
}) });
return `${formattedValue}${unit} ${currency || '人民币'}` return `${formattedValue}${unit} ${currency || "人民币"}`;
} };
// 获取涉诉风险等级 // 获取涉诉风险等级
export const getRiskLevel = lawsuitInfo => { export const getRiskLevel = (lawsuitInfo) => {
if (!lawsuitInfo) { if (!lawsuitInfo) {
return {
level: "low",
text: "低风险",
color: "text-green-600 bg-green-50",
};
}
// 失信被执行人是最高风险
if (lawsuitInfo.breachCaseList && lawsuitInfo.breachCaseList.length > 0) {
return {
level: "high",
text: "高风险",
color: "text-red-600 bg-red-50",
};
}
// 限高被执行人是最高风险
if (
lawsuitInfo.consumptionRestrictionList &&
lawsuitInfo.consumptionRestrictionList.length > 0
) {
return {
level: "high",
text: "高风险",
color: "text-red-600 bg-red-50",
};
}
// 有涉诉数据的风险级别
if (
lawsuitInfo.lawsuitStat &&
Object.keys(lawsuitInfo.lawsuitStat).length > 0
) {
// 检查是否有未结案的案件
const data = lawsuitInfo.lawsuitStat;
if (
data.count &&
data.count.count_wei_total &&
data.count.count_wei_total > 0
) {
return {
level: "medium",
text: "中风险",
color: "text-amber-600 bg-amber-50",
};
}
// 只有已结案的为低中风险
return {
level: "low-medium",
text: "低中风险",
color: "text-yellow-600 bg-yellow-50",
};
}
return { return {
level: 'low', level: "low",
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
} };
} };
// 失信被执行人是最高风险
if (lawsuitInfo.breachCaseList && lawsuitInfo.breachCaseList.length > 0) {
return {
level: 'high',
text: '高风险',
color: 'text-red-600 bg-red-50',
}
}
// 限高被执行人是最高风险
if (lawsuitInfo.consumptionRestrictionList && lawsuitInfo.consumptionRestrictionList.length > 0) {
return {
level: 'high',
text: '高风险',
color: 'text-red-600 bg-red-50',
}
}
// 有涉诉数据的风险级别
if (lawsuitInfo.lawsuitStat && Object.keys(lawsuitInfo.lawsuitStat).length > 0) {
// 检查是否有未结案的案件
const data = lawsuitInfo.lawsuitStat
if (data.count && data.count.count_wei_total && data.count.count_wei_total > 0) {
return {
level: 'medium',
text: '中风险',
color: 'text-amber-600 bg-amber-50',
}
}
// 只有已结案的为低中风险
return {
level: 'low-medium',
text: '低中风险',
color: 'text-yellow-600 bg-yellow-50',
}
}
return {
level: 'low',
text: '低风险',
color: 'text-green-600 bg-green-50',
}
}
// 获取涉诉案件统计 // 获取涉诉案件统计
export const getLawsuitStats = lawsuitInfo => { export const getLawsuitStats = (lawsuitInfo) => {
if (!lawsuitInfo) return null if (!lawsuitInfo) return null;
const stats = { const stats = {
total: 0, total: 0,
types: [], types: [],
} };
// 统计各类型案件数量 // 统计各类型案件数量
Object.keys(lawsuitTypeMap).forEach(type => { Object.keys(lawsuitTypeMap).forEach((type) => {
let count = 0 let count = 0;
if (type === 'breachCase') { if (type === "breachCase") {
count = lawsuitInfo.breachCaseList && lawsuitInfo.breachCaseList.length > 0 ? lawsuitInfo.breachCaseList.length : 0 count =
} else if (type === 'consumptionRestriction') { lawsuitInfo.breachCaseList &&
count = lawsuitInfo.consumptionRestrictionList && lawsuitInfo.consumptionRestrictionList.length > 0 ? lawsuitInfo.consumptionRestrictionList.length : 0 lawsuitInfo.breachCaseList.length > 0
} else if (lawsuitInfo.lawsuitStat && lawsuitInfo.lawsuitStat[type] && Object.keys(lawsuitInfo.lawsuitStat[type]).length > 0) { ? lawsuitInfo.breachCaseList.length
const typeData = lawsuitInfo.lawsuitStat[type] : 0;
count = typeData.cases && typeData.cases.length ? typeData.cases.length : 0 } else if (type === "consumptionRestriction") {
} count =
lawsuitInfo.consumptionRestrictionList &&
lawsuitInfo.consumptionRestrictionList.length > 0
? lawsuitInfo.consumptionRestrictionList.length
: 0;
} else if (
lawsuitInfo.lawsuitStat &&
lawsuitInfo.lawsuitStat[type] &&
Object.keys(lawsuitInfo.lawsuitStat[type]).length > 0
) {
const typeData = lawsuitInfo.lawsuitStat[type];
count =
typeData.cases && typeData.cases.length
? typeData.cases.length
: 0;
}
if (count > 0) { if (count > 0) {
stats.total += count stats.total += count;
stats.types.push({ stats.types.push({
type, type,
count, count,
name: getCaseTypeText(type), name: getCaseTypeText(type),
color: getCaseTypeColor(type), color: getCaseTypeColor(type),
darkColor: getCaseTypeDarkColor(type), darkColor: getCaseTypeDarkColor(type),
}) });
} }
}) });
return stats return stats;
} };
// 获取案件类型优先级顺序 // 获取案件类型优先级顺序
export const getCaseTypePriority = () => { export const getCaseTypePriority = () => {
return [ return [
'breachCase', // 失信被执行人(最高风险) "breachCase", // 失信被执行人(最高风险)
'consumptionRestriction', // 限高被执行人 "consumptionRestriction", // 限高被执行人
'criminal', // 刑事案件 "criminal", // 刑事案件
'civil', // 民事案件 "civil", // 民事案件
'administrative', // 行政案件 "administrative", // 行政案件
'implement', // 执行案件 "implement", // 执行案件
'bankrupt', // 强制清算与破产案件 "bankrupt", // 强制清算与破产案件
'preservation', // 非诉保全审查 "preservation", // 非诉保全审查
] ];
} };
// 根据案件类型获取风险等级 // 根据案件类型获取风险等级
export const getCaseTypeRiskLevel = caseType => { export const getCaseTypeRiskLevel = (caseType) => {
const typeInfo = lawsuitTypeMap[caseType] const typeInfo = lawsuitTypeMap[caseType];
if (!typeInfo) { if (!typeInfo) {
return { return {
level: 'low', level: "low",
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
};
} }
}
const riskLevelMap = { const riskLevelMap = {
high: { high: {
text: '高风险', text: "高风险",
color: 'text-red-600 bg-red-50', color: "text-red-600 bg-red-50",
}, },
medium: { medium: {
text: '中风险', text: "中风险",
color: 'text-amber-600 bg-amber-50', color: "text-amber-600 bg-amber-50",
}, },
low: { low: {
text: '低风险', text: "低风险",
color: 'text-green-600 bg-green-50', color: "text-green-600 bg-green-50",
}, },
} };
return {
level: typeInfo.riskLevel,
...riskLevelMap[typeInfo.riskLevel],
}
}
return {
level: typeInfo.riskLevel,
...riskLevelMap[typeInfo.riskLevel],
};
};

View File

@@ -0,0 +1,211 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="基础信息与近期行为比例" />
<!-- 查贷比柱状图 -->
<div class="h-64 px-2 mb-4">
<v-chart class="chart-container" :option="ratioChartOption" autoresize />
</div>
<div class="px-4 pb-4 space-y-4">
<!-- 基础信息 -->
<div>
<LTitle title="基础信息" />
<div class="mt-4 border border-gray-200 rounded-lg overflow-hidden">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
指标</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in basicInfoRows" :key="row.label"
:class="['grid grid-cols-2 text-base', idx < basicInfoRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
{{ row.value }}</div>
</div>
</div>
</div>
</div>
<!-- 近期查贷比查验次数 / 借款次数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
指标</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in ratioRows" :key="row.label"
:class="['grid grid-cols-2 text-base', idx < ratioRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
{{ formatRatio(row.value) }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 基础信息与查贷比解读 -->
<Remark :content="basicInfoRemark" title="报告解读" :default-expanded="true" />
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { normalizeValue, getBasicInfoRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const data = computed(() => props.data || {})
const flagText = computed(() => {
const v = data.value.flag
if (v === 1 || v === '1') return '查得'
if (v === 0 || v === '0') return '查无'
return '-'
})
const flagDbText = computed(() => {
const v = data.value.flagdb
if (v === 1 || v === '1') return '库有'
if (v === 0 || v === '0') return '库无'
return '-'
})
// 基础信息数据行
const basicInfoRows = computed(() => {
const v = data.value
return [
{ label: '查得标识', value: flagText.value },
{ label: '库有标识', value: flagDbText.value },
{ label: '历史银行卡数', value: normalizeValue(v.ppcm_history_cardnum) },
{ label: '当前活跃银行卡数', value: normalizeValue(v.ppcm_recent_cardnum) },
{ label: '历史手机号数', value: normalizeValue(v.ppcm_history_cellnum) },
{ label: '当前活跃手机号数', value: normalizeValue(v.ppcm_recent_cellnum) }
]
})
const ratioRows = computed(() => {
const v = data.value
return [
{ label: '近1个月查贷比', value: normalizeValue(v.ppcm_m1_qy_rep_ratio) },
{ label: '近3个月查贷比', value: normalizeValue(v.ppcm_m3_qy_rep_ratio) },
{ label: '近6个月查贷比', value: normalizeValue(v.ppcm_m6_qy_rep_ratio) },
{ label: '近1年查贷比', value: normalizeValue(v.ppcm_m12_qy_rep_ratio) }
]
})
const formatRatio = (v) => {
if (!v) return '-'
return v.toFixed ? v.toFixed(2) : v
}
// 查贷比柱状图配置
const ratioChartOption = computed(() => {
const labels = ratioRows.value.map(r => r.label)
const values = ratioRows.value.map(r => r.value || 0)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter(params) {
const p = params[0]
if (!p) return ''
return `${p.name}<br/>查贷比:${formatRatio(p.value)}`
}
},
grid: {
left: '6%',
right: '6%',
top: 20,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '查贷比',
type: 'bar',
data: values,
barWidth: '35%',
barMinHeight: 3,
itemStyle: {
color: '#2B79EE',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 基础信息与查贷比解读
const basicInfoRemark = computed(() => getBasicInfoRemark(data.value))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,114 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="余额不足导致还款失败占比" />
<div class="h-64 px-2">
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 余额不足占比解读 -->
<Remark :content="insufficientRatioRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { PERIODS, getInsufficientRatioByPeriod, getInsufficientRatioRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const chartOption = computed(() => {
const ratio = getInsufficientRatioByPeriod(props.data || {})
const labels = PERIODS.map(p => p.label)
const values = PERIODS.map(p => (ratio[p.key] || 0) * 100)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter(params) {
const p = params[0]
return `${p.name}<br/>余额不足失败占比:${p.value.toFixed(2)}%`
}
},
grid: {
left: '6%',
right: '6%',
top: 20,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value}%'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '余额不足失败占比',
type: 'bar',
data: values,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#F97316',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 余额不足占比解读
const insufficientRatioRemark = computed(() => getInsufficientRatioRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,329 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="借款与逾期概览" />
<!-- 借款次数汇总图 -->
<div class="h-64 px-2 mb-4">
<v-chart class="chart-container" :option="loanChartOption" autoresize />
</div>
<!-- 逾期次数汇总图 -->
<div class="h-64 px-2 mb-4">
<v-chart class="chart-container" :option="overdueChartOption" autoresize />
</div>
<div class="mb-4 mt-4 space-y-4">
<!-- 借款次数 / 机构数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-6 text-sm">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">消费金融
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">其他机构
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">总次数
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in loanRows" :key="row.key"
:class="['grid grid-cols-6 text-base', idx < loanRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.bank }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.fin }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.other }}</div>
<div
class="py-3 text-center text-[#333333] font-semibold border-r border-gray-200 whitespace-nowrap">
{{ row.total }}</div>
<div class="py-3 text-center text-[#333333] whitespace-nowrap">{{ row.orgTotal }}</div>
</div>
</div>
</div>
</div>
<!-- 借款等级 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">综合借款等级</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in loanAmtRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < loanAmtRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.amt
}}</div>
</div>
</div>
</div>
</div>
<!-- 逾期次数与等级 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-4 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">逾期次数
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">
逾期机构数</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">逾期等级</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in overdueRows" :key="row.key"
:class="['grid grid-cols-4 text-base', idx < overdueRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.num }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.org }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
row.level }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 借款与逾期概览解读 -->
<Remark :content="loanAndOverdueRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue, getLoanAndOverdueRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
// 借款次数与机构数
const loanRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
bank: normalizeValue(v[`${prefix}_bank_loannum`]),
fin: normalizeValue(v[`${prefix}_nbank_fin_loannum`]),
other: normalizeValue(v[`${prefix}_nbank_other_loannum`]),
total: normalizeValue(v[`${prefix}_loannum`]),
orgTotal: normalizeValue(v[`${prefix}_loanorg`])
}
})
})
// 借款等级 ppcm_{period}_loanamt
const loanAmtRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
amt: normalizeValue(v[`${prefix}_loanamt`])
}
})
})
// 逾期次数 / 机构数 / 等级
const overdueRows = computed(() => {
const v = props.data || {}
const periodKeys = ['d7', 'm1', 'm3', 'm6', 'm12', 'm24']
const labelMap = {
d7: '近7天',
m1: '近1个月',
m3: '近3个月',
m6: '近6个月',
m12: '近1年',
m24: '近2年'
}
return periodKeys.map(key => {
const prefix = `ppcm_${key}`
return {
key,
label: labelMap[key],
num: normalizeValue(v[`${prefix}_overnum`]),
org: normalizeValue(v[`${prefix}_overorg`]),
level: normalizeValue(v[`${prefix}_overamt`])
}
})
})
// 借款次数汇总柱状图(总借款次数)
const loanChartOption = computed(() => {
const labels = PERIODS.map(p => p.label)
const totals = loanRows.value.map(r => r.total)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
top: 20,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '总借款次数',
type: 'bar',
data: totals,
barWidth: '35%',
barMinHeight: 3,
itemStyle: {
color: '#60A5FA',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 逾期次数汇总柱状图
const overdueChartOption = computed(() => {
const labels = overdueRows.value.map(r => r.label)
const nums = overdueRows.value.map(r => r.num)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
top: 20,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '逾期次数',
type: 'bar',
data: nums,
barWidth: '35%',
barMinHeight: 3,
itemStyle: {
color: '#F97316',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 借款与逾期概览解读
const loanAndOverdueRemark = computed(() => getLoanAndOverdueRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,259 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="查验行为概览(次数 / 机构数 / 天数)" />
<!-- 查验次数图表 -->
<div class="h-64 px-2 mb-4">
<v-chart class="chart-container" :option="countChartOption" autoresize />
</div>
<div class="mb-4 mt-4 space-y-4">
<!-- 查验次数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-5 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">消费金融
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">其他机构
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">总次数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryCountRows" :key="row.key"
:class="['grid grid-cols-5 text-base', idx < queryCountRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.bank }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.fin }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.other }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
row.total }}</div>
</div>
</div>
</div>
</div>
<!-- 查验机构数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-5 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">消费金融
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">其他机构
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">总机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryOrgRows" :key="row.key"
:class="['grid grid-cols-5 text-base', idx < queryOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.bank }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.fin }}</div>
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
{{ row.other }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
row.total }}</div>
</div>
</div>
</div>
</div>
<!-- 查验天数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">查验天数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryDayRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < queryDayRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.days
}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 查验行为概览解读 -->
<Remark :content="queryOverviewRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue, getQueryOverviewRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
// 查验次数
const queryCountRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
bank: normalizeValue(v[`${prefix}_bank_qynum`]),
fin: normalizeValue(v[`${prefix}_nbank_fin_qynum`]),
other: normalizeValue(v[`${prefix}_nbank_other_qynum`]),
total: normalizeValue(v[`${prefix}_qynum`])
}
})
})
// 查验次数汇总柱状图(总次数)
const countChartOption = computed(() => {
const labels = PERIODS.map(p => p.label)
const totals = queryCountRows.value.map(r => r.total)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
top: 20,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '总查验次数',
type: 'bar',
data: totals,
barWidth: '35%',
barMinHeight: 3,
itemStyle: {
color: '#2B79EE',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 查验机构数
const queryOrgRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
bank: normalizeValue(v[`${prefix}_bank_qyorg`]),
fin: normalizeValue(v[`${prefix}_nbank_fin_qyorg`]),
other: normalizeValue(v[`${prefix}_nbank_other_qyorg`]),
total: normalizeValue(v[`${prefix}_qyorg`])
}
})
})
// 查验天数
const queryDayRows = computed(() => {
const v = props.data || {}
const dayKeys = ['m1', 'm3', 'm6', 'm12', 'm24']
const labelMap = {
m1: '近1个月',
m3: '近3个月',
m6: '近6个月',
m12: '近1年',
m24: '近2年'
}
return dayKeys.map(key => {
const prefix = `ppcm_${key}`
return {
key,
label: labelMap[key],
days: normalizeValue(v[`${prefix}_qyday`])
}
})
})
// 查验行为概览解读
const queryOverviewRemark = computed(() => getQueryOverviewRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

View File

@@ -0,0 +1,141 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="查验次数时间分布" />
<div class="h-64 px-2">
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 查验次数解读 -->
<Remark :content="queryTrendRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { PERIODS, getQueryCountsByPeriod, getQueryTrendRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const chartOption = computed(() => {
const counts = getQueryCountsByPeriod(props.data || {})
const labels = PERIODS.map(p => p.label)
const bankData = PERIODS.map(p => counts[p.key]?.bank || 0)
const finData = PERIODS.map(p => counts[p.key]?.nbankFin || 0)
const otherData = PERIODS.map(p => counts[p.key]?.nbankOther || 0)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 16,
color: '#4b5563'
}
},
grid: {
left: '3%',
right: '4%',
top: '30%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '银行查验次数',
type: 'bar',
data: bankData,
barWidth: '25%',
barMinHeight: 3,
itemStyle: {
color: '#2B79EE',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '消费金融查验次数',
type: 'bar',
data: finData,
barWidth: '25%',
barMinHeight: 3,
itemStyle: {
color: '#60A5FA',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '其他机构查验次数',
type: 'bar',
data: otherData,
barWidth: '25%',
barMinHeight: 3,
itemStyle: {
color: '#A855F7',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 查验次数解读
const queryTrendRemark = computed(() => getQueryTrendRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,111 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="还款失败次数趋势" />
<div class="h-64 px-2">
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 还款失败次数解读 -->
<Remark :content="repayFailRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { PERIODS, getRepayCountsByPeriod, getRepayFailRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const chartOption = computed(() => {
const counts = getRepayCountsByPeriod(props.data || {})
const labels = PERIODS.map(p => p.label)
const failData = PERIODS.map(p => counts[p.key]?.fail || 0)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
top: 24,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '还款失败次数',
type: 'bar',
data: failData,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#F97316',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 还款失败次数解读
const repayFailRemark = computed(() => getRepayFailRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,241 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="还款机构数与等级概览" />
<!-- 还款成功 / 失败机构数对比图 -->
<div class="h-64 px-2 mb-4">
<v-chart class="chart-container" :option="orgChartOption" autoresize />
</div>
<div class="mb-4 mt-4 space-y-4">
<!-- 还款成功机构数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in successOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < successOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
</div>
</div>
</div>
</div>
<!-- 还款失败机构数 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in failOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < failOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
</div>
</div>
</div>
</div>
<!-- 还款成功 / 失败等级综合 -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-3 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">成功等级</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">失败等级</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in levelRows" :key="row.key"
:class="['grid grid-cols-3 text-base', idx < levelRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">{{ row.succ
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.fail }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 还款机构数与等级解读 -->
<Remark :content="repayOrgAndLevelRemark" title="报告解读" :default-expanded="true" />
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue, getRepayOrgAndLevelRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
// 还款成功机构数 ppcm_{period}_succ_reporg
const successOrgRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
value: normalizeValue(v[`${prefix}_succ_reporg`])
}
})
})
// 还款失败机构数 ppcm_{period}_fail_reporg
const failOrgRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
value: normalizeValue(v[`${prefix}_fail_reporg`])
}
})
})
// 还款成功 / 失败等级 ppcm_{period}_succ_repamt / fail_repamt
const levelRows = computed(() => {
const v = props.data || {}
return PERIODS.map(p => {
const prefix = `ppcm_${p.key}`
return {
key: p.key,
label: p.label,
succ: normalizeValue(v[`${prefix}_succ_repamt`]),
fail: normalizeValue(v[`${prefix}_fail_repamt`])
}
})
})
// 成功 / 失败机构数对比图
const orgChartOption = computed(() => {
const labels = PERIODS.map(p => p.label)
const succ = successOrgRows.value.map(r => r.value)
const fail = failOrgRows.value.map(r => r.value)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 16,
color: '#4b5563'
}
},
grid: {
left: '3%',
right: '4%',
top: '15%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 家'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '还款成功机构数',
type: 'bar',
data: succ,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#34D399',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '还款失败机构数',
type: 'bar',
data: fail,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#F97316',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 还款机构数与等级解读
const repayOrgAndLevelRemark = computed(() => getRepayOrgAndLevelRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,111 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="还款成功次数趋势" />
<div class="h-64 px-2">
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 还款成功次数解读 -->
<Remark :content="repaySuccessRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { PERIODS, getRepayCountsByPeriod, getRepaySuccessRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const chartOption = computed(() => {
const counts = getRepayCountsByPeriod(props.data || {})
const labels = PERIODS.map(p => p.label)
const successData = PERIODS.map(p => counts[p.key]?.success || 0)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
top: 24,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '还款成功次数',
type: 'bar',
data: successData,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#34D399',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
// 还款成功次数解读
const repaySuccessRemark = computed(() => getRepaySuccessRemark(props.data || {}))
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,124 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="mt-4">
<LTitle title="还款成功 / 失败次数趋势" />
<div class="h-64 px-2">
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
}
})
const chartOption = computed(() => {
const counts = getRepayCountsByPeriod(props.data || {})
const labels = PERIODS.map(p => p.label)
const successData = PERIODS.map(p => counts[p.key]?.success || 0)
const failData = PERIODS.map(p => counts[p.key]?.fail || 0)
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 16,
color: '#4b5563'
}
},
grid: {
left: '3%',
right: '4%',
top: 24,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: labels,
axisLabel: {
fontSize: 16,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '还款成功次数',
type: 'bar',
data: successData,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#34D399',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '还款失败次数',
type: 'bar',
data: failData,
barWidth: '30%',
barMinHeight: 3,
itemStyle: {
color: '#F97316',
borderRadius: [4, 4, 0, 0]
}
}
]
}
})
</script>
<style scoped>
.card {
background: #ffffff;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>

View File

@@ -0,0 +1,78 @@
<template>
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="flex items-center justify-between px-4 pt-4 pb-2">
<div>
<div class="text-base text-gray-500">支付行为评分</div>
<div class="flex items-baseline gap-2 mt-1">
<span class="text-3xl font-bold text-[#111827]">
{{ scoreDisplay }}
</span>
<span class="text-base text-gray-400"></span>
<span
class="inline-flex items-center px-2 py-0.5 rounded-full text-base"
:class="levelClass"
>
{{ level }}
</span>
</div>
</div>
<div class="text-right text-base text-gray-500 max-w-[11rem] leading-relaxed">
分数基于近两年查验及还款行为综合评估分数越高代表支付行为越稳定违约风险越低
</div>
</div>
<div class="px-4 pb-4 text-base text-gray-500">
最近一次查验距今天数
<span class="font-medium text-[#111827]">{{ latestQueryText }}</span>
</div>
<!-- 评分解读 -->
<Remark :content="scoreRemark" title="评分解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import Remark from '@/components/Remark.vue'
import { getBehavLevel, mapScoreTo100, getScoreRemark } from '../utils/dataParser'
const props = defineProps({
score: {
type: Number,
default: 0
},
latestQueryText: {
type: String,
default: '暂无查验记录'
}
})
const scoreDisplay = computed(() => (props.score > 0 ? props.score : '--'))
const level = computed(() => getBehavLevel(props.score))
// 评分解读
const scoreRemark = computed(() => getScoreRemark(props.score, level.value))
// 按等级给不同颜色
const levelClass = computed(() => {
const mapped = mapScoreTo100(props.score)
if (mapped >= 85) {
return 'bg-emerald-50 text-emerald-600'
}
if (mapped >= 70) {
return 'bg-blue-50 text-blue-600'
}
if (mapped >= 55) {
return 'bg-amber-50 text-amber-600'
}
return 'bg-red-50 text-red-600'
})
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

105
src/ui/JRZQ3C9R/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div class="flex flex-col gap-4">
<!-- 评分卡片 -->
<ScoreSection
:score="behavScore"
:latest-query-text="latestQueryText"
/>
<!-- 查验次数时间分布 -->
<QueryTrendSection :data="ppcmData" />
<!-- 查验次数 / 机构数 / 天数表格概览 -->
<QueryOverviewSection :data="ppcmData" />
<!-- 还款成功次数趋势 -->
<RepaySuccessTrendSection :data="ppcmData" />
<!-- 还款失败次数趋势 -->
<RepayFailTrendSection :data="ppcmData" />
<!-- 余额不足导致还款失败占比 -->
<InsufficientRatioSection :data="ppcmData" />
<!-- 还款机构数与等级 -->
<RepayOrgAndLevelSection :data="ppcmData" />
<!-- 借款与逾期概览 -->
<LoanAndOverdueSection :data="ppcmData" />
<!-- 基础信息与查贷比 -->
<BasicInfoSection :data="ppcmData" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
import {
extractPpcmData,
getBehavScore,
getLatestQueryBucket,
mapScoreTo100
} from './utils/dataParser'
import ScoreSection from './components/ScoreSection.vue'
import QueryTrendSection from './components/QueryTrendSection.vue'
import QueryOverviewSection from './components/QueryOverviewSection.vue'
import RepaySuccessTrendSection from './components/RepaySuccessTrendSection.vue'
import RepayFailTrendSection from './components/RepayFailTrendSection.vue'
import InsufficientRatioSection from './components/InsufficientRatioSection.vue'
import RepayOrgAndLevelSection from './components/RepayOrgAndLevelSection.vue'
import LoanAndOverdueSection from './components/LoanAndOverdueSection.vue'
import BasicInfoSection from './components/BasicInfoSection.vue'
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({})
},
apiId: {
type: String,
default: ''
},
index: {
type: Number,
default: 0
},
notifyRiskStatus: {
type: Function,
default: () => {}
}
})
// 原始数据:可能是 { code,data } 或 { data:{code,data} }
const rawData = computed(() => props.data?.data || props.data || {})
// 提取 ppcm 指标对象
const ppcmData = computed(() => extractPpcmData(rawData.value))
// 原始行为评分300-900
const behavScore = computed(() => getBehavScore(ppcmData.value))
// 最近一次查验距今天数说明
const latestQueryText = computed(() => getLatestQueryBucket(ppcmData.value))
// 将评分映射到 0-100 分,用于统一风险分
const riskScore = computed(() => {
return mapScoreTo100(behavScore.value)
})
// 通知父组件风险评分
useRiskNotifier(props, riskScore)
defineExpose({
riskScore
})
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

View File

@@ -0,0 +1,430 @@
/**
* 支付行为指数JRZQ3C9R数据解析工具
*/
/**
* 将 -1 / 空 / null 统一视为 0其他数值转为 Number
*/
export function normalizeValue(value) {
if (value === undefined || value === null || value === "" || value === -1) {
return 0;
}
const num = Number(value);
return Number.isNaN(num) ? 0 : num;
}
/**
* 从原始 data 中提取真正的指标对象
* 兼容多种包裹结构:
* - { code, data: {...} }
* - { data: { code, data: {...} } }
*/
export function extractPpcmData(raw) {
if (!raw) return {};
// example.json 结构data.data.data
if (raw.data && raw.data.data) {
return raw.data.data || {};
}
// 已经是 { code, data } 这一层
if (raw.data && !raw.code) {
return raw.data || {};
}
return raw || {};
}
/**
* 获取支付行为评分(原始 300-900 分)
*/
export function getBehavScore(ppcm) {
const score = normalizeValue(ppcm.ppcm_behav_score);
return score;
}
/**
* 将 300-900 分映射到 0-100 分(用于统一风险评分体系)
*/
export function mapScoreTo100(score) {
if (!score || score <= 0) {
return 100;
}
// 限制在 [300,900]
const clamped = Math.min(900, Math.max(300, score));
// 300 -> 0, 900 -> 100
const mapped = ((clamped - 300) / 600) * 100;
return Math.round(mapped);
}
/**
* 支付行为评分等级标签
*/
export function getBehavLevel(score) {
if (!score || score <= 0) return "暂无评分";
if (score >= 800) return "优秀";
if (score >= 750) return "良好";
if (score >= 700) return "中等";
if (score >= 650) return "一般";
return "偏低";
}
/**
* 通用时间段
*/
export const PERIODS = [
{ key: "d7", label: "近7天" },
{ key: "m1", label: "近1个月" },
{ key: "m3", label: "近3个月" },
{ key: "m6", label: "近6个月" },
{ key: "m12", label: "近1年" },
{ key: "m24", label: "近2年" },
];
/**
* 获取查验次数统计(按时间段)
* ppcm_{period}_bank_qynum / _nbank_fin_qynum / _nbank_other_qynum / _qynum
*/
export function getQueryCountsByPeriod(ppcm) {
const result = {};
PERIODS.forEach((p) => {
const prefix = `ppcm_${p.key}`;
result[p.key] = {
bank: normalizeValue(ppcm[`${prefix}_bank_qynum`]),
nbankFin: normalizeValue(ppcm[`${prefix}_nbank_fin_qynum`]),
nbankOther: normalizeValue(ppcm[`${prefix}_nbank_other_qynum`]),
total: normalizeValue(ppcm[`${prefix}_qynum`]),
};
});
return result;
}
/**
* 获取还款成功 / 失败次数统计(按时间段)
* successppcm_{period}_succ_repnum
* failppcm_{period}_fail_repnum
*/
export function getRepayCountsByPeriod(ppcm) {
const result = {};
PERIODS.forEach((p) => {
const prefix = `ppcm_${p.key}`;
result[p.key] = {
success: normalizeValue(ppcm[`${prefix}_succ_repnum`]),
fail: normalizeValue(ppcm[`${prefix}_fail_repnum`]),
};
});
return result;
}
/**
* 获取余额不足失败占比(按时间段)
* ppcm_{period}_fail_neh_repnum_ratio
*/
export function getInsufficientRatioByPeriod(ppcm) {
const result = {};
PERIODS.forEach((p) => {
const prefix = `ppcm_${p.key}`;
result[p.key] = normalizeValue(ppcm[`${prefix}_fail_neh_repnum_ratio`]);
});
return result;
}
/**
* 解析最近一次查验距今天数区间编码
* ppcm_latest_qytoday: 1-10 档位
*/
export function getLatestQueryBucket(ppcm) {
const code = normalizeValue(ppcm.ppcm_latest_qytoday);
if (!code) return "暂无查验记录";
const mapping = {
1: "0-7天",
2: "7-15天",
3: "15-30天",
4: "30-60天",
5: "60-90天",
6: "90-120天",
7: "120-150天",
8: "150-180天",
9: "180-360天",
10: "360天以上",
};
return mapping[code] || "未知区间";
}
/**
* 生成各 card 的解读文本
*/
/**
* 支付行为评分解读(数据解读 + 意思解读)
*/
export function getScoreRemark(score, level) {
if (!score || score <= 0) {
return "暂无支付行为评分数据。\n\n【数据解读】评分基于近两年查验及还款行为综合评估分数越高代表支付行为越稳定、违约风险越低。\n\n【意思解读】支付行为评分是机构评估您还款能力和信用状况的重要指标。评分越高说明您的还款履约记录越好机构对您的信任度越高未来申请贷款或信用卡时更容易获得批准和更优惠的利率。";
}
let dataRemark = `【数据解读】您的支付行为评分为 ${score} 分,等级为"${level}"。`;
let meaningRemark = "";
if (score >= 800) {
dataRemark += "您的支付行为表现优秀,还款履约能力强,违约风险极低。";
meaningRemark = "【意思解读】优秀评分表明您有非常稳定的还款记录和良好的资金管理能力。这意味着机构认为您是低风险客户,在申请贷款、信用卡等金融产品时更容易获得批准,且可能享受更优惠的利率和更高的额度。继续保持这种良好的支付习惯,有助于维护和提升您的信用价值。";
} else if (score >= 750) {
dataRemark += "您的支付行为表现良好,还款履约能力较强,违约风险较低。";
meaningRemark = "【意思解读】良好评分说明您的还款记录稳定,机构对您的信任度较高。这有助于您在申请金融产品时获得较好的审批结果。建议继续保持良好的支付习惯,避免逾期,可以进一步提升评分等级。";
} else if (score >= 700) {
dataRemark += "您的支付行为表现中等,还款履约能力一般,违约风险适中。";
meaningRemark = "【意思解读】中等评分表示您的还款记录存在一定波动,机构可能会对您的申请进行更严格的审核。建议注意按时还款,减少还款失败的情况,提高支付稳定性,这将有助于提升您的评分和信用价值。";
} else if (score >= 650) {
dataRemark += "您的支付行为表现一般,还款履约能力有待提升,违约风险偏高。";
meaningRemark = "【意思解读】一般评分表明您的还款记录不够稳定,可能存在逾期或还款失败的情况。这会导致机构对您的信任度降低,在申请金融产品时可能面临更严格的审核或被拒绝。建议加强还款管理,提前准备还款资金,避免逾期,逐步改善支付行为。";
} else {
dataRemark += "您的支付行为表现偏低,还款履约能力较弱,违约风险较高。";
meaningRemark = "【意思解读】偏低评分表明您的还款记录存在较多问题,如频繁逾期、还款失败等。这会导致机构认为您的违约风险较高,在申请贷款、信用卡等金融产品时很可能被拒绝,即使获批也可能面临更高的利率和更低的额度。建议重点关注还款情况,及时处理逾期问题,制定还款计划,逐步改善支付行为,提升信用评分。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 查验次数时间分布解读(数据解读 + 意思解读)
*/
export function getQueryTrendRemark(ppcm) {
const counts = getQueryCountsByPeriod(ppcm);
const m12Total = counts.m12?.total || 0;
const m3Total = counts.m3?.total || 0;
const bankTotal = counts.m12?.bank || 0;
const finTotal = counts.m12?.nbankFin || 0;
const otherTotal = counts.m12?.nbankOther || 0;
let dataRemark = `【数据解读】近一年查验总次数:${m12Total}次,其中银行查验${bankTotal}次,消费金融查验${finTotal}次,其他机构查验${otherTotal}次。近3个月查验次数${m3Total}次。`;
let meaningRemark = "";
if (m12Total === 0) {
dataRemark += "暂无查验记录。";
meaningRemark = "【意思解读】无查验记录可能表示近期无相关机构查询您的支付行为数据,或者您近期没有申请相关金融产品。这通常意味着您的信用活动较少,但也可能表示您的信用记录不够活跃。";
} else if (m12Total <= 5) {
dataRemark += "查验次数较少。";
meaningRemark = "【意思解读】查验次数较少说明机构对您的支付行为关注度较低,整体风险可控。这可能是因为您的还款记录良好,机构认为风险较低,或者您的信用活动较少。较低的查验频率通常对信用评分影响较小。";
} else if (m12Total <= 15) {
dataRemark += "查验次数适中。";
meaningRemark = "【意思解读】查验次数适中说明机构对您的支付行为保持正常关注。这通常发生在您有正常的金融活动时,如申请贷款、信用卡等。适度的查验是正常的信用评估过程,不会对您的信用产生负面影响。";
} else {
dataRemark += "查验次数较多。";
meaningRemark = "【意思解读】查验次数较多可能表示机构对您的支付行为关注度较高,这可能是因为您近期有较多的金融申请活动,或者机构需要更频繁地评估您的信用状况。频繁的查验虽然不会直接降低您的信用评分,但可能反映出机构对您的风险关注。建议关注自身还款情况,保持良好的支付记录,减少不必要的金融申请。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 查验行为概览解读(数据解读 + 意思解读)
*/
export function getQueryOverviewRemark(ppcm) {
const m12Count = normalizeValue(ppcm.ppcm_m12_qynum);
const m12Org = normalizeValue(ppcm.ppcm_m12_qyorg);
const m12Day = normalizeValue(ppcm.ppcm_m12_qyday);
let dataRemark = `【数据解读】近一年查验行为概览:查验次数${m12Count}次,涉及机构${m12Org}家,查验天数${m12Day}天。`;
let meaningRemark = "";
if (m12Count === 0) {
dataRemark += "暂无查验记录。";
meaningRemark = "【意思解读】无查验记录表示近期没有机构查询您的支付行为数据。这可能意味着您的信用活动较少,或者没有申请相关金融产品。虽然不会对信用产生负面影响,但信用记录的活跃度也是评估因素之一。";
} else {
const avgPerDay = m12Day > 0 ? (m12Count / m12Day).toFixed(2) : 0;
dataRemark += `平均每天查验${avgPerDay}次。`;
if (m12Org > 0 && m12Count / m12Org > 3) {
dataRemark += "单机构查验频率较高。";
meaningRemark = "【意思解读】单机构查验频率较高可能表示该机构对您的信用状况需要更频繁的评估,这可能是因为您与该机构有业务往来,或者该机构在评估您的申请。较高的查验频率通常不会直接影响信用评分,但可能反映出机构对您的关注度。建议关注相关机构的关注原因,保持良好的还款记录。";
} else {
meaningRemark = "【意思解读】查验次数、机构数和天数的组合反映了机构对您信用状况的关注程度。适度的查验是正常的信用评估过程,说明您有正常的金融活动。保持稳定的还款记录,有助于维持良好的信用形象。";
}
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款成功次数趋势解读(数据解读 + 意思解读)
*/
export function getRepaySuccessRemark(ppcm) {
const counts = getRepayCountsByPeriod(ppcm);
const m12Success = counts.m12?.success || 0;
const m3Success = counts.m3?.success || 0;
let dataRemark = `【数据解读】近一年还款成功次数:${m12Success}近3个月还款成功次数${m3Success}次。`;
let meaningRemark = "";
if (m12Success === 0) {
dataRemark += "暂无还款成功记录。";
meaningRemark = "【意思解读】无还款成功记录可能表示您近期没有需要还款的金融产品,或者还款数据尚未更新。如果确实有还款义务,建议确认还款是否成功,避免因还款失败影响信用记录。";
} else if (m12Success >= 20) {
dataRemark += "还款成功次数较多。";
meaningRemark = "【意思解读】还款成功次数较多说明您的还款履约能力较强,支付行为稳定。这表明您有良好的资金管理能力和还款习惯,机构会认为您是可靠的客户。这种稳定的还款记录有助于提升您的信用评分,在申请新的金融产品时更容易获得批准和更优惠的条件。";
} else if (m12Success >= 10) {
dataRemark += "还款成功次数适中。";
meaningRemark = "【意思解读】还款成功次数适中说明您的还款履约能力良好。这表明您能够按时完成还款义务,机构对您的信任度较高。继续保持这种良好的还款习惯,有助于维持和提升您的信用价值。";
} else {
dataRemark += "还款成功次数较少。";
meaningRemark = "【意思解读】还款成功次数较少可能表示您的还款活动不够频繁,或者存在还款失败的情况。如果确实有还款义务,建议关注还款情况,确保按时还款。稳定的还款记录是建立良好信用的基础,频繁的还款成功有助于提升您的信用评分。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款失败次数趋势解读(数据解读 + 意思解读)
*/
export function getRepayFailRemark(ppcm) {
const counts = getRepayCountsByPeriod(ppcm);
const m12Fail = counts.m12?.fail || 0;
const m3Fail = counts.m3?.fail || 0;
let dataRemark = `【数据解读】近一年还款失败次数:${m12Fail}近3个月还款失败次数${m3Fail}次。`;
let meaningRemark = "";
if (m12Fail === 0) {
dataRemark += "无还款失败记录。";
meaningRemark = "【意思解读】无还款失败记录说明您的还款履约能力优秀,支付行为稳定。这表明您有良好的资金管理能力和还款习惯,所有还款都能按时成功完成。这种完美的还款记录会显著提升您的信用评分,机构会认为您是低风险客户,在申请金融产品时更容易获得批准和更优惠的条件。";
} else if (m12Fail <= 2) {
dataRemark += "还款失败次数较少。";
meaningRemark = "【意思解读】还款失败次数较少说明整体还款履约能力良好。偶尔的还款失败可能是由于临时资金紧张或技术原因,但如果频繁发生,可能会影响机构对您的信任度。建议继续保持良好的还款习惯,提前准备还款资金,避免因余额不足等原因导致还款失败。";
} else if (m12Fail <= 5) {
dataRemark += "还款失败次数适中。";
meaningRemark = "【意思解读】还款失败次数适中可能表示您的资金管理存在一定问题,或者还款计划不够合理。频繁的还款失败会导致机构对您的还款能力产生怀疑,可能影响您的信用评分和未来申请金融产品的审批结果。建议关注还款情况,制定合理的还款计划,确保账户有足够资金,避免频繁失败。";
} else {
dataRemark += "还款失败次数较多。";
meaningRemark = "【意思解读】还款失败次数较多表明您的还款履约能力存在问题,可能是资金管理不当、还款计划不合理或账户余额不足等原因。这会导致机构认为您的违约风险较高,严重影响您的信用评分。在申请新的金融产品时很可能被拒绝,即使获批也可能面临更高的利率和更严格的限制。建议重点关注还款管理,及时处理还款问题,制定还款计划,确保账户有足够资金,逐步改善还款行为,避免影响信用记录。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 余额不足导致还款失败占比解读(数据解读 + 意思解读)
*/
export function getInsufficientRatioRemark(ppcm) {
const ratios = getInsufficientRatioByPeriod(ppcm);
const m12Ratio = ratios.m12 || 0;
const m3Ratio = ratios.m3 || 0;
const m12Percent = (m12Ratio * 100).toFixed(2);
const m3Percent = (m3Ratio * 100).toFixed(2);
let dataRemark = `【数据解读】近一年余额不足导致还款失败占比:${m12Percent}%近3个月占比${m3Percent}%。`;
let meaningRemark = "";
if (m12Ratio === 0) {
dataRemark += "无余额不足导致的还款失败。";
meaningRemark = "【意思解读】无余额不足导致的还款失败说明您的账户资金管理良好,能够确保还款时有足够的资金。这表明您有良好的资金规划能力,能够提前准备还款资金。这种良好的资金管理习惯有助于维持稳定的还款记录,提升机构对您的信任度。";
} else if (m12Ratio <= 0.1) {
dataRemark += "余额不足占比很低。";
meaningRemark = "【意思解读】余额不足占比很低说明整体资金管理良好,偶尔的余额不足可能是由于临时资金周转问题。虽然占比很低,但仍需注意,因为即使是偶尔的余额不足也可能导致还款失败,影响信用记录。建议继续保持良好的资金管理习惯,提前准备还款资金。";
} else if (m12Ratio <= 0.3) {
dataRemark += "余额不足占比适中。";
meaningRemark = "【意思解读】余额不足占比适中表明您的资金管理存在一定问题,可能没有提前准备足够的还款资金。这会导致部分还款因余额不足而失败,影响您的还款履约记录。机构可能会认为您的资金管理能力不足,影响信用评分。建议关注账户余额,制定资金规划,确保还款时有足够资金,避免因余额不足导致还款失败。";
} else {
dataRemark += "余额不足占比较高。";
meaningRemark = "【意思解读】余额不足占比较高表明您的资金管理存在严重问题,经常没有足够的资金用于还款。这会导致频繁的还款失败,严重影响您的还款履约记录和信用评分。机构会认为您的资金管理能力不足,违约风险较高,在申请新的金融产品时很可能被拒绝。建议加强资金管理,制定详细的资金规划,提前准备还款资金,建立还款提醒机制,避免因余额不足导致还款失败,逐步改善资金管理习惯。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款机构数与等级解读(数据解读 + 意思解读)
*/
export function getRepayOrgAndLevelRemark(ppcm) {
const m12SuccOrg = normalizeValue(ppcm.ppcm_m12_succ_reporg);
const m12FailOrg = normalizeValue(ppcm.ppcm_m12_fail_reporg);
const m12SuccLevel = normalizeValue(ppcm.ppcm_m12_succ_repamt);
const m12FailLevel = normalizeValue(ppcm.ppcm_m12_fail_repamt);
let dataRemark = `【数据解读】近一年还款成功机构数:${m12SuccOrg}家,还款失败机构数:${m12FailOrg}家。还款成功等级:${m12SuccLevel},还款失败等级:${m12FailLevel}`;
let meaningRemark = "";
if (m12SuccOrg > 0 && m12FailOrg === 0) {
dataRemark += "所有机构还款均成功。";
meaningRemark = "【意思解读】所有机构还款均成功说明您的还款履约能力优秀,能够与多家机构保持良好的还款关系。这表明您有稳定的资金流和良好的还款习惯,机构对您的信任度很高。这种完美的还款记录会显著提升您的信用评分,在申请新的金融产品时更容易获得批准和更优惠的条件。";
} else if (m12SuccOrg > m12FailOrg) {
dataRemark += "还款成功机构数多于失败机构数。";
meaningRemark = "【意思解读】还款成功机构数多于失败机构数说明整体还款履约能力良好,虽然存在部分机构的还款失败,但大部分机构都能成功还款。这表明您有基本的还款能力,但资金管理可能存在一定问题。建议关注失败原因,及时处理还款问题,确保所有机构都能成功还款,进一步提升信用价值。";
} else if (m12FailOrg > 0) {
dataRemark += "存在还款失败机构。";
meaningRemark = "【意思解读】存在还款失败机构表明您的还款履约能力存在问题,可能无法与所有机构保持良好的还款关系。这会导致相关机构对您的信任度降低,可能影响您与该机构的业务往来,甚至影响您的整体信用评分。建议关注失败原因,及时处理还款问题,制定还款计划,确保所有机构都能成功还款,维护良好的信用关系。";
} else {
meaningRemark = "【意思解读】还款机构数和等级反映了您与不同机构的还款关系。成功机构数越多、失败机构数越少,说明您的还款履约能力越强,机构对您的信任度越高。保持良好的还款记录有助于维护和提升您的信用价值。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 借款与逾期概览解读(数据解读 + 意思解读)
*/
export function getLoanAndOverdueRemark(ppcm) {
const m12Loan = normalizeValue(ppcm.ppcm_m12_loannum);
const m12LoanOrg = normalizeValue(ppcm.ppcm_m12_loanorg);
const m12LoanAmt = normalizeValue(ppcm.ppcm_m12_loanamt);
const m12OverNum = normalizeValue(ppcm.ppcm_m12_overnum);
const m12OverOrg = normalizeValue(ppcm.ppcm_m12_overorg);
const m12OverAmt = normalizeValue(ppcm.ppcm_m12_overamt);
let dataRemark = `【数据解读】近一年借款情况:借款次数${m12Loan}次,涉及机构${m12LoanOrg}家,借款等级${m12LoanAmt}。逾期情况:逾期次数${m12OverNum}次,逾期机构数${m12OverOrg}家,逾期等级${m12OverAmt}`;
let meaningRemark = "";
if (m12OverNum === 0) {
dataRemark += "无逾期记录。";
meaningRemark = "【意思解读】无逾期记录说明您的还款履约能力优秀,能够按时完成所有还款义务。这表明您有良好的资金管理能力和还款习惯,机构会认为您是低风险客户。这种完美的还款记录会显著提升您的信用评分,在申请新的金融产品时更容易获得批准和更优惠的条件。借款等级反映了您的借款规模,适度的借款有助于建立信用记录,但过度借款可能增加还款压力。";
} else if (m12OverNum <= 2) {
dataRemark += "逾期次数较少。";
meaningRemark = "【意思解读】逾期次数较少说明整体还款履约能力良好,虽然存在偶尔的逾期,但大部分还款都能按时完成。偶尔的逾期可能是由于临时资金紧张或忘记还款,但如果频繁发生,可能会影响机构对您的信任度。建议继续保持良好的还款习惯,建立还款提醒机制,避免逾期,进一步提升信用价值。";
} else {
dataRemark += "逾期次数较多。";
meaningRemark = "【意思解读】逾期次数较多表明您的还款履约能力存在问题,可能无法按时完成还款义务。这会导致机构认为您的违约风险较高,严重影响您的信用评分。在申请新的金融产品时很可能被拒绝,即使获批也可能面临更高的利率和更严格的限制。逾期记录会在信用报告中保留较长时间,影响您的长期信用价值。建议重点关注还款管理,制定还款计划,提前准备还款资金,及时处理逾期问题,避免影响信用记录。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 基础信息与查贷比解读(数据解读 + 意思解读)
*/
export function getBasicInfoRemark(ppcm) {
const flag = normalizeValue(ppcm.flag);
const flagDb = normalizeValue(ppcm.flagdb);
const m12Ratio = normalizeValue(ppcm.ppcm_m12_qy_rep_ratio);
const flagText = flag === 1 ? "查得" : "查无";
const flagDbText = flagDb === 1 ? "库有" : "库无";
const ratioText = m12Ratio > 0 ? m12Ratio.toFixed(2) : "0";
let dataRemark = `【数据解读】基础信息:查得标识为"${flagText}",库有标识为"${flagDbText}"。近一年查贷比(查验次数/借款次数):${ratioText}`;
let meaningRemark = "";
if (m12Ratio === 0) {
dataRemark += "查贷比为0。";
meaningRemark = "【意思解读】查贷比为0表示无查验或借款记录可能表示您近期没有相关的金融活动。查得标识和库有标识反映了您的信用记录在系统中的存在情况。如果标识为\"查无\"或\"库无\",可能表示您的信用记录不够完整或活跃,建议适当使用金融产品以建立信用记录。";
} else if (m12Ratio <= 1) {
dataRemark += "查贷比较低。";
meaningRemark = "【意思解读】查贷比较低说明查验次数少于或等于借款次数,这表明机构对您的关注度相对较低,整体风险可控。较低的查贷比通常意味着您的借款活动正常,机构不需要频繁查验就能评估您的信用状况。这通常是一个积极的信号,表明您的信用记录稳定,机构对您的信任度较高。";
} else if (m12Ratio <= 3) {
dataRemark += "查贷比适中。";
meaningRemark = "【意思解读】查贷比适中说明查验与借款比例正常,这是正常的信用评估过程。适度的查验是机构评估您信用状况的正常手段,通常发生在您申请金融产品时。这种比例表明您的信用活动正常,机构对您的关注度在合理范围内。";
} else {
dataRemark += "查贷比较高。";
meaningRemark = "【意思解读】查贷比较高说明查验次数明显多于借款次数,可能表示机构对您的关注度较高。这可能是因为您近期有较多的金融申请活动,或者机构需要更频繁地评估您的信用状况。虽然频繁的查验不会直接降低您的信用评分,但可能反映出机构对您的风险关注。建议关注自身信用状况,保持良好的还款记录,减少不必要的金融申请,避免过度查询影响信用形象。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}

View File

@@ -2,7 +2,7 @@
## 组件概述 ## 组件概述
信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人信用过滤。 信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人风险过滤。
## 组件结构 ## 组件结构
@@ -52,28 +52,28 @@ const probeData = {
## 数据字段说明 ## 数据字段说明
| 字段名 | 类型 | 必填 | 描述 | 示例值 | | 字段名 | 类型 | 必填 | 描述 | 示例值 |
|-------|------|------|------|--------| | ----------------------- | ------ | ---- | -------------- | ----------- |
| result_code | String | 否 | 探查结果编码 | "1" | | result_code | String | 否 | 探查结果编码 | "1" |
| max_overdue_amt | String | 否 | 最大逾期金额 | "1000-2000" | | max_overdue_amt | String | 否 | 最大逾期金额 | "1000-2000" |
| max_overdue_days | String | 否 | 最长逾期天数 | "1-15" | | max_overdue_days | String | 否 | 最长逾期天数 | "1-15" |
| latest_overdue_time | String | 否 | 最近逾期时间 | "2018-10" | | latest_overdue_time | String | 否 | 最近逾期时间 | "2018-10" |
| max_performance_amt | String | 否 | 最大履约金额 | "1000-2000" | | max_performance_amt | String | 否 | 最大履约金额 | "1000-2000" |
| latest_performance_time | String | 否 | 最近履约时间 | "2018-10" | | latest_performance_time | String | 否 | 最近履约时间 | "2018-10" |
| count_performance | String | 否 | 履约笔数 | "1" | | count_performance | String | 否 | 履约笔数 | "1" |
| currently_overdue | String | 否 | 当前逾期机构数 | "1" | | currently_overdue | String | 否 | 当前逾期机构数 | "1" |
| currently_performance | String | 否 | 当前履约机构数 | "29" | | currently_performance | String | 否 | 当前履约机构数 | "29" |
| acc_exc | String | 否 | 异常还款机构数 | "0" | | acc_exc | String | 否 | 异常还款机构数 | "0" |
| acc_sleep | String | 否 | 睡眠机构数 | "39" | | acc_sleep | String | 否 | 睡眠机构数 | "39" |
## 结果编码说明 ## 结果编码说明
| 编码 | 显示内容 | 探查明细说明 | 风险等级 | | 编码 | 显示内容 | 探查明细说明 | 风险等级 |
|------|----------|-------------|----------| | ---- | -------------------------------------- | --------------------------------------------------------------------------------------------------------- | -------- |
| 1 | 用户最近一笔订单未结清 | 用户最近一笔订单未结清 | 高风险 | | 1 | 用户最近一笔订单未结清 | 用户最近一笔订单未结清 | 高风险 |
| 2 | 用户订单结清情况良好 | 多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清 | 低风险 | | 2 | 用户订单结清情况良好 | 多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清 | 低风险 |
| 3 | 用户最近订单已结清,历史存在未结清订单 | 用户最近一笔订单已结清,但历史存在未结清订单 | 中等风险 | | 3 | 用户最近订单已结清,历史存在未结清订单 | 用户最近一笔订单已结清,但历史存在未结清订单 | 中等风险 |
| 4 | 用户数据不充分 | 数据不充分 | 未知风险 | | 4 | 用户数据不充分 | 数据不充分 | 未知风险 |
### 详细说明 ### 详细说明

View File

@@ -90,7 +90,7 @@ const getResultDescription = (code) => {
'3': '通过模型计算展现该用户行为画像,用户最近一笔订单已结清,但历史存在未结清订单,建议关注其历史还款记录。', '3': '通过模型计算展现该用户行为画像,用户最近一笔订单已结清,但历史存在未结清订单,建议关注其历史还款记录。',
'4': '用户数据不充分无法展现该用户行为画像。建议通过其他征信渠道补充信息进行综合评估。' '4': '用户数据不充分无法展现该用户行为画像。建议通过其他征信渠道补充信息进行综合评估。'
} }
return descriptionMap[code] || '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人信用过滤。' return descriptionMap[code] || '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人风险过滤。'
} }
// 探查明细描述 // 探查明细描述

View File

@@ -6,72 +6,76 @@
* 结果编码映射 * 结果编码映射
*/ */
export const RESULT_CODE_MAP = { export const RESULT_CODE_MAP = {
'1': { 1: {
text: '用户最近一笔订单未结清', text: "用户最近一笔订单未结清",
description: '通过模型计算展现该用户行为画像,用户最近一笔订单未结清,建议谨慎评估其信用状况和还款能力。', description:
detail: '用户最近一笔订单未结清', "通过模型计算展现该用户行为画像,用户最近一笔订单未结清,建议谨慎评估其信用状况和还款能力。",
color: 'text-red-500', detail: "用户最近一笔订单未结清",
level: 'high' color: "text-red-500",
}, level: "high",
'2': { },
text: '用户订单结清情况良好', 2: {
description: '通过模型计算展现该用户行为画像多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清信贷表现良好。', text: "用户订单结清情况良好",
detail: '多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清', description:
color: 'text-green-500', "通过模型计算展现该用户行为画像多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清信贷表现良好。",
level: 'low' detail: "多笔订单用户最近一笔订单已结清且历史所有订单均已结清或单笔订单用户该订单发生时间在3个月之内且该订单结清",
}, color: "text-green-500",
'3': { level: "low",
text: '用户最近订单已结清,历史存在未结清订单', },
description: '通过模型计算展现该用户行为画像,用户最近一笔订单已结清,但历史存在未结清订单,建议关注其历史还款记录。', 3: {
detail: '用户最近一笔订单已结清,历史存在未结清订单', text: "用户最近订单已结清,历史存在未结清订单",
color: 'text-yellow-500', description:
level: 'medium' "通过模型计算展现该用户行为画像,用户最近一笔订单已结清,但历史存在未结清订单,建议关注其历史还款记录。",
}, detail: "用户最近一笔订单已结清,但历史存在未结清订单",
'4': { color: "text-yellow-500",
text: '用户数据不充分', level: "medium",
description: '用户数据不充分无法展现该用户行为画像。建议通过其他征信渠道补充信息进行综合评估。', },
detail: '数据不充分', 4: {
color: 'text-gray-500', text: "用户数据不充分",
level: 'unknown' description:
} "用户数据不充分无法展现该用户行为画像。建议通过其他征信渠道补充信息进行综合评估。",
} detail: "数据不充分",
color: "text-gray-500",
level: "unknown",
},
};
/** /**
* 金额区间映射(根据文档提供的区间) * 金额区间映射(根据文档提供的区间)
*/ */
export const AMOUNT_RANGES = [ export const AMOUNT_RANGES = [
'(1~1000]', "(1~1000]",
'(1000~2000]', "(1000~2000]",
'(2000~3000]', "(2000~3000]",
'(3000~4000]', "(3000~4000]",
'(4000~6000]', "(4000~6000]",
'(6000~8000]', "(6000~8000]",
'(8000~10000]', "(8000~10000]",
'(10000~20000]', "(10000~20000]",
'(20000~40000]', "(20000~40000]",
'(40000~60000]', "(40000~60000]",
'(60000~80000]', "(60000~80000]",
'(80000~100000]', "(80000~100000]",
'(100000~150000]', "(100000~150000]",
'(150000~200000]', "(150000~200000]",
'(200000~250000]', "(200000~250000]",
'(250000~300000]', "(250000~300000]",
'(300000~350000]', "(300000~350000]",
'(350000~400000]', "(350000~400000]",
'(400000~450000]', "(400000~450000]",
'(450000~500000]', "(450000~500000]",
'(500000~550000]', "(500000~550000]",
'(550000~600000]', "(550000~600000]",
'(600000~650000]', "(600000~650000]",
'(650000~700000]', "(650000~700000]",
'(700000~750000]', "(700000~750000]",
'(750000~800000]', "(750000~800000]",
'(800000~850000]', "(800000~850000]",
'(850000~900000]', "(850000~900000]",
'(900000~950000]', "(900000~950000]",
'(950000~1000000]', "(950000~1000000]",
'>1000000' ">1000000",
] ];
/** /**
* 获取结果编码信息 * 获取结果编码信息
@@ -79,13 +83,16 @@ export const AMOUNT_RANGES = [
* @returns {object} 结果编码信息 * @returns {object} 结果编码信息
*/ */
export const getResultCodeInfo = (code) => { export const getResultCodeInfo = (code) => {
return RESULT_CODE_MAP[code] || { return (
text: '未知状态', RESULT_CODE_MAP[code] || {
description: '信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人信用过滤。', text: "未知状态",
color: 'text-gray-500', description:
level: 'unknown' "信贷表现主要为企业在背景调查过程中探查用户近期信贷表现时提供参考,帮助企业对其内部员工、外部业务进行个人风险过滤。",
} color: "text-gray-500",
} level: "unknown",
}
);
};
/** /**
* 格式化金额区间 * 格式化金额区间
@@ -93,32 +100,32 @@ export const getResultCodeInfo = (code) => {
* @returns {string} 格式化后的金额区间 * @returns {string} 格式化后的金额区间
*/ */
export const formatAmountRange = (amount) => { export const formatAmountRange = (amount) => {
if (!amount || amount === '0') { if (!amount || amount === "0") {
return '无记录' return "无记录";
} }
// 处理标准区间格式,如 "1000-2000" // 处理标准区间格式,如 "1000-2000"
if (amount.includes('-')) { if (amount.includes("-")) {
const [min, max] = amount.split('-') const [min, max] = amount.split("-");
return `${formatNumber(min)}元 - ${formatNumber(max)}` return `${formatNumber(min)}元 - ${formatNumber(max)}`;
} }
// 处理带括号的区间格式,如 "(1000~2000]" // 处理带括号的区间格式,如 "(1000~2000]"
if (amount.includes('~')) { if (amount.includes("~")) {
const cleanAmount = amount.replace(/[()[\]]/g, '') const cleanAmount = amount.replace(/[()[\]]/g, "");
const [min, max] = cleanAmount.split('~') const [min, max] = cleanAmount.split("~");
return `${formatNumber(min)}元 - ${formatNumber(max)}` return `${formatNumber(min)}元 - ${formatNumber(max)}`;
} }
// 处理大于某个值的格式,如 ">1000000" // 处理大于某个值的格式,如 ">1000000"
if (amount.startsWith('>')) { if (amount.startsWith(">")) {
const value = amount.substring(1) const value = amount.substring(1);
return `大于 ${formatNumber(value)}` return `大于 ${formatNumber(value)}`;
} }
// 其他格式直接返回 // 其他格式直接返回
return amount return amount;
} };
/** /**
* 格式化天数区间 * 格式化天数区间
@@ -126,25 +133,25 @@ export const formatAmountRange = (amount) => {
* @returns {string} 格式化后的天数区间 * @returns {string} 格式化后的天数区间
*/ */
export const formatDaysRange = (days) => { export const formatDaysRange = (days) => {
if (!days || days === '0') { if (!days || days === "0") {
return '无记录' return "无记录";
} }
// 处理区间格式,如 "1-15" // 处理区间格式,如 "1-15"
if (days.includes('-')) { if (days.includes("-")) {
const [min, max] = days.split('-') const [min, max] = days.split("-");
return `${min}天 - ${max}` return `${min}天 - ${max}`;
} }
// 处理带括号的区间格式,如 "[1~15]" // 处理带括号的区间格式,如 "[1~15]"
if (days.includes('~')) { if (days.includes("~")) {
const cleanDays = days.replace(/[()[\]]/g, '') const cleanDays = days.replace(/[()[\]]/g, "");
const [min, max] = cleanDays.split('~') const [min, max] = cleanDays.split("~");
return `${min}天 - ${max}` return `${min}天 - ${max}`;
} }
return days + '天' return days + "天";
} };
/** /**
* 格式化时间 * 格式化时间
@@ -152,23 +159,23 @@ export const formatDaysRange = (days) => {
* @returns {string} 格式化后的时间 * @returns {string} 格式化后的时间
*/ */
export const formatTime = (time) => { export const formatTime = (time) => {
if (!time) { if (!time) {
return '无记录' return "无记录";
} }
// 处理 YYYY-MM 格式 // 处理 YYYY-MM 格式
if (time.match(/^\d{4}-\d{2}$/)) { if (time.match(/^\d{4}-\d{2}$/)) {
return time.replace('-', '年') + '月' return time.replace("-", "年") + "月";
} }
// 处理 YYYY-MM-DD 格式 // 处理 YYYY-MM-DD 格式
if (time.match(/^\d{4}-\d{2}-\d{2}$/)) { if (time.match(/^\d{4}-\d{2}-\d{2}$/)) {
const [year, month, day] = time.split('-') const [year, month, day] = time.split("-");
return `${year}${month}${day}` return `${year}${month}${day}`;
} }
return time return time;
} };
/** /**
* 格式化数字,添加千分位分隔符 * 格式化数字,添加千分位分隔符
@@ -176,14 +183,14 @@ export const formatTime = (time) => {
* @returns {string} 格式化后的数字 * @returns {string} 格式化后的数字
*/ */
export const formatNumber = (num) => { export const formatNumber = (num) => {
if (!num) return '0' if (!num) return "0";
const number = typeof num === 'string' ? parseFloat(num) : num const number = typeof num === "string" ? parseFloat(num) : num;
if (isNaN(number)) return num if (isNaN(number)) return num;
return number.toLocaleString('zh-CN') return number.toLocaleString("zh-CN");
} };
/** /**
* 获取风险等级颜色类名 * 获取风险等级颜色类名
@@ -191,15 +198,15 @@ export const formatNumber = (num) => {
* @returns {string} CSS类名 * @returns {string} CSS类名
*/ */
export const getRiskLevelClass = (level) => { export const getRiskLevelClass = (level) => {
const levelMap = { const levelMap = {
'high': 'text-red-500', high: "text-red-500",
'medium': 'text-yellow-500', medium: "text-yellow-500",
'low': 'text-green-500', low: "text-green-500",
'unknown': 'text-gray-500' unknown: "text-gray-500",
} };
return levelMap[level] || 'text-gray-500' return levelMap[level] || "text-gray-500";
} };
/** /**
* 获取风险等级背景色类名 * 获取风险等级背景色类名
@@ -207,15 +214,15 @@ export const getRiskLevelClass = (level) => {
* @returns {string} CSS类名 * @returns {string} CSS类名
*/ */
export const getRiskLevelBgClass = (level) => { export const getRiskLevelBgClass = (level) => {
const levelMap = { const levelMap = {
'high': 'bg-red-50 border-red-200', high: "bg-red-50 border-red-200",
'medium': 'bg-yellow-50 border-yellow-200', medium: "bg-yellow-50 border-yellow-200",
'low': 'bg-green-50 border-green-200', low: "bg-green-50 border-green-200",
'unknown': 'bg-gray-50 border-gray-200' unknown: "bg-gray-50 border-gray-200",
} };
return levelMap[level] || 'bg-gray-50 border-gray-200' return levelMap[level] || "bg-gray-50 border-gray-200";
} };
/** /**
* 生成信贷表现总结 * 生成信贷表现总结
@@ -223,66 +230,66 @@ export const getRiskLevelBgClass = (level) => {
* @returns {object} 风险评估总结 * @returns {object} 风险评估总结
*/ */
export const generateRiskSummary = (data) => { export const generateRiskSummary = (data) => {
if (!data) { if (!data) {
return { return {
level: 'unknown', level: "unknown",
text: '无法获取数据进行风险评估', text: "无法获取数据进行风险评估",
recommendations: ['建议通过其他渠道获取更多信息'] recommendations: ["建议通过其他渠道获取更多信息"],
};
} }
}
const resultCode = data.result_code;
const resultCode = data.result_code const codeInfo = getResultCodeInfo(resultCode);
const codeInfo = getResultCodeInfo(resultCode)
const currentlyOverdue = parseInt(data.currently_overdue) || 0;
const currentlyOverdue = parseInt(data.currently_overdue) || 0 const accExc = parseInt(data.acc_exc) || 0;
const accExc = parseInt(data.acc_exc) || 0 const accSleep = parseInt(data.acc_sleep) || 0;
const accSleep = parseInt(data.acc_sleep) || 0
let riskLevel = codeInfo.level;
let riskLevel = codeInfo.level let recommendations = [];
let recommendations = []
// 基于结果编码的建议
// 基于结果编码的建议 switch (resultCode) {
switch (resultCode) { case "1": // 用户最近一笔订单未结清
case '1': // 用户最近一笔订单未结清 recommendations.push("用户最近一笔订单未结清,存在风险");
recommendations.push('用户最近一笔订单未结清,存在风险') recommendations.push("建议进一步核实原因和当前还款能力");
recommendations.push('建议进一步核实原因和当前还款能力') recommendations.push("考虑要求提供担保或抵押措施");
recommendations.push('考虑要求提供担保或抵押措施') break;
break case "2": // 用户订单结清情况良好
case '2': // 用户订单结清情况良好 recommendations.push("用户订单结清情况良好,信贷表现正常");
recommendations.push('用户订单结清情况良好,信贷表现正常') recommendations.push("可以正常开展业务合作");
recommendations.push('可以正常开展业务合作') recommendations.push("建议定期跟踪信用状况变化");
recommendations.push('建议定期跟踪信用状况变化') break;
break case "3": // 用户最近订单已结清,历史存在未结清订单
case '3': // 用户最近订单已结清,历史存在未结清订单 recommendations.push("用户最近订单已结清,历史存在未结清订单");
recommendations.push('用户最近订单已结清,但历史存在未结清订单') recommendations.push("建议关注历史还款记录和还款意愿");
recommendations.push('建议关注历史还款记录和还款意愿') recommendations.push("可考虑适当降低授信额度或增加风控措施");
recommendations.push('可考虑适当降低授信额度或增加风控措施') break;
break case "4": // 用户数据不充分
case '4': // 用户数据不充分 recommendations.push("用户数据不充分,无法完整评估行为画像");
recommendations.push('用户数据不充分,无法完整评估行为画像') recommendations.push("建议通过其他征信渠道补充信息");
recommendations.push('建议通过其他征信渠道补充信息') recommendations.push("谨慎开展高风险业务,建议人工审核");
recommendations.push('谨慎开展高风险业务,建议人工审核') break;
break }
}
// 基于其他指标的额外风险评估
// 基于其他指标的额外风险评估 if (currentlyOverdue > 0) {
if (currentlyOverdue > 0) { riskLevel = "high";
riskLevel = 'high' recommendations.push(`当前有${currentlyOverdue}个机构逾期,风险较高`);
recommendations.push(`当前有${currentlyOverdue}个机构逾期,风险较高`) }
}
if (accExc > 2) {
if (accExc > 2) { if (riskLevel !== "high") riskLevel = "medium";
if (riskLevel !== 'high') riskLevel = 'medium' recommendations.push(`存在${accExc}个异常还款机构,需要关注`);
recommendations.push(`存在${accExc}个异常还款机构,需要关注`) }
}
if (accSleep > 10) {
if (accSleep > 10) { recommendations.push(`${accSleep}个睡眠机构,信贷活跃度偏低`);
recommendations.push(`${accSleep}个睡眠机构,信贷活跃度偏低`) }
}
return {
return { level: riskLevel,
level: riskLevel, text: codeInfo.description,
text: codeInfo.description, recommendations: recommendations,
recommendations: recommendations };
} };
}

View File

@@ -52,6 +52,11 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
default: () => ({}) default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -61,7 +66,7 @@ const labels = periodKeys.map(key => PERIOD_MAP[key].label)
// 总申请次数图表配置 // 总申请次数图表配置
const chartOption = computed(() => { const chartOption = computed(() => {
const data = periodKeys.map(key => { const data = periodKeys.map(key => {
const counts = getApplicationCounts(props.data, key) const counts = getApplicationCounts(props.data, key, props.dimension)
return counts.total return counts.total
}) })
@@ -90,7 +95,7 @@ const chartOption = computed(() => {
type: 'category', type: 'category',
data: labels, data: labels,
axisLabel: { axisLabel: {
fontSize: 10, fontSize: 16,
color: '#6b7280', color: '#6b7280',
rotate: 45 rotate: 45
}, },
@@ -103,7 +108,7 @@ const chartOption = computed(() => {
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: 11, fontSize: 16,
color: '#6b7280', color: '#6b7280',
formatter: '{value} 次' formatter: '{value} 次'
}, },
@@ -137,11 +142,11 @@ const chartOption = computed(() => {
// 特殊时段(周末 / 夜间)图表配置 // 特殊时段(周末 / 夜间)图表配置
const specialChartOption = computed(() => { const specialChartOption = computed(() => {
const weekendData = periodKeys.map(key => { const weekendData = periodKeys.map(key => {
const s = getSpecialPeriodCounts(props.data, key) const s = getSpecialPeriodCounts(props.data, key, props.dimension)
return s.weekend || 0 return s.weekend || 0
}) })
const nightData = periodKeys.map(key => { const nightData = periodKeys.map(key => {
const s = getSpecialPeriodCounts(props.data, key) const s = getSpecialPeriodCounts(props.data, key, props.dimension)
return s.night || 0 return s.night || 0
}) })
@@ -163,7 +168,7 @@ const specialChartOption = computed(() => {
data: ['周末申请次数', '夜间申请次数'], data: ['周末申请次数', '夜间申请次数'],
top: '5%', top: '5%',
textStyle: { textStyle: {
fontSize: 12 fontSize: 14
} }
}, },
grid: { grid: {
@@ -177,7 +182,7 @@ const specialChartOption = computed(() => {
type: 'category', type: 'category',
data: labels, data: labels,
axisLabel: { axisLabel: {
fontSize: 10, fontSize: 16,
color: '#6b7280', color: '#6b7280',
rotate: 45 rotate: 45
}, },
@@ -190,7 +195,7 @@ const specialChartOption = computed(() => {
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: 11, fontSize: 16,
color: '#6b7280', color: '#6b7280',
formatter: '{value} 次' formatter: '{value} 次'
}, },

View File

@@ -1,22 +1,18 @@
<template> <template>
<div class="card application-total-section"> <div class="card application-total-section">
<div class="rounded-lg border border-gray-200 pb-2 mb-4"> <div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="flex items-center mb-4 p-4">
<span class="font-bold text-gray-800">申请总次数 (银行+非银) {{ totalCount }}</span>
</div>
<div class="mt-4"> <div class="mt-4">
<!-- Tab切换 --> <!-- Tab切换 -->
<div class="mb-6"> <div class="">
<LTitle title="申请总次数详情" /> <LTitle title="申请总次数详情" />
<div class="bg-white px-4 py-2"> <div class="bg-white px-4 py-2">
<van-tabs v-model:active="activeTab" color="var(--color-primary)"> <van-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label"> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4"> <div class="p-4 pb-0">
<!-- 银行机构 --> <!-- 银行机构 -->
<BankInstitutionSection :data="data" :period="period.key" /> <BankInstitutionSection :data="data" :period="period.key" :dimension="dimension" />
<!-- 非银机构 --> <!-- 非银机构 -->
<NBankInstitutionSection :data="data" :period="period.key" /> <NBankInstitutionSection :data="data" :period="period.key" :dimension="dimension" />
</div> </div>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
@@ -28,9 +24,8 @@
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { ref } from 'vue'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
import BankInstitutionSection from './BankInstitutionSection.vue' import BankInstitutionSection from './BankInstitutionSection.vue'
import NBankInstitutionSection from './NBankInstitutionSection.vue' import NBankInstitutionSection from './NBankInstitutionSection.vue'
@@ -39,6 +34,11 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
default: () => ({}) default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -52,12 +52,6 @@ const periods = [
{ key: 'm6', label: '6个月' }, { key: 'm6', label: '6个月' },
{ key: 'm12', label: '12个月' } { key: 'm12', label: '12个月' }
] ]
// 计算总申请次数12个月
const totalCount = computed(() => {
const counts = getApplicationCounts(props.data, 'm12')
return counts.total
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -89,7 +83,7 @@ const totalCount = computed(() => {
.application-total-section :deep(.van-tab) { .application-total-section :deep(.van-tab) {
color: #999999 !important; color: #999999 !important;
font-size: 14px !important; font-size: 16px !important;
font-weight: 400 !important; font-weight: 400 !important;
border-right: unset !important; border-right: unset !important;
background-color: transparent !important; background-color: transparent !important;

View File

@@ -0,0 +1,71 @@
<template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="px-4 pt-4">
<LTitle title="借贷意向申请情况与建议" />
</div>
<div class="px-2 pb-4">
<!-- 银行类机构申请情况 -->
<Remark
v-if="remarks.bankSituation"
:title="'银行类机构申请情况'"
:content="remarks.bankSituation"
:default-expanded="true"
/>
<!-- 银行类机构申请建议 -->
<Remark
:title="'银行类机构申请建议'"
:content="remarks.bankAdvice"
:default-expanded="false"
/>
<!-- 非银行类机构申请情况 -->
<Remark
v-if="remarks.nbankSituation"
:title="'非银行类机构申请情况'"
:content="remarks.nbankSituation"
:default-expanded="true"
/>
<!-- 非银行类机构申请建议 -->
<Remark
:title="'非银行类机构申请建议'"
:content="remarks.nbankAdvice"
:default-expanded="false"
/>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getApplyRemarks } from '../utils/dataParser'
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({}),
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
})
const remarks = computed(() => {
return getApplyRemarks(props.data || {}, props.dimension)
})
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="mb-6"> <div class="">
<LTitle title="银行机构申请分布" /> <LTitle title="银行机构申请分布" />
<div class="mt-4"> <div class="mt-4">
<!-- 饼图宽度占满 --> <!-- 饼图宽度占满 -->
@@ -8,8 +8,9 @@
</div> </div>
<!-- 详细列表在图表下方展示所有项并带颜色标识 --> <!-- 详细列表在图表下方展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm"> <div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center"> <div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" /> <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
@@ -17,8 +18,13 @@
<span class="text-[#333333] font-bold">{{ item.value }}</span> <span class="text-[#333333] font-bold">{{ item.value }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 银行类机构申请情况近1年 / 近3个月仅在12个月tab下展示 -->
<Remark class="mt-8 mb-8" v-if="period === 'm12' && applyRemarks.bankSituation" :title="'银行类机构申请情况'"
:content="applyRemarks.bankSituation" :default-expanded="true" />
</template> </template>
<script setup> <script setup>
@@ -33,7 +39,8 @@ import {
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser' import Remark from '@/components/Remark.vue'
import { getBankApplicationDetails, FIELD_LABELS, getApplyRemarks } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
use([ use([
@@ -53,6 +60,11 @@ const props = defineProps({
period: { period: {
type: String, type: String,
required: true required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -69,7 +81,14 @@ const COLORS = [
] ]
// 获取银行机构申请详情 // 获取银行机构申请详情
const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period)) const bankDetails = computed(() =>
getBankApplicationDetails(props.data, props.period, props.dimension)
)
// 申请情况与建议(使用整体数据 + 当前维度)
const applyRemarks = computed(() => {
return getApplyRemarks(props.data || {}, props.dimension)
})
// 计算银行机构总次数 // 计算银行机构总次数
const bankTotal = computed(() => { const bankTotal = computed(() => {
@@ -103,7 +122,7 @@ const pieChartOption = computed(() => {
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#999', color: '#999',
fontSize: 14 fontSize: 16
} }
} }
} }
@@ -121,7 +140,7 @@ const pieChartOption = computed(() => {
style: { style: {
text: '银行机构', text: '银行机构',
fill: '#111827', fill: '#111827',
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
@@ -148,7 +167,7 @@ const pieChartOption = computed(() => {
}, },
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
} }

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="mb-6"> <div class="">
<LTitle title="银行机构申请机构数分布" /> <LTitle title="银行机构申请机构数分布" />
<div class="mt-4"> <div class="mt-4">
<!-- 饼图宽度占满 --> <!-- 饼图宽度占满 -->
@@ -8,8 +8,9 @@
</div> </div>
<!-- 详细列表在图表下方展示所有项并带颜色标识 --> <!-- 详细列表在图表下方展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm"> <div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center"> <div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" /> <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
@@ -19,6 +20,10 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 银行类机构申请建议仅在12个月tab下展示 -->
<Remark class="mt-8 mb-8" v-if="period === 'm12' && applyRemarks.bankAdvice" :title="'银行类机构申请建议'"
:content="applyRemarks.bankAdvice" :default-expanded="true" />
</template> </template>
<script setup> <script setup>
@@ -33,7 +38,8 @@ import {
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser' import Remark from '@/components/Remark.vue'
import { getBankOrgDetails, FIELD_LABELS, getApplyRemarks } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
use([ use([
@@ -53,6 +59,11 @@ const props = defineProps({
period: { period: {
type: String, type: String,
required: true required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -69,7 +80,14 @@ const COLORS = [
] ]
// 获取银行机构数详情 // 获取银行机构数详情
const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period)) const bankOrgs = computed(() =>
getBankOrgDetails(props.data, props.period, props.dimension)
)
// 申请情况与建议(使用整体数据 + 当前维度)
const applyRemarks = computed(() => {
return getApplyRemarks(props.data || {}, props.dimension)
})
// 计算银行机构总数 // 计算银行机构总数
const bankTotal = computed(() => { const bankTotal = computed(() => {
@@ -103,7 +121,7 @@ const pieChartOption = computed(() => {
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#999', color: '#999',
fontSize: 14 fontSize: 16
} }
} }
} }
@@ -121,7 +139,7 @@ const pieChartOption = computed(() => {
style: { style: {
text: '银行机构', text: '银行机构',
fill: '#111827', fill: '#111827',
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
@@ -148,7 +166,7 @@ const pieChartOption = computed(() => {
}, },
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
} }

View File

@@ -3,17 +3,17 @@
<div class="rounded-lg border border-gray-200 pb-2 mb-4"> <div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="mt-4"> <div class="mt-4">
<!-- Tab切换 --> <!-- Tab切换 -->
<div class="mb-6"> <div class="">
<LTitle title="申请机构总数详情" /> <LTitle title="申请机构总数详情" />
<div class="bg-white px-4 py-2"> <div class="bg-white px-4 py-2">
<van-tabs v-model:active="activeTab" color="var(--color-primary)"> <van-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label"> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4"> <div class="p-4 pb-0">
<!-- 银行机构 --> <!-- 银行机构 -->
<BankOrgSection :data="data" :period="period.key" /> <BankOrgSection :data="data" :period="period.key" :dimension="dimension" />
<!-- 非银机构 --> <!-- 非银机构 -->
<NBankOrgSection :data="data" :period="period.key" /> <NBankOrgSection :data="data" :period="period.key" :dimension="dimension" />
</div> </div>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
@@ -25,9 +25,8 @@
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { ref } from 'vue'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
import BankOrgSection from './BankOrgSection.vue' import BankOrgSection from './BankOrgSection.vue'
import NBankOrgSection from './NBankOrgSection.vue' import NBankOrgSection from './NBankOrgSection.vue'
@@ -36,6 +35,11 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
default: () => ({}) default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -49,15 +53,6 @@ const periods = [
{ key: 'm6', label: '6个月' }, { key: 'm6', label: '6个月' },
{ key: 'm12', label: '12个月' } { key: 'm12', label: '12个月' }
] ]
// 计算总机构数12个月
const totalCount = computed(() => {
const bankOrgs = getBankOrgDetails(props.data, 'm12')
const nbankOrgs = getNBankOrgDetails(props.data, 'm12')
const bankTotal = Object.values(bankOrgs).reduce((sum, val) => sum + (val || 0), 0)
const nbankTotal = Object.values(nbankOrgs).reduce((sum, val) => sum + (val || 0), 0)
return bankTotal + nbankTotal
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -89,7 +84,7 @@ const totalCount = computed(() => {
.institution-total-section :deep(.van-tab) { .institution-total-section :deep(.van-tab) {
color: #999999 !important; color: #999999 !important;
font-size: 14px !important; font-size: 16px !important;
font-weight: 400 !important; font-weight: 400 !important;
border-right: unset !important; border-right: unset !important;
background-color: transparent !important; background-color: transparent !important;

View File

@@ -1,28 +1,41 @@
<template> <template>
<div class="mb-6"> <div class="nbank-institution-section">
<LTitle title="非银机构申请分布" /> <div class="bg-white px-4 py-2">
<div class="mt-4"> <van-tabs v-model:active="activeTab" color="var(--color-primary)">
<!-- 饼图宽度占满 --> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="h-64 mb-4"> <div class="p-4 pb-0">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <LTitle title="非银机构申请分布" />
</div> <div class="mt-4">
<!-- 饼图宽度占满 -->
<div class="h-64 mb-4">
<v-chart class="chart-container" :option="getPieChartOption(period.key)" autoresize />
</div>
<!-- 详细列表在图表下方展示所有项并带颜色标识 --> <!-- 详细列表在图表下方展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm"> <div v-for="(item, index) in getDetailList(period.key)" :key="index"
<div class="flex items-center"> :class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" /> <div class="flex items-center">
<span class="text-gray-600">{{ item.label }}</span> <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}</span>
</div>
</div>
</div>
<!-- 非银行类机构申请情况近1年 / 近3个月仅在12个月tab下展示 -->
<Remark class="mt-8 mb-0" v-if="period.key === 'm12' && applyRemarks.nbankSituation" :title="'非银行类机构申请情况'"
:content="applyRemarks.nbankSituation" :default-expanded="true" />
</div> </div>
<span class="text-[#333333] font-bold">{{ item.value }}</span> </van-tab>
</div> </van-tabs>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue' import { computed, ref } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { use } from 'echarts/core' import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
@@ -33,7 +46,8 @@ import {
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser' import Remark from '@/components/Remark.vue'
import { getNBankApplicationDetails, FIELD_LABELS, getApplyRemarks } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
use([ use([
@@ -52,10 +66,27 @@ const props = defineProps({
}, },
period: { period: {
type: String, type: String,
required: true required: false,
default: 'm12'
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
const activeTab = ref(5) // 默认显示12个月
const periods = [
{ key: 'd7', label: '7天' },
{ key: 'd15', label: '15天' },
{ key: 'm1', label: '1个月' },
{ key: 'm3', label: '3个月' },
{ key: 'm6', label: '6个月' },
{ key: 'm12', label: '12个月' }
]
// 颜色映射表(与图表保持一致) // 颜色映射表(与图表保持一致)
const COLORS = [ const COLORS = [
'#2B79EE', '#2B79EE',
@@ -68,18 +99,14 @@ const COLORS = [
'#6B7280', '#6B7280',
] ]
// 获取非银机构申请详情 // 申请情况与建议(使用整体数据 + 当前维度)
const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period)) const applyRemarks = computed(() => {
return getApplyRemarks(props.data || {}, props.dimension)
// 计算非银机构总次数
const nbankTotal = computed(() => {
const details = nbankDetails.value
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表(包含所有项,包含 0 次) // 获取指定时间段的详细列表
const detailList = computed(() => { const getDetailList = (period) => {
const details = nbankDetails.value const details = getNBankApplicationDetails(props.data, period, props.dimension)
const labels = FIELD_LABELS.nbank const labels = FIELD_LABELS.nbank
return Object.entries(details) return Object.entries(details)
@@ -89,11 +116,11 @@ const detailList = computed(() => {
value: value || 0, value: value || 0,
color: COLORS[index % COLORS.length], color: COLORS[index % COLORS.length],
})) }))
}) }
// 饼图配置 // 获取指定时间段的饼图配置
const pieChartOption = computed(() => { const getPieChartOption = (period) => {
const list = detailList.value const list = getDetailList(period)
if (!list || list.length === 0) { if (!list || list.length === 0) {
return { return {
@@ -103,7 +130,7 @@ const pieChartOption = computed(() => {
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#999', color: '#999',
fontSize: 14 fontSize: 16
} }
} }
} }
@@ -121,7 +148,7 @@ const pieChartOption = computed(() => {
style: { style: {
text: '非银机构', text: '非银机构',
fill: '#111827', fill: '#111827',
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
@@ -148,7 +175,7 @@ const pieChartOption = computed(() => {
}, },
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
} }
@@ -163,7 +190,7 @@ const pieChartOption = computed(() => {
} }
] ]
} }
}) }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -171,4 +198,56 @@ const pieChartOption = computed(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.nbank-institution-section :deep(.van-tabs) {
border: unset !important;
}
.nbank-institution-section :deep(.van-tabs__wrap) {
height: 32px !important;
background-color: transparent !important;
padding: 0 !important;
border-bottom: 1px solid #DDDDDD !important;
}
.nbank-institution-section :deep(.van-tabs__nav) {
background-color: transparent !important;
gap: 0 !important;
height: 32px !important;
border: unset !important;
}
.nbank-institution-section :deep(.van-tabs__nav--card) {
border: unset !important;
}
.nbank-institution-section :deep(.van-tab) {
color: #999999 !important;
font-size: 16px !important;
font-weight: 400 !important;
border-right: unset !important;
background-color: transparent !important;
border-radius: unset !important;
max-width: 80px !important;
}
.nbank-institution-section :deep(.van-tab--card) {
color: #999999 !important;
border-right: unset !important;
background-color: transparent !important;
border-radius: unset !important;
}
.nbank-institution-section :deep(.van-tab--active) {
color: var(--van-theme-primary) !important;
background-color: unset !important;
}
.nbank-institution-section :deep(.van-tabs__line) {
height: 4px !important;
border-radius: 1px !important;
background-color: var(--van-theme-primary) !important;
width: 20px;
border-radius: 14px;
}
</style> </style>

View File

@@ -1,28 +1,41 @@
<template> <template>
<div class="mb-6"> <div class="nbank-org-section">
<LTitle title="非银机构申请机构数分布" /> <div class="bg-white px-4 py-2">
<div class="mt-4"> <van-tabs v-model:active="activeTab" color="var(--color-primary)">
<!-- 饼图宽度占满 --> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="h-64 mb-4"> <div class="p-4 pb-0">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <LTitle title="非银机构申请机构数分布" />
</div> <div class="mt-4">
<!-- 饼图宽度占满 -->
<div class="h-64 mb-4">
<v-chart class="chart-container" :option="getPieChartOption(period.key)" autoresize />
</div>
<!-- 详细列表在图表下方展示所有项并带颜色标识 --> <!-- 详细列表在图表下方展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm"> <div v-for="(item, index) in getDetailList(period.key)" :key="index"
<div class="flex items-center"> :class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" /> <div class="flex items-center">
<span class="text-gray-600">{{ item.label }}</span> <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}</span>
</div>
</div>
</div>
<!-- 非银行类机构申请建议仅在12个月tab下展示 -->
<Remark class="mt-8 mb-0" v-if="period.key === 'm12' && applyRemarks.nbankAdvice" :title="'非银行类机构申请建议'"
:content="applyRemarks.nbankAdvice" :default-expanded="true" />
</div> </div>
<span class="text-[#333333] font-bold">{{ item.value }}</span> </van-tab>
</div> </van-tabs>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue' import { computed, ref } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { use } from 'echarts/core' import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
@@ -33,7 +46,8 @@ import {
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue' import LTitle from '@/components/LTitle.vue'
import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser' import Remark from '@/components/Remark.vue'
import { getNBankOrgDetails, FIELD_LABELS, getApplyRemarks } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
use([ use([
@@ -52,10 +66,27 @@ const props = defineProps({
}, },
period: { period: {
type: String, type: String,
required: true required: false,
default: 'm12'
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
const activeTab = ref(5) // 默认显示12个月
const periods = [
{ key: 'd7', label: '7天' },
{ key: 'd15', label: '15天' },
{ key: 'm1', label: '1个月' },
{ key: 'm3', label: '3个月' },
{ key: 'm6', label: '6个月' },
{ key: 'm12', label: '12个月' }
]
// 颜色映射表(与图表保持一致) // 颜色映射表(与图表保持一致)
const COLORS = [ const COLORS = [
'#2B79EE', '#2B79EE',
@@ -68,18 +99,14 @@ const COLORS = [
'#6B7280', '#6B7280',
] ]
// 获取非银机构数详情 // 申请情况与建议(使用整体数据 + 当前维度)
const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period)) const applyRemarks = computed(() => {
return getApplyRemarks(props.data || {}, props.dimension)
// 计算非银机构总数
const nbankTotal = computed(() => {
const orgs = nbankOrgs.value
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表(包含所有项,包含 0 家) // 获取指定时间段的详细列表
const detailList = computed(() => { const getDetailList = (period) => {
const orgs = nbankOrgs.value const orgs = getNBankOrgDetails(props.data, period, props.dimension)
const labels = FIELD_LABELS.nbank const labels = FIELD_LABELS.nbank
return Object.entries(orgs) return Object.entries(orgs)
@@ -89,11 +116,11 @@ const detailList = computed(() => {
value: value || 0, value: value || 0,
color: COLORS[index % COLORS.length], color: COLORS[index % COLORS.length],
})) }))
}) }
// 饼图配置 // 获取指定时间段的饼图配置
const pieChartOption = computed(() => { const getPieChartOption = (period) => {
const list = detailList.value const list = getDetailList(period)
if (!list || list.length === 0) { if (!list || list.length === 0) {
return { return {
@@ -103,7 +130,7 @@ const pieChartOption = computed(() => {
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#999', color: '#999',
fontSize: 14 fontSize: 16
} }
} }
} }
@@ -121,7 +148,7 @@ const pieChartOption = computed(() => {
style: { style: {
text: '非银机构', text: '非银机构',
fill: '#111827', fill: '#111827',
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
@@ -148,7 +175,7 @@ const pieChartOption = computed(() => {
}, },
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
} }
@@ -163,7 +190,7 @@ const pieChartOption = computed(() => {
} }
] ]
} }
}) }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -171,4 +198,56 @@ const pieChartOption = computed(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.nbank-org-section :deep(.van-tabs) {
border: unset !important;
}
.nbank-org-section :deep(.van-tabs__wrap) {
height: 32px !important;
background-color: transparent !important;
padding: 0 !important;
border-bottom: 1px solid #DDDDDD !important;
}
.nbank-org-section :deep(.van-tabs__nav) {
background-color: transparent !important;
gap: 0 !important;
height: 32px !important;
border: unset !important;
}
.nbank-org-section :deep(.van-tabs__nav--card) {
border: unset !important;
}
.nbank-org-section :deep(.van-tab) {
color: #999999 !important;
font-size: 16px !important;
font-weight: 400 !important;
border-right: unset !important;
background-color: transparent !important;
border-radius: unset !important;
max-width: 80px !important;
}
.nbank-org-section :deep(.van-tab--card) {
color: #999999 !important;
border-right: unset !important;
background-color: transparent !important;
border-radius: unset !important;
}
.nbank-org-section :deep(.van-tab--active) {
color: var(--van-theme-primary) !important;
background-color: unset !important;
}
.nbank-org-section :deep(.van-tabs__line) {
height: 4px !important;
border-radius: 1px !important;
background-color: var(--van-theme-primary) !important;
width: 20px;
border-radius: 14px;
}
</style> </style>

View File

@@ -8,8 +8,9 @@
</div> </div>
<!-- 详细列表与图表颜色一致包含 0 次的类型 --> <!-- 详细列表与图表颜色一致包含 0 次的类型 -->
<div class="space-y-2 px-4 pb-4"> <div class="space-y-0 px-4 pb-4 rounded-lg overflow-hidden">
<div v-for="item in detailList" :key="item.key" class="flex items-center justify-between text-sm"> <div v-for="(item, index) in detailList" :key="item.key"
:class="['flex items-center justify-between text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center"> <div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" /> <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
@@ -52,6 +53,11 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
default: () => ({}) default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
} }
}) })
@@ -79,7 +85,8 @@ const detailList = computed(() => {
const labels = FIELD_LABELS.bank || {} const labels = FIELD_LABELS.bank || {}
return TYPE_KEYS.map((key, index) => { return TYPE_KEYS.map((key, index) => {
const field = `${PREFIX}_id_${key}_allnum` const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
const field = `${PREFIX}_${dimKey}_${key}_allnum`
const value = getValue(v[field]) || 0 const value = getValue(v[field]) || 0
return { return {
@@ -121,7 +128,7 @@ const chartOption = computed(() => {
type: 'category', type: 'category',
data: categories, data: categories,
axisLabel: { axisLabel: {
fontSize: 10, fontSize: 13,
color: '#6b7280', color: '#6b7280',
rotate: 30 rotate: 30
}, },
@@ -134,7 +141,7 @@ const chartOption = computed(() => {
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: 11, fontSize: 16,
color: '#6b7280', color: '#6b7280',
formatter: '{value} 次' formatter: '{value} 次'
}, },
@@ -170,15 +177,4 @@ const chartOption = computed(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
{
"cells": [],
"metadata": {
"language_info": {
"name": "python"
}
},
"nbformat": 4,
"nbformat_minor": 2
}

View File

@@ -3,34 +3,15 @@
<div class="rounded-lg border border-gray-200 p-4 space-y-3"> <div class="rounded-lg border border-gray-200 p-4 space-y-3">
<LTitle title="近期集中申请提示" /> <LTitle title="近期集中申请提示" />
<div v-if="hasAnyData" class="space-y-2 text-sm text-gray-700"> <div v-if="hasAnyData" class="space-y-0 text-lg text-gray-700 rounded-lg overflow-hidden">
<div class="flex justify-between"> <div v-for="(item, index) in dataItems" :key="item.label"
<span>最近在银行连续申请次数</span> :class="['flex justify-between py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span class="font-bold text-[#111827]">{{ bankCons }} </span> <span>{{ item.label }}</span>
</div> <span class="font-bold text-[#111827]">{{ item.value }}</span>
<div class="flex justify-between">
<span>最近在银行连续申请天数</span>
<span class="font-bold text-[#111827]">{{ bankDays }} </span>
</div>
<div class="flex justify-between">
<span>最近在非银连续申请次数</span>
<span class="font-bold text-[#111827]">{{ nbankCons }} </span>
</div>
<div class="flex justify-between">
<span>最近在非银连续申请天数</span>
<span class="font-bold text-[#111827]">{{ nbankDays }} </span>
</div>
<div class="flex justify-between">
<span>距最近一次在银行机构申请</span>
<span class="font-bold text-[#111827]">{{ bankGap }} </span>
</div>
<div class="flex justify-between">
<span>距最近一次在非银机构申请</span>
<span class="font-bold text-[#111827]">{{ nbankGap }} </span>
</div> </div>
</div> </div>
<div v-else class="text-sm text-gray-400"> <div v-else class="text-base text-gray-400">
暂未查询到明显的近期集中申请行为 暂未查询到明显的近期集中申请行为
</div> </div>
</div> </div>
@@ -48,15 +29,38 @@ const props = defineProps({
required: true, required: true,
default: () => ({}), default: () => ({}),
}, },
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
}) })
const bankCons = computed(() => getValue(props.data?.als_lst_id_bank_consnum)) const bankCons = computed(() => {
const bankDays = computed(() => getValue(props.data?.als_lst_id_bank_csinteday)) const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
const nbankCons = computed(() => getValue(props.data?.als_lst_id_nbank_consnum)) return getValue(props.data?.[`als_lst_${dimKey}_bank_consnum`])
const nbankDays = computed(() => getValue(props.data?.als_lst_id_nbank_csinteday)) })
const bankDays = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_bank_csinteday`])
})
const nbankCons = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_nbank_consnum`])
})
const nbankDays = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_nbank_csinteday`])
})
const bankGap = computed(() => getValue(props.data?.als_lst_id_bank_inteday)) const bankGap = computed(() => {
const nbankGap = computed(() => getValue(props.data?.als_lst_id_nbank_inteday)) const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_bank_inteday`])
})
const nbankGap = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_nbank_inteday`])
})
const hasAnyData = computed(() => { const hasAnyData = computed(() => {
return ( return (
@@ -68,6 +72,18 @@ const hasAnyData = computed(() => {
(nbankGap.value || 0) > 0 (nbankGap.value || 0) > 0
) )
}) })
// 数据项列表
const dataItems = computed(() => {
return [
{ label: '最近在银行连续申请次数', value: `${bankCons.value}` },
{ label: '最近在银行连续申请天数', value: `${bankDays.value}` },
{ label: '最近在非银连续申请次数', value: `${nbankCons.value}` },
{ label: '最近在非银连续申请天数', value: `${nbankDays.value}` },
{ label: '距最近一次在银行机构申请', value: `${bankGap.value}` },
{ label: '距最近一次在非银机构申请', value: `${nbankGap.value}` }
]
})
</script> </script>
<style scoped> <style scoped>
@@ -75,5 +91,3 @@ const hasAnyData = computed(() => {
background: #ffffff; background: #ffffff;
} }
</style> </style>

View File

@@ -0,0 +1,69 @@
<template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="px-4 pt-4 pb-4">
<LTitle title="风险汇总" />
<div class="space-y-0 mt-3 rounded-lg overflow-hidden">
<div v-for="(risk, index) in riskSummary" :key="risk.label"
:class="['flex justify-between items-center text-lg py-4 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span class="text-gray-600">{{ risk.label }}</span>
<span class="font-semibold text-xl" :class="getRiskClass(risk.value)">{{ risk.value }}</span>
</div>
</div>
</div>
<!-- 风险汇总解读 -->
<Remark :content="riskRemark" title="风险解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getRiskSummary, generateRiskRemark } from '../utils/dataParser'
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({}),
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
})
// 风险汇总
const riskSummary = computed(() => {
return getRiskSummary(props.data || {}, props.dimension)
})
// 风险汇总解读文本
const riskRemark = computed(() => {
return generateRiskRemark(riskSummary.value)
})
// 根据风险等级返回对应的样式类
const getRiskClass = (level) => {
switch (level) {
case '无风险':
return 'text-green-600'
case '低风险':
return 'text-blue-600'
case '中风险':
return 'text-amber-600'
case '高风险':
return 'text-red-600'
default:
return 'text-gray-600'
}
}
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

View File

@@ -1,21 +1,35 @@
<template> <template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2"> <div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="flex items-center mb-4 p-4"> <div class="flex items-center justify-between mb-4 px-4 pt-4">
<span class="font-bold text-gray-800">借贷申请统计概览</span> <LTitle title="统计概览" />
<!-- 维度切换按钮组 -->
<div class="inline-flex rounded-full overflow-hidden text-base">
<button class="px-4 py-1 border border-[#2B79EE] rounded-l-full"
:class="dimension === 'id' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
@click="$emit('update:dimension', 'id')">
身份证匹配
</button>
<button class="px-4 py-1 border border-[#2B79EE] border-l-0 rounded-r-full"
:class="dimension === 'cell' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
@click="$emit('update:dimension', 'cell')">
手机号匹配
</button>
</div>
</div> </div>
<div class="grid grid-cols-2 gap-4 px-4 pb-4"> <div class="grid grid-cols-2 gap-4 px-4 pb-4">
<div v-for="item in items" :key="item.label" <div v-for="item in items" :key="item.label"
class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]"> class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]">
<div class="text-xl font-bold text-[#111827]"> <div class="text-2xl font-bold text-[#111827]">
{{ item.value }} {{ item.value }}
<span class="text-xs text-gray-500 ml-1">{{ item.unit }}</span> <span class="text-base text-gray-500 ml-1">{{ item.unit }}</span>
</div> </div>
<div class="text-xs text-gray-600 mt-1"> <div class="text-base text-gray-600 mt-1">
{{ item.label }} {{ item.label }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
@@ -28,26 +42,34 @@ const props = defineProps({
required: true, required: true,
default: () => ({}), default: () => ({}),
}, },
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
}) })
const items = computed(() => { const items = computed(() => {
const v = props.data || {} const v = props.data || {}
// 近12个月申请次数总/银行/非银) // 近12个月申请次数总/银行/非银)
const m12 = getApplicationCounts(v, 'm12') const m12 = getApplicationCounts(v, 'm12', props.dimension)
// 近12个月申请机构总数银行+非银) // 近12个月申请机构总数银行+非银)
const bankOrgs = getBankOrgDetails(v, 'm12') const bankOrgs = getBankOrgDetails(v, 'm12', props.dimension)
const nbankOrgs = getNBankOrgDetails(v, 'm12') const nbankOrgs = getNBankOrgDetails(v, 'm12', props.dimension)
const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0) const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0) const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
const orgTotal = bankOrgTotal + nbankOrgTotal const orgTotal = bankOrgTotal + nbankOrgTotal
// 近12个月周末 / 夜间申请次数(银行+非银) // 近12个月周末 / 夜间申请次数(银行+非银)
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
const weekendTotal = const weekendTotal =
Number(v.als_m12_id_bank_week_allnum || 0) + Number(v.als_m12_id_nbank_week_allnum || 0) Number(v[`als_m12_${dimKey}_bank_week_allnum`] || 0) +
Number(v[`als_m12_${dimKey}_nbank_week_allnum`] || 0)
const nightTotal = const nightTotal =
Number(v.als_m12_id_bank_night_allnum || 0) + Number(v.als_m12_id_nbank_night_allnum || 0) Number(v[`als_m12_${dimKey}_bank_night_allnum`] || 0) +
Number(v[`als_m12_${dimKey}_nbank_night_allnum`] || 0)
return [ return [
{ label: '总申请次数', value: m12.total || 0, unit: '次' }, { label: '总申请次数', value: m12.total || 0, unit: '次' },

View File

@@ -1,35 +1,39 @@
<template> <template>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<!-- 统计概览小模块 --> <!-- 统计概览小模块内部自带维度切换按钮 -->
<SummaryApplyStats :data="variableValue" /> <SummaryApplyStats v-model:dimension="activeDimension" :data="variableValue" />
<!-- 申请次数 --> <!-- 申请次数 -->
<ApplicationCountSection :data="variableValue" /> <ApplicationCountSection :data="variableValue" :dimension="activeDimension" />
<!-- 产品类型申请分布 --> <!-- 产品类型申请分布 -->
<ProductTypeDistributionSection :data="variableValue" /> <ProductTypeDistributionSection :data="variableValue" :dimension="activeDimension" />
<!-- 近期集中申请提示 --> <!-- 近期集中申请提示 -->
<RecentIntensiveApplicationSection :data="variableValue" /> <RecentIntensiveApplicationSection :data="variableValue" :dimension="activeDimension" />
<!-- 申请总次数 (银行+非银) --> <!-- 申请总次数 (银行+非银) -->
<ApplicationTotalSection :data="variableValue" /> <ApplicationTotalSection :data="variableValue" :dimension="activeDimension" />
<!-- 申请机构总数 (银行+非银) --> <!-- 申请机构总数 (银行+非银) -->
<InstitutionTotalSection :data="variableValue" /> <InstitutionTotalSection :data="variableValue" :dimension="activeDimension" />
<!-- 风险汇总 -->
<RiskSummarySection :data="variableValue" :dimension="activeDimension" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue' import { computed, ref } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier' import { useRiskNotifier } from '@/composables/useRiskNotifier'
import { extractVariableValue } from './utils/dataParser' import { extractVariableValue, getRiskSummary } from './utils/dataParser'
import ApplicationCountSection from './components/ApplicationCountSection.vue' import ApplicationCountSection from './components/ApplicationCountSection.vue'
import ApplicationTotalSection from './components/ApplicationTotalSection.vue' import ApplicationTotalSection from './components/ApplicationTotalSection.vue'
import InstitutionTotalSection from './components/InstitutionTotalSection.vue' import InstitutionTotalSection from './components/InstitutionTotalSection.vue'
import SummaryApplyStats from './components/SummaryApplyStats.vue' import SummaryApplyStats from './components/SummaryApplyStats.vue'
import ProductTypeDistributionSection from './components/ProductTypeDistributionSection.vue' import ProductTypeDistributionSection from './components/ProductTypeDistributionSection.vue'
import RecentIntensiveApplicationSection from './components/RecentIntensiveApplicationSection.vue' import RecentIntensiveApplicationSection from './components/RecentIntensiveApplicationSection.vue'
import RiskSummarySection from './components/RiskSummarySection.vue'
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -51,6 +55,9 @@ const props = defineProps({
}, },
}) })
// 当前维度id身份证 / cell手机号
const activeDimension = ref('id')
// 获取数据 // 获取数据
const rawData = computed(() => props.data?.data || props.data || {}) const rawData = computed(() => props.data?.data || props.data || {})
@@ -58,8 +65,10 @@ const rawData = computed(() => props.data?.data || props.data || {})
const variableValue = computed(() => extractVariableValue(rawData.value)) const variableValue = computed(() => extractVariableValue(rawData.value))
// 计算风险评分0-100分分数越高越安全 // 计算风险评分0-100分分数越高越安全
// 基于 RiskSummarySection 中汇总的各个机构类型风险等级计算,权重较高
const riskScore = computed(() => { const riskScore = computed(() => {
const data = variableValue.value const data = variableValue.value
const dimension = activeDimension.value
if (!data || Object.keys(data).length === 0) { if (!data || Object.keys(data).length === 0) {
return 100 // 无数据视为最安全 return 100 // 无数据视为最安全
@@ -67,45 +76,31 @@ const riskScore = computed(() => {
let score = 100 // 初始满分 let score = 100 // 初始满分
// 近7天申请次数评估 // 获取各机构类型的风险汇总近12个月
const d7Total = parseInt(data.als_d7_id_bank_allnum || 0) + parseInt(data.als_d7_id_nbank_allnum || 0) const riskSummary = getRiskSummary(data, dimension)
if (d7Total > 5) {
score -= 20 // 近7天申请过多
} else if (d7Total > 3) {
score -= 10
}
// 近15天申请次数评估 // 根据风险汇总计算扣分,权重较高
const d15Total = parseInt(data.als_d15_id_bank_allnum || 0) + parseInt(data.als_d15_id_nbank_allnum || 0) // 高风险:每个扣 15 分(权重高)
if (d15Total > 10) { // 中风险:每个扣 8 分
score -= 15 // 低风险:每个扣 3 分
} else if (d15Total > 5) { // 无风险:不扣分
score -= 8 riskSummary.forEach((risk) => {
} switch (risk.value) {
case '高风险':
// 近1个月申请次数评估 score -= 50 // 高风险权重高,扣分较多
const m1Total = parseInt(data.als_m1_id_bank_allnum || 0) + parseInt(data.als_m1_id_nbank_allnum || 0) break
if (m1Total > 15) { case '中风险':
score -= 20 score -= 30
} else if (m1Total > 8) { break
score -= 10 case '低风险':
} score -= 8
break
// 近3个月申请次数评估 case '无风险':
const m3Total = parseInt(data.als_m3_id_bank_allnum || 0) + parseInt(data.als_m3_id_nbank_allnum || 0) default:
if (m3Total > 20) { // 无风险不扣分
score -= 15 break
} else if (m3Total > 10) { }
score -= 8 })
}
// 近6个月申请次数评估
const m6Total = parseInt(data.als_m6_id_bank_allnum || 0) + parseInt(data.als_m6_id_nbank_allnum || 0)
if (m6Total > 30) {
score -= 10
} else if (m6Total > 15) {
score -= 5
}
// 确保分数在10-100范围内 // 确保分数在10-100范围内
return Math.max(10, Math.min(100, score)) return Math.max(10, Math.min(100, score))

View File

@@ -1,6 +1,6 @@
/** /**
* 数据解析工具函数 * 数据解析工具函数
* 用于解析借贷申请验证A的返回数据 * 用于解析借贷意向验证A的返回数据
*/ */
/** /**
@@ -53,19 +53,20 @@ export const PERIOD_MAP = {
/** /**
* 获取申请次数(按时间段) * 获取申请次数(按时间段)
*/ */
export function getApplicationCounts(variableValue, period) { export function getApplicationCounts(variableValue, period, dimension = "id") {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
// 计算总申请次数(所有类型的申请次数之和) // 计算总申请次数(所有类型的申请次数之和)
const types = [ const types = [
"id_pdl_allnum", // 线上小额现金贷 `${dimKey}_pdl_allnum`, // 线上小额现金贷
"id_caon_allnum", // 线上现金分期 `${dimKey}_caon_allnum`, // 线上现金分期
"id_rel_allnum", // 信用卡(类信用卡) `${dimKey}_rel_allnum`, // 信用卡(类信用卡)
"id_caoff_allnum", // 线下现金分期 `${dimKey}_caoff_allnum`, // 线下现金分期
"id_cooff_allnum", // 线下消费分期 `${dimKey}_cooff_allnum`, // 线下消费分期
"id_af_allnum", // 汽车金融 `${dimKey}_af_allnum`, // 汽车金融
"id_coon_allnum", // 线上消费分期 `${dimKey}_coon_allnum`, // 线上消费分期
"id_oth_allnum", // 其他 `${dimKey}_oth_allnum`, // 其他
]; ];
let total = 0; let total = 0;
@@ -75,11 +76,12 @@ export function getApplicationCounts(variableValue, period) {
}); });
// 银行机构申请次数 // 银行机构申请次数
const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0; const bankTotal =
getValue(variableValue[`${prefix}_${dimKey}_bank_allnum`]) || 0;
// 非银机构申请次数 // 非银机构申请次数
const nbankTotal = const nbankTotal =
getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0; getValue(variableValue[`${prefix}_${dimKey}_nbank_allnum`]) || 0;
// 如果计算出的total为0则使用银行+非银的总和 // 如果计算出的total为0则使用银行+非银的总和
const finalTotal = total > 0 ? total : bankTotal + nbankTotal; const finalTotal = total > 0 ? total : bankTotal + nbankTotal;
@@ -94,17 +96,22 @@ export function getApplicationCounts(variableValue, period) {
/** /**
* 获取特殊时段(周末/夜间)申请次数(按时间段,银行+非银) * 获取特殊时段(周末/夜间)申请次数(按时间段,银行+非银)
*/ */
export function getSpecialPeriodCounts(variableValue, period) { export function getSpecialPeriodCounts(
variableValue,
period,
dimension = "id"
) {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
const weekendBank = const weekendBank =
getValue(variableValue[`${prefix}_id_bank_week_allnum`]) || 0; getValue(variableValue[`${prefix}_${dimKey}_bank_week_allnum`]) || 0;
const weekendNbank = const weekendNbank =
getValue(variableValue[`${prefix}_id_nbank_week_allnum`]) || 0; getValue(variableValue[`${prefix}_${dimKey}_nbank_week_allnum`]) || 0;
const nightBank = const nightBank =
getValue(variableValue[`${prefix}_id_bank_night_allnum`]) || 0; getValue(variableValue[`${prefix}_${dimKey}_bank_night_allnum`]) || 0;
const nightNbank = const nightNbank =
getValue(variableValue[`${prefix}_id_nbank_night_allnum`]) || 0; getValue(variableValue[`${prefix}_${dimKey}_nbank_night_allnum`]) || 0;
return { return {
weekend: weekendBank + weekendNbank, weekend: weekendBank + weekendNbank,
@@ -115,88 +122,116 @@ export function getSpecialPeriodCounts(variableValue, period) {
/** /**
* 获取银行机构申请次数详情 * 获取银行机构申请次数详情
*/ */
export function getBankApplicationDetails(variableValue, period) { export function getBankApplicationDetails(
variableValue,
period,
dimension = "id"
) {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
return { return {
pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]), // 线上小额现金贷 pdl: getValue(variableValue[`${prefix}_${dimKey}_pdl_allnum`]), // 线上小额现金贷
caon: getValue(variableValue[`${prefix}_id_caon_allnum`]), // 线上现金分期 caon: getValue(variableValue[`${prefix}_${dimKey}_caon_allnum`]), // 线上现金分期
rel: getValue(variableValue[`${prefix}_id_rel_allnum`]), // 信用卡(类信用卡) rel: getValue(variableValue[`${prefix}_${dimKey}_rel_allnum`]), // 信用卡(类信用卡)
caoff: getValue(variableValue[`${prefix}_id_caoff_allnum`]), // 线下现金分期 caoff: getValue(variableValue[`${prefix}_${dimKey}_caoff_allnum`]), // 线下现金分期
cooff: getValue(variableValue[`${prefix}_id_cooff_allnum`]), // 线下消费分期 cooff: getValue(variableValue[`${prefix}_${dimKey}_cooff_allnum`]), // 线下消费分期
af: getValue(variableValue[`${prefix}_id_af_allnum`]), // 汽车金融 af: getValue(variableValue[`${prefix}_${dimKey}_af_allnum`]), // 汽车金融
coon: getValue(variableValue[`${prefix}_id_coon_allnum`]), // 线上消费分期 coon: getValue(variableValue[`${prefix}_${dimKey}_coon_allnum`]), // 线上消费分期
oth: getValue(variableValue[`${prefix}_id_oth_allnum`]), // 其他 oth: getValue(variableValue[`${prefix}_${dimKey}_oth_allnum`]), // 其他
bank: getValue(variableValue[`${prefix}_id_bank_allnum`]), // 银行机构申请 bank: getValue(variableValue[`${prefix}_${dimKey}_bank_allnum`]), // 银行机构申请
tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]), // 传统银行申请 tra: getValue(variableValue[`${prefix}_${dimKey}_bank_tra_allnum`]), // 传统银行申请
ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`]), // 网络零售银行申请 ret: getValue(variableValue[`${prefix}_${dimKey}_bank_ret_allnum`]), // 网络零售银行申请
}; };
} }
/** /**
* 获取非银机构申请次数详情 * 获取非银机构申请次数详情
*/ */
export function getNBankApplicationDetails(variableValue, period) { export function getNBankApplicationDetails(
variableValue,
period,
dimension = "id"
) {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
return { return {
nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]), // 非银机构 nbank: getValue(variableValue[`${prefix}_${dimKey}_nbank_allnum`]), // 非银机构
p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_allnum`]), // 改制机构 p2p: getValue(variableValue[`${prefix}_${dimKey}_nbank_p2p_allnum`]), // 改制机构
mc: getValue(variableValue[`${prefix}_id_nbank_mc_allnum`]), // 小贷机构 mc: getValue(variableValue[`${prefix}_${dimKey}_nbank_mc_allnum`]), // 小贷机构
ca: getValue(variableValue[`${prefix}_id_nbank_ca_allnum`]), // 现金类分期机构 ca: getValue(variableValue[`${prefix}_${dimKey}_nbank_ca_allnum`]), // 现金类分期机构
cf: getValue(variableValue[`${prefix}_id_nbank_cf_allnum`]), // 消费类分期机构 cf: getValue(variableValue[`${prefix}_${dimKey}_nbank_cf_allnum`]), // 消费类分期机构
com: getValue(variableValue[`${prefix}_id_nbank_com_allnum`]), // 代偿类分期机构 com: getValue(variableValue[`${prefix}_${dimKey}_nbank_com_allnum`]), // 代偿类分期机构
oth: getValue(variableValue[`${prefix}_id_nbank_oth_allnum`]), // 其他申请 oth: getValue(variableValue[`${prefix}_${dimKey}_nbank_oth_allnum`]), // 其他申请
nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_allnum`]), // 持牌网络小贷机构 nsloan: getValue(
autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_allnum`]), // 持牌汽车金融机构 variableValue[`${prefix}_${dimKey}_nbank_nsloan_allnum`]
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]), // 持牌小贷机构 ), // 持牌网络小贷机构
cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]), // 持牌消费金融机构 autofin: getValue(
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构 variableValue[`${prefix}_${dimKey}_nbank_autofin_allnum`]
else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`]), // 其他申请 ), // 持牌汽车金融机构
sloan: getValue(
variableValue[`${prefix}_${dimKey}_nbank_sloan_allnum`]
), // 持牌小贷机构
cons: getValue(variableValue[`${prefix}_${dimKey}_nbank_cons_allnum`]), // 持牌消费金融机构
finlea: getValue(
variableValue[`${prefix}_${dimKey}_nbank_finlea_allnum`]
), // 持牌融资租赁机构
else: getValue(variableValue[`${prefix}_${dimKey}_nbank_else_allnum`]), // 其他申请
}; };
} }
/** /**
* 获取银行机构申请机构数详情 * 获取银行机构申请机构数详情
*/ */
export function getBankOrgDetails(variableValue, period) { export function getBankOrgDetails(variableValue, period, dimension = "id") {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
return { return {
pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]), pdl: getValue(variableValue[`${prefix}_${dimKey}_pdl_orgnum`]),
caon: getValue(variableValue[`${prefix}_id_caon_orgnum`]), caon: getValue(variableValue[`${prefix}_${dimKey}_caon_orgnum`]),
rel: getValue(variableValue[`${prefix}_id_rel_orgnum`]), rel: getValue(variableValue[`${prefix}_${dimKey}_rel_orgnum`]),
caoff: getValue(variableValue[`${prefix}_id_caoff_orgnum`]), caoff: getValue(variableValue[`${prefix}_${dimKey}_caoff_orgnum`]),
cooff: getValue(variableValue[`${prefix}_id_cooff_orgnum`]), cooff: getValue(variableValue[`${prefix}_${dimKey}_cooff_orgnum`]),
af: getValue(variableValue[`${prefix}_id_af_orgnum`]), af: getValue(variableValue[`${prefix}_${dimKey}_af_orgnum`]),
coon: getValue(variableValue[`${prefix}_id_coon_orgnum`]), coon: getValue(variableValue[`${prefix}_${dimKey}_coon_orgnum`]),
oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]), oth: getValue(variableValue[`${prefix}_${dimKey}_oth_orgnum`]),
bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]), bank: getValue(variableValue[`${prefix}_${dimKey}_bank_orgnum`]),
tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]), tra: getValue(variableValue[`${prefix}_${dimKey}_bank_tra_orgnum`]),
ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`]), ret: getValue(variableValue[`${prefix}_${dimKey}_bank_ret_orgnum`]),
}; };
} }
/** /**
* 获取非银机构申请机构数详情 * 获取非银机构申请机构数详情
*/ */
export function getNBankOrgDetails(variableValue, period) { export function getNBankOrgDetails(variableValue, period, dimension = "id") {
const { prefix } = PERIOD_MAP[period]; const { prefix } = PERIOD_MAP[period];
const dimKey = dimension === "cell" ? "cell" : "id";
return { return {
nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]), nbank: getValue(variableValue[`${prefix}_${dimKey}_nbank_orgnum`]),
p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_orgnum`]), p2p: getValue(variableValue[`${prefix}_${dimKey}_nbank_p2p_orgnum`]),
mc: getValue(variableValue[`${prefix}_id_nbank_mc_orgnum`]), mc: getValue(variableValue[`${prefix}_${dimKey}_nbank_mc_orgnum`]),
ca: getValue(variableValue[`${prefix}_id_nbank_ca_orgnum`]), ca: getValue(variableValue[`${prefix}_${dimKey}_nbank_ca_orgnum`]),
cf: getValue(variableValue[`${prefix}_id_nbank_cf_orgnum`]), cf: getValue(variableValue[`${prefix}_${dimKey}_nbank_cf_orgnum`]),
com: getValue(variableValue[`${prefix}_id_nbank_com_orgnum`]), com: getValue(variableValue[`${prefix}_${dimKey}_nbank_com_orgnum`]),
oth: getValue(variableValue[`${prefix}_id_nbank_oth_orgnum`]), oth: getValue(variableValue[`${prefix}_${dimKey}_nbank_oth_orgnum`]),
nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_orgnum`]), nsloan: getValue(
autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_orgnum`]), variableValue[`${prefix}_${dimKey}_nbank_nsloan_orgnum`]
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]), ),
cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]), autofin: getValue(
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]), variableValue[`${prefix}_${dimKey}_nbank_autofin_orgnum`]
else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`]), ),
sloan: getValue(
variableValue[`${prefix}_${dimKey}_nbank_sloan_orgnum`]
),
cons: getValue(variableValue[`${prefix}_${dimKey}_nbank_cons_orgnum`]),
finlea: getValue(
variableValue[`${prefix}_${dimKey}_nbank_finlea_orgnum`]
),
else: getValue(variableValue[`${prefix}_${dimKey}_nbank_else_orgnum`]),
}; };
} }
@@ -235,3 +270,249 @@ export const FIELD_LABELS = {
else: "其他申请", else: "其他申请",
}, },
}; };
/**
* 根据申请次数计算风险等级
* @param {number} count 申请次数
* @returns {string} 风险等级:无风险、低风险、中风险、高风险
*/
export function calculateRiskLevel(count) {
const num = Number(count) || 0;
if (num === 0) {
return "无风险";
} else if (num >= 1 && num <= 3) {
return "低风险";
} else if (num >= 4 && num <= 8) {
return "中风险";
} else {
return "高风险";
}
}
/**
* 获取各机构类型的风险汇总近12个月
* @param {Object} variableValue 数据对象
* @param {string} dimension 维度id身份证 / cell手机号
* @returns {Array} 风险汇总列表,格式:[{label: '机构类型风险等级', value: '风险等级'}]
*/
export function getRiskSummary(variableValue, dimension = "id") {
const dimKey = dimension === "cell" ? "cell" : "id";
const prefix = "als_m12"; // 近12个月
// 银行类机构申请次数
const bankCount =
getValue(variableValue[`${prefix}_${dimKey}_bank_allnum`]) || 0;
// 非银行类机构申请次数
const nbankCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_allnum`]) || 0;
// 持牌网络小贷机构申请次数
const nsloanCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_nsloan_allnum`]) || 0;
// 持牌小贷机构申请次数
const sloanCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_sloan_allnum`]) || 0;
// 持牌消费金融机构申请次数
const consCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_cons_allnum`]) || 0;
// 持牌融资租赁机构申请次数
const finleaCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_finlea_allnum`]) || 0;
// 持牌汽车金融机构申请次数
const autofinCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_autofin_allnum`]) ||
0;
// 其他非银机构申请次数(包括 p2p, mc, ca, cf, com, oth, else
const p2pCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_p2p_allnum`]) || 0;
const mcCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_mc_allnum`]) || 0;
const caCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_ca_allnum`]) || 0;
const cfCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_cf_allnum`]) || 0;
const comCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_com_allnum`]) || 0;
const othCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_oth_allnum`]) || 0;
const elseCount =
getValue(variableValue[`${prefix}_${dimKey}_nbank_else_allnum`]) || 0;
const otherNbankCount =
p2pCount +
mcCount +
caCount +
cfCount +
comCount +
othCount +
elseCount;
return [
{
label: "银行类机构风险等级",
value: calculateRiskLevel(bankCount),
count: bankCount,
},
{
label: "非银行类机构风险等级",
value: calculateRiskLevel(nbankCount),
count: nbankCount,
},
{
label: "持牌网络小贷机构风险等级",
value: calculateRiskLevel(nsloanCount),
count: nsloanCount,
},
{
label: "持牌小贷机构风险等级",
value: calculateRiskLevel(sloanCount),
count: sloanCount,
},
{
label: "持牌消费金融机构风险等级",
value: calculateRiskLevel(consCount),
count: consCount,
},
{
label: "持牌融资租赁机构风险等级",
value: calculateRiskLevel(finleaCount),
count: finleaCount,
},
{
label: "持牌汽车金融机构风险等级",
value: calculateRiskLevel(autofinCount),
count: autofinCount,
},
{
label: "其他非银机构风险等级",
value: calculateRiskLevel(otherNbankCount),
count: otherNbankCount,
},
];
}
/**
* 生成风险汇总解读文本
* @param {Array} riskSummary 风险汇总列表
* @returns {string} 解读文本
*/
export function generateRiskRemark(riskSummary) {
if (!riskSummary || riskSummary.length === 0) {
return "暂无风险数据。";
}
// 按风险等级优先级排序:高风险 > 中风险 > 低风险 > 无风险
const riskPriority = { 高风险: 4, 中风险: 3, 低风险: 2, 无风险: 1 };
const sortedRisks = riskSummary
.filter((r) => r.value !== "无风险")
.sort(
(a, b) =>
(riskPriority[b.value] || 0) - (riskPriority[a.value] || 0)
);
if (sortedRisks.length === 0) {
return "经大数据分析,您在各机构类型的风险等级均为无风险,信用状况良好。请您继续保持良好的借还款履约行为,维护个人风险。";
}
// 取最高风险的机构类型
const highestRisk = sortedRisks[0];
const orgType = highestRisk.label.replace("风险等级", ""); // 去掉"风险等级"后缀
const riskLevel = highestRisk.value;
const count = highestRisk.count || 0;
// 生成解读文本
let remark = `经大数据分析,您命中${orgType}风险等级的${riskLevel}名单`;
if (count > 0) {
remark += `,历史命中 ${count}`;
}
remark += `,最近一次进入${orgType}风险等级的${riskLevel}名单在近 1 年内。请您注意对应机构的正常借还款履约行为,提高信用评价。`;
return remark;
}
/**
* 将风险等级映射为“贷款申请需求”文本
*/
function mapRiskToDemandText(level) {
switch (level) {
case "高风险":
return "贷款申请需求较高";
case "中风险":
return "贷款申请需求适中";
case "低风险":
case "无风险":
default:
return "贷款申请需求较低";
}
}
/**
* 将风险等级映射为“贷款申请频率”文本
*/
function mapRiskToFrequencyText(level) {
switch (level) {
case "高风险":
return "贷款申请频率较高";
case "中风险":
return "贷款申请频率适中";
case "低风险":
case "无风险":
default:
return "贷款申请频率较低";
}
}
/**
* 生成银行 / 非银申请情况解读近1年 / 近3个月
* @param {Object} variableValue
* @param {string} dimension
* @returns {{ bankSituation: string, bankAdvice: string, nbankSituation: string, nbankAdvice: string }}
*/
export function getApplyRemarks(variableValue, dimension = "id") {
const v = variableValue || {};
// 近12个月 & 近3个月 申请次数
const m12 = getApplicationCounts(v, "m12", dimension);
const m3 = getApplicationCounts(v, "m3", dimension);
const bankYearCount = m12.bank || 0;
const bank3mCount = m3.bank || 0;
const nbankYearCount = m12.nbank || 0;
const nbank3mCount = m3.nbank || 0;
// 使用风险等级来映射需求 / 频率文本
const bankYearRisk = calculateRiskLevel(bankYearCount);
const bank3mRisk = calculateRiskLevel(bank3mCount);
const nbankYearRisk = calculateRiskLevel(nbankYearCount);
const nbank3mRisk = calculateRiskLevel(nbank3mCount);
const bankDemandText = mapRiskToDemandText(bankYearRisk);
const bankFreqText = mapRiskToFrequencyText(bank3mRisk);
const nbankDemandText = mapRiskToDemandText(nbankYearRisk);
const nbankFreqText = mapRiskToFrequencyText(nbank3mRisk);
const advice =
"报告检测的是近12个月内的申请数据含同一机构。如果申请过于频繁会对评审有影响请保持良好的借贷习惯切勿频繁申请拒绝不明平台的审核邀请。";
const bankSituation =
`近一年申请次数:${bankYearCount}次,${bankDemandText}\n` +
`近3个月申请次数${bank3mCount}次,${bankFreqText}`;
const nbankSituation =
`近一年申请次数:${nbankYearCount}次,${nbankDemandText}\n` +
`近3个月申请次数${nbank3mCount}次,${nbankFreqText}`;
return {
bankSituation,
bankAdvice: advice,
nbankSituation,
nbankAdvice: advice,
};
}

View File

@@ -10,12 +10,12 @@
</div> </div>
<!-- 最终评分 --> <!-- 最终评分 -->
<div v-if="finalWeight" class="bg-blue-50 rounded-lg p-4 border border-[#2B79EE8F] mb-3"> <!-- <div v-if="finalWeight" class="bg-blue-50 rounded-lg p-4 border border-[#2B79EE8F] mb-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-sm text-gray-600">最终规则评分</span> <span class="text-sm text-gray-600">最终规则评分</span>
<span class="text-xl font-bold text-gray-800">{{ finalWeight }}</span> <span class="text-xl font-bold text-gray-800">{{ finalWeight }}</span>
</div> </div>
</div> </div> -->
<!-- 命中规则列表 --> <!-- 命中规则列表 -->
<div v-if="hitRules.length > 0"> <div v-if="hitRules.length > 0">
@@ -73,9 +73,9 @@
summaryData.byRiskLevel && summaryData.byRiskLevel &&
summaryData.byRiskLevel.find(level => level.id === key && level.triggered > 0) summaryData.byRiskLevel.find(level => level.id === key && level.triggered > 0)
" :class="[ " :class="[
'absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-sm font-bold leading-none text-white rounded-full', 'absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-sm font-bold leading-none text-white rounded-full',
key === 'low' ? 'bg-blue-500' : key === 'medium' ? 'bg-orange-500' : 'bg-red-500', key === 'low' ? 'bg-blue-500' : key === 'medium' ? 'bg-orange-500' : 'bg-red-500',
]"> ]">
{{summaryData.byRiskLevel.find(level => level.id === key).triggered}} {{summaryData.byRiskLevel.find(level => level.id === key).triggered}}
</span> </span>
</button> </button>
@@ -115,10 +115,10 @@
class="w-8 h-8 object-contain" /> class="w-8 h-8 object-contain" />
</div> </div>
<h3 class="text-base font-semibold" :class="levelSummary.id === 'low' <h3 class="text-base font-semibold" :class="levelSummary.id === 'low'
? 'text-blue-700' ? 'text-blue-700'
: levelSummary.id === 'medium' : levelSummary.id === 'medium'
? 'text-orange-700' ? 'text-orange-700'
: 'text-red-700' : 'text-red-700'
"> ">
{{ levelSummary.label }} {{ levelSummary.label }}
</h3> </h3>
@@ -127,12 +127,12 @@
<div> <div>
<p class="text-sm text-gray-600">命中项</p> <p class="text-sm text-gray-600">命中项</p>
<p class="text-xl font-bold" :class="levelSummary.triggered > 0 <p class="text-xl font-bold" :class="levelSummary.triggered > 0
? levelSummary.id === 'low' ? levelSummary.id === 'low'
? 'text-blue-600' ? 'text-blue-600'
: levelSummary.id === 'medium' : levelSummary.id === 'medium'
? 'text-orange-600' ? 'text-orange-600'
: 'text-red-600' : 'text-red-600'
: 'text-gray-500' : 'text-gray-500'
"> ">
{{ levelSummary.triggered }} / {{ levelSummary.total }} {{ levelSummary.triggered }} / {{ levelSummary.total }}
</p> </p>
@@ -140,10 +140,10 @@
<button <button
class="text-sm px-3 py-1.5 rounded-full focus:outline-none transition-all duration-300" class="text-sm px-3 py-1.5 rounded-full focus:outline-none transition-all duration-300"
:class="levelSummary.id === 'low' :class="levelSummary.id === 'low'
? 'bg-blue-100 text-blue-600 hover:bg-blue-200' ? 'bg-blue-100 text-blue-600 hover:bg-blue-200'
: levelSummary.id === 'medium' : levelSummary.id === 'medium'
? 'bg-orange-100 text-orange-600 hover:bg-orange-200' ? 'bg-orange-100 text-orange-600 hover:bg-orange-200'
: 'bg-red-100 text-red-600 hover:bg-red-200' : 'bg-red-100 text-red-600 hover:bg-red-200'
" @click.stop="handleRiskLevelClick(levelSummary.id)"> " @click.stop="handleRiskLevelClick(levelSummary.id)">
查看详情 查看详情
</button> </button>
@@ -188,8 +188,8 @@
: 'bg-blue-500' : 'bg-blue-500'
: 'bg-gray-200', : 'bg-gray-200',
]" :style="{ ]" :style="{
width: `${(typeSummary.triggered / Math.max(1, typeSummary.total)) * 100}%`, width: `${(typeSummary.triggered / Math.max(1, typeSummary.total)) * 100}%`,
}"></div> }"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -244,8 +244,8 @@
: 'bg-blue-500' : 'bg-blue-500'
: 'bg-gray-200', : 'bg-gray-200',
]" :style="{ ]" :style="{
width: `${(institutionSummary.triggered / Math.max(1, institutionSummary.total)) * 100}%`, width: `${(institutionSummary.triggered / Math.max(1, institutionSummary.total)) * 100}%`,
}"></div> }"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -793,7 +793,10 @@ const riskScore = computed(() => {
} }
// 根据风险级别计算分数,高风险权重更高 // 根据风险级别计算分数,高风险权重更高
const score = Math.max(10, 100 - (highRiskCount * 30 + mediumRiskCount * 15 + lowRiskCount * 5)) // 高风险(无法收回):每个扣 40 分
// 中风险(严重逾期):每个扣 20 分
// 低风险(短期逾期):每个扣 5 分
const score = Math.max(10, 100 - (highRiskCount * 40 + mediumRiskCount * 20 + lowRiskCount * 5))
return score return score
}) })

View File

@@ -778,7 +778,7 @@
6本制度的制定修改与废止皆经由{{ companyName }}讨论决定解释权归{{ companyName }}所有 6本制度的制定修改与废止皆经由{{ companyName }}讨论决定解释权归{{ companyName }}所有
</p> </p>
<p class="indent-8 mb-4"> <p class="indent-8 mb-4">
7本制度于2022年1月1日起实施公司将根据实施情况对本制度进行修正和调整 7本制度于2026年1月1日起实施公司将根据实施情况对本制度进行修正和调整
</p> </p>
<p class="indent-8 mb-8"> <p class="indent-8 mb-8">

View File

@@ -5,7 +5,18 @@
<div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm"> <div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span> <span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
<span class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</span> <div class="flex items-center gap-2">
<!-- 状态标签 -->
<span v-if="item.status === 3"
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
已退款
</span>
<!-- 金额显示 -->
<span :class="item.status === 3 ? 'text-gray-400 line-through' : 'text-green-500'"
class="font-bold">
{{ item.status === 3 ? '-' : '+' }}{{ item.amount.toFixed(2) }}
</span>
</div>
</div> </div>
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
@@ -69,7 +80,7 @@ const onLoad = async () => {
// 获取数据 // 获取数据
const getData = async () => { const getData = async () => {
if (loading.value || finished.value) return if (loading.value || finished.value) return
try { try {
loading.value = true loading.value = true
const { data: res, error } = await getCommissionList({ const { data: res, error } = await getCommissionList({

View File

@@ -1,5 +1,7 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ShareReportButtonList from '@/components/ShareReportButtonList.vue'
const router = useRouter() const router = useRouter()
const page = ref(1) const page = ref(1)
const pageSize = ref(10) const pageSize = ref(10)
@@ -88,26 +90,67 @@ function statusClass(state) {
<template> <template>
<div class="flex flex-col gap-4 p-4"> <div class="flex flex-col gap-4 p-4">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div v-for="item in reportList" :key="item.id" @click="toDetail(item)" <div v-for="item in reportList" :key="item.id" class="bg-white rounded-lg shadow-sm p-4 mb-4">
class="bg-white rounded-lg shadow-sm p-4 mb-4 relative cursor-pointer"> <!-- 顶部标签 -->
<div class="flex flex-col"> <div class="flex items-center gap-2 mb-3">
<div class="text-xl text-black mb-1">{{ item.product_name }}</div> <span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-700">{{ item.product_name }}</span>
<div class="text-sm text-[#999999]">{{ item.create_time }}</div>
</div> </div>
<div class="absolute top-0 right-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-white text-sm font-medium"
:class="[statusClass(item.query_state)]"> <!-- 主要内容区域 -->
{{ stateText(item.query_state) }} <div class="flex justify-between items-start mb-3">
<!-- 左侧姓名手机号查询时间 -->
<div class="flex-1">
<div v-if="item.params" class="mb-2 flex items-center gap-2">
<div v-if="item.params.name" class="font-medium text-black">
{{ item.params.name }}
</div>
<div v-if="item.params.mobile" class=" text-gray-600">
{{ item.params.mobile }}
</div>
</div>
<div class="text-sm text-gray-500">
查询时间: {{ item.create_time }}
</div>
</div>
<!-- 右侧价格 -->
<div v-if="item.price" class="text-lg font-semibold text-blue-600">
¥{{ item.price.toFixed(2) }}
</div>
</div>
<!-- 底部按钮 -->
<div v-if="item.query_state === 'success'" class="flex gap-2 mt-3" @click.stop>
<button @click="toDetail(item)"
class="flex-1 px-4 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
查看
</button>
<ShareReportButtonList :order-id="item.order_id" :disabled="false" />
</div> </div>
</div> </div>
</van-list> </van-list>
</div> </div>
<van-empty v-if="!loading && reportList.length === 0" description="暂无推广查询记录" /> <van-empty v-if="!loading && reportList.length === 0" description="暂无推广查询记录" />
</template> </template>
<style scoped> <style scoped>
.status-pending { background-color: #1976d2; color: white; } .status-pending {
.status-success { background-color: #1FBE5D; color: white; } background-color: #1976d2;
.status-failed { background-color: #EB3C3C; color: white; } color: white;
.status-refunded { background-color: #999999; color: white; } }
.status-success {
background-color: #1FBE5D;
color: white;
}
.status-failed {
background-color: #EB3C3C;
color: white;
}
.status-refunded {
background-color: #999999;
color: white;
}
</style> </style>

View File

@@ -11,7 +11,18 @@
<div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm"> <div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span> <span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
<span class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</span> <div class="flex items-center gap-2">
<!-- 状态标签 -->
<span v-if="item.status === 3"
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
已退款
</span>
<!-- 金额显示 -->
<span :class="item.status === 3 ? 'text-gray-400 line-through' : 'text-green-500'"
class="font-bold">
{{ item.status === 3 ? '-' : '+' }}{{ item.amount.toFixed(2) }}
</span>
</div>
</div> </div>
<!-- 推广返佣显示返佣类型 tag --> <!-- 推广返佣显示返佣类型 tag -->
<!-- <div class="flex items-center mb-2" v-if="activeTab === 'promote' && item.rebate_type"> <!-- <div class="flex items-center mb-2" v-if="activeTab === 'promote' && item.rebate_type">
@@ -209,6 +220,7 @@ const getData = async () => {
order_no: item.order_no, order_no: item.order_no,
rebate_type: 4, // 升级返佣类型(用于内部标识,不显示) rebate_type: 4, // 升级返佣类型(用于内部标识,不显示)
amount: item.amount, amount: item.amount,
status: item.status || 1, // 状态字段默认为1已发放
create_time: item.create_time, create_time: item.create_time,
from_level: item.from_level, from_level: item.from_level,
to_level: item.to_level to_level: item.to_level

View File

@@ -26,7 +26,7 @@
本人在授权签署前已通过实名认证及动态验证码验证或其他身份验证手段确认本授权行为为本人真实意思表示平台已履行身份验证义务 本人在授权签署前已通过实名认证及动态验证码验证或其他身份验证手段确认本授权行为为本人真实意思表示平台已履行身份验证义务
</li> </li>
<li> <li>
本人在此声明已充分理解上述授权条款含义知晓并自愿承担因授权数据使用可能带来的后果包括但不限于影响个人信用评分生活行为等本人确认授权范围内的相关信息由本人提供并真实有效 本人在此声明已充分理解上述授权条款含义知晓并自愿承担因授权数据使用可能带来的后果包括但不限于影响个人风险评分生活行为等本人确认授权范围内的相关信息由本人提供并真实有效
</li> </li>
<li> <li>
若用户冒名签署或提供虚假信息由用户自行承担全部法律责任平台不承担任何后果 若用户冒名签署或提供虚假信息由用户自行承担全部法律责任平台不承担任何后果

View File

@@ -6,6 +6,7 @@ import { useUserStore } from '@/stores/userStore'
import { useAppStore } from '@/stores/appStore' import { useAppStore } from '@/stores/appStore'
import { useDialogStore } from '@/stores/dialogStore' import { useDialogStore } from '@/stores/dialogStore'
import BindPhoneOnlyDialog from '@/components/BindPhoneOnlyDialog.vue' import BindPhoneOnlyDialog from '@/components/BindPhoneOnlyDialog.vue'
import ShareReportButtonList from '@/components/ShareReportButtonList.vue'
const router = useRouter() const router = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
const appStore = useAppStore() const appStore = useAppStore()
@@ -144,15 +145,42 @@ function statusClass(state) {
@click="toLogin">登录</button> @click="toLogin">登录</button>
</div> </div>
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div v-for="item in reportList" :key="item.id" @click="toDetail(item)" <div v-for="item in reportList" :key="item.id" class="bg-white rounded-lg shadow-sm p-4 mb-4">
class="bg-white rounded-lg shadow-sm p-4 mb-4 relative cursor-pointer"> <!-- 顶部标签 -->
<div class="flex flex-col"> <div class="flex items-center gap-2 mb-3">
<div class="text-xl text-black mb-1">{{ item.product_name }}</div> <span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-700">{{ item.product_name }}</span>
<div class="text-sm text-[#999999]">{{ item.create_time }}</div>
</div> </div>
<div class="absolute top-0 right-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-white text-sm font-medium"
:class="[statusClass(item.query_state)]"> <!-- 主要内容区域 -->
{{ stateText(item.query_state) }} <div class="flex justify-between items-start mb-3">
<!-- 左侧姓名手机号查询时间 -->
<div class="flex-1">
<div v-if="item.params" class="mb-2 flex items-center gap-2">
<div v-if="item.params.name" class="text-lg font-medium text-black">
{{ item.params.name }}
</div>
<div v-if="item.params.mobile" class="text-sm text-gray-600">
{{ item.params.mobile }}
</div>
</div>
<div class="text-sm text-gray-500">
查询时间: {{ item.create_time }}
</div>
</div>
<!-- 右侧价格 -->
<div v-if="item.price" class="text-lg font-semibold text-blue-600">
¥{{ item.price.toFixed(2) }}
</div>
</div>
<!-- 底部按钮 -->
<div v-if="item.query_state === 'success'" class="flex gap-2 mt-3" @click.stop>
<button @click="toDetail(item)"
class="flex-1 px-4 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
查看
</button>
<ShareReportButtonList :order-id="item.order_id" :disabled="false" />
</div> </div>
</div> </div>
</van-list> </van-list>

View File

@@ -132,7 +132,7 @@
</van-dialog> </van-dialog>
<!-- 二维码弹窗 --> <!-- 二维码弹窗 -->
<QRcode v-model:show="showQRcode" mode="invitation" :invite-link="inviteLink" /> <QRcode v-model:show="showQRcode" mode="invitation" :inviteLink="inviteLink" />
</div> </div>
</template> </template>

View File

@@ -56,9 +56,14 @@
<!-- 右侧资产信息仅代理显示 --> <!-- 右侧资产信息仅代理显示 -->
<div v-if="isAgent" class="text-right"> <div v-if="isAgent" class="text-right">
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">余额</div> <div class="text-sm mb-1" style="color: var(--van-text-color-2);">余额</div>
<div class="text-2xl font-bold" style="color: var(--van-theme-primary);"> <div class="text-2xl font-bold"
:style="(revenueData?.balance || 0) < 0 ? 'color: #ef4444;' : 'color: var(--van-theme-primary);'">
¥ {{ (revenueData?.balance || 0).toFixed(2) }} ¥ {{ (revenueData?.balance || 0).toFixed(2) }}
</div> </div>
<!-- 负数余额提示 -->
<div v-if="(revenueData?.balance || 0) < 0" class="text-xs mt-1" style="color: #ef4444;">
账户存在欠款需补足后才能提现
</div>
</div> </div>
</div> </div>
<!-- 下半部分资产详情和操作按钮仅代理显示 --> <!-- 下半部分资产详情和操作按钮仅代理显示 -->
@@ -217,6 +222,12 @@
<img src="@/assets/images/me/tx.svg" class="w-8 h-8 object-contain" alt="提现" /> <img src="@/assets/images/me/tx.svg" class="w-8 h-8 object-contain" alt="提现" />
<span class="text-xs text-gray-700 font-medium text-center">提现</span> <span class="text-xs text-gray-700 font-medium text-center">提现</span>
</button> --> </button> -->
<button
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-purple-50 transition-colors"
@click="toAgentSystemGuide">
<img src="@/assets/images/me/yhxy.svg" class="w-8 h-8 object-contain" alt="代理系统指南" />
<span class="text-xs text-gray-700 font-medium text-center">代理系统指南</span>
</button>
<!-- 推广查询记录 --> <!-- 推广查询记录 -->
<button v-if="isAgent" <button v-if="isAgent"
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors" class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
@@ -395,6 +406,9 @@ const toAgentReport = () => {
const toWithdraw = () => { const toWithdraw = () => {
router.push({ name: "withdraw" }); router.push({ name: "withdraw" });
}; };
const toAgentSystemGuide = () => {
router.push({ name: "agentSystemGuide" });
};
const toWithdrawDetails = () => { const toWithdrawDetails = () => {
router.push({ name: "withdrawDetails" }); router.push({ name: "withdrawDetails" });

View File

@@ -30,7 +30,7 @@ const { updateSEO } = useSEO()
onMounted(() => { onMounted(() => {
updateSEO({ updateSEO({
title: '404 - 页面未找到 | 一查查', title: '404 - 页面未找到 | 一查查',
description: '抱歉,您访问的页面不存在。一查查专业大数据风险管控平台,提供大数据风险报告查询、婚姻状况查询、个人信用评估等服务。', description: '抱歉,您访问的页面不存在。一查查专业大数据风险管控平台,提供大数据风险报告查询、婚姻状况查询、个人风险评估等服务。',
keywords: '404, 页面未找到, 一查查, 大数据风险管控', keywords: '404, 页面未找到, 一查查, 大数据风险管控',
url: 'https://www.zhinengcha.cn/404' url: 'https://www.zhinengcha.cn/404'
}) })
@@ -127,7 +127,8 @@ onMounted(() => {
flex-wrap: wrap; flex-wrap: wrap;
} }
.home-link, .help-link { .home-link,
.help-link {
display: inline-block; display: inline-block;
padding: 15px 30px; padding: 15px 30px;
font-size: 16px; font-size: 16px;
@@ -164,21 +165,22 @@ onMounted(() => {
.not-found-content { .not-found-content {
padding: 40px 20px; padding: 40px 20px;
} }
.not-found h1 { .not-found h1 {
font-size: 80px; font-size: 80px;
} }
.not-found h2 { .not-found h2 {
font-size: 24px; font-size: 24px;
} }
.actions { .actions {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.home-link, .help-link { .home-link,
.help-link {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
} }

Some files were not shown because too many files have changed in this diff Show More