feat(collectCode): 添加 PDF协议查看功能
- 新增 pdfView 组件用于显示 PDF 文件 - 在协议页面中集成 pdfView 组件 - 实现拍卖笔录 PDF 的动态加载 - 优化协议列表数据结构和显示逻辑
This commit is contained in:
parent
52b179cf4b
commit
660981cbcb
@ -1,13 +1,57 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import pdfView from './pdfView'
|
||||||
|
import { contractView } 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 {signOffline} from "~/api/goods/index.js";
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
title:'签署'
|
title:'签署'
|
||||||
})
|
})
|
||||||
const activeNames = ref(['1']);
|
|
||||||
const {formData,number,auctionArtworkUuid,qrData}=codeAuthStore()
|
const {formData,number,qrData}=codeAuthStore()
|
||||||
|
const activeNames = ref([])
|
||||||
|
const router = useRouter()
|
||||||
|
const pmblUrl = ref('') // 存储拍卖笔录的URL
|
||||||
|
|
||||||
|
// 协议列表数据
|
||||||
|
const protocolList = computed(() => {
|
||||||
|
if(number.value===1){
|
||||||
|
return [ { id: '4', title: '《竞买协议》', pdfName: 'jmxy', type: 'local' },
|
||||||
|
{ id: '3', title: '《竞买须知》', pdfName: 'jmxz', type: 'local' },
|
||||||
|
{ id: '1', title: '《拍卖公告》', pdfName: 'pmgg', type: 'local' },
|
||||||
|
{ id: '2', title: '《拍卖规则》', pdfName: 'pmgz', type: 'local' },
|
||||||
|
]
|
||||||
|
}else if(number.value===2) {
|
||||||
|
return [
|
||||||
|
{ id: '6', title: '《拍卖移交确认书》', pdfName: 'pmyjqrs', type: 'local' },
|
||||||
|
|
||||||
|
{ id: '5', title: '《拍卖笔录成交确认书》', pdfName: pmblUrl.value, type: 'remote' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取拍卖笔录PDF
|
||||||
|
const fetchPmblPdf = async () => {
|
||||||
|
try {
|
||||||
|
const res = await contractView({
|
||||||
|
auctionArtworkUuid: qrData.value.auctionArtworkUuid,
|
||||||
|
})
|
||||||
|
pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取拍卖笔录失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听折叠面板变化
|
||||||
|
const handleCollapseChange = (name) => {
|
||||||
|
activeNames.value = name
|
||||||
|
// 当打开拍卖笔录时获取PDF
|
||||||
|
if (name === '5' && !pmblUrl.value) {
|
||||||
|
fetchPmblPdf()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const confirm=async ()=>{
|
const confirm=async ()=>{
|
||||||
if (formData.value.countryCode==='86'&&formData.value.cardType===1){
|
if (formData.value.countryCode==='86'&&formData.value.cardType===1){
|
||||||
@ -23,40 +67,50 @@ const confirm=async ()=>{
|
|||||||
router.push('/collectCode/signature/panel')
|
router.push('/collectCode/signature/panel')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const goSignature = () => {
|
||||||
|
router.push({
|
||||||
|
path: '/signature/panel'
|
||||||
|
})
|
||||||
|
}
|
||||||
</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">支付前需同意以下内容并签字</div>
|
<div class="h-50px text-14px text-#191919 bg-#fff flex items-center px-21px mb-6px shrink-0">
|
||||||
<van-collapse v-model="activeNames" class="grow-1">
|
支付前需同意以下内容并签字
|
||||||
<van-collapse-item name="1" class="mb-6px">
|
</div>
|
||||||
<template #title>
|
|
||||||
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
|
||||||
</template>
|
|
||||||
代码是写出来给人看的,附带能在机器上运行。
|
|
||||||
</van-collapse-item>
|
|
||||||
<van-collapse-item name="2" class="mb-6px">
|
|
||||||
<template #title>
|
|
||||||
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
|
||||||
</template>
|
|
||||||
代码是写出来给人看的,附带能在机器上运行。
|
|
||||||
</van-collapse-item>
|
|
||||||
<van-collapse-item name="3" class="mb-6px">
|
|
||||||
<template #title>
|
|
||||||
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
|
||||||
</template>
|
|
||||||
代码是写出来给人看的,附带能在机器上运行。
|
|
||||||
</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">同意并签字</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
<van-collapse
|
||||||
:deep(.van-cell__right-icon){
|
accordion
|
||||||
color: #ACACAC;
|
v-model="activeNames"
|
||||||
font-size: 12px;
|
class="grow-1"
|
||||||
}
|
@change="handleCollapseChange"
|
||||||
</style>
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
同意并签字
|
||||||
|
</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
68
app/pages/collectCode/signature/protocol/pdfView/index.vue
Normal file
68
app/pages/collectCode/signature/protocol/pdfView/index.vue
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pdf-container">
|
||||||
|
<client-only>
|
||||||
|
<div v-if="loading" class="loading-container">
|
||||||
|
<van-loading type="spinner" size="24px">加载中...</van-loading>
|
||||||
|
</div>
|
||||||
|
<VuePdfEmbed
|
||||||
|
v-if="pdfUrl"
|
||||||
|
:source="pdfUrl"
|
||||||
|
@rendered="handleRendered"
|
||||||
|
/>
|
||||||
|
</client-only>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import VuePdfEmbed from 'vue-pdf-embed'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
pdfName: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'local', // 'local' 或 'remote'
|
||||||
|
},
|
||||||
|
isActive: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
const pdfUrl = computed(() => {
|
||||||
|
if (!props.pdfName) return ''
|
||||||
|
return props.type === 'local' ? `/pdfs/${props.pdfName}.pdf` : props.pdfName
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.isActive, (newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
loading.value = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleRendered = () => {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pdf-container {
|
||||||
|
position: relative;
|
||||||
|
min-height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(embed) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
@ -16,10 +16,10 @@ const pmblUrl = ref('') // 存储拍卖笔录的URL
|
|||||||
// 协议列表数据
|
// 协议列表数据
|
||||||
const protocolList = computed(() => [
|
const protocolList = computed(() => [
|
||||||
{ id: '1', title: '《拍卖公告》', pdfName: 'pmgg', type: 'local' },
|
{ id: '1', title: '《拍卖公告》', pdfName: 'pmgg', type: 'local' },
|
||||||
{ id: '2', title: '《竞买协议》', pdfName: 'jmxy', type: 'local' },
|
{ id: '2', title: '《拍卖规则》', pdfName: 'pmgz', type: 'local' },
|
||||||
{ id: '3', title: '《竞买须知》', pdfName: 'jmxz', type: 'local' },
|
{ id: '3', title: '《竞买须知》', pdfName: 'jmxz', type: 'local' },
|
||||||
{ id: '4', title: '《拍卖笔录》', pdfName: pmblUrl.value, type: 'remote' },
|
{ id: '4', title: '《竞买协议》', pdfName: 'jmxy', type: 'local' },
|
||||||
{ id: '5', title: '《拍卖规则》', pdfName: 'pmgz', type: 'local' },
|
{ id: '5', title: '《拍卖笔录成交确认书》', pdfName: pmblUrl.value, type: 'remote' },
|
||||||
{ id: '6', title: '《拍卖移交确认书》', pdfName: 'pmyjqrs', type: 'local' }
|
{ id: '6', title: '《拍卖移交确认书》', pdfName: 'pmyjqrs', type: 'local' }
|
||||||
])
|
])
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ const protocolList = computed(() => [
|
|||||||
const fetchPmblPdf = async () => {
|
const fetchPmblPdf = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await contractView({
|
const res = await contractView({
|
||||||
auctionArtworkUuid: "bb34b20a-3e5e-441a-9692-c26e08b2ffed",
|
auctionArtworkUuid: payment.value.auctionArtworkUuid,
|
||||||
})
|
})
|
||||||
pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
|
pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -39,7 +39,7 @@ const fetchPmblPdf = async () => {
|
|||||||
const handleCollapseChange = (name) => {
|
const handleCollapseChange = (name) => {
|
||||||
activeNames.value = name
|
activeNames.value = name
|
||||||
// 当打开拍卖笔录时获取PDF
|
// 当打开拍卖笔录时获取PDF
|
||||||
if (name === '4' && !pmblUrl.value) {
|
if (name === '5' && !pmblUrl.value) {
|
||||||
fetchPmblPdf()
|
fetchPmblPdf()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user