52b179cf4b
- 移除多个单独的 PDF 组件，整合为一个通用的 pdfView 组件 - 使用计算属性生成协议列表，提高代码可维护性 - 添加折叠面板组件，优化用户体验 - 实现拍卖笔录 PDF 的动态加载 - 优化页面布局和样式
93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<script setup>
|
|
import pdfView from './pdfView'
|
|
import { contractView } from "~/api/goods/index.js"
|
|
import { authStore } from "~/stores/auth/index.js"
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
title: '签署内容'
|
|
})
|
|
|
|
const { userInfo, payment } = authStore()
|
|
const activeNames = ref([])
|
|
const router = useRouter()
|
|
const pmblUrl = ref('') // 存储拍卖笔录的URL
|
|
|
|
// 协议列表数据
|
|
const protocolList = computed(() => [
|
|
{ id: '1', title: '《拍卖公告》', pdfName: 'pmgg', type: 'local' },
|
|
{ id: '2', title: '《竞买协议》', pdfName: 'jmxy', type: 'local' },
|
|
{ id: '3', title: '《竞买须知》', pdfName: 'jmxz', type: 'local' },
|
|
{ id: '4', title: '《拍卖笔录》', pdfName: pmblUrl.value, type: 'remote' },
|
|
{ id: '5', title: '《拍卖规则》', pdfName: 'pmgz', type: 'local' },
|
|
{ id: '6', title: '《拍卖移交确认书》', pdfName: 'pmyjqrs', type: 'local' }
|
|
])
|
|
|
|
// 获取拍卖笔录PDF
|
|
const fetchPmblPdf = async () => {
|
|
try {
|
|
const res = await contractView({
|
|
auctionArtworkUuid: "bb34b20a-3e5e-441a-9692-c26e08b2ffed",
|
|
})
|
|
pmblUrl.value = res.data?.viewUrl // 假设接口返回的PDF URL在data字段中
|
|
} catch (error) {
|
|
console.error('获取拍卖笔录失败:', error)
|
|
}
|
|
}
|
|
|
|
// 监听折叠面板变化
|
|
const handleCollapseChange = (name) => {
|
|
activeNames.value = name
|
|
// 当打开拍卖笔录时获取PDF
|
|
if (name === '4' && !pmblUrl.value) {
|
|
fetchPmblPdf()
|
|
}
|
|
}
|
|
|
|
const goSignature = () => {
|
|
router.push({
|
|
path: '/signature/panel'
|
|
})
|
|
}
|
|
</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">
|
|
支付前需同意以下内容并签字
|
|
</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"
|
|
>
|
|
同意并签字
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</template> |