liveh5-nuxt/app/pages/collectCode/signature/protocol/index.vue

<script setup>
import pdfView from './pdfView/index.vue'
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"
import { showLoadingToast } from 'vant';
definePageMeta({
  i18n: 'signature.protocol.title'
})

const { t } = useI18n()
const { formData, number, qrData } = codeAuthStore() 
const activeNames = ref('')
const router = useRouter()
const pmblUrl = ref('') 

/**
 * 根据签署顺序(number)返回不同的协议列表
 * number = 1: 买家签署阶段，展示竞买协议、竞买须知、拍卖公告、拍卖规则
 * number = 2: 卖家签署阶段，展示拍卖成交确认书、拍卖笔录
 */
const protocolList = computed(() => {
  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) {
    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
 * 通过拍品UUID获取拍卖笔录的查看地址
 */
const fetchPmblPdf = async () => {
  try {
    const res = await contractView({
      auctionArtworkUuid: qrData.value.auctionArtworkUuid,
    })
    pmblUrl.value = res.data?.viewUrl
  } catch (error) {
    console.error('获取拍卖笔录失败:', error)
  }
}

/**
 * 折叠面板变化处理
 * 当打开拍卖笔录面板时，获取PDF地址
 */
const handleCollapseChange = (name) => {
  activeNames.value = name
  if (name === '5' && !pmblUrl.value) {
    fetchPmblPdf()
  }
}

/**
 * 确认签署处理
 * 1. 获取用户法大大认证信息
 * 2. 根据用户类型和地区判断签署流程:
 *    - 特殊用户且isMainland=1: 走大陆签署流程
 *    - 特殊用户且isMainland=0: 走非大陆签署流程
 *    - 普通用户:
 *      - 大陆用户(countryCode=86且身份证): 走大陆签署流程
 *      - 其他用户: 走非大陆签署流程
 */
const confirm = async () => {
const toast=  showLoadingToast({
  message: '加载中...',
  forbidClick: true,
});

  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')
      }
    }
  } catch (error) {
    console.error('签署确认失败:', error)
  }finally{
    toast1.close();
  }
}

/**
 * 处理大陆用户签署流程
 */
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" 
      class="grow-1"
      @change="handleCollapseChange"
    >
      <van-collapse-item
        v-for="item in protocolList"
        :key="item.id"
        :name="item.id"
        class="mb-6px"
      >
        <template #title>
          <div class="text-#2B53AC text-14px">{{ item.title }}</div>
        </template>
        <pdfView
          :pdf-name="item.pdfName"
          :type="item.type"
          :is-active="activeNames === item.id"
        />
      </van-collapse-item>
    </van-collapse>
    
    <!-- 底部确认按钮 -->
    <div class="h-81px bg-#fff flex justify-center pt-7px border-t">
      <van-button
        color="#2B53AC"
        class="w-213px van-btn-h-38px"
        @click="confirm"
      >
        {{ t('signature.action.agree') }}
      </van-button>
    </div>
  </div>
</template>