report_viewer/src/ui/CYYSY9E4A.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="info-row">
                <span class="info-label">号段</span>
                <span class="info-value font-mono">{{ data.mobilePrefix || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">省份</span>
                <span class="info-value">{{ data.provinceName || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">城市</span>
                <span class="info-value">{{ data.cityName || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">运营商</span>
                <span class="info-value">{{ data.channel || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">区号</span>
                <span class="info-value">{{ data.areaCode || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">邮编</span>
                <span class="info-value">{{ data.postCode || '-' }}</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);
</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 {
    background: #f9fafb;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
}

.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>