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="24" :xl="24">
          <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">
              <!-- cid -->
              <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                <uni-forms-item :label="t('PersonalManagement.Label.UserCID')">
                  <uni-easyinput :disabled="isInfo" :clearable="false" v-model:value="formData.cId" />
                </uni-forms-item>
              </uni-col>
              <!-- 客户类型 -->
              <uni-col v-if="formData.customType" :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                <uni-forms-item :label="t('ImproveImmediately.Label.CustomerType')">
                  <cwg-combox :disabled="isInfo" :clearable="false" v-model:value="formData.customType"
                              :options="customTypeOptions" :placeholder="t('placeholder.choose')" />
                </uni-forms-item>
              </uni-col>
              <!-- 公司名称 -->
              <uni-col v-if="formData.companyName" :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                <uni-forms-item :label="t('ImproveImmediately.Label.CompanyName')">
                  <uni-easyinput :disabled="isInfo" :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="t('ImproveImmediately.Label.Gender')">
                  <cwg-combox :disabled="isInfo" :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" v-if="countryOptions.length">
                <uni-forms-item :label="t('ImproveImmediately.Label.Nationality')">
                  <cwg-combox :disabled="isInfo" :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="formData.customType == 2
                                    ? t('ImproveImmediately.Label.CorporationLastName')
                                    : t('ImproveImmediately.Label.LastName')">
                  <uni-easyinput :disabled="isInfo" :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 :disabled="isInfo" :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="formData.lang == 'en'">
                <uni-forms-item :label="formData.customType == 2
                                    ? t('ImproveImmediately.Label.CorporationMName')
                                    : t('placeholder.middle')">
                  <uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.middle"
                                 :placeholder="t('placeholder.Not')" />
                </uni-forms-item>
              </uni-col>
              <!-- 拼音 -->
              <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="formData.lang == 'cn'">
                <uni-forms-item :label="t('ImproveImmediately.Label.NamePinYin')">
                  <uni-easyinput :disabled="isInfo" :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('PersonalManagement.Label.Phone')">
                  <view style="display: flex; gap: 8px; width: 100%;">
                    <view style="flex: 0 0 100px;">
                      <uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.areaCode" :placeholder="t('placeholder.areaCode')" />
                    </view>
                    <view style="flex: 1;">
                      <uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.phone" :placeholder="t('placeholder.input')" />
                    </view>
                  </view>
                </uni-forms-item>
              </uni-col>
              <!-- 邮箱 -->
              <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                <uni-forms-item :label="t('PersonalManagement.Label.Email')">
                  <uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.email"
                                 :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.IdentityID')">
                  <uni-easyinput :disabled="isInfo" :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">-->
<!--                <uni-forms-item :label="t('ImproveImmediately.Label.Birthday')">-->
<!--                  <uni-datetime-picker :disabled="isInfo" :clear-icon="false" type="date" 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 :disabled="isInfo" :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">
                <uni-forms-item :label="t('ImproveImmediately.Label.ProvinceRegion')">
                  <cwg-combox :disabled="isInfo" :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="cityOptions.length">
                <uni-forms-item :label="t('ImproveImmediately.Label.City')">
                  <cwg-combox :disabled="isInfo" :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">
                <uni-forms-item :label="t('ImproveImmediately.Label.DetailedAddress')">
                  <uni-easyinput :disabled="isInfo" :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 :disabled="isInfo" :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 :disabled="isInfo" :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>
</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 isInfo = ref<boolean>(true)

  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>