1

admin

2026-01-06 03043192ddf00f9a36b7454799a9152cd1b50a0b

 src/views/register/identity.vue

@@ -34,6 +34,19 @@
            </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>
@@ -57,7 +70,7 @@
                        </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" />
@@ -65,12 +78,12 @@
                                :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" />
@@ -84,6 +97,7 @@
            </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>
@@ -94,11 +108,12 @@
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 } from "vue";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n()
const router = useRouter()
@@ -108,6 +123,12 @@
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([])
@@ -121,6 +142,13 @@
    fetchInfo()
})

onBeforeUnmount(() => {
    if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
    }
})


const fetchInfo = () => {   // 获取状态
    _getIdentify().then(data => {
@@ -130,9 +158,10 @@
            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 }] : []
        }
    })
}
@@ -178,6 +207,54 @@
    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) {
@@ -192,7 +269,26 @@
        showToast(t('entryCredent'))
        return
    }
    if (!frontFile.value.length || !reverseFile.value.length || !fileList.value.length) {
    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) {
        showToast(t('uploadComplete'))
        return
    }
@@ -203,9 +299,11 @@
        _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'))
@@ -284,4 +382,41 @@
.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>