tyc-webview-v2/src/ui/CIVYZ9K7F.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" :class="resultSectionClass">
            <div class="result-main">
                <div class="result-label">核验结果</div>
                <div class="result-value" :class="resultClass">
                    {{ resultText }}
                </div>
            </div>
            <div v-if="desc" class="result-desc">
                {{ desc }}
            </div>
        </div>

        <div v-if="hasBaseInfo" class="info-block">
            <div class="block-title">被核验人信息</div>
            <div class="info-row">
                <span class="info-label">姓名</span>
                <span class="info-value">{{ maskedName }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">性别</span>
                <span class="info-value">{{ sex || '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">生日</span>
                <span class="info-value">{{ birthdayDisplay }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">户籍地址</span>
                <span class="info-value">{{ address || '-' }}</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 resultCode = computed(() => {
    const v = props.data?.result;
    if (v === 0 || v === '0') return 0;
    if (v === 1 || v === '1') return 1;
    if (v === 2 || v === '2') return 2;
    return null;
});

const resultText = computed(() => {
    switch (resultCode.value) {
        case 0:
            return '一致';
        case 1:
            return '不一致';
        case 2:
            return '无记录';
        default:
            return '暂无结果';
    }
});

const resultClass = computed(() => {
    if (resultCode.value === 0) return 'result-ok';
    if (resultCode.value === 1) return 'result-bad';
    if (resultCode.value === 2) return 'result-unknown';
    return 'result-unknown';
});

const resultSectionClass = computed(() => {
    if (resultCode.value === 0) return 'result-section ok';
    if (resultCode.value === 1) return 'result-section bad';
    if (resultCode.value === 2) return 'result-section unknown';
    return 'result-section unknown';
});

const desc = computed(() => props.data?.desc || '');
const sex = computed(() => props.data?.sex || '');
const birthday = computed(() => props.data?.birthday || '');
const address = computed(() => props.data?.address || '');

const birthdayDisplay = computed(() => {
    const b = birthday.value;
    if (!b || b.length !== 8) return b || '-';
    const y = b.slice(0, 4);
    const m = b.slice(4, 6);
    const d = b.slice(6, 8);
    return `${y}-${m}-${d}`;
});

const maskedName = computed(() => {
    const name = props.params?.name || '';
    if (!name) return '-';
    return name.length > 1 ? name[0] + '*'.repeat(name.length - 1) : '*';
});

const hasBaseInfo = computed(() => sex.value || birthday.value || address.value || props.params?.name);
</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;
}

.result-section.ok {
    background: #ecfdf3;
    border-color: #22c55e33;
}

.result-section.bad {
    background: #fef2f2;
    border-color: #ef444433;
}

.result-section.unknown {
    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;
}

.result-ok {
    color: #16a34a;
}

.result-bad {
    color: #dc2626;
}

.result-unknown {
    color: #6b7280;
}

.result-desc {
    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>