gypsy-crm-frontend-vu/pages/mine/info copy 2.vue

<template>
    <cwg-page-wrapper>
        <uni-tabs v-model="current" :tabs="tabs" @change="changeTab" color="#333" lineHeight="0" field="name">
            <template v-slot="{ row, index }">
                <view class="tab-title " :class="{ active: current === index }">
                    <cwg-icon v-if="row.icon" :name="row.icon" :size="16"
                        :color="current === index ? '#fff' : '#333'" />
                    <text>{{ row.name }}</text>
                </view>
            </template>
        </uni-tabs>
        <view class="info-card">
            <view class="content-title">Personal Information</view>
            <view class="card-body">

                <uni-row class="demo-uni-row">
                    <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <view class="avatar-section">
                            <cwg-input v-model:value="formData.idBackUrl" type="upload" fkey="idBackUrl"
                                rulesKey="idBackUrl" :is-upload-d="true" accept="image/png, image/jpeg, image/jpg"
                                :readonly="isReadonly" :disabled="isReadonly" @change="handleChange">
                                <view class="cwg-upload">
                                </view>
                            </cwg-input>
                            <view class="text name">{{ userInfo.firstName }}</view>
                            <view class="text cid"> CID:{{ userInfo.cId }}</view>
                            <view class="btn-primary" @click="handleEditProfile">上传头像</view>
                        </view>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" class="">
                        <view class="form">
                            <uni-row>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                                    <cwg-input v-model:value="formData.lastName" fkey="lastName" :required="true"
                                        :label="t('card.Form.f4')" rulesKey="lastName" :readonly="isReadonly"
                                        :disabled="isReadonly" @change="handleChange" />
                                    <cwg-input v-model:value="formData.firstName" fkey="firstName" :required="true"
                                        :label="t('card.Form.f5')" rulesKey="firstName" :readonly="isReadonly"
                                        :disabled="isReadonly" @change="handleChange" />
                                    <cwg-input v-model:value="formData.email" fkey="email" :label="t('card.Form.f3')"
                                        :required="true" rulesKey="email" :readonly="isReadonly" :disabled="isReadonly"
                                        @change="handleChange" />
                                    <view class="f" v-if="phoneCodes.length > 0">
                                        <cwg-input v-model:value="formData.areaCode" class="l" fkey="areaCode"
                                            :required="true" type="select" :show-search="true" :columns="phoneCodes"
                                            :label="t('card.Form.f2')" rulesKey="areaCode" :readonly="isReadonly"
                                            :disabled="isReadonly" @change="handleChange" />
                                        <cwg-input v-model:value="formData.mobile" class="r" fkey="mobile" label=" "
                                            rulesKey="mobile" :readonly="isReadonly" :disabled="isReadonly"
                                            @change="handleChange" />
                                    </view>
                                    <cwg-input v-model:value="formData.gender" fkey="gender" type="select"
                                        :required="true" rulesKey="gender" :columns="sexOptions"
                                        :label="t('card.Form.f8')" :readonly="isReadonly" :disabled="isReadonly"
                                        @change="handleChange" />
                                    <cwg-input v-model:value="formData.birthday" :required="true" type="date"
                                        fkey="birthday" rulesKey="birthday" :label="t('card.Form.f6')"
                                        :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                                    <view class="form-item ">
                                        <view class="left-bg">
                                            <text class="form-label">User CID</text>
                                            <text class="form-value">{{ userInfo.userId }}</text>
                                        </view>
                                    </view>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                                    <view class="form-item ">
                                        <view class="left-bg">
                                            <text class="form-label">User CID</text>
                                            <text class="form-value">{{ userInfo.userId }}</text>
                                        </view>
                                    </view>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                                    <view class="form-item ">
                                        <view class="left-bg">
                                            <text class="form-label">User CID</text>
                                            <text class="form-value">{{ userInfo.userId }}</text>
                                        </view>
                                    </view>
                                </uni-col>
                            </uni-row>
                        </view>

                    </uni-col>
                </uni-row>
                <uni-row class="demo-uni-row uni-row1">
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.lastName" fkey="lastName" :required="false"
                            :label="t('card.Form.f4')" rulesKey="lastName" :readonly="isReadonly" :disabled="isReadonly"
                            @change="handleChange" />
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.firstName" fkey="firstName" :required="false"
                            :label="t('card.Form.f5')" rulesKey="firstName" :readonly="isReadonly"
                            :disabled="isReadonly" @change="handleChange" />
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.email" fkey="email" :label="t('card.Form.f3')"
                            :required="false" rulesKey="email" :readonly="isReadonly" :disabled="isReadonly"
                            @change="handleChange" />
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.mobile" class="r" fkey="mobile" :label="t('card.Form.f2')"
                            rulesKey="mobile" :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />
                    </uni-col>

                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.birthday" :required="false" type="date" fkey="birthday"
                            rulesKey="birthday" :label="t('card.Form.f6')" :readonly="isReadonly" :disabled="isReadonly"
                            @change="handleChange" />
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-if="countryOptions.length > 0" v-model:value="formData.nationality"
                            fkey="nationality" type="select" :required="false" :show-search="true"
                            rulesKey="nationality" :columns="countryOptions" :label="t('card.Form.f7')"
                            :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />

                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-if="cityOptions.length > 0" v-model:value="formData.town" fkey="town"
                            :required="false" :show-search="true" rulesKey="town" type="select" :columns="cityOptions"
                            :label="t('card.Form.f9')" :readonly="isReadonly" :disabled="isReadonly"
                            @change="handleChange" />

                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.address" fkey="address" :label="t('card.Form.f10')"
                            :required="false" rulesKey="address" :readonly="isReadonly" :disabled="isReadonly"
                            @change="handleChange" />

                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <cwg-input v-model:value="formData.postCode" :required="false" fkey="postCode"
                            rulesKey="postCode" :label="t('card.Form.f11')" :readonly="isReadonly"
                            :disabled="isReadonly" @change="handleChange" />
                    </uni-col>
                </uni-row>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
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";
import useIdTypeOptions from "@/composables/useIdTypeOptions";
const { allIdTypeOptions } = useIdTypeOptions()
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const { t } = useI18n();
const router = useRouter();

const idTypeOptions = computed(() => {
    return allIdTypeOptions.value?.filter(item => item.value === userInfo.value?.idType);
});
// 获取身份认证状态
function getIdentityStatus() {
    // 认证成功就是已认证；否则视为审核中（pending）
    if (userInfo.value?.approveStatus == 2 || userInfo.value?.kycStatus == 2) {
        return 'verified';
    }
    return 'pending';
}
const formData = ref({})
const imageStyles = ref({
    width: '80px',
    height: '80px',
    borderRadius: '50%'
});
const current = ref(0);
const tabs = computed(() => [
    { id: 1, name: t('card.Info.s1'), icon: 'icon_personal certification' },
    { id: 2, name: t('ImproveImmediately.Title.AddressInformation'), icon: 'dw' },
    { id: 3, name: t('card.Info.s0'), icon: 'globe' },
    { id: 4, name: t('card.Info.s2'), icon: 'checkmark' }
]);
const changeTab = (index) => {
    current.value = index;
}

// 获取身份认证日期
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'
    });
};
const isReadonly = computed(() => isAuthInfo.value);
const listStyles = ref({
    borderStyle: {
        color: '#eee',
        width: '1px',
        style: 'solid',
        radius: '5px'
    },
    "border": false, // 是否显示边框
    "dividline": true // 是否显示分隔线
});
</script>

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

.tab-title {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    border: 1px solid #f3f4f6;
    font-size: 18px;
    padding: px2rpx(8) px2rpx(16);
    border-radius: px2rpx(8);
    background-color: white;
}

.active {
    background-color: var(--main-yellow);
    color: #fff;
    border: none;
}

.info-card {
    border-radius: px2rpx(8);
    background-color: white;
    // padding: px2rpx(16);
}

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

.demo-uni-row {
    margin-bottom: px2rpx(16);
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: px2rpx(12);
    padding: px2rpx(16);

    .cwg-upload {
        width: px2rpx(120);
        height: px2rpx(120);
        border-radius: 50%;
        margin: 0 auto;
    }

    .text {
        font-size: 14px;
        color: #333;
    }

    .btn-primary {
        margin-top: px2rpx(12);
        min-width: px2rpx(120);
        background-color: #2563eb;
        color: white;
        padding: px2rpx(12);
        border-radius: px2rpx(8);
        border: none;
        font-size: px2rpx(14);
        text-align: center;
    }

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

    .cid {
        color: var(--main-yellow);
        font-size: 12px;
        margin-top: px2rpx(4);
    }
}






.uni-row1 {
    display: flex;
    gap: px2rpx(16);
    flex-shrink: 1;

    .uni-col {

        margin: px2rpx(12);
        border-radius: px2rpx(4);
        display: flex;
        flex-direction: column;
        gap: px2rpx(16);
    }
}

.left-bg {
    padding: px2rpx(8);
    background-color: #f9fafb;
}

.form {
    padding: px2rpx(12);
    border-radius: px2rpx(4);
    display: flex;
    flex-direction: column;
    gap: px2rpx(16);

}

.form-item {
    // 
    border-radius: px2rpx(8);
    padding: px2rpx(8);
}

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

.form-value {
    font-size: px2rpx(14);
    color: #1f2937;
    font-weight: 500;
}
</style>