173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<template>
|
||
<div class="card">
|
||
<div class="header-box">
|
||
<h3 class="header-title">手机号码在网时长</h3>
|
||
<p class="header-desc">展示号码在当前运营商下的在网时长区间</p>
|
||
</div>
|
||
|
||
<div v-if="hasData" class="result-section">
|
||
<div class="result-main">
|
||
<div class="result-label">在网时长</div>
|
||
<div class="result-value">
|
||
{{ timeText }}
|
||
</div>
|
||
</div>
|
||
<div class="result-sub">
|
||
<span>运营商：{{ channelText }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="hasParams" class="info-block">
|
||
<div class="block-title">被核验号码</div>
|
||
<div class="info-row">
|
||
<span class="info-label">手机号</span>
|
||
<span class="info-value font-mono">{{ params.mobile || params.mobile_no || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!hasData" class="empty-tip">暂无核验结果</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
|
||
const props = defineProps({
|
||
data: { type: Object, default: () => ({}) },
|
||
params: { type: Object, default: () => ({}) },
|
||
apiId: { type: String, default: '' },
|
||
index: { type: Number, default: 0 },
|
||
notifyRiskStatus: { type: Function, default: () => { } },
|
||
});
|
||
|
||
const hasData = computed(() => props.data && Object.keys(props.data).length > 0);
|
||
|
||
const time = computed(() => props.data?.time || '');
|
||
|
||
const timeText = computed(() => {
|
||
const t = time.value;
|
||
if (!t) return '-';
|
||
switch (t) {
|
||
case '[0,3)':
|
||
return '0–3 个月';
|
||
case '[3,6)':
|
||
return '3–6 个月';
|
||
case '[6,12)':
|
||
return '6–12 个月';
|
||
case '[12,24)':
|
||
return '12–24 个月';
|
||
case '[24,-1)':
|
||
return '24 个月及以上';
|
||
default:
|
||
return t;
|
||
}
|
||
});
|
||
|
||
const channelRaw = computed(() => props.data?.channel || '');
|
||
|
||
const channelText = computed(() => {
|
||
const c = channelRaw.value;
|
||
if (!c) return '-';
|
||
if (c === 'cmcc') return '移动 (cmcc)';
|
||
if (c === 'cucc') return '联通 (cucc)';
|
||
if (c === 'ctcc') return '电信 (ctcc)';
|
||
if (c === 'gdcc') return '广电 (gdcc)';
|
||
return c;
|
||
});
|
||
|
||
const hasParams = computed(() => {
|
||
const p = props.params || {};
|
||
return p.mobile || p.mobile_no;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.header-box {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.header-desc {
|
||
font-size: 0.875rem;
|
||
color: #6b7280;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.result-section {
|
||
padding: 0.75rem 0.875rem;
|
||
border-radius: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid #e5e7eb;
|
||
background: #f9fafb;
|
||
}
|
||
|
||
.result-main {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.result-label {
|
||
font-size: 0.875rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.result-value {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.result-sub {
|
||
margin-top: 0.5rem;
|
||
font-size: 0.875rem;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.info-block {
|
||
margin-top: 1rem;
|
||
padding: 0.75rem 0.875rem;
|
||
border-radius: 0.75rem;
|
||
background: #f9fafb;
|
||
}
|
||
|
||
.block-title {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.875rem;
|
||
padding: 0.15rem 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.info-value {
|
||
color: #111827;
|
||
margin-left: 1rem;
|
||
text-align: right;
|
||
}
|
||
|
||
.empty-tip {
|
||
color: #9ca3af;
|
||
font-size: 0.875rem;
|
||
padding: 1rem 0;
|
||
text-align: center;
|
||
}
|
||
</style>
|