| | |
| | | </div> |
| | | <ExInput :label="$t('realName')" :placeholderText="$t('entryRealName')" v-model="name" /> |
| | | <ExInput :label="$t('credentPassport')" :placeholderText="$t('entryCredentPassport')" v-model="idnumber" /> |
| | | <ExInput :label="$t('phoneNum')" :disabled="disabled()" :clearBtn="!disabled()" |
| | | :placeholderText="$t('entryPhone')" v-model="phone" :area="true" :dialCode="dialCode" |
| | | @selectArea="onSelectArea" :icon="icon" /> |
| | | <!-- 验证码输入框已隐藏 --> |
| | | <!-- <p class="label mt-2 textColor" v-if="!disabled()">{{ $t("verificationCode") }}</p> |
| | | <div class="iptbox inputBackground" v-if="!disabled()"> |
| | | <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" |
| | | v-model="verifyCode" :disabled="disabled()" /> |
| | | <span @click="sendCode" :class="{ 'disabled': time > 0 }"> |
| | | {{ $t("sendVerifyCode") }} |
| | | <template v-if="time"> ({{ time }})s</template> |
| | | </span> |
| | | </div> --> |
| | | <div> |
| | | <div v-if="resultArr.length > 0" class="mb-13 textColor">{{ $t('uploadCredentPassport') }}</div> |
| | | <div v-else class="mt-55 mb-13">{{ $t('uploadPicCredentPassport') }}</div> |
| | |
| | | </div> |
| | | <div class="mt-3 text-20 h-5 textColor">{{ $t('credentObverse') }}</div> |
| | | </div> |
| | | <!-- <div class="flex-1 flex flex-col text-center justify-center items-center"> |
| | | <div class="flex-1 flex flex-col text-center justify-center items-center"> |
| | | <div class="upload-wrap"> |
| | | <img src="@/assets/image/kyc/2.png" alt="" class="w-full" |
| | | v-if="[1, 2].includes(status) && fileList.length === 0" /> |
| | |
| | | :after-read="afterRead" @click-upload="onClickUpload('fileList')" v-else /> |
| | | </div> |
| | | <div class="mt-3 text-20 h-5 textColor">{{ $t('handCredent') }}</div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <template v-if="!disabled()"> |
| | | <!-- <div class="mb-4 textColor text-26">{{ $t('photoExample') }}</div> --> |
| | | <!-- <img src="@/assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-auto h-56 mb-24"> --> |
| | | <div class="mb-4 textColor text-26">{{ $t('photoExample') }}</div> |
| | | <img src="@/assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-auto h-56 mb-24"> |
| | | <!-- <div class="mb-100 flex justify-center"> |
| | | <div class="flex flex-1 justify-center"> |
| | | <img src="../../assets/image/kyc/kyc_demo1.png" alt="" class="w-80 h-80" /> |
| | |
| | | </van-button> |
| | | <nationality-list ref='controlChildRef' :title="$t('selectNation')" @getName="getName" v-if="!disabled()"> |
| | | </nationality-list> |
| | | <nationality-list ref="controlChildRefPhone" :title="$t('selectArea')" @getName="getName1"></nationality-list> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import { Uploader } from 'vant'; |
| | | import { _applyIdentify, _getIdentify } from '@/service/user.api.js' |
| | | import { _uploadImage } from '@/service/upload.api' |
| | | import { _sendVerifyCode } from "@/service/login.api.js"; |
| | | import countriesinit from "../authentication/components/countryList"; |
| | | import ExInput from "@/components/ex-input/index.vue"; |
| | | import { showToast } from "vant"; |
| | | import { useRouter } from "vue-router"; |
| | | import { ref, reactive, onMounted, onBeforeUnmount } from "vue"; |
| | | import { ref, reactive, onMounted } from "vue"; |
| | | import { useI18n } from 'vue-i18n' |
| | | const { locale, t } = useI18n() |
| | | const router = useRouter() |
| | |
| | | const countryCode = ref('af') //国家地区号 |
| | | const idnumber = ref('') |
| | | const name = ref('') |
| | | const phone = ref('') |
| | | const icon = ref('') |
| | | const dialCode = ref('') |
| | | const verifyCode = ref('') |
| | | const time = ref(0) |
| | | const timer = ref(null) |
| | | |
| | | const frontFile = ref([]) |
| | | const reverseFile = ref([]) |
| | |
| | | fetchInfo() |
| | | }) |
| | | |
| | | onBeforeUnmount(() => { |
| | | if (timer.value) { |
| | | clearInterval(timer.value) |
| | | timer.value = null |
| | | } |
| | | }) |
| | | |
| | | |
| | | const fetchInfo = () => { // 获取状态 |
| | | _getIdentify().then(data => { |
| | |
| | | countryCode.value = data.nationality |
| | | idnumber.value = data.idnumber |
| | | name.value = data.name |
| | | phone.value = data.phone || '' |
| | | frontFile.value = data.idimg_1 ? [{ url: data.idimg_1_path }] : [] |
| | | reverseFile.value = data.idimg_2 ? [{ url: data.idimg_2_path }] : [] |
| | | // fileList.value = data.idimg_3 ? [{ url: data.idimg_3_path }] : [] |
| | | fileList.value = data.idimg_3 ? [{ url: data.idimg_3_path }] : [] |
| | | } |
| | | }) |
| | | } |
| | |
| | | countryName.value = params.name; |
| | | countryCode.value = params.code; |
| | | } |
| | | |
| | | //获取到当前选中国家的手机号code值 |
| | | const getName1 = (params) => { |
| | | icon.value = params.code; |
| | | dialCode.value = params.dialCode; |
| | | } |
| | | |
| | | const controlChildRefPhone = ref(null); |
| | | const onSelectArea = () => { |
| | | controlChildRefPhone.value.open(); |
| | | }; |
| | | |
| | | // 发送验证码 |
| | | const sendCode = () => { |
| | | if (!phone.value) { |
| | | showToast(t('entryPhone')) |
| | | return |
| | | } |
| | | // 校验手机号格式:必须是数字 |
| | | if (isNaN(phone.value) || phone.value.trim() === '') { |
| | | showToast(t('请输入正确的手机号码')) |
| | | return |
| | | } |
| | | if (time.value > 0) { |
| | | return false |
| | | } |
| | | _sendVerifyCode({ |
| | | target: `${dialCode.value || ''}${phone.value}`, |
| | | }).then((res) => { |
| | | showToast(t("sendSuccess")) |
| | | time.value = 30 |
| | | timer.value = setInterval(() => { |
| | | if (time.value > 0) { |
| | | time.value = time.value - 1 |
| | | } else { |
| | | time.value = 0 |
| | | clearInterval(timer.value) |
| | | timer.value = null |
| | | } |
| | | }, 1000) |
| | | }).catch(err => { |
| | | if (err.msg !== undefined) { |
| | | showToast(err.msg) |
| | | } else { |
| | | showToast(t('sendFailed')) |
| | | } |
| | | }) |
| | | } |
| | | const onSubmit = () => { |
| | | |
| | | if (!countryName.value) { |
| | |
| | | showToast(t('entryCredent')) |
| | | return |
| | | } |
| | | if (!phone.value) { |
| | | showToast(t('entryPhone')) |
| | | return |
| | | } |
| | | // 校验手机号格式:必须是数字 |
| | | if (isNaN(phone.value) || phone.value.trim() === '') { |
| | | showToast(t('请输入正确的手机号码')) |
| | | return |
| | | } |
| | | // 验证码校验已隐藏 |
| | | // if (!verifyCode.value) { |
| | | // showToast(t('entryVerifyCode')) |
| | | // return |
| | | // } |
| | | // if (verifyCode.value.length < 6) { |
| | | // showToast(t('entryVerifyTips')) |
| | | // return |
| | | // } |
| | | // if (!frontFile.value.length || !reverseFile.value.length || !fileList.value.length) { |
| | | if (!frontFile.value.length || !reverseFile.value.length) { |
| | | if (!frontFile.value.length || !reverseFile.value.length || !fileList.value.length) { |
| | | showToast(t('uploadComplete')) |
| | | return |
| | | } |
| | |
| | | _applyIdentify({ |
| | | name: name.value, |
| | | idnumber: idnumber.value, |
| | | phone: "" + dialCode.value + phone.value, |
| | | code: '', // 验证码已隐藏,传空值 |
| | | frontFile: frontFile.value, |
| | | reverseFile: reverseFile.value, |
| | | // fileList: fileList.value, |
| | | fileList: fileList.value, |
| | | countryName: countryCode.value // countryName 存储的 code, 回来再遍历 |
| | | }).then(() => { |
| | | showToast(t('submitSuccess')) |
| | |
| | | |
| | | .city { |
| | | background: $light-grey; |
| | | } |
| | | |
| | | .label { |
| | | font-size: 14px; |
| | | margin-bottom: 9px; |
| | | } |
| | | |
| | | .iptbox { |
| | | height: 44px; |
| | | margin-top: 8px; |
| | | padding: 0 10px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | border-radius: 3px; |
| | | |
| | | input { |
| | | flex: 1; |
| | | height: 100%; |
| | | border: none; |
| | | padding-left: 10px; |
| | | color: $text_color; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | span { |
| | | color: $color_main; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | white-space: nowrap; |
| | | margin-left: 10px; |
| | | |
| | | &.disabled { |
| | | color: $text_color1; |
| | | cursor: not-allowed; |
| | | } |
| | | } |
| | | } |
| | | </style> |