|
|
@@ -21,7 +21,7 @@
|
|
|
<!-- </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">
|
|
|
+ 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">
|
|
|
@@ -33,65 +33,64 @@
|
|
|
<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')" />
|
|
|
+ :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')" />
|
|
|
+ :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')" />
|
|
|
+ :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" />
|
|
|
+ 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')">
|
|
|
+ ? t('ImproveImmediately.Label.CorporationLastName')
|
|
|
+ : t('ImproveImmediately.Label.LastName')">
|
|
|
<uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.lastName"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
+ :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')">
|
|
|
+ ? t('ImproveImmediately.Label.CorporationName')
|
|
|
+ : t('ImproveImmediately.Label.Name')">
|
|
|
<uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.firstName"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
+ :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')">
|
|
|
+ ? t('ImproveImmediately.Label.CorporationMName')
|
|
|
+ : t('placeholder.middle')">
|
|
|
<uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.middle"
|
|
|
- :placeholder="t('placeholder.Not')" />
|
|
|
+ :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')" />
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
</uni-forms-item>
|
|
|
</uni-col>
|
|
|
<!-- 手机号 -->
|
|
|
@@ -99,10 +98,12 @@
|
|
|
<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')" />
|
|
|
+ <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')" />
|
|
|
+ <uni-easyinput :disabled="isInfo" :clearable="false" v-model="formData.phone"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-forms-item>
|
|
|
@@ -111,64 +112,62 @@
|
|
|
<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')" />
|
|
|
+ :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-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">-->
|
|
|
+ <!-- <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')" />
|
|
|
+ :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-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" />
|
|
|
+ :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-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')" />
|
|
|
+ :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')" />
|
|
|
+ :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')" />
|
|
|
+ :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')" />
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
</uni-forms-item>
|
|
|
</uni-col>
|
|
|
|
|
|
@@ -181,407 +180,409 @@
|
|
|
</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 loading = ref(false)
|
|
|
-
|
|
|
- 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')
|
|
|
+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 loading = ref(false)
|
|
|
+
|
|
|
+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 t('card.vaildate.v40')
|
|
|
- return true
|
|
|
+ if (`${firstName} ${lastName}`.length > 23) return callback(new Error(t('card.vaildate.v40')))
|
|
|
+ return callback()
|
|
|
}
|
|
|
-
|
|
|
- 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 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--
|
|
|
- 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')
|
|
|
+ if (age < 18) return callback(new Error(t('card.New.n3')))
|
|
|
+ return callback()
|
|
|
}
|
|
|
-
|
|
|
- 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 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 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 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,
|
|
|
}))
|
|
|
- }
|
|
|
-
|
|
|
- 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)
|
|
|
- }
|
|
|
+ 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 fetchRegion = async (pid?: number) => {
|
|
|
+ const res = await personalApi.Country({ pid })
|
|
|
+ if (res.code !== 200) {
|
|
|
+ return []
|
|
|
}
|
|
|
-
|
|
|
- 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)
|
|
|
+ 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)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- function handleChange(value: any) {
|
|
|
- emit('update:modelValue', { ...formData.value, [value.key]: value.value })
|
|
|
+}
|
|
|
+
|
|
|
+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 handleEditProfile = () => {
|
|
|
- // 头像上传逻辑
|
|
|
+const onStateChange = async (val: any) => {
|
|
|
+ formData.value.city = ''
|
|
|
+ const item = stateOptions.value.find((i: any) => i.value === val)
|
|
|
+ if (item) {
|
|
|
+ await getCity(item.id)
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- const handleCancel = () => {
|
|
|
- emit('cancel')
|
|
|
- }
|
|
|
+function handleChange(value: any) {
|
|
|
+ emit('update:modelValue', { ...formData.value, [value.key]: value.value })
|
|
|
+}
|
|
|
|
|
|
- const handleNext = () => {
|
|
|
- emit('next')
|
|
|
- }
|
|
|
+const handleEditProfile = () => {
|
|
|
+ // 头像上传逻辑
|
|
|
+}
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ emit('cancel')
|
|
|
+}
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- loading.value = true
|
|
|
- await getCountry()
|
|
|
- loading.value = false
|
|
|
- })
|
|
|
+const handleNext = () => {
|
|
|
+ emit('next')
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ loading.value = true
|
|
|
+ await getCountry()
|
|
|
+ loading.value = false
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- @import "@/uni.scss";
|
|
|
+@import "@/uni.scss";
|
|
|
+
|
|
|
+.personal-info-tab {
|
|
|
+ .user-form {
|
|
|
+ margin-top: px2rpx(30);
|
|
|
|
|
|
- .personal-info-tab {
|
|
|
- .user-form {
|
|
|
- margin-top: px2rpx(30);
|
|
|
+ .demo-uni-row {
|
|
|
+ margin-bottom: px2rpx(16);
|
|
|
|
|
|
- .demo-uni-row {
|
|
|
- margin-bottom: px2rpx(16);
|
|
|
+ :deep(.form-label) {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.form-input) {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.form-label) {
|
|
|
- margin: 0 !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;
|
|
|
}
|
|
|
|
|
|
- :deep(.form-input) {
|
|
|
- border: none !important;
|
|
|
+ .text {
|
|
|
+ font-size: px2rpx(20);
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--color-navy-900);
|
|
|
}
|
|
|
|
|
|
- .avatar-section {
|
|
|
+ .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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ gap: px2rpx(8);
|
|
|
|
|
|
- .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);
|
|
|
- }
|
|
|
+ &:active {
|
|
|
+ background-color: #cf1322;
|
|
|
+ ;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .cid {
|
|
|
- color: var(--color-error);
|
|
|
- font-size: px2rpx(12);
|
|
|
- margin-top: px2rpx(4);
|
|
|
- }
|
|
|
+ .cid {
|
|
|
+ color: var(--color-error);
|
|
|
+ font-size: px2rpx(12);
|
|
|
+ margin-top: px2rpx(4);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .btns {
|
|
|
+ .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;
|
|
|
- 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;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
|
|
|
- &:active {
|
|
|
- background-color: var(--color-navy-700);
|
|
|
- }
|
|
|
+ &:active {
|
|
|
+ background-color: #cf1322;
|
|
|
+ ;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- :deep(.uni-row1) {
|
|
|
- .uni-col {
|
|
|
- padding: 0 10px !important;
|
|
|
- }
|
|
|
+:deep(.uni-row1) {
|
|
|
+ .uni-col {
|
|
|
+ padding: 0 10px !important;
|
|
|
+ }
|
|
|
|
|
|
- .base-info-form > span {
|
|
|
- display: contents;
|
|
|
- }
|
|
|
+ .base-info-form>span {
|
|
|
+ display: contents;
|
|
|
+ }
|
|
|
|
|
|
- .uni-forms-item {
|
|
|
- min-height: px2rpx(79);
|
|
|
- margin-bottom: px2rpx(10);
|
|
|
- }
|
|
|
+ .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-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;
|
|
|
- }
|
|
|
+ .uni-date-x {
|
|
|
+ border: none !important;
|
|
|
+ background-color: rgba(195, 195, 195, 0) !important;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
