refactor(collect-code): 重构收集二维码功能的个人资料和协议页面

- 优化了个人资料页面的代码结构,增加了注释和函数封装
- 重构了协议页面的代码,提高了可读性和可维护性
- 添加了获取用户法大大认证信息的功能
- 完善了签署确认逻辑,支持特殊用户和普通用户的不同签署流程
- 优化了折叠面板和 PDF 查看的处理
This commit is contained in:
xingyy 2025-03-14 09:44:36 +08:00
parent 0ab8b5f9d1
commit ad7833a312
2 changed files with 138 additions and 56 deletions

View File

@ -26,6 +26,11 @@ const columns1 = ref([
{text: t('realAuth.passport'), value: 2}, {text: t('realAuth.passport'), value: 2},
{text: t('realAuth.other'), value: 3}, {text: t('realAuth.other'), value: 3},
]) ])
/**
* 根据当前语言获取默认国家/地区信息
* @returns {{zone: string, name: string}} 返回国家区号和名称
*/
const getDefaultCountry = () => { const getDefaultCountry = () => {
let defaultCode = 'CN' // let defaultCode = 'CN' //
switch (locale.value) { switch (locale.value) {
@ -53,11 +58,20 @@ const getDefaultCountry = () => {
} }
} }
const goCountryRegion=()=>{ /**
* 跳转到国家/地区选择页面
*/
const goCountryRegion = () => {
router.push({ router.push({
path:'/countryRegion' path: '/countryRegion'
}) })
} }
/**
* 检查表单是否完整填写
* @param {Object} obj - 要检查的表单对象
* @returns {boolean} 是否完整
*/
function isFormComplete(obj) { function isFormComplete(obj) {
for (const key in obj) { for (const key in obj) {
if (typeof obj[key] === 'object' && obj[key] !== null) { if (typeof obj[key] === 'object' && obj[key] !== null) {
@ -71,15 +85,25 @@ function isFormComplete(obj) {
return true; return true;
} }
const getData=async ()=>{ /**
const res=await offlineQrcode({ * 获取线下二维码支付状态
qrUid:qrUid.value */
}) const getData = async () => {
if (res.status===0){ const res = await offlineQrcode({
qrData.value=res.data qrUid: qrUid.value
})
if (res.status === 0) {
qrData.value = res.data
} }
} }
const initData= async ()=>{
/**
* 初始化页面数据
* 1. 处理URL参数
* 2. 检查支付状态(扫付款码场景)
* 3. 设置默认国家/地区信息
*/
const initData = async () => {
if (route.query.number){ if (route.query.number){
number.value=Number(route.query.number) number.value=Number(route.query.number)
} }
@ -101,7 +125,18 @@ const initData= async ()=>{
formData.value.countryCode=route.query.zone formData.value.countryCode=route.query.zone
} }
} }
const nextClick=async ()=>{
/**
* 处理下一步按钮点击
* 场景1(number=1): 扫号牌进入
* - 验证表单完整性
* - 检查用户号牌是否存在
* - 根据国家区号判断签署方式(国内用法大大,国外直接签字)
*
* 场景2(number=2): 扫付款码进入
* - 验证必填信息(手机区号用户名)
*/
const nextClick = async () => {
// //
if (number.value==1){ if (number.value==1){
if (!isFormComplete(formData.value)){ if (!isFormComplete(formData.value)){

View File

@ -1,86 +1,132 @@
<script setup> <script setup>
import pdfView from './pdfView/index.vue' import pdfView from './pdfView/index.vue'
import { contractView } from "~/api/goods/index.js" import { contractView, signOffline } from "~/api/goods/index.js"
import {codeAuthStore} from "~/stores-collect-code/auth/index.js"; import { codeAuthStore } from "~/stores-collect-code/auth/index.js"
import {signOffline} from "~/api/goods/index.js"; import { useI18n } from "vue-i18n"
import {useI18n} from "vue-i18n"; import { fddInfo } from "@/api-collect-code/goods/index.js"
definePageMeta({ definePageMeta({
i18n: 'signature.protocol.title' i18n: 'signature.protocol.title'
}) })
const {t} =useI18n() const { t } = useI18n()
const {formData,number,qrData}=codeAuthStore() const { formData, number, qrData } = codeAuthStore()
const activeNames = ref([]) const activeNames = ref([])
const router = useRouter() const router = useRouter()
const pmblUrl = ref('') // URL const pmblUrl = ref('')
// /**
* 根据签署顺序(number)返回不同的协议列表
* number = 1: 买家签署阶段展示竞买协议竞买须知拍卖公告拍卖规则
* number = 2: 卖家签署阶段展示拍卖成交确认书拍卖笔录
*/
const protocolList = computed(() => { const protocolList = computed(() => {
if(number.value==1){ if (number.value === 1) {
return [ return [
{ id: '4', title: t('signature.agreement.buyerAgreement'), pdfName: 'jmxy', type: 'local' }, { id: '4', title: t('signature.agreement.buyerAgreement'), pdfName: 'jmxy', type: 'local' },
{ id: '3', title: t('signature.agreement.buyerGuide'), pdfName: 'jmxz', type: 'local' }, { id: '3', title: t('signature.agreement.buyerGuide'), pdfName: 'jmxz', type: 'local' },
{ id: '1', title: t('signature.agreement.notice'), pdfName: 'pmgg', type: 'local' }, { id: '1', title: t('signature.agreement.notice'), pdfName: 'pmgg', type: 'local' },
{ id: '2', title: t('signature.agreement.rules'), pdfName: 'pmgz', type: 'local' }, { id: '2', title: t('signature.agreement.rules'), pdfName: 'pmgz', type: 'local' },
] ]
}else if(number.value==2) { } else if (number.value === 2) {
return [ return [
{ id: '6', title: t('signature.agreement.transfer'), pdfName: 'pmyjqrs', type: 'local' }, { id: '6', title: t('signature.agreement.transfer'), pdfName: 'pmyjqrs', type: 'local' },
{ id: '5', title: t('signature.agreement.record'), pdfName: pmblUrl.value, type: 'remote' } { id: '5', title: t('signature.agreement.record'), pdfName: pmblUrl.value, type: 'remote' }
] ]
} }
return []
}) })
// PDF /**
* 获取拍卖笔录PDF
* 通过拍品UUID获取拍卖笔录的查看地址
*/
const fetchPmblPdf = async () => { const fetchPmblPdf = async () => {
try { try {
const res = await contractView({ const res = await contractView({
auctionArtworkUuid: qrData.value.auctionArtworkUuid, auctionArtworkUuid: qrData.value.auctionArtworkUuid,
}) })
pmblUrl.value = res.data?.viewUrl // PDF URLdata pmblUrl.value = res.data?.viewUrl
} catch (error) { } catch (error) {
} console.error('获取拍卖笔录失败:', error)
}
} }
// /**
* 折叠面板变化处理
* 当打开拍卖笔录面板时获取PDF地址
*/
const handleCollapseChange = (name) => { const handleCollapseChange = (name) => {
activeNames.value = name activeNames.value = name
// PDF
if (name === '5' && !pmblUrl.value) { if (name === '5' && !pmblUrl.value) {
fetchPmblPdf() fetchPmblPdf()
} }
} }
/**
* 确认签署处理
* 1. 获取用户法大大认证信息
const confirm=async ()=>{ * 2. 根据用户类型和地区判断签署流程:
if (formData.value.countryCode==='86'&&formData.value.cardType===1){ * - 特殊用户且isMainland=1: 走大陆签署流程
const res=await signOffline({ * - 特殊用户且isMainland=0: 走非大陆签署流程
userInfo:formData.value, * - 普通用户:
auctionArtworkUuid:qrData.value.auctionArtworkUuid, * - 大陆用户(countryCode=86且身份证): 走大陆签署流程
signOrder:Number(number.value), * - 其他用户: 走非大陆签署流程
}) */
if (res.status===0){ const confirm = async () => {
window.location.href=res.data.fddVerifyUrl try {
const fddResponse = await fddInfo({ phone: formData.value.phone })
if (fddResponse.status === 0) {
const { userId, isMainland } = fddResponse.data
//
if (userId) {
if (isMainland === 1) {
await handleMainlandSign()
} else {
router.push('/collectCode/signature/panel')
}
return
}
//
const isMainlandUser = formData.value.countryCode === '86' && formData.value.cardType === 1
if (isMainlandUser) {
await handleMainlandSign()
} else {
router.push('/collectCode/signature/panel')
}
} }
}else { } catch (error) {
router.push('/collectCode/signature/panel') console.error('签署确认失败:', error)
} }
} }
const goSignature = () => {
router.push({ /**
path: '/signature/panel' * 处理大陆用户签署流程
*/
const handleMainlandSign = async () => {
const res = await signOffline({
userInfo: formData.value,
auctionArtworkUuid: qrData.value.auctionArtworkUuid,
signOrder: Number(number.value),
}) })
if (res.status === 0) {
window.location.href = res.data.fddVerifyUrl
}
} }
</script> </script>
<template> <template>
<div class="bg-#EBEBEB h-screen-nav flex flex-col"> <div class="bg-#EBEBEB h-screen-nav flex flex-col">
<!-- 顶部提示信息 -->
<div class="h-50px text-14px text-#191919 bg-#fff flex items-center px-21px mb-6px shrink-0"> <div class="h-50px text-14px text-#191919 bg-#fff flex items-center px-21px mb-6px shrink-0">
{{ t('signature.tips.prePayment') }} {{ t('signature.tips.prePayment') }}
</div> </div>
<!-- 协议列表折叠面板 -->
<van-collapse <van-collapse
accordion accordion
v-model="activeNames" v-model="activeNames"
@ -97,13 +143,14 @@ const goSignature = () => {
<div class="text-#2B53AC text-14px">{{ item.title }}</div> <div class="text-#2B53AC text-14px">{{ item.title }}</div>
</template> </template>
<pdfView <pdfView
:pdf-name="item.pdfName" :pdf-name="item.pdfName"
:type="item.type" :type="item.type"
:is-active="activeNames === item.id" :is-active="activeNames === item.id"
/> />
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
<!-- 底部确认按钮 -->
<div class="h-81px bg-#fff flex justify-center pt-7px border-t"> <div class="h-81px bg-#fff flex justify-center pt-7px border-t">
<van-button <van-button
color="#2B53AC" color="#2B53AC"