ucard-person-app-front/pages/mine/info.vue

<template>
    <cwg-page-wrapper>
        <view class="user-profile-detail">
            <!-- Content -->
            <view class="content">
                <!-- Basic Information -->
                <view class="info-card">
                    <view class="card-header">
                        <cwg-icon name="icon_personal certification" :size="20" color="#2563eb" />
                        <text class="card-title">{{ t('card.Info.s1') }}</text>
                    </view>
                    <view class="card-body">
                        <info-row icon="xm" :label="t('card.Form.f5') + ' ' + t('card.Form.f4')"
                            :value="userInfo.firstName + ' ' + userInfo.lastName" />
                        <info-row icon="email-outline" :label="t('card.Form.f3')" :value="userInfo.email" />
                        <info-row icon="phone" :label="t('card.Form.f2')"
                            :value="userInfo.areaCode + ' ' + userInfo.mobile" />
                        <info-row icon="cwg-calendar" :label="t('card.Form.f6')" :value="userInfo.birthday" />
                        <info-row :icon="userInfo.gender == 'M' ? 'nan' : 'nv'" :label="t('card.Form.f8')"
                            :value="userInfo.gender == 'M' ? t('card.Form.v1') : t('card.Form.v2')" :isLast="true" />
                    </view>
                </view>

                <!-- Location Information -->
                <view class="info-card">
                    <view class="card-header">
                        <cwg-icon name="dw" :size="20" color="#16a34a" />
                        <text class="card-title">{{ t('global.t1') }}</text>
                    </view>
                    <view class="card-body">
                        <info-row icon="gj" :label="t('card.Form.f7')" :value="userInfo.countryCnName" />
                        <info-row icon="dw" :label="t('card.Form.f9')" :value="userInfo.townEnName" />
                        <info-row icon="xxdz" :label="t('card.Form.f10')" :value="userInfo.address" />
                        <info-row icon="paperclip" :label="t('card.Form.f11')" :value="userInfo.postCode"
                            :isLast="true" />
                    </view>
                </view>

                <!-- Career Information -->
                <view class="info-card">
                    <view class="card-header">
                        <cwg-icon name="globe" :size="20" color="#9333ea" />
                        <text class="card-title">{{ t('card.Info.s0') }}</text>
                    </view>
                    <view class="card-body">
                        <info-row icon="globe" :label="t('card.Form.f12')" :value="userInfo.occupationDesc" />
                        <info-row icon="location" :label="t('card.Form.f13')" :value="userInfo.annualSalary" />
                        <info-row icon="globe" :label="t('card.Form.f14')" :value="userInfo.accountPurpose" />
                        <info-row icon="gzcalendar" :label="t('card.Form.f15')" :value="userInfo.expectedMonthlyVolume"
                            :isLast="true" />
                    </view>
                </view>

                <!-- Identity Verification -->
                <view class="info-card">
                    <view class="card-header">
                        <cwg-icon name="checkmark" :size="20" color="#ea580c" />
                        <text class="card-title">{{ t('card.Info.s2') }}</text>
                    </view>
                    <view class="card-body">
                        <verification-row icon="checkmarkempty" :label="t('card.Form.f16')"
                            :status="getIdentityStatus()" :date="getIdentityDate()" :idType="userInfo.idType"
                            :idFrontUrl="userInfo.idFrontUrl" :idBackUrl="userInfo.idBackUrl"
                            :idHoldUrl="userInfo.idHoldUrl" :isLast="true" />
                    </view>
                </view>

                <!-- Action Buttons -->
                <!-- <view class="action-buttons">
                    <button class="btn-primary" @click="handleEditProfile">{{ t('card.Btn.Edit') }}</button>
                    <button class="btn-secondary" @click="handleChangePassword">{{ t('card.Btn.ChangePwd') }}</button>
                </view> -->
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, reactive } from "vue";
import InfoRow from './components/InfoRow.vue';
import VerificationRow from './components/VerificationRow.vue';
import { useI18n } from "vue-i18n";
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const { t } = useI18n();
const router = useRouter();

// 获取身份认证状态
function getIdentityStatus() {
    // 认证成功就是已认证；否则视为审核中（pending）
    if (userInfo.value?.approveStatus == 2 || userInfo.value?.kycStatus == 2) {
        return 'verified';
    }
    return 'pending';
}

// 获取身份认证日期
function getIdentityDate() {
    // 如果有证件有效期，则使用证件签发日期
    if (userInfo.value?.issueDate) {
        return new Date(userInfo.value.issueDate).toLocaleDateString();
    }
    return '';
}

const handleEditProfile = () => {
    router.push('/pages/mine/improve');
};

const handleChangePassword = () => {
    uni.showToast({
        title: t('card.Msg.ComingSoon'),
        icon: 'none'
    });
};
</script>

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

.page-wrapper {
    padding: 0;
}

.user-profile-detail {
    min-height: 100vh;
    background-color: #f9fafb;
}

.header {
    background: linear-gradient(to right, #2563eb, #60a5fa);
    padding: px2rpx(16);
}

.header-content {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
}

.avatar {
    width: px2rpx(40);
    height: px2rpx(40);
    border-radius: 50%;
    background-color: white;
    border: px2rpx(2) solid white;
    box-shadow: 0 px2rpx(2) px2rpx(6) rgba(0, 0, 0, 0.1);
}

.header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-name {
    color: white;
    font-size: px2rpx(18);
    margin-bottom: px2rpx(2);
}

.user-email {
    color: #bfdbfe;
    font-size: px2rpx(12);
}

.content {
    padding: px2rpx(1) px2rpx(16) px2rpx(24);
}

.info-card {
    background-color: white;
    border-radius: px2rpx(8);
    box-shadow: 0 px2rpx(1) px2rpx(4) rgba(0, 0, 0, 0.1);
    margin-top: px2rpx(16);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    padding: px2rpx(12) px2rpx(16);
    border-bottom: 1px solid #f3f4f6;
}

.card-title {
    color: #1f2937;
    font-size: px2rpx(14);
}

.card-body {
    padding: px2rpx(16);
}

.action-buttons {
    margin-top: px2rpx(24);
    display: flex;
    flex-direction: column;
    gap: px2rpx(12);
}

.btn-primary {
    width: 100%;
    background-color: #2563eb;
    color: white;
    padding: px2rpx(12);
    border-radius: px2rpx(8);
    border: none;
    font-size: px2rpx(14);
}

.btn-primary:active {
    background-color: #1d4ed8;
}

.btn-secondary {
    width: 100%;
    background-color: white;
    color: #374151;
    padding: px2rpx(12);
    border-radius: px2rpx(8);
    border: 1px solid #d1d5db;
    font-size: px2rpx(14);
}

.btn-secondary:active {
    background-color: #f9fafb;
}
</style>