232 lines
7.1 KiB
Vue
232 lines
7.1 KiB
Vue
|
<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>
|