<script setup> import {useI18n} from "vue-i18n"; import XVanSelect from '@/components/x-van-select/index.vue' import XVanDate from '@/components/x-van-date/index.vue' import {codeAuthStore} from "@/stores-collect-code/auth/index.js"; import {message} from "@/components/x-message/useMessage.js"; import countryCode from '@/pages/countryRegion/data/index.js' import {fddInfo, offlineQrcode} from "~/api-collect-code/goods/index.js"; import {sessionUserNo} from "@/api-collect-code/auth/index.js"; import {signOffline} from "~/api/goods/index.js"; const {formData,number,auctionArtworkUuid,qrUid,qrData}=codeAuthStore() definePageMeta({ layout: 'default', i18n: 'menu.profile', }) const {t,locale} = useI18n() const router = useRouter() const route = useRoute() const columns = ref([ {text: t('realAuth.male'), value: 1}, {text: t('realAuth.female'), value: 2}, ]) const columns1 = ref([ {text: t('realAuth.idTypeString'), value: 1}, {text: t('realAuth.passport'), value: 2}, {text: t('realAuth.other'), value: 3}, ]) /** * 根据当前语言获取默认国家/地区信息 * @returns {{zone: string, name: string}} 返回国家区号和名称 */ const getDefaultCountry = () => { let defaultCode = 'CN' // 默认中国大陆 switch (locale.value) { case 'zh-CN': defaultCode = 'CN' break case 'zh-TW': defaultCode = 'TW' break case 'ja-JP': defaultCode = 'JP' break case 'en-US': defaultCode = 'US' break } const country = countryCode.find(c => c.code === defaultCode) return { zone: country.zone, name: locale.value === 'zh-CN' ? country.cn : locale.value === 'zh-TW' ? country.tw : locale.value === 'ja-JP' ? country.ja : country.en } } /** * 跳转到国家/地区选择页面 */ const goCountryRegion = () => { router.push({ path: '/countryRegion' }) } /** * 检查表单是否完整填写 * @param {Object} obj - 要检查的表单对象 * @returns {boolean} 是否完整 */ function isFormComplete(obj) { for (const key in obj) { if (typeof obj[key] === 'object' && obj[key] !== null) { if (!isFormComplete(obj[key])) { return false; } } else if (obj[key] === "") { return false; } } return true; } /** * 获取线下二维码支付状态 */ const getData = async () => { const res = await offlineQrcode({ qrUid: qrUid.value }) if (res.status === 0) { qrData.value = res.data } } /** * 初始化页面数据 * 1. 处理URL参数 * 2. 检查支付状态(扫付款码场景) * 3. 设置默认国家/地区信息 */ const initData = async () => { if (route.query.number){ number.value=Number(route.query.number) } if (route.query.qrUid){ qrUid.value=route.query.qrUid } //扫付款码进来才有的步骤 if (number.value==2){ await getData() if (qrData.value.payStatus===4){ router.push('/collectCode/payment') } } if(!formData.value.countryCode){ const defaultCountry = getDefaultCountry() formData.value.countryCode= defaultCountry.zone } if (route.query.zone){ formData.value.countryCode=route.query.zone } } /** * 处理下一步按钮点击 * 场景1(number=1): 扫号牌进入 * - 验证表单完整性 * - 检查用户号牌是否存在 * - 根据国家区号判断签署方式(国内用法大大,国外直接签字) * * 场景2(number=2): 扫付款码进入 * - 验证必填信息(手机、区号、用户名) */ const nextClick = async () => { //扫号牌 if (number.value==1){ if (!isFormComplete(formData.value)){ message.warning(t('signature.error.incompleteForm')) return } const res2=await sessionUserNo({ phone:formData.value.phone }) if (res2.status===0){ if(res2.data.exist){ message.warning(`您的号牌是${res2.data.userInfo.auction_user_no}`) return } } //国内签署要用法大大 if (formData.value.countryCode==='86'&&formData.value.cardType===1){ const res=await fddInfo({ phone:formData.value.phone }) if (res.status===0){ if (res.data.status===2){ router.push('/collectCode/signature/protocol') }else { const res1=await signOffline({ userInfo:formData.value, signOrder:Number(number.value), testReturnHost:window.location.origin, testReturnEndPoint:'/collectCode/signature/protocol', }) if (res1.status===0){ window.location.href=res1.data.fddVerifyUrl } } } } else { //国外签署直接去确认然后签字版 router.push('/collectCode/signature/protocol') } } else if(number.value==2) { if (!formData.value.phone || !formData.value.countryCode || !formData.value.userName){ message.warning('请填写完整信息') return } router.push('/collectCode/signature/protocol') } } initData() </script> <template> <div class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col "> <div class="text-16px text-#191919 font-bold mb-40px px-34px"> {{ $t('personal.title') }} </div> <div class="grow-1 px-34px"> <van-field v-model="formData.phone" type="tel" :label-width="161" :label="$t('personal.text')" class="mb-10px" :placeholder="$t('realAuth.phonePlaceholder')"> <template #label> <div class="flex"> <div class="mr-41px whitespace-nowrap">{{ $t('profile.phone') }}</div> <div @click="goCountryRegion"> <span class="mr-13px">+ {{ formData.countryCode }}</span> <van-icon name="arrow-down" class="text-#777777"/> </div> </div> </template> </van-field> <van-field :label="$t('profile.name')" v-model="formData.userName" class="mb-10px" :placeholder="$t('realAuth.namePlaceholder')"/> <template v-if="number===1"> <x-van-select v-model="formData.gender" :label="$t('realAuth.gender')" :columns="columns"/> <x-van-date :label="$t('realAuth.birthday')" v-model="formData.birthday" /> <van-field :label="$t('realAuth.adress')" v-model="formData.address" class="mb-10px" :placeholder="$t('realAuth.adressPlaceholder')"/> <van-field :label="$t('realAuth.bank')" v-model="formData.bankName" class="mb-10px" :placeholder="$t('realAuth.bankPlaceholder')"/> <van-field :label="$t('realAuth.bankCard')" v-model="formData.bankNo" class="mb-10px" :placeholder="$t('realAuth.bankCardPlaceholder')"/> <x-van-select v-model="formData.cardType" :label="$t('realAuth.idTye')" :columns="columns1"/> <van-field :label="$t('realAuth.idCard')" v-model="formData.cardId" class="mb-10px" :placeholder="$t('realAuth.idCardPlaceholder')"/> </template> </div> <div class="h-81px bg-#fff flex justify-center pt-7px border-t shrink-0"> <van-button color="#2B53AC" class="w-213px van-btn-h-38px" @click="nextClick">{{ $t('personal.next') }}</van-button> </div> </div> </template> <style scoped lang="scss"> :deep(.van-cell.van-field){ padding-left: 0; } </style>