gypsy-crm-frontend-vu/pages/mine/components/PersonalInfoTab.vue

<template>
    <view class="personal-info-tab">
        <view class="user-form">
            <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">{{ formData.firstName }} {{ formData.lastName }}</view>
                        <view class="text cid">CID:{{ formData.cId }}</view>
                        <view class="btn-primary" @click="handleEditProfile">
                            <cwg-icon name="crm-photo-film" :size="16" color="#fff" />
                            上传头像
                        </view>
                    </view>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                    <uni-forms ref="baseForm" :model="formData" labelWidth="200" label-position="top" :rules="rules"
                        class="base-info-form">
                        <uni-row class="demo-uni-row uni-row1">
                            <!-- 客户类型 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.CustomerType')">
                                    <cwg-combox :clearable="false" v-model:value="formData.customType"
                                        :options="customTypeOptions" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 公司名称 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="formData.companyName">
                                <uni-forms-item :label="t('ImproveImmediately.Label.CompanyName')">
                                    <uni-easyinput :clearable="false" v-model="formData.companyName"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>

                            <!-- 姓 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="formData.customType == 2
                                    ? t('ImproveImmediately.Label.CorporationLastName')
                                    : t('ImproveImmediately.Label.LastName')">
                                    <uni-easyinput :clearable="false" v-model="formData.lastName"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 名 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="formData.customType == 2
                                    ? t('ImproveImmediately.Label.CorporationName')
                                    : t('ImproveImmediately.Label.Name')">
                                    <uni-easyinput :clearable="false" v-model="formData.firstName"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 法人中间名 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="locale == 'en'">
                                <uni-forms-item :label="formData.customType == 2
                                    ? t('ImproveImmediately.Label.CorporationMName')
                                    : t('placeholder.middle')">
                                    <uni-easyinput :clearable="false" v-model="formData.middle"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>

                            <!-- 国家 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length">
                                <uni-forms-item :label="t('ImproveImmediately.Label.Nationality')">
                                    <cwg-combox :clearable="false" :filterable="true"
                                        v-model:value="formData.nationality" :options="countryOptions"
                                        :placeholder="t('placeholder.choose')" @change="changeCountry" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 证件类型 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.CardType')">
                                    <cwg-combox :clearable="false" v-model:value="formData.customType"
                                        :options="idTypeOptions" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 证件号 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.IdentityID')">
                                    <uni-easyinput :clearable="false" v-model="formData.identity"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 拼音 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="isZh">
                                <uni-forms-item :label="t('ImproveImmediately.Label.NamePinYin')">
                                    <uni-easyinput :clearable="false" v-model="formData.nameEn"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 性别 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.Gender')">
                                    <cwg-combox :clearable="false" v-model:value="formData.gender" :options="sexOptions"
                                        :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 生日 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.Birthday')">
                                    <uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp"
                                        v-model="formData.birth" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>

                            <!-- 国家/地区 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length">
                                <uni-forms-item :label="t('ImproveImmediately.Label.CountryRegionOfResidence')">
                                    <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.country"
                                        :options="countryOptions" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 省份/州 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                                v-if="stateOptions.length && isCountryCN">
                                <uni-forms-item :label="t('ImproveImmediately.Label.ProvinceRegion')">
                                    <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.state"
                                        :options="stateOptions" :placeholder="t('placeholder.choose')"
                                        @change="onStateChange" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 国外省份/州 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="!isCountryCN">
                                <uni-forms-item :label="t('ImproveImmediately.Label.ProvinceRegion')">
                                    <uni-easyinput :clearable="false" v-model="formData.state"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 城市 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                                v-if="cityOptions.length && isCountryCN">
                                <uni-forms-item :label="t('ImproveImmediately.Label.City')">
                                    <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.city"
                                        :options="cityOptions" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </uni-col>
                            <!-- 国外城市 -->
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="!isCountryCN">
                                <uni-forms-item :label="t('ImproveImmediately.Label.City')">
                                    <uni-easyinput :clearable="false" v-model="formData.city"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.DetailedAddress')">
                                    <uni-easyinput :clearable="false" v-model="formData.addressLines1"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.ZipCode')">
                                    <uni-easyinput :clearable="false" v-model="formData.zipCode"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>
                            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                <uni-forms-item :label="t('ImproveImmediately.Label.DetailedAddressStandby')">
                                    <uni-easyinput :clearable="false" v-model="formData.addressLines2"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </uni-col>

                        </uni-row>
                    </uni-forms>
                </uni-col>
            </uni-row>
        </view>
        <view class="btns">
            <view class="btn-primary" @click="handleCancel">{{ t('Btn.Cancel') }}</view>
            <view class="btn-primary" @click="handleNext">{{ t('Btn.Next') }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { personalApi } from '@/service/personal';
import { Patterns, Validators } from '@/utils/validators';

const { t, locale } = useI18n();

interface PersonalInfo {
    merchantOrderNo?: string;
    cardTypeId?: string;
    areaCode?: string;
    mobile?: string;
    email?: string;
    firstName?: string;
    lastName?: string;
    middle?: string;
    birthday?: string;
    nationality?: string;
    country?: string;
    state?: string;
    city?: string;
    town?: string;
    address?: string;
    postCode?: string;
    gender?: number;
    occupation?: string;
    annualSalary?: string;
    accountPurpose?: string;
    expectedMonthlyVolume?: string;
    idType?: number;
    idNumber?: string;
    identity?: string;
    ssn?: string;
    issueDate?: string;
    idNoExpiryDate?: string;
    idFrontUrl?: string;
    idBackUrl?: string;
    idHoldUrl?: string;
    ipAddress?: string;
    cId?: string;
    customId?: string;
    customType?: number;
    companyName?: string;
    nameEn?: string;
    birth?: string;
    addressLines1?: string;
    addressLines2?: string;
    zipCode?: string;
    photoStatus?: string;
    kycStatus?: string;
}

const props = defineProps<{
    modelValue: PersonalInfo;
    isReadonly?: boolean;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: PersonalInfo];
    'cancel': [];
    'next': [];
}>();

const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});

const baseForm = ref<any>(null);

const sexOptions = ref([
    { text: t('PersonalManagement.Label.Men'), value: 1 },
    { text: t('PersonalManagement.Label.Women'), value: 2 }
]);

const customTypeOptions = ref([
    { text: t('ImproveImmediately.Label.CustomerType1'), value: 1 },
    { text: t('ImproveImmediately.Label.CustomerType2'), value: 2 }
]);

const idTypeOptions = ref([
    { text: t('ImproveImmediately.Label.IDCard'), value: 2 },
    { text: t('ImproveImmediately.Label.Passport'), value: 3 }
]);

// 验证函数
function validateName(a: any, b?: any, c?: any) {
    const reg = /^[A-Z\s]+$/i;
    if (typeof c === 'function') {
        const value = b;
        const callback = c;
        const val = String(value ?? '').trim();
        if (!val) return callback(new Error(t('card.vaildate.v4')));
        if (!reg.test(val)) return callback(new Error(t('card.vaildate.v38')));
        if (val.length < 2 || val.length > 23) return callback(new Error(t('card.vaildate.v39')));
        const firstName = String(formData.value?.firstName ?? '').trim();
        const lastName = String(formData.value?.lastName ?? '').trim();
        if (`${firstName} ${lastName}`.length > 23) return callback(new Error(t('card.vaildate.v40')));
        return callback();
    }
    const val = String(a ?? '').trim();
    if (!val) return t('card.vaildate.v4');
    if (!reg.test(val)) return t('card.vaildate.v38');
    if (val.length < 2 || val.length > 23) return t('card.vaildate.v39');
    const firstName = String(formData.value?.firstName ?? '').trim();
    const lastName = String(formData.value?.lastName ?? '').trim();
    if (`${firstName} ${lastName}`.length > 23) return t('card.vaildate.v40');
    return true;
}

function validateBirthday(a: any, b?: any, c?: any) {
    if (typeof c === 'function') {
        const value = b;
        const callback = c;
        const val = value;
        if (!val) return callback(new Error(t('card.vaildate.v5')));
        const today = new Date();
        const birthDate = new Date(val);
        let age = today.getFullYear() - birthDate.getFullYear();
        const month = today.getMonth() - birthDate.getMonth();
        if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) age--;
        if (age < 18) return callback(new Error(t('card.New.n3')));
        return callback();
    }
    const val = a;
    if (!val) return t('card.vaildate.v5');
    const today = new Date();
    const birthDate = new Date(val);
    let age = today.getFullYear() - birthDate.getFullYear();
    const month = today.getMonth() - birthDate.getMonth();
    if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) age--;
    return age < 18 ? t('card.New.n3') : true;
}

function validateAddress(a: any, b?: any, c?: any) {
    if (typeof c === 'function') {
        const value = b;
        const callback = c;
        const val = String(value ?? '').trim();
        if (!val) return callback(new Error(t('card.vaildate.v27')));
        if (val.length < 2 || val.length > 40) return callback(new Error(t('card.New.n1')));
        if (!Patterns.address.test(val)) return callback(new Error(t('card.New.n1')));
        return callback();
    }
    const val = String(a ?? '').trim();
    if (!val) return t('card.vaildate.v27');
    if (val.length < 2 || val.length > 40) return t('card.New.n1');
    return Patterns.address.test(val) ? true : t('card.New.n1');
}

const rules = {
    areaCode: [Validators.required(t('card.vaildate.v1'))],
    mobile: [
        Validators.required(t('card.vaildate.v2')),
        Validators.pattern(Patterns.mobile, t('card.vaildate.v44'))
    ],
    email: [
        Validators.required(t('card.vaildate.v28')),
        Validators.pattern(Patterns.email, t('card.vaildate.v28'))
    ],
    firstName: [Validators.required(t('card.vaildate.v3')), Validators.custom(validateName)],
    lastName: [Validators.required(t('card.vaildate.v4')), Validators.custom(validateName)],
    birthday: [
        Validators.required(t('card.vaildate.v5'), 'change'),
        Validators.custom(validateBirthday, 'change')
    ],
    nationality: [Validators.required(t('card.vaildate.v6'), 'change')],
    town: [Validators.required(t('card.vaildate.v7'), 'change')],
    address: [Validators.required(t('card.vaildate.v27')), Validators.custom(validateAddress)],
    gender: [Validators.required(t('card.vaildate.v9'), 'change')],
    postCode: [
        Validators.required(t('card.vaildate.v8')),
        Validators.pattern(Patterns.postcode, t('card.New.n2'))
    ]
};

// 国家省份城市数据
const countryList = ref<Array<any>>([]);
const stateList = ref<Array<any>>([]);
const cityList = ref<Array<any>>([]);
const phoneCodes = ref<Array<{ text: string; value: string }>>([]);

const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));
const isCountryCN = computed(() => ['CN', 'CNX', 'CNA', 'CNT'].includes(formData.value.country || ''));

const getLangName = (item: any) => (isZh.value ? item.name : item.enName);
const createOptions = (list: any[], valueKey = 'code') => {
    return list.map((item) => ({
        text: getLangName(item),
        value: valueKey === 'name' ? getLangName(item) : item[valueKey],
        id: item.id
    }));
};

const countryOptions = computed(() => createOptions(countryList.value, 'code'));
const stateOptions = computed(() => createOptions(stateList.value, 'name'));
const cityOptions = computed(() => createOptions(cityList.value, 'name'));

const getCountry = async () => {
    const res = await personalApi.Country({});
    if (res.code === 200) {
        countryList.value = res.data;
        phoneCodes.value = res.data.map((item: any) => ({
            text: `+ ${item.callingCode}`,
            value: item.callingCode
        }));
        if (formData.value.country) {
            const country = countryList.value.find((i) => i.code === formData.value.country);
            if (country) {
                await getState(country.id);
            }
        }
    }
};

const fetchRegion = async (pid?: number) => {
    const res = await personalApi.Country({ pid });
    if (res.code !== 200) {
        return [];
    }
    return res.data || [];
};

const getState = async (pid: number) => {
    stateList.value = await fetchRegion(pid);
    if (formData.value.state) {
        const item = stateList.value.find(
            (i) => i.enName === formData.value.state || i.name === formData.value.state
        );
        if (item) {
            await getCity(item.id);
        }
    }
};

const getCity = async (pid: number) => {
    cityList.value = await fetchRegion(pid);
};

const changeCountry = async (val: any) => {
    formData.value.state = '';
    formData.value.city = '';
    const item = countryOptions.value.find((i: any) => i.value === val);
    if (item) {
        await getState(item.id);
    }
};

const onStateChange = async (val: any) => {
    formData.value.city = '';
    const item = stateOptions.value.find((i: any) => i.value === val);
    if (item) {
        await getCity(item.id);
    }
};

function handleChange(value: any) {
    emit('update:modelValue', { ...formData.value, [value.key]: value.value });
}

const handleEditProfile = () => {
    // 头像上传逻辑
};

const handleCancel = () => {
    emit('cancel');
};

const handleNext = () => {
    emit('next');
};

onMounted(() => {
    getCountry();
});
</script>

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

.personal-info-tab {
    .user-form {
        margin-top: px2rpx(30);

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

            :deep(.form-label) {
                margin: 0 !important;
            }

            :deep(.form-input) {
                border: none !important;
            }

            .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: px2rpx(20);
                    font-weight: 700;
                    color: var(--color-navy-900);
                }

                .btn-primary {
                    min-width: px2rpx(120);
                    background-color: var(--color-navy-900);
                    color: white;
                    padding: px2rpx(12);
                    border: none;
                    font-size: px2rpx(14);
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: px2rpx(8);

                    &:active {
                        background-color: var(--color-navy-700);
                    }
                }

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

    .btns {
        display: flex;
        justify-content: flex-end;
        gap: 30px;
        margin-top: 30px;

        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-navy-900);
            color: white;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            &:active {
                background-color: var(--color-navy-700);
            }
        }
    }
}

:deep(.uni-row1) {
    .uni-col {
        padding: 0 10px !important;
    }

    .base-info-form>span {
        display: contents;
    }

    .uni-forms-item {
        min-height: px2rpx(79);
        margin-bottom: px2rpx(10);
    }

    .uni-select,
    .uni-combox,
    .uni-easyinput__content,
    .uni-date-editor--x {
        border: none !important;
        background-color: var(--color-zinc-100) !important;
    }

    .uni-date-x {
        border: none !important;
        background-color: rgba(195, 195, 195, 0) !important;
    }
}
</style>