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

<script setup>
import pdfView from './pdfView'
import { contractView } from "~/api/goods/index.js"
import { signOnline } from "~/api/goods/index.js"
import { authStore } from "~/stores/auth/index.js"
import {useI18n} from "vue-i18n";
import { useThrottleFn } from '@vueuse/core'
import { contractUserinfo } from "@/api/auth/index.js"
definePageMeta({
  layout: 'default',
  i18n: 'signature.protocol.title'
})

const { userInfo, payment } = authStore()
const $t=useI18n().t
const activeNames = ref([])
const router = useRouter()
const pmblUrl = ref('') // 存储拍卖笔录的URL

// 协议列表数据
const protocolList = computed(() => [
  { id: '1', title: $t('signature.agreement.notice'), pdfName: 'pmgg', type: 'local' },
  { id: '2', title: $t('signature.agreement.rules'), pdfName: 'pmgz', type: 'local' },
  { id: '3', title: $t('signature.agreement.buyerGuide'), pdfName: 'jmxz', type: 'local' },
  { id: '4', title: $t('signature.agreement.buyerAgreement'), pdfName: 'jmxy', type: 'local' },
  { id: '5', title: $t('signature.agreement.record'), pdfName: pmblUrl.value, type: 'remote' },
  { id: '6', title: $t('signature.agreement.transfer'), pdfName: 'pmyjqrs', type: 'local' }
])

// 获取拍卖笔录PDF
const fetchPmblPdf = async () => {
  try {
    const res = await contractView({
      auctionArtworkUuid: payment.value.auctionArtworkUuid,
    })
    pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
  } catch (error) {
    }
}

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

const goSignature =useThrottleFn(async () => {
  //先走特殊验证接口
  const res1 = await contractUserinfo({phone:userInfo.value.telNum})
  if(res1.status===0){
    //特殊验证通过
    if(res1.data.specialType===1){
      router.push({
        path: '/signature/panel'
      })
    }else if(res1.data.specialType===0){
      //特殊验证不通过
      if(userInfo.value.userExtend.isMainland===1){
    const res = await signOnline({
    auctionArtworkUuid:payment.value.auctionArtworkUuid
  })
  if (res.status===0){
    if(res.data.signType==='fdd'){
      window.location.href = res.data.fddVerifyUrl
    }else{
      router.push({
        path: '/signature/panel'
      })
    }
  
  }
  }else if(userInfo.value.userExtend.isMainland===0){
    router.push({
      path: '/signature/panel'
    })
  }
    }
  }
  


},2000) 
</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="goSignature"
      >
        {{ $t('signature.button.agreeAndSign') }}
      </van-button>
    </div>
  </div>
</template>