refactor(collect-code): 重构收集二维码功能的个人资料和协议页面
- 优化了个人资料页面的代码结构，增加了注释和函数封装 - 重构了协议页面的代码，提高了可读性和可维护性 - 添加了获取用户法大大认证信息的功能 - 完善了签署确认逻辑，支持特殊用户和普通用户的不同签署流程 - 优化了折叠面板和 PDF 查看的处理
This commit is contained in:
xingyy
parent
0ab8b5f9d1
commit
ad7833a312
@ -26,6 +26,11 @@ const columns1 = ref([
|
||||
{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) {
|
||||
@ -53,11 +58,20 @@ const getDefaultCountry = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const goCountryRegion=()=>{
|
||||
/**
|
||||
* 跳转到国家/地区选择页面
|
||||
*/
|
||||
const goCountryRegion = () => {
|
||||
router.push({
|
||||
path:'/countryRegion'
|
||||
path: '/countryRegion'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查表单是否完整填写
|
||||
* @param {Object} obj - 要检查的表单对象
|
||||
* @returns {boolean} 是否完整
|
||||
*/
|
||||
function isFormComplete(obj) {
|
||||
for (const key in obj) {
|
||||
if (typeof obj[key] === 'object' && obj[key] !== null) {
|
||||
@ -71,15 +85,25 @@ function isFormComplete(obj) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const getData=async ()=>{
|
||||
const res=await offlineQrcode({
|
||||
qrUid:qrUid.value
|
||||
})
|
||||
if (res.status===0){
|
||||
qrData.value=res.data
|
||||
/**
|
||||
* 获取线下二维码支付状态
|
||||
*/
|
||||
const getData = async () => {
|
||||
const res = await offlineQrcode({
|
||||
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){
|
||||
number.value=Number(route.query.number)
|
||||
}
|
||||
@ -101,7 +125,18 @@ const initData= async ()=>{
|
||||
formData.value.countryCode=route.query.zone
|
||||
}
|
||||
}
|
||||
const nextClick=async ()=>{
|
||||
|
||||
/**
|
||||
* 处理下一步按钮点击
|
||||
* 场景1(number=1): 扫号牌进入
|
||||
* - 验证表单完整性
|
||||
* - 检查用户号牌是否存在
|
||||
* - 根据国家区号判断签署方式(国内用法大大,国外直接签字)
|
||||
*
|
||||
* 场景2(number=2): 扫付款码进入
|
||||
* - 验证必填信息(手机、区号、用户名)
|
||||
*/
|
||||
const nextClick = async () => {
|
||||
//扫号牌
|
||||
if (number.value==1){
|
||||
if (!isFormComplete(formData.value)){
|
||||
|
||||
@ -1,86 +1,132 @@
|
||||
<script setup>
|
||||
import pdfView from './pdfView/index.vue'
|
||||
import { contractView } from "~/api/goods/index.js"
|
||||
import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
|
||||
import {signOffline} from "~/api/goods/index.js";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import { contractView, signOffline } from "~/api/goods/index.js"
|
||||
import { codeAuthStore } from "~/stores-collect-code/auth/index.js"
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { fddInfo } from "@/api-collect-code/goods/index.js"
|
||||
|
||||
definePageMeta({
|
||||
i18n: 'signature.protocol.title'
|
||||
})
|
||||
|
||||
const {t} =useI18n()
|
||||
const {formData,number,qrData}=codeAuthStore()
|
||||
const { t } = useI18n()
|
||||
const { formData, number, qrData } = codeAuthStore()
|
||||
const activeNames = ref([])
|
||||
const router = useRouter()
|
||||
const pmblUrl = ref('') // 存储拍卖笔录的URL
|
||||
const pmblUrl = ref('')
|
||||
|
||||
// 协议列表数据
|
||||
/**
|
||||
* 根据签署顺序(number)返回不同的协议列表
|
||||
* number = 1: 买家签署阶段，展示竞买协议、竞买须知、拍卖公告、拍卖规则
|
||||
* number = 2: 卖家签署阶段，展示拍卖成交确认书、拍卖笔录
|
||||
*/
|
||||
const protocolList = computed(() => {
|
||||
if(number.value==1){
|
||||
if (number.value === 1) {
|
||||
return [
|
||||
{ id: '4', title: t('signature.agreement.buyerAgreement'), pdfName: 'jmxy', 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: '2', title: t('signature.agreement.rules'), pdfName: 'pmgz', type: 'local' },
|
||||
]
|
||||
}else if(number.value==2) {
|
||||
} else if (number.value === 2) {
|
||||
return [
|
||||
{ id: '6', title: t('signature.agreement.transfer'), pdfName: 'pmyjqrs', type: 'local' },
|
||||
{ id: '5', title: t('signature.agreement.record'), pdfName: pmblUrl.value, type: 'remote' }
|
||||
]
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
// 获取拍卖笔录PDF
|
||||
/**
|
||||
* 获取拍卖笔录PDF
|
||||
* 通过拍品UUID获取拍卖笔录的查看地址
|
||||
*/
|
||||
const fetchPmblPdf = async () => {
|
||||
try {
|
||||
const res = await contractView({
|
||||
auctionArtworkUuid: qrData.value.auctionArtworkUuid,
|
||||
})
|
||||
pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
|
||||
pmblUrl.value = res.data?.viewUrl
|
||||
} catch (error) {
|
||||
console.error('获取拍卖笔录失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听折叠面板变化
|
||||
/**
|
||||
* 折叠面板变化处理
|
||||
* 当打开拍卖笔录面板时，获取PDF地址
|
||||
*/
|
||||
const handleCollapseChange = (name) => {
|
||||
activeNames.value = name
|
||||
// 当打开拍卖笔录时获取PDF
|
||||
if (name === '5' && !pmblUrl.value) {
|
||||
fetchPmblPdf()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认签署处理
|
||||
* 1. 获取用户法大大认证信息
|
||||
* 2. 根据用户类型和地区判断签署流程:
|
||||
* - 特殊用户且isMainland=1: 走大陆签署流程
|
||||
* - 特殊用户且isMainland=0: 走非大陆签署流程
|
||||
* - 普通用户:
|
||||
* - 大陆用户(countryCode=86且身份证): 走大陆签署流程
|
||||
* - 其他用户: 走非大陆签署流程
|
||||
*/
|
||||
const confirm = async () => {
|
||||
try {
|
||||
const fddResponse = await fddInfo({ phone: formData.value.phone })
|
||||
|
||||
if (fddResponse.status === 0) {
|
||||
const { userId, isMainland } = fddResponse.data
|
||||
|
||||
|
||||
const confirm=async ()=>{
|
||||
if (formData.value.countryCode==='86'&&formData.value.cardType===1){
|
||||
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
|
||||
}
|
||||
}else {
|
||||
// 特殊用户处理逻辑
|
||||
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')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
{{ t('signature.tips.prePayment') }}
|
||||
</div>
|
||||
|
||||
<!-- 协议列表折叠面板 -->
|
||||
<van-collapse
|
||||
accordion
|
||||
v-model="activeNames"
|
||||
@ -104,6 +150,7 @@ const goSignature = () => {
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
|
||||
<!-- 底部确认按钮 -->
|
||||
<div class="h-81px bg-#fff flex justify-center pt-7px border-t">
|
||||
<van-button
|
||||
color="#2B53AC"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user