feat: ocr

pages/mine/improveImmediately.vue

@@ -2,7 +2,7 @@
   <cwg-page-wrapper>
     <view class="page page-shadow">
       <uni-forms ref="formRef" :model="formData" :rules="rules" labelWidth="200" label-position="top"
-        class="payment-form">
+                 class="payment-form">
         <!-- 第一步：身份证明 -->
         <view v-show="currentStep === 1" class="form-section">
           <uni-row class="demo-uni-row uni-row1" :gutter="20">
@@ -26,10 +26,14 @@
               <uni-row class="demo-uni-row uni-row1" :gutter="20">
                 <uni-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="mb-3">
                   <cwg-file-picker-wrapper v-model="fileListID1.path" :editable="fileListID1.status != 2" :limit="1"
-                                           :fileMediatype="'all'" uploadUrl="/custom/file/upload/1" :baseUrl="updateUrl" :imageWidth="150"
-                                           :imageHeight="150" :showPreviewDelete="false" :canDelete="false" :uploadError="false"
-                                           :showProgress="false" :canChoose="true" :showError="false" :show-progress="false" disablePreview
-                                           :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '1')"
+                                           :fileMediatype="'all'" uploadUrl="/custom/file/upload/1" :baseUrl="updateUrl"
+                                           :imageWidth="150"
+                                           :imageHeight="150" :showPreviewDelete="false" :canDelete="false"
+                                           :uploadError="false"
+                                           :showProgress="false" :canChoose="true" :showError="false"
+                                           :show-progress="false" disablePreview
+                                           :image-styles="imageStyle"
+                                           @update:modelValue="(val) => handleFileUpdate(val, '1')"
                                            customClass="avatar-uploader">
                     <view class="file-item">
                       <image v-if="!isPdf(fileListID1.path)" class="avatar" :src="updateUrl + (fileListID1.path)">
@@ -55,10 +59,14 @@
                 </uni-col>
                 <uni-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                   <cwg-file-picker-wrapper v-model="fileListID2.path" :editable="fileListID2.status != 2" :limit="1"
-                                           :fileMediatype="'all'" uploadUrl="/custom/file/upload/2" :baseUrl="updateUrl" :imageWidth="150"
-                                           :imageHeight="150" :showPreviewDelete="false" :canDelete="false" :uploadError="false"
-                                           :showProgress="false" :canChoose="true" :showError="false" :show-progress="false" disablePreview
-                                           :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '2')"
+                                           :fileMediatype="'all'" uploadUrl="/custom/file/upload/2" :baseUrl="updateUrl"
+                                           :imageWidth="150"
+                                           :imageHeight="150" :showPreviewDelete="false" :canDelete="false"
+                                           :uploadError="false"
+                                           :showProgress="false" :canChoose="true" :showError="false"
+                                           :show-progress="false" disablePreview
+                                           :image-styles="imageStyle"
+                                           @update:modelValue="(val) => handleFileUpdate(val, '2')"
                                            customClass="avatar-uploader">
                     <view class="file-item">
                       <image v-if="!isPdf(fileListID2.path)" class="avatar" :src="updateUrl + (fileListID2.path)">
@@ -157,14 +165,14 @@
             <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="customerTypeOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <!-- 公司名称 -->
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="formData.customType == 2">
               <uni-forms-item :label="t('ImproveImmediately.Label.CompanyName')">
                 <uni-easyinput :clearable="false" v-model="formData.companyName"
-                  :placeholder="t('placeholder.input')" />
+                               :placeholder="t('placeholder.input')" />
               </uni-forms-item>
             </uni-col>
             <!-- 姓 -->
@@ -193,14 +201,14 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length > 0">
               <uni-forms-item name="nationality" :label="t('ImproveImmediately.Label.Nationality')">
                 <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.nationality"
-                  :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">
               <uni-forms-item name="IdentityType" :label="identityLabel">
                 <cwg-combox :clearable="false" v-model:value="formData.IdentityType" :options="identityTypes"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <!-- 证件号 -->
@@ -219,14 +227,14 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="gender" :label="t('ImproveImmediately.Label.Gender')">
                 <cwg-combox :clearable="false" v-model:value="formData.gender" :options="genderOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <!-- 生日 -->
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="birth" :label="t('ImproveImmediately.Label.Birthday')">
                 <uni-datetime-picker :clear-icon="false" type="date" return-type="timestamp" v-model="formData.birth"
-                  :placeholder="t('placeholder.choose')" />
+                                     :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :span="24">
@@ -248,15 +256,15 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length > 0">
               <uni-forms-item name="country" :label="t('ImproveImmediately.Label.CountryRegionOfResidence')">
                 <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.country"
-                  :options="countryOptions" :placeholder="t('placeholder.choose')" @change="changeCountry" />
+                            :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"
-              v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
+                     v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
               <uni-forms-item name="state" :label="t('ImproveImmediately.Label.ProvinceRegion')">
                 <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.state" :options="stateOptions"
-                  :placeholder="t('placeholder.choose')" @change="changeState" />
+                            :placeholder="t('placeholder.choose')" @change="changeState" />
               </uni-forms-item>
             </uni-col>
             <!-- 国外省份/州 -->
@@ -267,10 +275,10 @@
             </uni-col>
             <!-- 城市 -->
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
-              v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
+                     v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
               <uni-forms-item name="city" :label="t('ImproveImmediately.Label.City')">
                 <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.city" :options="cityOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <!-- 国外城市 -->
@@ -282,7 +290,7 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="addressLines1" :label="t('ImproveImmediately.Label.DetailedAddress')">
                 <uni-easyinput :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">
@@ -293,7 +301,7 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="addressLines2" :label="t('ImproveImmediately.Label.DetailedAddressStandby')">
                 <uni-easyinput :clearable="false" v-model="formData.addressLines2"
-                  :placeholder="t('placeholder.input')" />
+                               :placeholder="t('placeholder.input')" />
               </uni-forms-item>
             </uni-col>
           </uni-row>
@@ -305,37 +313,37 @@
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="level" :label="t('ImproveImmediately.Label.Education')">
                 <cwg-combox :clearable="false" v-model:value="formData.level" :options="educationOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="employmentStatus" :label="t('ImproveImmediately.Label.OnJob')">
                 <cwg-combox :clearable="false" v-model:value="formData.employmentStatus" :options="employmentOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="tradingObjectives" :label="t('ImproveImmediately.Label.purposeTransaction')">
                 <cwg-combox :clearable="false" v-model:value="formData.tradingObjectives"
-                  :options="transactionPurposeOptions" :placeholder="t('placeholder.choose')" />
+                            :options="transactionPurposeOptions" :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="sourceFunding" :label="t('ImproveImmediately.Label.SourceFunds')">
                 <cwg-combox :clearable="false" v-model:value="formData.sourceFunding" :options="fundSourceOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="grossAnnualIncome" :label="t('ImproveImmediately.Label.TotalAnnualRevenue')">
                 <cwg-combox :clearable="false" v-model:value="formData.grossAnnualIncome" :options="annualIncomeOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
             <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
               <uni-forms-item name="totalNewWorth" :label="t('ImproveImmediately.Label.TotalNetAssets')">
                 <cwg-combox :clearable="false" v-model:value="formData.totalNewWorth" :options="netWorthOptions"
-                  :placeholder="t('placeholder.choose')" />
+                            :placeholder="t('placeholder.choose')" />
               </uni-forms-item>
             </uni-col>
           </uni-row>
@@ -344,7 +352,7 @@
             <text class="Trad-experience">{{ t('ImproveImmediately.Content.TradingExperience1') }}</text>
             <view class="Trad-choose">
               <uni-data-checkbox v-model="formData.experienceTradingDerivative"
-                :localdata="radioList"></uni-data-checkbox>
+                                 :localdata="radioList"></uni-data-checkbox>
             </view>
           </view>
           <view class="experience">
@@ -470,24 +478,29 @@
               <uni-row class="demo-uni-row uni-row1" :gutter="20">
                 <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                   <cwg-file-picker :limit="9" :multiple="true" :editable="true" :fileMediatype="'all'"
-                    uploadUrl="/custom/file/upload/10" :baseUrl="updateUrl" :imageWidth="100" :imageHeight="60"
-                    :showPreviewDelete="false" :canDelete="false" :uploadError="false" :showProgress="false"
-                    :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '10')"
-                    custom-class="fileOther" :showError="false">
-                    <button type="primary" class="btn btn-danger waves-effect waves-light">{{ t('Btn.Upload') }}</button>
+                                   uploadUrl="/custom/file/upload/10" :baseUrl="updateUrl" :imageWidth="100"
+                                   :imageHeight="60"
+                                   :showPreviewDelete="false" :canDelete="false" :uploadError="false"
+                                   :showProgress="false"
+                                   :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '10')"
+                                   custom-class="fileOther" :showError="false">
+                    <button type="primary" class="btn btn-danger waves-effect waves-light">{{ t('Btn.Upload') }}
+                    </button>
                   </cwg-file-picker>
                   <view class="fileList">
                     <view id="files" v-for="(item, index) in fileListOthers" :key="index">
 
                       <cwg-file-picker-wrapper customClass="list_upload" v-model="item.path"
-                        :editable="item.status != 2" :limit="1" :fileMediatype="'all'"
-                        :uploadUrl="'/custom/file/upload/10/' + item.id" :baseUrl="updateUrl" :uploadError="false"
-                        :showProgress="false" :imageWidth="200" :imageHeight="150" :showPreviewDelete="true"
-                        :disablePreview="true" :image-styles="imageStyle" :canChoose="true"
-                        @update:modelValue="(val) => handleFileUpdate(val, '1')">
+                                               :editable="item.status != 2" :limit="1" :fileMediatype="'all'"
+                                               :uploadUrl="'/custom/file/upload/10/' + item.id" :baseUrl="updateUrl"
+                                               :uploadError="false"
+                                               :showProgress="false" :imageWidth="200" :imageHeight="150"
+                                               :showPreviewDelete="true"
+                                               :disablePreview="true" :image-styles="imageStyle" :canChoose="true"
+                                               @update:modelValue="(val) => handleFileUpdate(val, '1')">
                         <view class="file-item">
                           <image v-if="!isPdf(item.path) || !isPdf(item.againPath)" class="avatar"
-                            :src="updateUrl + (item.againPath || item.path)"></image>
+                                 :src="updateUrl + (item.againPath || item.path)"></image>
                           <view v-else>
                             <image class="icon" :src="icon_doc" />
                           </view>
@@ -537,7 +550,7 @@
                 <button class="btn btn-danger" type="primary" block @click="cancle">
                   {{ t('Btn.Cancel') }}
                 </button>
-                <button  block class="btn btn-danger" type="primary" @click="goStep(3)">
+                <button block class="btn btn-danger" type="primary" @click="goStep(3)">
                   {{ t('Btn.Last') }}
                 </button>
                 <button type="primary" class="btn btn-danger" block :loading="loadingStates.submit" @click="Submit">
@@ -552,7 +565,7 @@
                 <button class="btn btn-danger" type="primary" block @click="cancle">
                   {{ t('Btn.Cancel') }}
                 </button>
-                <button  block class="btn prev-btn btn-danger" type="primary" @click="goStep(2)">
+                <button block class="btn prev-btn btn-danger" type="primary" @click="goStep(2)">
                   {{ t('Btn.Last') }}
                 </button>
                 <button class="btn btn-danger" type="primary" block :loading="loadingStates.next" @click="goStep(4)">
@@ -567,7 +580,7 @@
                 <button class="btn btn-danger" type="primary" block @click="cancle">
                   {{ t('Btn.Cancel') }}
                 </button>
-                <button  block class="btn prev-btn btn-danger" type="primary" @click="goStep(1)">
+                <button block class="btn prev-btn btn-danger" type="primary" @click="goStep(1)">
                   {{ t('Btn.Last') }}
                 </button>
                 <button class="btn btn-danger" type="primary" block :loading="loadingStates.next" @click="goStep(3)">
@@ -606,7 +619,7 @@
           <button class="cancel-btn" @click="closeDia">
             {{ t('Btn.TemporarilyNot') }}
           </button>
-          <button class="confirm-btn primary"  @click="save">
+          <button class="confirm-btn primary" @click="save">
             {{ t('Btn.Save') }}
           </button>
         </view>
@@ -623,1293 +636,1299 @@
           <button class="cancel-btn" @click="closeDia">
             {{ t('Btn.Cancel') }}
           </button>
-          <button class="confirm-btn primary"  @click="toHome">
+          <button class="confirm-btn primary" @click="toHome">
             {{ t('Btn.Home') }}
           </button>
         </view>
       </view>
     </view>
   </uni-popup>
-  <cwg-global-popup/>
+  <cwg-global-popup />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { onLoad } from '@dcloudio/uni-app'
-import { personalApi } from '@/service/personal'
-import Config from '@/config/index'
-import QrCode from '@/components/QRCode.vue'
-import { userToken } from '@/composables/config'
-import useRouter from '@/hooks/useRouter'
-import { Patterns, Validators } from '@/utils/validators'
-import { pinyin } from 'pinyin-pro'
-import config from '@/config/index'
-import icon_doc from '@/static/icons/crm-document.svg'
-import icon_refresh from '@/static/icons/crm-refresh.svg'
-import icon_mobile from '@/static/icons/icon_mobile.svg'
-import icon_arrowR from '@/static/icons/icon_arrowR.svg'
-import { useWindowWidth } from '@/composables/useWindowWidth'
-import { usePopup } from '@/hooks/usePopup'
-import useUserStore from '@/stores/use-user-store'
-const { confirm , toast } = usePopup()
-const router = useRouter()
-const { t, locale } = useI18n()
-const currentStep = ref<number>(3)
-const formRef = ref()
-const dialogCheck = ref(null)
-const dialogCheck1 = ref(false)
-const text1 = ref('')
-const qrCodeStatus = ref(false)
-const addressTipPopup = ref()
-const windowWidth = useWindowWidth(300)
-const isMobile = computed(() => windowWidth.value <= 991)
-const userStore = useUserStore()
-
-// 新增的响应式数据
-const divActiveHelf = ref(false)
-const divActiveAll = ref(false)
-const websock = ref(null)
-const isPC = ref(true)
-const fileListID1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
-const fileListID2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
-const fileListAdd1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
-const fileListAdd2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
-const fileListOthers = ref([])
-const actionID1 = ref('')
-const actionID2 = ref('')
-const actionAdd1 = ref('')
-const actionAdd2 = ref('')
-const actionOtherAdd = ref('')
-const flag = ref(false)
-const pictLoading = ref(false)
-const pictLoadingImg = ref(false)
-const isApprove = ref(false)
-const metaInfo = ref({})
-const HostWs = ref(Config.HostWs)
-const cities = ref([])
-const states = ref([])
-const countries = ref([])
-const uploadImage = ref(0)
-const updateUrl = config.Host80
-const mobile = ref('')
-const notCountry = [
-  'AF',
-  'AI',
-  'AG',
-  'BS',
-  'BY',
-  'BZ',
-  'BA',
-  'BI',
-  'CF',
-  'CD',
-  'CU',
-  'ET',
-  'FJ',
-  'PS',
-  'GN',
-  'GW',
-  'HT',
-  'IR',
-  'IQ',
-  'LB',
-  'LY',
-  'ML',
-  'MM',
-  'NI',
-  'KP',
-  'PW',
-  'RU',
-  'SO',
-  'SS',
-  'SD',
-  'SY',
-  'UA',
-  'US',
-  'VE',
-  'YE',
-  'ZW',
-]
-
-const imageStyle = ref({
-  width: 200,
-  height: 150,
-  border: {
-    radius: '5px',
-  },
-})
-
-// 验证函数
-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')))
+  import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { personalApi } from '@/service/personal'
+  import Config from '@/config/index'
+  import QrCode from '@/components/QRCode.vue'
+  import { userToken } from '@/composables/config'
+  import useRouter from '@/hooks/useRouter'
+  import { Patterns, Validators } from '@/utils/validators'
+  import { pinyin } from 'pinyin-pro'
+  import config from '@/config/index'
+  import icon_doc from '@/static/icons/crm-document.svg'
+  import icon_refresh from '@/static/icons/crm-refresh.svg'
+  import icon_mobile from '@/static/icons/icon_mobile.svg'
+  import icon_arrowR from '@/static/icons/icon_arrowR.svg'
+  import { useWindowWidth } from '@/composables/useWindowWidth'
+  import { usePopup } from '@/hooks/usePopup'
+  import useUserStore from '@/stores/use-user-store'
+
+  const { confirm, toast } = usePopup()
+  const router = useRouter()
+  const { t, locale } = useI18n()
+  const currentStep = ref<number>(3)
+  const formRef = ref()
+  const dialogCheck = ref(null)
+  const dialogCheck1 = ref(false)
+  const text1 = ref('')
+  const qrCodeStatus = ref(false)
+  const addressTipPopup = ref()
+  const windowWidth = useWindowWidth(300)
+  const isMobile = computed(() => windowWidth.value <= 991)
+  const userStore = useUserStore()
+
+  // 新增的响应式数据
+  const divActiveHelf = ref(false)
+  const divActiveAll = ref(false)
+  const websock = ref(null)
+  const isPC = ref(true)
+  const fileListID1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
+  const fileListID2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
+  const fileListAdd1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
+  const fileListAdd2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
+  const fileListOthers = ref([])
+  const actionID1 = ref('')
+  const actionID2 = ref('')
+  const actionAdd1 = ref('')
+  const actionAdd2 = ref('')
+  const actionOtherAdd = ref('')
+  const flag = ref(false)
+  const pictLoading = ref(false)
+  const pictLoadingImg = ref(false)
+  const isApprove = ref(false)
+  const metaInfo = ref({})
+  const HostWs = ref(Config.HostWs)
+  const cities = ref([])
+  const states = ref([])
+  const countries = ref([])
+  const uploadImage = ref(0)
+  const updateUrl = config.Host80
+  const mobile = ref('')
+  const notCountry = [
+    'AF',
+    'AI',
+    'AG',
+    'BS',
+    'BY',
+    'BZ',
+    'BA',
+    'BI',
+    'CF',
+    'CD',
+    'CU',
+    'ET',
+    'FJ',
+    'PS',
+    'GN',
+    'GW',
+    'HT',
+    'IR',
+    'IQ',
+    'LB',
+    'LY',
+    'ML',
+    'MM',
+    'NI',
+    'KP',
+    'PW',
+    'RU',
+    'SO',
+    'SS',
+    'SD',
+    'SY',
+    'UA',
+    'US',
+    'VE',
+    'YE',
+    'ZW',
+  ]
+
+  const imageStyle = ref({
+    width: 200,
+    height: 150,
+    border: {
+      radius: '5px',
+    },
+  })
+
+  // 验证函数
+  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 callback(new Error(t('card.vaildate.v40')))
-    return callback()
+    if (`${firstName} ${lastName}`.length > 23) return t('card.vaildate.v40')
+    return true
   }
-  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')))
+
+  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--
-    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()
+    return age < 18 ? t('card.New.n3') : true
   }
-  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 = computed(()=>({
-  customType: [Validators.required(t('card.vaildate.v1'))],
-  firstName: [Validators.required(t('card.vaildate.v3')), Validators.custom(validateName)],
-  lastName: [Validators.required(t('card.vaildate.v4')), Validators.custom(validateName)],
-  nationality: [Validators.required(t('card.vaildate.v6'), 'change')],
-  IdentityType: [Validators.required(t('card.vaildate.v1'))],
-  identity: [Validators.required(t('card.vaildate.v4'))],
-  gender: [Validators.required(t('card.vaildate.v9'), 'change')],
-  birth: [
-    Validators.required(t('card.vaildate.v5'), 'change'),
-    Validators.custom(validateBirthday, 'change'),
-  ],
-  country: [Validators.required(t('card.vaildate.v1'))],
-  state: [Validators.required(t('card.vaildate.v1'))],
-  city: [Validators.required(t('card.vaildate.v1'))],
-  addressLines1: [Validators.required(t('card.vaildate.v27')), Validators.custom(validateAddress)],
-  zipCode: [
-    Validators.required(t('card.vaildate.v8')),
-    Validators.pattern(Patterns.postcode, t('card.New.n2')),
-  ],
-  level: [Validators.required(t('card.vaildate.v1'))],
-  employmentStatus: [Validators.required(t('card.vaildate.v1'))],
-  tradingObjectives: [Validators.required(t('card.vaildate.v1'))],
-  sourceFunding: [Validators.required(t('card.vaildate.v1'))],
-  grossAnnualIncome: [Validators.required(t('card.vaildate.v1'))],
-  totalNewWorth: [Validators.required(t('card.vaildate.v1'))],
-  cardType: [Validators.required(t('card.vaildate.v1'))],
-  idFrontUrl: [Validators.required(t('card.vaildate.v1'))],
-  idBackUrl: [Validators.required(t('card.vaildate.v1'))],
-  addressProofUrl: [Validators.required(t('card.vaildate.v1'))],
-}))
-
-onLoad((options) => {
-  currentStep.value = parseInt(options?.currentStep || '1', 10)
-})
-
-async function goStep(step: number) {
-  console.log(step, 'step')
-  loadingStates.value.next = true
-  if (step == 3){
-    if (!formData.value?.identity){
-      toast(t('vaildate.IDCard.empty'))
-      loadingStates.value.next = false
-      return
+
+  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 (step == 2) {
-    if (currentUploadCard.value == 1) {
-      if (!formData.value.cardType) {
-        toast( t('vaildate.CardType.empty'))
-        loadingStates.value.next = false
-        return
-      }
-      if (!fileListID1.value.path || !fileListID2.value.path) {
-        toast( t('vaildate.IDPhoto.empty'))
+
+  const rules = computed(() => ({
+    customType: [Validators.required(t('card.vaildate.v1'))],
+    firstName: [Validators.required(t('card.vaildate.v3')), Validators.custom(validateName)],
+    lastName: [Validators.required(t('card.vaildate.v4')), Validators.custom(validateName)],
+    nationality: [Validators.required(t('card.vaildate.v6'), 'change')],
+    IdentityType: [Validators.required(t('card.vaildate.v1'))],
+    identity: [Validators.required(t('card.vaildate.v4'))],
+    gender: [Validators.required(t('card.vaildate.v9'), 'change')],
+    birth: [
+      Validators.required(t('card.vaildate.v5'), 'change'),
+      Validators.custom(validateBirthday, 'change'),
+    ],
+    country: [Validators.required(t('card.vaildate.v1'))],
+    state: [Validators.required(t('card.vaildate.v1'))],
+    city: [Validators.required(t('card.vaildate.v1'))],
+    addressLines1: [Validators.required(t('card.vaildate.v27')), Validators.custom(validateAddress)],
+    zipCode: [
+      Validators.required(t('card.vaildate.v8')),
+      Validators.pattern(Patterns.postcode, t('card.New.n2')),
+    ],
+    level: [Validators.required(t('card.vaildate.v1'))],
+    employmentStatus: [Validators.required(t('card.vaildate.v1'))],
+    tradingObjectives: [Validators.required(t('card.vaildate.v1'))],
+    sourceFunding: [Validators.required(t('card.vaildate.v1'))],
+    grossAnnualIncome: [Validators.required(t('card.vaildate.v1'))],
+    totalNewWorth: [Validators.required(t('card.vaildate.v1'))],
+    cardType: [Validators.required(t('card.vaildate.v1'))],
+    idFrontUrl: [Validators.required(t('card.vaildate.v1'))],
+    idBackUrl: [Validators.required(t('card.vaildate.v1'))],
+    addressProofUrl: [Validators.required(t('card.vaildate.v1'))],
+  }))
+
+  onLoad((options) => {
+    currentStep.value = parseInt(options?.currentStep || '1', 10)
+  })
+
+  async function goStep(step: number) {
+    console.log(step, 'step')
+    loadingStates.value.next = true
+    if (step == 3) {
+      if (!formData.value?.identity) {
+        toast(t('vaildate.IDCard.empty'))
         loadingStates.value.next = false
         return
       }
     }
-    // 当前接口没有审核通过的请求接口，
-    const {status,applyRealStatus} = userStore.userInfo.customInfo
-    if (!(status == 2 || applyRealStatus == 1 || applyRealStatus == 2)){
-     await getOcrInfo()
-    }
-  }
-  loadingStates.value.next = false
-  currentStep.value = step
-}
-
-const getOcrInfo =async () => {
-  try {
-    let res = await personalApi.ocrResult()
-    console.log(res)
-    if (res.data){
-      const { idCard='',gender='男' ,birthDate='',address='',names=['','']} = res.data
-      formData.value = {
-        identity:idCard,
-        gender:gender=='男'?1:2,
-        birth:Date.parse(new Date(birthDate).toString())/1000,
-        addressLines1:address,
-        lastName:names[0],
-        firstName:names[1],
-        ...formData.value,
+    if (step == 2) {
+      if (currentUploadCard.value == 1) {
+        if (!formData.value.cardType) {
+          toast(t('vaildate.CardType.empty'))
+          loadingStates.value.next = false
+          return
+        }
+        if (!fileListID1.value.path || !fileListID2.value.path) {
+          toast(t('vaildate.IDPhoto.empty'))
+          loadingStates.value.next = false
+          return
+        }
+      }
+      // 当前接口没有审核通过的请求接口，
+      const { status, applyRealStatus } = userStore.userInfo.customInfo
+      if (!(status == 2 || applyRealStatus == 1 || applyRealStatus == 2)) {
+        await getOcrInfo()
       }
-      console.log(formData.value)
     }
-  }catch (error) {
     loadingStates.value.next = false
-    toast(error.msg)
-  }
-}
-
-// 选项数据
-const customerTypeOptions = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.CustomerType1') },
-  { value: 2, text: t('ImproveImmediately.Label.CustomerType2') },
-])
-
-const identityTypes = computed(()=>[
-  { text: t('ImproveImmediately.Label.IDCard'), value: 2 },
-  { text: t('ImproveImmediately.Label.Passport'), value: 3 },
-])
-
-const genderOptions = computed(()=>[
-  { value: 1, text: t('PersonalManagement.Label.Men') },
-  { value: 2, text: t('PersonalManagement.Label.Women') },
-])
-const radioList = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.Yes') },
-  { value: 0, text: t('ImproveImmediately.Label.No') },
-])
-
-const educationOptions = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.Education1') },
-  { value: 2, text: t('ImproveImmediately.Label.Education2') },
-  { value: 3, text: t('ImproveImmediately.Label.Education3') },
-  { value: 4, text: t('ImproveImmediately.Label.Education4') },
-  { value: 5, text: t('ImproveImmediately.Label.Education5') },
-])
-
-const employmentOptions =computed(()=> [
-  { value: 1, text: t('ImproveImmediately.Label.OnJob1') },
-  { value: 2, text: t('ImproveImmediately.Label.OnJob2') },
-  { value: 3, text: t('ImproveImmediately.Label.OnJob3') },
-  { value: 4, text: t('ImproveImmediately.Label.OnJob4') },
-  { value: 5, text: t('ImproveImmediately.Label.OnJob5') },
-])
-
-const transactionPurposeOptions =computed(()=> [
-  { value: 1, text: t('ImproveImmediately.Label.purposeTransaction1') },
-  { value: 2, text: t('ImproveImmediately.Label.purposeTransaction2') },
-  { value: 3, text: t('ImproveImmediately.Label.purposeTransaction3') },
-  { value: 4, text: t('ImproveImmediately.Label.purposeTransaction4') },
-])
-
-const fundSourceOptions = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.SourceFunds1') },
-  { value: 2, text: t('ImproveImmediately.Label.SourceFunds2') },
-  { value: 3, text: t('ImproveImmediately.Label.SourceFunds3') },
-  { value: 4, text: t('ImproveImmediately.Label.SourceFunds4') },
-  { value: 5, text: t('ImproveImmediately.Label.SourceFunds5') },
-  { value: 6, text: t('ImproveImmediately.Label.SourceFunds6') },
-])
-
-const annualIncomeOptions = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.TotalAnnualRevenue1') },
-  { value: 2, text: t('ImproveImmediately.Label.TotalAnnualRevenue2') },
-  { value: 3, text: t('ImproveImmediately.Label.TotalAnnualRevenue3') },
-  { value: 4, text: t('ImproveImmediately.Label.TotalAnnualRevenue4') },
-  { value: 5, text: t('ImproveImmediately.Label.TotalAnnualRevenue5') },
-])
-
-const netWorthOptions = computed(()=>[
-  { value: 1, text: t('ImproveImmediately.Label.TotalNetAssets1') },
-  { value: 2, text: t('ImproveImmediately.Label.TotalNetAssets2') },
-  { value: 3, text: t('ImproveImmediately.Label.TotalNetAssets3') },
-  { value: 4, text: t('ImproveImmediately.Label.TotalNetAssets4') },
-  { value: 5, text: t('ImproveImmediately.Label.TotalNetAssets5') },
-])
-
-const cardTypeOptions = [
-  { value: 'ID_CARD', text: 'ID Card' },
-  { value: 'PASSPORT', text: 'Passport' },
-  { value: 'DRIVERS', text: 'Driver\'s License' },
-  { value: 'RESIDENCE_PERMIT', text: 'Residence Permit' },
-]
-
-// 表单数据
-const formData = ref({
-  customType: 1,
-  companyName: undefined,
-  lastName: undefined,
-  firstName: undefined,
-  middle: undefined,
-  nationality: undefined,
-  IdentityType: 2,
-  identity: undefined,
-  nameEn: undefined,
-  gender: undefined,
-  birth: undefined,
-  country: undefined,
-  state: undefined,
-  city: undefined,
-  addressLines1: undefined,
-  addressLines2: undefined,
-  zipCode: undefined,
-  level: undefined,
-  employmentStatus: undefined,
-  tradingObjectives: undefined,
-  sourceFunding: undefined,
-  grossAnnualIncome: undefined,
-  totalNewWorth: undefined,
-  experienceTradingDerivative: 0,
-  experienceTradingForex: 0,
-  derivativeProducts: 0,
-  experienceQualification: 0,
-  cardType: undefined,
-  idFrontUrl: undefined,
-  idBackUrl: undefined,
-  addressProofUrl: undefined,
-  otherFiles: undefined,
-  addressLines: [],
-})
-
-// 选项数据
-const countryOptions = ref<Array<{ text: string; value: string }>>([])
-const stateOptions = ref<Array<{ text: string; value: string }>>([])
-const cityOptions = ref<Array<{ text: string; value: string }>>([])
-
-// 加载状态
-const loadingStates = ref({
-  next: false,
-  submit: false,
-})
-
-// 计算属性
-const identityLabel = computed(() => {
-  if (formData.value.IdentityType === 2) return t('ImproveImmediately.Label.IDCard')
-  if (formData.value.IdentityType === 3) return t('ImproveImmediately.Label.Passport')
-  return t('ImproveImmediately.Label.IdentityID')
-})
-
-// 计算属性：当前选中国籍的 uploadCard 值
-const currentUploadCard = computed(() => {
-  if (!formData.value.nationality || !countries.value.length) {
-    return 0
+    currentStep.value = step
   }
-  const selectedCountry = countries.value.find(
-    (item: any) => item.code === formData.value.nationality,
-  )
-  return selectedCountry ? (selectedCountry.uploadCard || 0) : 0
-})
 
-// 计算属性：当前选中国籍的 uploadAddress 值
-const currentUploadAddress = computed(() => {
-  if (!formData.value.nationality || !countries.value.length) {
-    return 0
-  }
-  const selectedCountry = countries.value.find(
-    (item: any) => item.code === formData.value.nationality,
-  )
-  return selectedCountry ? (selectedCountry.uploadAddress || 0) : 0
-})
-
-// 方法
-function changeCountry(value: any) {
-  // 处理国家选择变化
-  // 清空省份/城市选择//
-  formData.value.state = ''
-  formData.value.city = ''
-  stateOptions.value = []
-  cityOptions.value = []
-  states.value = []
-  cities.value = []
-  let item = {}
-  countries.value.forEach(element => {
-    if (element.code == value) {
-      item = element
-      return
+  const getOcrInfo = async () => {
+    try {
+      let res = await personalApi.ocrResult()
+      console.log(res)
+      if (res.data) {
+        const { idCard = '', gender: gender1 = '男', birthDate = '', address = '', names = ['', ''] } = res.data
+        console.log(formData.value, '1')
+        const { identity, gender, birth, addressLines1, lastName, firstName } = formData.value
+        formData.value = {
+          ...formData.value,
+          identity: identity ?? idCard,
+          gender: gender ?? (gender1 == '男' ? 1 : 2),
+          birth: birth ?? Date.parse(new Date(birthDate).toString()) / 1000,
+          addressLines1: addressLines1 ?? address,
+          lastName: lastName ?? names[0],
+          firstName: firstName ?? names[1],
+        }
+        console.log(formData.value, '2')
+      }
+    } catch (error) {
+      loadingStates.value.next = false
+      toast(error.msg)
     }
+  }
+
+  // 选项数据
+  const customerTypeOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.CustomerType1') },
+    { value: 2, text: t('ImproveImmediately.Label.CustomerType2') },
+  ])
+
+  const identityTypes = computed(() => [
+    { text: t('ImproveImmediately.Label.IDCard'), value: 2 },
+    { text: t('ImproveImmediately.Label.Passport'), value: 3 },
+  ])
+
+  const genderOptions = computed(() => [
+    { value: 1, text: t('PersonalManagement.Label.Men') },
+    { value: 2, text: t('PersonalManagement.Label.Women') },
+  ])
+  const radioList = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.Yes') },
+    { value: 0, text: t('ImproveImmediately.Label.No') },
+  ])
+
+  const educationOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.Education1') },
+    { value: 2, text: t('ImproveImmediately.Label.Education2') },
+    { value: 3, text: t('ImproveImmediately.Label.Education3') },
+    { value: 4, text: t('ImproveImmediately.Label.Education4') },
+    { value: 5, text: t('ImproveImmediately.Label.Education5') },
+  ])
+
+  const employmentOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.OnJob1') },
+    { value: 2, text: t('ImproveImmediately.Label.OnJob2') },
+    { value: 3, text: t('ImproveImmediately.Label.OnJob3') },
+    { value: 4, text: t('ImproveImmediately.Label.OnJob4') },
+    { value: 5, text: t('ImproveImmediately.Label.OnJob5') },
+  ])
+
+  const transactionPurposeOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.purposeTransaction1') },
+    { value: 2, text: t('ImproveImmediately.Label.purposeTransaction2') },
+    { value: 3, text: t('ImproveImmediately.Label.purposeTransaction3') },
+    { value: 4, text: t('ImproveImmediately.Label.purposeTransaction4') },
+  ])
+
+  const fundSourceOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.SourceFunds1') },
+    { value: 2, text: t('ImproveImmediately.Label.SourceFunds2') },
+    { value: 3, text: t('ImproveImmediately.Label.SourceFunds3') },
+    { value: 4, text: t('ImproveImmediately.Label.SourceFunds4') },
+    { value: 5, text: t('ImproveImmediately.Label.SourceFunds5') },
+    { value: 6, text: t('ImproveImmediately.Label.SourceFunds6') },
+  ])
+
+  const annualIncomeOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.TotalAnnualRevenue1') },
+    { value: 2, text: t('ImproveImmediately.Label.TotalAnnualRevenue2') },
+    { value: 3, text: t('ImproveImmediately.Label.TotalAnnualRevenue3') },
+    { value: 4, text: t('ImproveImmediately.Label.TotalAnnualRevenue4') },
+    { value: 5, text: t('ImproveImmediately.Label.TotalAnnualRevenue5') },
+  ])
+
+  const netWorthOptions = computed(() => [
+    { value: 1, text: t('ImproveImmediately.Label.TotalNetAssets1') },
+    { value: 2, text: t('ImproveImmediately.Label.TotalNetAssets2') },
+    { value: 3, text: t('ImproveImmediately.Label.TotalNetAssets3') },
+    { value: 4, text: t('ImproveImmediately.Label.TotalNetAssets4') },
+    { value: 5, text: t('ImproveImmediately.Label.TotalNetAssets5') },
+  ])
+
+  const cardTypeOptions = [
+    { value: 'ID_CARD', text: 'ID Card' },
+    { value: 'PASSPORT', text: 'Passport' },
+    { value: 'DRIVERS', text: 'Driver\'s License' },
+    { value: 'RESIDENCE_PERMIT', text: 'Residence Permit' },
+  ]
+
+  // 表单数据
+  const formData = ref({
+    customType: 1,
+    companyName: undefined,
+    lastName: undefined,
+    firstName: undefined,
+    middle: undefined,
+    nationality: undefined,
+    IdentityType: 2,
+    identity: undefined,
+    nameEn: undefined,
+    gender: undefined,
+    birth: undefined,
+    country: undefined,
+    state: undefined,
+    city: undefined,
+    addressLines1: undefined,
+    addressLines2: undefined,
+    zipCode: undefined,
+    level: undefined,
+    employmentStatus: undefined,
+    tradingObjectives: undefined,
+    sourceFunding: undefined,
+    grossAnnualIncome: undefined,
+    totalNewWorth: undefined,
+    experienceTradingDerivative: 0,
+    experienceTradingForex: 0,
+    derivativeProducts: 0,
+    experienceQualification: 0,
+    cardType: undefined,
+    idFrontUrl: undefined,
+    idBackUrl: undefined,
+    addressProofUrl: undefined,
+    otherFiles: undefined,
+    addressLines: [],
   })
-  getStateList(item.id)
-}
 
+  // 选项数据
+  const countryOptions = ref<Array<{ text: string; value: string }>>([])
+  const stateOptions = ref<Array<{ text: string; value: string }>>([])
+  const cityOptions = ref<Array<{ text: string; value: string }>>([])
 
-function handleFileUpdate(value, type) {
-  console.log(value, type, 'uplaod')
-  if (type == 10) {
-    uni.showToast({ title: t('card.New1.d5'), icon: 'none' })
-    getCustomFileList();
-  }
-}
-function handleOcr(value, type) {
-  console.log(value, type, 'uplaod')
-
-}
-const showFile = (file) => {
-  // console.log(file)
-  window.open(updateUrl + (file.againPath || file.path), '_blank')
-}
-
-async function fileOtherDelete(id) {
-  const result = await confirm({
-    title: t('Msg.SystemPrompt'),
-    content: t('Msg.Delete'),
-    confirmText: t('Btn.Confirm'),
-    cancelText: t('Btn.Cancel'),
+  // 加载状态
+  const loadingStates = ref({
+    next: false,
+    submit: false,
   })
-  if (result){
-    try {
-      // 确认删除
-      let data = await personalApi.customFileDelete({ ids: [id] })
-      if (data.code == 200) {
-        uni.showToast(t('Msg.DeleteSuccess'))
-        getCustomFileList()
-      }
-    }catch (e) {
-      uni.showToast(e.msg)
-    }
-  }
-}
 
+  // 计算属性
+  const identityLabel = computed(() => {
+    if (formData.value.IdentityType === 2) return t('ImproveImmediately.Label.IDCard')
+    if (formData.value.IdentityType === 3) return t('ImproveImmediately.Label.Passport')
+    return t('ImproveImmediately.Label.IdentityID')
+  })
 
-function changeState(val) {
-  formData.value.city = ''
-  cityOptions.value = []
-  let item = {}
-  states.value.forEach((element) => {
-    if (element.name == val || element.enName == val) {
-      item = element
-      return
+  // 计算属性：当前选中国籍的 uploadCard 值
+  const currentUploadCard = computed(() => {
+    if (!formData.value.nationality || !countries.value.length) {
+      return 0
     }
+    const selectedCountry = countries.value.find(
+      (item: any) => item.code === formData.value.nationality,
+    )
+    return selectedCountry ? (selectedCountry.uploadCard || 0) : 0
   })
-  getCityList(item.id)
-}
 
-function handleChange(value: any) {
-  formData.value = { ...formData.value, [value.key]: value.value }
-  console.log(value)
-  if (value.key === 'country') {
+  // 计算属性：当前选中国籍的 uploadAddress 值
+  const currentUploadAddress = computed(() => {
+    if (!formData.value.nationality || !countries.value.length) {
+      return 0
+    }
+    const selectedCountry = countries.value.find(
+      (item: any) => item.code === formData.value.nationality,
+    )
+    return selectedCountry ? (selectedCountry.uploadAddress || 0) : 0
+  })
+
+  // 方法
+  function changeCountry(value: any) {
+    // 处理国家选择变化
+    // 清空省份/城市选择//
     formData.value.state = ''
     formData.value.city = ''
     stateOptions.value = []
     cityOptions.value = []
-    if (value.value) {
-      getStateList(value.value)
-    }
-  } else if (value.key === 'state') {
-    formData.value.city = ''
-    cityOptions.value = []
-    if (value.value) {
-      getCityList(value.value)
+    states.value = []
+    cities.value = []
+    let item = {}
+    countries.value.forEach(element => {
+      if (element.code == value) {
+        item = element
+        return
+      }
+    })
+    getStateList(item.id)
+  }
+
+
+  function handleFileUpdate(value, type) {
+    console.log(value, type, 'uplaod')
+    if (type == 10) {
+      uni.showToast({ title: t('card.New1.d5'), icon: 'none' })
+      getCustomFileList()
     }
   }
-}
-
-function openAddressTip() {
-  // 打开地址提示弹窗
-  addressTipPopup.value.open()
-}
-
-function isPdf(url, image) {
-  let res = !!url
-  if (image) {
-    return res && url.substr(-3, 3) == 'pdf' &&
-      url.substr(-3, 3) == 'PDF'
+
+  function handleOcr(value, type) {
+    console.log(value, type, 'uplaod')
+
   }
-  return res && (url.substr(-3, 3) == 'pdf' ||
-    url.substr(-3, 3) == 'PDF')
-}
-
-function cancle() {
-  if (!isApprove.value) {
-    dialogCheck.value.open()
-    dialogCheck1.value = true
-  } else {
-    router.push({ path: '/pages/customer/dashboard' })
+
+  const showFile = (file) => {
+    // console.log(file)
+    window.open(updateUrl + (file.againPath || file.path), '_blank')
   }
-}
-
-function closeDia() {
-  dialogCheck.value.close()
-}
-
-function toHome() {
-  dialogCheck.value.close()
-  router.push({ path: '/pages/customer/dashboard' })
-}
-
-async function save() {
-  await updateInfo(1)
-}
-
-async function Submit() {
-  loadingStates.value.submit = true
-  try {
-    formData.value.addressLines = []
-    if (formData.value.addressLines1) {
-      formData.value.addressLines.push(formData.value.addressLines1)
-    }
-    if (formData.value.addressLines2) {
-      formData.value.addressLines.push(formData.value.addressLines2)
-    }
-    if (!formData.value.addressLines1 && !formData.value.addressLines2) {
-      formData.value.addressLines = []
-    }
-    if (formData.value.customType != 2) {
-      formData.value.companyName = ''
-    }
-    let res = await personalApi.CustomUpdateInfo({
-      ...formData.value,
+
+  async function fileOtherDelete(id) {
+    const result = await confirm({
+      title: t('Msg.SystemPrompt'),
+      content: t('Msg.Delete'),
+      confirmText: t('Btn.Confirm'),
+      cancelText: t('Btn.Cancel'),
     })
-    if (res.code == Config.Code.StatusOK) {
-      await getCustomFileList()
-      await customApply()
-    } else {
-      uni.showToast({ title: res.msg, icon: 'none' })
+    if (result) {
+      try {
+        // 确认删除
+        let data = await personalApi.customFileDelete({ ids: [id] })
+        if (data.code == 200) {
+          uni.showToast(t('Msg.DeleteSuccess'))
+          getCustomFileList()
+        }
+      } catch (e) {
+        uni.showToast(e.msg)
+      }
     }
-  } catch (error: any) {
-    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
-  } finally {
-    loadingStates.value.submit = false
   }
-}
 
-async function updateInfo(save: number) {
-  try {
-    formData.value.addressLines = []
-    if (formData.value.addressLines1) {
-      formData.value.addressLines.push(formData.value.addressLines1)
-    }
-    if (formData.value.addressLines2) {
-      formData.value.addressLines.push(formData.value.addressLines2)
-    }
-    if (!formData.value.addressLines1 && !formData.value.addressLines2) {
-      formData.value.addressLines = []
-    }
-    let res = await personalApi.CustomUpdateInfo({
-      ...formData.value,
+
+  function changeState(val) {
+    formData.value.city = ''
+    cityOptions.value = []
+    let item = {}
+    states.value.forEach((element) => {
+      if (element.name == val || element.enName == val) {
+        item = element
+        return
+      }
     })
-    if (res.code == Config.Code.StatusOK) {
-      if (save) {
-        dialogCheck.value.close()
-        router.push({ path: '/pages/customer/index' })
+    getCityList(item.id)
+  }
+
+  function handleChange(value: any) {
+    formData.value = { ...formData.value, [value.key]: value.value }
+    console.log(value)
+    if (value.key === 'country') {
+      formData.value.state = ''
+      formData.value.city = ''
+      stateOptions.value = []
+      cityOptions.value = []
+      if (value.value) {
+        getStateList(value.value)
       }
-    } else {
-      uni.showToast({ title: res.msg, icon: 'none' })
+    } else if (value.key === 'state') {
+      formData.value.city = ''
+      cityOptions.value = []
+      if (value.value) {
+        getCityList(value.value)
+      }
+    }
+  }
+
+  function openAddressTip() {
+    // 打开地址提示弹窗
+    addressTipPopup.value.open()
+  }
+
+  function isPdf(url, image) {
+    let res = !!url
+    if (image) {
+      return res && url.substr(-3, 3) == 'pdf' &&
+        url.substr(-3, 3) == 'PDF'
     }
-  } catch (error: any) {
-    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
+    return res && (url.substr(-3, 3) == 'pdf' ||
+      url.substr(-3, 3) == 'PDF')
   }
-}
-
-async function customApply() {
-  try {
-    let res = await personalApi.customApplyReal({})
-    if (res.code == Config.Code.StatusOK) {
-      isApprove.value = true
-      await getLoginInfo(true)
+
+  function cancle() {
+    if (!isApprove.value) {
       dialogCheck.value.open()
-      dialogCheck1.value = false
+      dialogCheck1.value = true
     } else {
-      uni.showToast({ title: res.msg, icon: 'none' })
+      router.push({ path: '/pages/customer/dashboard' })
     }
-  } catch (error: any) {
-    uni.showToast({ title: error.msg, icon: 'none' })
   }
-}
-
-async function getCountryList() {
-  try {
-    let res = await personalApi.Country({})
-    if (res.code == Config.Code.StatusOK) {
-      countryOptions.value = res.data.map((item: any) => ({
-        text: item.enName,
-        value: item.code,
-        disable: notCountry.indexOf(item.code) !== -1,
-      }))
-      countries.value = res.data
-      const country = formData.value.country
-      if (country) {
-        countries.value.forEach((item) => {
-          if (item.code == country) {
-            getStateList(item.id)
-          }
-        })
+
+  function closeDia() {
+    dialogCheck.value.close()
+  }
+
+  function toHome() {
+    dialogCheck.value.close()
+    router.push({ path: '/pages/customer/dashboard' })
+  }
+
+  async function save() {
+    await updateInfo(1)
+  }
+
+  async function Submit() {
+    loadingStates.value.submit = true
+    try {
+      formData.value.addressLines = []
+      if (formData.value.addressLines1) {
+        formData.value.addressLines.push(formData.value.addressLines1)
+      }
+      if (formData.value.addressLines2) {
+        formData.value.addressLines.push(formData.value.addressLines2)
+      }
+      if (!formData.value.addressLines1 && !formData.value.addressLines2) {
+        formData.value.addressLines = []
       }
+      if (formData.value.customType != 2) {
+        formData.value.companyName = ''
+      }
+      let res = await personalApi.CustomUpdateInfo({
+        ...formData.value,
+      })
+      if (res.code == Config.Code.StatusOK) {
+        await getCustomFileList()
+        await customApply()
+      } else {
+        uni.showToast({ title: res.msg, icon: 'none' })
+      }
+    } catch (error: any) {
+      uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
+    } finally {
+      loadingStates.value.submit = false
     }
-  } catch (error: any) {
-    uni.showToast({ title: error.msg, icon: 'none' })
   }
-}
-
-async function getStateList(pid: string) {
-  try {
-    let res = await personalApi.Country({ pid })
-    if (res.code == Config.Code.StatusOK) {
-      // console.log(locale)
-      stateOptions.value = res.data.map((item: any) => ({
-        text: locale.value === 'en' ? item.enName : item.name,
-        value: locale.value === 'en' ? item.enName : item.name,
-      }))
-      states.value = res.data
-      const state = formData.value.state
-      console.log(state)
-      if (state) {
-        states.value.forEach((item) => {
-          if (
-            item.name == state ||
-            item.enName == state
-          ) {
-            getCityList(item.id)
-          }
-        })
+
+  async function updateInfo(save: number) {
+    try {
+      formData.value.addressLines = []
+      if (formData.value.addressLines1) {
+        formData.value.addressLines.push(formData.value.addressLines1)
+      }
+      if (formData.value.addressLines2) {
+        formData.value.addressLines.push(formData.value.addressLines2)
+      }
+      if (!formData.value.addressLines1 && !formData.value.addressLines2) {
+        formData.value.addressLines = []
+      }
+      let res = await personalApi.CustomUpdateInfo({
+        ...formData.value,
+      })
+      if (res.code == Config.Code.StatusOK) {
+        if (save) {
+          dialogCheck.value.close()
+          router.push({ path: '/pages/customer/index' })
+        }
+      } else {
+        uni.showToast({ title: res.msg, icon: 'none' })
       }
+    } catch (error: any) {
+      uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
     }
-  } catch (error: any) {
-    console.log(error)
   }
-}
-
-async function getCityList(pid: string) {
-  try {
-    let res = await personalApi.Country({ pid })
-    if (res.code == Config.Code.StatusOK) {
-      cityOptions.value = res.data.map((item: any) => ({
-        text: locale.value === 'en' ? item.enName : item.name,
-        value: locale.value === 'en' ? item.enName : item.name,
-      }))
-      cities.value = res.data
+
+  async function customApply() {
+    try {
+      let res = await personalApi.customApplyReal({})
+      if (res.code == Config.Code.StatusOK) {
+        isApprove.value = true
+        await getLoginInfo(true)
+        dialogCheck.value.open()
+        dialogCheck1.value = false
+      } else {
+        uni.showToast({ title: res.msg, icon: 'none' })
+      }
+    } catch (error: any) {
+      uni.showToast({ title: error.msg, icon: 'none' })
     }
-  } catch (error: any) {
   }
-}
-
-async function getLoginInfo(type=false) {
-  try {
-    let res = await personalApi.CustomLoginInfo()
-    if (res.code == Config.Code.StatusOK) {
-      formData.value = res.data.customInfo
-      if (type) userStore.saveUserInfo(res.data)
-      if (formData.value.addressLines != null && formData.value.addressLines.length) {
-        formData.value.addressLines1 = formData.value.addressLines[0]
-        formData.value.addressLines2 = formData.value.addressLines[1]
+
+  async function getCountryList() {
+    try {
+      let res = await personalApi.Country({})
+      if (res.code == Config.Code.StatusOK) {
+        countryOptions.value = res.data.map((item: any) => ({
+          text: item.enName,
+          value: item.code,
+          disable: notCountry.indexOf(item.code) !== -1,
+        }))
+        countries.value = res.data
+        const country = formData.value.country
+        if (country) {
+          countries.value.forEach((item) => {
+            if (item.code == country) {
+              getStateList(item.id)
+            }
+          })
+        }
       }
-      formData.value.customType = formData.value.customType ? formData.value.customType : 1
-      formData.value.IdentityType = 2
-      await getCountryList()
-    } else {
-      uni.showToast({ title: t('Msg.SystemError'), icon: 'none' })
+    } catch (error: any) {
+      uni.showToast({ title: error.msg, icon: 'none' })
     }
-  } catch (error: any) {
-
-  }
-}
-
-// 获取二维码
-async function getMobileInfo() {
-  try {
-    let res = await personalApi.CustomFileMobileFiles({}, { responseType: 'arraybuffer' })
-    // console.log(res);
-    mobile.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
-  } catch (error: any) {
-    // uni.showToast({ title: error.message , icon: 'none' })
   }
-}
-
-// 获取上传文件信息
-async function getCustomFileList() {
-  try {
-    let res = await personalApi.CustomFileList()
-    if (res.code == Config.Code.StatusOK) {
-      let myData = res.data
-      fileListOthers.value = []
-      myData.forEach((item: any) => {
-        if (item.type == 1) {
-          fileListID1.value = item
-        } else if (item.type == 2) {
-          fileListID2.value = item
-        } else if (item.type == 3) {
-          fileListAdd1.value = item
-        } else if (item.type == 4) {
-          fileListAdd2.value = item
-        } else if (item.type == 10) {
-          fileListOthers.value.push(item)
+
+  async function getStateList(pid: string) {
+    try {
+      let res = await personalApi.Country({ pid })
+      if (res.code == Config.Code.StatusOK) {
+        // console.log(locale)
+        stateOptions.value = res.data.map((item: any) => ({
+          text: locale.value === 'en' ? item.enName : item.name,
+          value: locale.value === 'en' ? item.enName : item.name,
+        }))
+        states.value = res.data
+        const state = formData.value.state
+        console.log(state)
+        if (state) {
+          states.value.forEach((item) => {
+            if (
+              item.name == state ||
+              item.enName == state
+            ) {
+              getCityList(item.id)
+            }
+          })
         }
-      })
-      actionType()
-    } else {
-      uni.showToast({ title: res.msg, icon: 'none' })
-      flag.value = false
+      }
+    } catch (error: any) {
+      console.log(error)
     }
-  } catch (error: any) {
-    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
   }
-}
-
-// 请求头
-function actionType() {
-  if (fileListID1.value.id) {
-    actionID1.value = Config.Host80 + '/custom/file/upload/1/' + fileListID1.value.id
-  } else {
-    actionID1.value = Config.Host80 + '/custom/file/upload/1'
+
+  async function getCityList(pid: string) {
+    try {
+      let res = await personalApi.Country({ pid })
+      if (res.code == Config.Code.StatusOK) {
+        cityOptions.value = res.data.map((item: any) => ({
+          text: locale.value === 'en' ? item.enName : item.name,
+          value: locale.value === 'en' ? item.enName : item.name,
+        }))
+        cities.value = res.data
+      }
+    } catch (error: any) {
+    }
   }
-  if (fileListID2.value.id) {
-    actionID2.value = Config.Host80 + '/custom/file/upload/2/' + fileListID2.value.id
-  } else {
-    actionID2.value = Config.Host80 + '/custom/file/upload/2'
+
+  async function getLoginInfo(type = false) {
+    try {
+      let res = await personalApi.CustomLoginInfo()
+      if (res.code == Config.Code.StatusOK) {
+        formData.value = res.data.customInfo
+        if (type) userStore.saveUserInfo(res.data)
+        if (formData.value.addressLines != null && formData.value.addressLines.length) {
+          formData.value.addressLines1 = formData.value.addressLines[0]
+          formData.value.addressLines2 = formData.value.addressLines[1]
+        }
+        formData.value.customType = formData.value.customType ? formData.value.customType : 1
+        formData.value.IdentityType = 2
+        await getCountryList()
+      } else {
+        uni.showToast({ title: t('Msg.SystemError'), icon: 'none' })
+      }
+    } catch (error: any) {
+
+    }
   }
-  if (fileListAdd1.value.id) {
-    actionAdd1.value = Config.Host80 + '/custom/file/upload/3/' + fileListAdd1.value.id
-  } else {
-    actionAdd1.value = Config.Host80 + '/custom/file/upload/3'
+
+  // 获取二维码
+  async function getMobileInfo() {
+    try {
+      let res = await personalApi.CustomFileMobileFiles({}, { responseType: 'arraybuffer' })
+      // console.log(res);
+      mobile.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
+    } catch (error: any) {
+      // uni.showToast({ title: error.message , icon: 'none' })
+    }
   }
-  if (fileListAdd2.value.id) {
-    actionAdd2.value = Config.Host80 + '/custom/file/upload/4/' + fileListAdd2.value.id
-  } else {
-    actionAdd2.value = Config.Host80 + '/custom/file/upload/4'
+
+  // 获取上传文件信息
+  async function getCustomFileList() {
+    try {
+      let res = await personalApi.CustomFileList()
+      if (res.code == Config.Code.StatusOK) {
+        let myData = res.data
+        fileListOthers.value = []
+        myData.forEach((item: any) => {
+          if (item.type == 1) {
+            fileListID1.value = item
+          } else if (item.type == 2) {
+            fileListID2.value = item
+          } else if (item.type == 3) {
+            fileListAdd1.value = item
+          } else if (item.type == 4) {
+            fileListAdd2.value = item
+          } else if (item.type == 10) {
+            fileListOthers.value.push(item)
+          }
+        })
+        actionType()
+      } else {
+        uni.showToast({ title: res.msg, icon: 'none' })
+        flag.value = false
+      }
+    } catch (error: any) {
+      uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
+    }
   }
-  actionOtherAdd.value = Config.Host80 + '/custom/file/upload/10'
-}
-
-function updateFile(myData) {
-  if (myData.type == 1) {
-    fileListID1.value = myData
-  } else if (myData.type == 2) {
-    fileListID2.value = myData
-  } else if (myData.type == 3) {
-    fileListAdd1.value = myData
-  } else if (myData.type == 4) {
-    fileListAdd2.value = myData
-  } else if (myData.type == 10) {
-    if (!fileListOthers.value.length) {
-      fileListOthers.value.push(myData)
+
+  // 请求头
+  function actionType() {
+    if (fileListID1.value.id) {
+      actionID1.value = Config.Host80 + '/custom/file/upload/1/' + fileListID1.value.id
     } else {
-      let flag = true
-      fileListOthers.value.forEach((item: any) => {
-        if (item.id == myData.id) {
-          item = myData
-          flag = false
-        }
-      })
-      if (flag) {
+      actionID1.value = Config.Host80 + '/custom/file/upload/1'
+    }
+    if (fileListID2.value.id) {
+      actionID2.value = Config.Host80 + '/custom/file/upload/2/' + fileListID2.value.id
+    } else {
+      actionID2.value = Config.Host80 + '/custom/file/upload/2'
+    }
+    if (fileListAdd1.value.id) {
+      actionAdd1.value = Config.Host80 + '/custom/file/upload/3/' + fileListAdd1.value.id
+    } else {
+      actionAdd1.value = Config.Host80 + '/custom/file/upload/3'
+    }
+    if (fileListAdd2.value.id) {
+      actionAdd2.value = Config.Host80 + '/custom/file/upload/4/' + fileListAdd2.value.id
+    } else {
+      actionAdd2.value = Config.Host80 + '/custom/file/upload/4'
+    }
+    actionOtherAdd.value = Config.Host80 + '/custom/file/upload/10'
+  }
+
+  function updateFile(myData) {
+    if (myData.type == 1) {
+      fileListID1.value = myData
+    } else if (myData.type == 2) {
+      fileListID2.value = myData
+    } else if (myData.type == 3) {
+      fileListAdd1.value = myData
+    } else if (myData.type == 4) {
+      fileListAdd2.value = myData
+    } else if (myData.type == 10) {
+      if (!fileListOthers.value.length) {
         fileListOthers.value.push(myData)
+      } else {
+        let flag = true
+        fileListOthers.value.forEach((item: any) => {
+          if (item.id == myData.id) {
+            item = myData
+            flag = false
+          }
+        })
+        if (flag) {
+          fileListOthers.value.push(myData)
+        }
       }
     }
+    actionType()
   }
-  actionType()
-}
-
-// 判断是否为PC端
-function IsPC() {
-  let userAgentInfo = navigator.userAgent
-  let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
-  let flag = true
-  for (let v = 0; v < Agents.length; v++) {
-    if (userAgentInfo.indexOf(Agents[v]) > 0) {
-      flag = false
-      break
+
+  // 判断是否为PC端
+  function IsPC() {
+    let userAgentInfo = navigator.userAgent
+    let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
+    let flag = true
+    for (let v = 0; v < Agents.length; v++) {
+      if (userAgentInfo.indexOf(Agents[v]) > 0) {
+        flag = false
+        break
+      }
     }
+    return flag
   }
-  return flag
-}
-
-// div大小改变重载
-function divInit() {
-  // 由于elementResizeDetectorMaker在UniApp中可能不可用，这里简化处理
-  const width = window.innerWidth
-  if (width <= 1100 && width > 800) {
-    divActiveHelf.value = true
-    divActiveAll.value = false
-  } else if (width <= 800) {
-    divActiveAll.value = true
-    divActiveHelf.value = false
-  } else if (1100 < width) {
-    divActiveAll.value = false
-    divActiveHelf.value = false
-  }
-}
-
-// 监听表单字段变化
-watch(
-  () => formData.value.firstName,
-  () => {
-    if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
-      formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`)
-      pinyin
-    }
-  },
-)
-
-watch(
-  () => formData.value.lastName,
-  () => {
-    if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
-      formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`
-      )
+
+  // div大小改变重载
+  function divInit() {
+    // 由于elementResizeDetectorMaker在UniApp中可能不可用，这里简化处理
+    const width = window.innerWidth
+    if (width <= 1100 && width > 800) {
+      divActiveHelf.value = true
+      divActiveAll.value = false
+    } else if (width <= 800) {
+      divActiveAll.value = true
+      divActiveHelf.value = false
+    } else if (1100 < width) {
+      divActiveAll.value = false
+      divActiveHelf.value = false
     }
-  },
-)
-
-watch(locale,()=>{
-  formRef.value?.clearValidate()
-})
-
-// 生命周期
-onMounted(async () => {
-  // dialogCheck.value.open()
-  divInit()
-  await getLoginInfo()
-  await getMobileInfo()
-  await getCustomFileList()
-  isPC.value = IsPC()
-  uni.$on('updateImproveFile', (data) => {
-    updateFile(data)
+  }
+
+  // 监听表单字段变化
+  watch(
+    () => formData.value.firstName,
+    () => {
+      if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
+        formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`)
+        pinyin
+      }
+    },
+  )
+
+  watch(
+    () => formData.value.lastName,
+    () => {
+      if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
+        formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`,
+        )
+      }
+    },
+  )
+
+  watch(locale, () => {
+    formRef.value?.clearValidate()
+  })
+
+  // 生命周期
+  onMounted(async () => {
+    // dialogCheck.value.open()
+    divInit()
+    await getLoginInfo()
+    await getMobileInfo()
+    await getCustomFileList()
+    isPC.value = IsPC()
+    uni.$on('updateImproveFile', (data) => {
+      updateFile(data)
+    })
   })
-})
 
-// 组件销毁时
-onUnmounted(() => {
-  uni.$off('updateImproveFile')
-})
+  // 组件销毁时
+  onUnmounted(() => {
+    uni.$off('updateImproveFile')
+  })
 </script>
 
 <style scoped lang="scss">
-@import "@/uni.scss";
-.btn{
-  margin: 0;
-  width: 100%;
-}
-
-.form-tab {
-  height: px2rpx(100);
-}
-
-.form-section {
-  margin: px2rpx(8) 0;
-}
-
-.section-title {
-  color: var(--bs-emphasis-color);
-  font-family: Roboto;
-  font-size: px2rpx(22);
-  font-weight: 500;
-  margin: px2rpx(10) 0;
-}
-
-:deep(.file-picker__box) {
-  width: px2rpx(200) !important;
-  height: px2rpx(150) !important;
-}
-
-:deep(.uni-file-picker) {
-  width: 100%;
-  height: 100%;
-}
-
-.avatar-uploader {
-  border: 1px dashed;
-  width: px2rpx(200);
-  height: px2rpx(150);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  /*float: left;*/
-  //overflow: hidden;
-}
-
-.file-item {
-  border: 1px dashed;
-  border-radius: px2rpx(5);
-  width: px2rpx(200);
-  height: px2rpx(150);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .icon {
-    width: px2rpx(24);
-    height: px2rpx(24);
-  }
-}
-
-.avatar {
-  width: 100%;
-  height: 100%;
-}
-
-.custom-upload-btn {
-  width: px2rpx(200);
-  height: px2rpx(150);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  .plus {
-    font-size: px2rpx(24);
-    color: #9ca3af;
+  @import "@/uni.scss";
+
+  .btn {
+    margin: 0;
+    width: 100%;
   }
-}
-
-.refresh {
-  width: 100%;
-  height: px2rpx(150);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  image {
-    width: px2rpx(28);
-    height: px2rpx(28);
+
+  .form-tab {
+    height: px2rpx(100);
   }
-}
 
-.fileOther {
+  .form-section {
+    margin: px2rpx(8) 0;
+  }
 
-  :deep(.upload-wrapper .uni-file-picker) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .section-title {
+    color: var(--bs-emphasis-color);
+    font-family: Roboto;
+    font-size: px2rpx(22);
+    font-weight: 500;
+    margin: px2rpx(10) 0;
   }
 
-  :deep(.uni-file-picker__lists) {
-    display: none !important;
+  :deep(.file-picker__box) {
+    width: px2rpx(200) !important;
+    height: px2rpx(150) !important;
   }
-}
-
-.fileList {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#files {
-  :deep(.uni-file-picker__lists) {
-    display: none !important;
+
+  :deep(.uni-file-picker) {
+    width: 100%;
+    height: 100%;
   }
 
-  :deep(.upload-wrapper .uni-file-picker) {
+  .avatar-uploader {
+    border: 1px dashed;
+    width: px2rpx(200);
+    height: px2rpx(150);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    /*float: left;*/
+    //overflow: hidden;
   }
 
+  .file-item {
+    border: 1px dashed;
+    border-radius: px2rpx(5);
+    width: px2rpx(200);
+    height: px2rpx(150);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  .list_upload {
-    width: px2rpx(150);
-    height: px2rpx(60);
+    .icon {
+      width: px2rpx(24);
+      height: px2rpx(24);
+    }
   }
 
-  .file-item {
-    //border: none;
-    box-sizing: border-box;
-    width: px2rpx(150);
-    height: px2rpx(60);
-    border-radius: 0;
+  .avatar {
+    width: 100%;
+    height: 100%;
   }
 
-  margin-top: px2rpx(20);
-  max-width: px2rpx(600);
-  border: 1px dashed;
-  display: flex;
+  .custom-upload-btn {
+    width: px2rpx(200);
+    height: px2rpx(150);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .plus {
+      font-size: px2rpx(24);
+      color: #9ca3af;
+    }
+  }
 
-  .options {
+  .refresh {
+    width: 100%;
+    height: px2rpx(150);
     display: flex;
-    flex: 1;
-    padding: 8px;
-    box-sizing: border-box;
     justify-content: center;
-    align-content: center;
     align-items: center;
-    @media screen and (max-width: 990px) {
-      flex-direction: column;
-      align-items: flex-start;
+
+    image {
+      width: px2rpx(28);
+      height: px2rpx(28);
     }
+  }
 
-    uni-button {
-      min-width: px2rpx(80);
-      max-height: px2rpx(35);
-      padding: 0;
-      line-height: px2rpx(35);
-      margin-bottom: px2rpx(5);
+  .fileOther {
 
-      span,
-      a {
-        display: inline-block;
-        height: 100%;
-        width: 100%;
-        color: var(--color-black);
-      }
+    :deep(.upload-wrapper .uni-file-picker) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-  }
-}
 
-.con-box {
-  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
-  border-radius: 2px;
-  padding: 20px;
+    :deep(.uni-file-picker__lists) {
+      display: none !important;
+    }
+  }
 
-  .box {
+  .fileList {
     width: 100%;
-    // height: 190px;
     box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+  }
 
-    .mobile {
-      width: px2rpx(50);
-      height: px2rpx(50);
-      margin-right: px2rpx(10);
+  #files {
+    :deep(.uni-file-picker__lists) {
+      display: none !important;
     }
 
-    .arrow {
-      width: px2rpx(30);
-      height: px2rpx(30);
-      margin-right: px2rpx(10);
+    :deep(.upload-wrapper .uni-file-picker) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    .img_mobile {
-      width: 120px;
-      height: 120px;
-      margin: 10px;
-      border: 5px solid;
-      background-color: var(--color-gray);
+
+    .list_upload {
+      width: px2rpx(150);
+      height: px2rpx(60);
     }
 
-    .icon_refresh {
-      width: px2rpx(30);
-      height: px2rpx(30);
-      margin-right: px2rpx(10);
+    .file-item {
+      //border: none;
+      box-sizing: border-box;
+      width: px2rpx(150);
+      height: px2rpx(60);
+      border-radius: 0;
     }
-  }
-}
-
-.experience {
-  display: flex;
-  margin: px2rpx(10) 0;
-  align-items: center;
-}
-
-.Trad-experience {
-  flex: 1;
-  color: var(--bs-emphasis-color);
-  font-size: px2rpx(16);
-}
-
-.Trad-choose {
-  display: flex;
-}
-
-.descending {
-  margin: px2rpx(20) 0;
-  padding: px2rpx(20);
-  background-color: #f5f5f5;
-  border-radius: px2rpx(8);
-}
-
-.title {
-  font-weight: 500;
-  margin-bottom: px2rpx(10);
-}
-
-.des {
-  margin: px2rpx(5) 0;
-  font-size: px2rpx(14);
-  color: var(--bs-heading-color);
-}
-
-.dian1 {
-  font-size: px2rpx(20);
-  margin-right: px2rpx(5);
-}
-
-.dian {
-  margin-right: px2rpx(10);
-}
-
-.btns {
-  margin-top: px2rpx(30);
-}
-
-.cwg-button {
-  display: flex;
-  flex-direction: column;
-  gap: px2rpx(15);
-
-  &.two-btn {
-    flex-direction: row;
-    justify-content: space-between;
-
-    u-button {
+
+    margin-top: px2rpx(20);
+    max-width: px2rpx(600);
+    border: 1px dashed;
+    display: flex;
+
+    .options {
+      display: flex;
       flex: 1;
-      margin: 0 px2rpx(10);
+      padding: 8px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-content: center;
+      align-items: center;
+      @media screen and (max-width: 990px) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
 
-      &:first-child {
-        margin-left: 0;
+      uni-button {
+        min-width: px2rpx(80);
+        max-height: px2rpx(35);
+        padding: 0;
+        line-height: px2rpx(35);
+        margin-bottom: px2rpx(5);
+
+        span,
+        a {
+          display: inline-block;
+          height: 100%;
+          width: 100%;
+          color: var(--color-black);
+        }
       }
+    }
+  }
 
-      &:last-child {
-        margin-right: 0;
+  .con-box {
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
+    border-radius: 2px;
+    padding: 20px;
+
+    .box {
+      width: 100%;
+      // height: 190px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .mobile {
+        width: px2rpx(50);
+        height: px2rpx(50);
+        margin-right: px2rpx(10);
+      }
+
+      .arrow {
+        width: px2rpx(30);
+        height: px2rpx(30);
+        margin-right: px2rpx(10);
+      }
+
+      .img_mobile {
+        width: 120px;
+        height: 120px;
+        margin: 10px;
+        border: 5px solid;
+        background-color: var(--color-gray);
+      }
+
+      .icon_refresh {
+        width: px2rpx(30);
+        height: px2rpx(30);
+        margin-right: px2rpx(10);
       }
     }
   }
-}
-
-.btn-primary {
-  height: px2rpx(80);
-  font-size: px2rpx(18);
-}
-
-.prev-btn {
-  //border-color: #4a6cf7;
-  //color: #4a6cf7;
-}
-
-.address-tip {
-  width: px2rpx(140);
-  //height: px2rpx(60);
-  font-size: px2rpx(14);
-  word-break:break-all;
-  white-space:wrap;
-  word-wrap:break-word;
-}
-
-.crm-title-box {
-  display: flex;
-  align-items: center;
-  margin: px2rpx(20) 0;
-  background-color: var(--table-th-color) ;
-  color: #333;
-
-  .tit {
-    font-size: px2rpx(18);
-    font-weight: 500;
-    color: var(--bs-emphasis-color);
+
+  .experience {
+    display: flex;
+    margin: px2rpx(10) 0;
+    align-items: center;
   }
 
-  .icon-tip {
-    margin-left: px2rpx(10);
-    font-size: px2rpx(16);
+  .Trad-experience {
+    flex: 1;
     color: var(--bs-emphasis-color);
-    cursor: pointer;
+    font-size: px2rpx(16);
   }
-}
-
-.popup-content {
-  padding: px2rpx(20);
-  text-align: center;
-}
-
-.dia-content {
-  padding: px2rpx(30);
-  text-align: center;
 
-  .icon {
-    margin-bottom: px2rpx(20);
+  .Trad-choose {
+    display: flex;
+  }
 
-    i {
-      font-size: px2rpx(60);
-      color: #4a6cf7;
-    }
+  .descending {
+    margin: px2rpx(20) 0;
+    padding: px2rpx(20);
+    background-color: #f5f5f5;
+    border-radius: px2rpx(8);
   }
 
-  .des1 {
-    font-size: px2rpx(18);
+  .title {
     font-weight: 500;
     margin-bottom: px2rpx(10);
   }
 
-  .des2 {
+  .des {
+    margin: px2rpx(5) 0;
     font-size: px2rpx(14);
     color: var(--bs-heading-color);
-    margin-bottom: px2rpx(30);
   }
 
-  .dialog-footer {
-    display: flex;
-    justify-content: space-between;
+  .dian1 {
+    font-size: px2rpx(20);
+    margin-right: px2rpx(5);
+  }
+
+  .dian {
+    margin-right: px2rpx(10);
+  }
+
+  .btns {
     margin-top: px2rpx(30);
+  }
 
-    uni-button {
-      flex: 1;
-      margin: 0 px2rpx(10);
+  .cwg-button {
+    display: flex;
+    flex-direction: column;
+    gap: px2rpx(15);
 
-      &:first-child {
-        margin-left: 0;
-      }
+    &.two-btn {
+      flex-direction: row;
+      justify-content: space-between;
+
+      u-button {
+        flex: 1;
+        margin: 0 px2rpx(10);
 
-      &:last-child {
-        margin-right: 0;
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
   }
-}
-
-.cwg-upload {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: px2rpx(40);
-  border: 1px dashed #ddd;
-  border-radius: px2rpx(8);
-  cursor: pointer;
-
-  cwg-icon {
-    font-size: px2rpx(40);
-    margin-bottom: px2rpx(10);
-    color: var(--bs-heading-color);
+
+  .btn-primary {
+    height: px2rpx(80);
+    font-size: px2rpx(18);
   }
 
-  .name {
-    font-size: px2rpx(16);
-    margin-bottom: px2rpx(5);
+  .prev-btn {
+    //border-color: #4a6cf7;
+    //color: #4a6cf7;
   }
 
-  .back {
-    font-size: px2rpx(12);
-    color: var(--bs-heading-color);
+  .address-tip {
+    width: px2rpx(140);
+    //height: px2rpx(60);
+    font-size: px2rpx(14);
+    word-break: break-all;
+    white-space: wrap;
+    word-wrap: break-word;
+  }
+
+  .crm-title-box {
+    display: flex;
+    align-items: center;
+    margin: px2rpx(20) 0;
+    background-color: var(--table-th-color);
+    color: #333;
+
+    .tit {
+      font-size: px2rpx(18);
+      font-weight: 500;
+      color: var(--bs-emphasis-color);
+    }
+
+    .icon-tip {
+      margin-left: px2rpx(10);
+      font-size: px2rpx(16);
+      color: var(--bs-emphasis-color);
+      cursor: pointer;
+    }
+  }
+
+  .popup-content {
+    padding: px2rpx(20);
+    text-align: center;
+  }
+
+  .dia-content {
+    padding: px2rpx(30);
+    text-align: center;
+
+    .icon {
+      margin-bottom: px2rpx(20);
+
+      i {
+        font-size: px2rpx(60);
+        color: #4a6cf7;
+      }
+    }
+
+    .des1 {
+      font-size: px2rpx(18);
+      font-weight: 500;
+      margin-bottom: px2rpx(10);
+    }
+
+    .des2 {
+      font-size: px2rpx(14);
+      color: var(--bs-heading-color);
+      margin-bottom: px2rpx(30);
+    }
+
+    .dialog-footer {
+      display: flex;
+      justify-content: space-between;
+      margin-top: px2rpx(30);
+
+      uni-button {
+        flex: 1;
+        margin: 0 px2rpx(10);
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .cwg-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: px2rpx(40);
+    border: 1px dashed #ddd;
+    border-radius: px2rpx(8);
+    cursor: pointer;
+
+    cwg-icon {
+      font-size: px2rpx(40);
+      margin-bottom: px2rpx(10);
+      color: var(--bs-heading-color);
+    }
+
+    .name {
+      font-size: px2rpx(16);
+      margin-bottom: px2rpx(5);
+    }
+
+    .back {
+      font-size: px2rpx(12);
+      color: var(--bs-heading-color);
+    }
   }
-}
 </style>