ucard-person-app-front/pages/mine/components/VerificationRow.vue

<template>
    <view>
        <view :class="['verification-row', { 'verification-row-last': isLast && !idFrontUrl }]">
            <view class="verification-icon">
                <cwg-icon :name="icon" :size="20" color="#9ca3af" />
            </view>
            <view class="verification-content">
                <view class="verification-label-wrapper">
                    <text class="verification-label">{{ label }}</text>
                    <text v-if="idType" class="verification-id-type">({{ idType }})</text>
                </view>
                <view class="verification-status-wrapper">
                    <cwg-icon :name="statusIcon" :size="18" :color="statusColor" />
                    <text :class="['verification-status-text', statusClass]">
                        {{ statusText }}
                    </text>
                    <text v-if="date" class="verification-date">• {{ date }}</text>
                </view>
            </view>
            <view class="verification-arrow">
                <cwg-icon name="right" :size="20" color="#d1d5db" />
            </view>
        </view>

        <!-- ID Card Images -->
        <view v-if="idFrontUrl || idBackUrl || idHoldUrl" :class="['id-card-images', { 'id-card-last': isLast }]">
            <!-- <view class="id-card-label">
                <text class="id-card-label-text">{{ t('card.Form.f21') }}</text>
            </view> -->
            <view class="id-card-container">
                <view v-if="idFrontUrl" class="id-card-item" @click="previewImage(absoluteUrl(idFrontUrl))">
                    <image :src="absoluteUrl(idFrontUrl)" class="id-card-image" mode="aspectFill" />
                    <text class="id-card-text">{{ t('card.Form.f21') }}</text>
                </view>
                <view v-if="idBackUrl" class="id-card-item" @click="previewImage(absoluteUrl(idBackUrl))">
                    <image :src="absoluteUrl(idBackUrl)" class="id-card-image" mode="aspectFill" />
                    <text class="id-card-text">{{ t('card.Form.f22') }}</text>
                </view>
                <view v-if="idHoldUrl" class="id-card-item" @click="previewImage(absoluteUrl(idHoldUrl))">
                    <image :src="absoluteUrl(idHoldUrl)" class="id-card-image" mode="aspectFill" />
                    <text class="id-card-text">{{ t('card.Form.f23') }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from "vue-i18n";
import config from "@/config";

const { t } = useI18n();

function absoluteUrl(url: string) {
    if (!url) {
        return "";
    }
    if (/^https?:\/\//.test(url)) {
        return url;
    }
    const prefix = config.Host85 || "";
    if (!prefix) {
        return url;
    }
    return `${prefix}${url.startsWith("/") ? url : `/${url}`}`;
}

// 图片预览功能
function previewImage(url: string) {
    if (!url) return;

    // 使用 uni.previewImage 进行图片预览
    uni.previewImage({
        urls: [url],
        longPressActions: {
            itemList: [t('card.vaildate.v30')], // 保存图片
            success: function (data) {
                console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function (err) {
                console.log(err.errMsg);
            }
        },
        showMenu: false
    });
}

interface Props {
    icon: string;
    label: string;
    status: 'verified' | 'unverified' | 'pending';
    date?: string;
    idType?: string;
    idFrontUrl?: string;
    idBackUrl?: string;
    idHoldUrl?: string;
    isLast?: boolean;
}

const props = defineProps<Props>();

const statusIcon = computed(() => {
    switch (props.status) {
        case 'verified':
            return 'verified';
        case 'pending':
            return 'info';
        case 'unverified':
            return 'closeempty';
        default:
            return 'closeempty';
    }
});

const statusColor = computed(() => {
    switch (props.status) {
        case 'verified':
            return '#22c55e';
        case 'pending':
            return '#eab308';
        case 'unverified':
            return '#9ca3af';
        default:
            return '#9ca3af';
    }
});

const statusText = computed(() => {
    switch (props.status) {
        case 'verified':
            return t('card.Status.t1'); // 成功/已认证
        case 'pending':
            return t('card.Status.t3'); // 处理中/待审核
        case 'unverified':
            return t('card.Status.t4'); // 待认证
        default:
            return t('card.Status.t4'); // 待认证
    }
});

const statusClass = computed(() => {
    switch (props.status) {
        case 'verified':
            return 'status-verified';
        case 'pending':
            return 'status-pending';
        case 'unverified':
            return 'status-unverified';
        default:
            return 'status-unverified';
    }
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.verification-row {
    display: flex;
    align-items: center;
    gap: px2rpx(12);
    padding: px2rpx(12) 0;
    border-bottom: 1px solid #f9fafb;
}

.verification-row-last {
    border-bottom: none;
}

.verification-icon {
    flex-shrink: 0;
}

.verification-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.verification-label-wrapper {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    margin-bottom: px2rpx(4);
}

.verification-label {
    font-size: px2rpx(12);
    color: #6b7280;
}

.verification-id-type {
    font-size: px2rpx(10);
    color: #9ca3af;
}

.verification-status-wrapper {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
}

.verification-status-text {
    font-size: px2rpx(12);
}

.status-verified {
    color: #22c55e;
}

.status-pending {
    color: #eab308;
}

.status-unverified {
    color: #9ca3af;
}

.verification-date {
    font-size: px2rpx(10);
    color: #9ca3af;
}

.verification-arrow {
    flex-shrink: 0;
}

.id-card-images {
    padding: px2rpx(12) 0;
    border-bottom: 1px solid #f9fafb;
}

.id-card-last {
    border-bottom: none;
}

.id-card-label {
    margin-bottom: px2rpx(8);
}

.id-card-label-text {
    font-size: px2rpx(12);
    color: #6b7280;
}

.id-card-container {
    display: flex;
    gap: px2rpx(12);
}

.id-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.id-card-item:active {
    opacity: 0.8;
}

.id-card-image {
    width: px2rpx(100);
    height: px2rpx(60);
    border-radius: px2rpx(4);
    overflow: hidden;
}

.id-card-text {
    font-size: px2rpx(10);
    color: #9ca3af;
    margin-top: px2rpx(4);
}
</style>