97 lines
3.7 KiB
Vue
97 lines
3.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="gamma-grid-3">
|
|||
|
|
<div class="gamma-card info-card">
|
|||
|
|
<div class="gamma-title"><span>👤</span> 用户信息</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">姓名:</span>
|
|||
|
|
<span class="info-value">
|
|||
|
|
{{ maskedName }}
|
|||
|
|
<span v-if="realNameAuth.coincide" class="gamma-tag">身份证姓名一致</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item"><span class="info-label">性别</span><span>{{ params.sex || '—' }}</span></div>
|
|||
|
|
<div class="info-item"><span class="info-label">年龄</span><span>{{ params.age || '—' }}</span></div>
|
|||
|
|
<div class="info-item"><span class="info-label">身份证号</span><span>{{ maskedIdCard }}</span></div>
|
|||
|
|
<div class="info-item"><span class="info-label">户籍地</span><span>{{ params.location || '—' }}</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gamma-card info-card">
|
|||
|
|
<div class="gamma-title"><span>📱</span> 手机信息</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">手机号:</span>
|
|||
|
|
<span>
|
|||
|
|
{{ maskedMobile }}
|
|||
|
|
<span v-if="mobile3Verify.status === 1" class="gamma-tag">身份证姓名手机号一致</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">手机号在网时长:</span>
|
|||
|
|
<span>{{ durationText }} ✅</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">手机号在网状态:</span>
|
|||
|
|
<span :class="mobile4Verify.status === 2 ? 'gamma-text-danger' : ''">
|
|||
|
|
{{ mobileStatusText(mobile4Verify.status) }}
|
|||
|
|
<span v-if="mobile4Verify.status === 2"> ❗</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item"><span class="info-label">手机号运营商:</span><span>{{ params.carrier || '—' }}</span></div>
|
|||
|
|
<div class="info-item"><span class="info-label">手机号归属地:</span><span>{{ params.phonePlace || '—' }}</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gamma-card info-card">
|
|||
|
|
<div class="gamma-title"><span>⚖️</span> 司法风险</div>
|
|||
|
|
<div v-for="item in courtItems" :key="item.key" class="info-item">
|
|||
|
|
<span class="info-label">
|
|||
|
|
<span :class="item.hit ? 'gamma-text-danger' : 'gamma-text-success'">{{ item.hit ? '❗' : '✅' }}</span>
|
|||
|
|
{{ item.label }}
|
|||
|
|
</span>
|
|||
|
|
<span :class="item.hit ? 'gamma-text-danger' : ''">{{ item.hit ? '是' : '否' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
import { maskName, maskIdCard, maskMobile, mobileStatusText, buildCourtRiskItems } from '../reportHelper';
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
params: { type: Object, default: () => ({}) },
|
|||
|
|
realNameAuth: { type: Object, default: () => ({}) },
|
|||
|
|
mobile3Verify: { type: Object, default: () => ({}) },
|
|||
|
|
mobile4Verify: { type: Object, default: () => ({}) },
|
|||
|
|
mobileDuration: { type: Object, default: () => ({}) },
|
|||
|
|
courtRisk: { type: Object, default: () => ({}) },
|
|||
|
|
personalLawsuit: { type: Object, default: () => ({}) },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const maskedName = computed(() => maskName(props.params.name));
|
|||
|
|
const maskedIdCard = computed(() => maskIdCard(props.params.id_card));
|
|||
|
|
const maskedMobile = computed(() => maskMobile(props.params.mobile));
|
|||
|
|
|
|||
|
|
const durationText = computed(() => {
|
|||
|
|
const range = props.mobileDuration.range || '';
|
|||
|
|
if (range.includes('[24')) return '24~36月';
|
|||
|
|
return range || '—';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const courtItems = computed(() =>
|
|||
|
|
buildCourtRiskItems(props.courtRisk, props.personalLawsuit),
|
|||
|
|
);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.info-card { margin-bottom: 0; }
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-label { color: #666; flex-shrink: 0; }
|
|||
|
|
</style>
|