f

src/ui/CYYSYP0T4.vue

@@ -0,0 +1,172 @@
+<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>