refactor(signature): 重构签署内容页面
- 移除多个单独的 PDF 组件，整合为一个通用的 pdfView 组件 - 使用计算属性生成协议列表，提高代码可维护性 - 添加折叠面板组件，优化用户体验 - 实现拍卖笔录 PDF 的动态加载 - 优化页面布局和样式
This commit is contained in:
xingyy
parent
f38bd82001
commit
52b179cf4b
@ -93,4 +93,12 @@ export async function orderQuery(data) {
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
export async function contractView(data) {
|
||||
|
||||
return await request( {
|
||||
url:'/api/v1/contract/contract-view',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -8,7 +8,20 @@ const props = defineProps({
|
||||
default: null
|
||||
}
|
||||
})
|
||||
console.log(props.detailInfo)
|
||||
const filteredPriceRules = computed(() => {
|
||||
if (!props.detailInfo?.priceRules) return []
|
||||
|
||||
// 找到第一个price为空的索引
|
||||
const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
|
||||
|
||||
if (emptyIndex === -1) {
|
||||
// 如果没有空价格，返回全部
|
||||
return props.detailInfo.priceRules
|
||||
} else {
|
||||
// 如果有空价格，只返回到空价格之前的数据
|
||||
return props.detailInfo.priceRules.slice(0, emptyIndex)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -50,6 +63,17 @@ console.log(props.detailInfo)
|
||||
<div v-if="detailInfo?.priceRuleType!=='diy'">
|
||||
<xImage :src="detailInfo?.priceRuleImage" alt=""/>
|
||||
</div>
|
||||
<div v-else class="mt-20px">
|
||||
<div class="flex text-#575757 text-12px">
|
||||
<div class="grow-1 text-center">序号</div>
|
||||
<div class="grow-1 text-center">叫价金额</div>
|
||||
</div>
|
||||
<div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
|
||||
<div class="grow-1 text-center">{{item.index}}</div>
|
||||
<div class="grow-1 text-center">{{item.price}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
@ -1,76 +1,93 @@
|
||||
<script setup>
|
||||
import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
|
||||
import biddingAgree from './pmgg/index.vue'
|
||||
import pmgg from './pmgg/index.vue'
|
||||
import jmxy from './jmxy/index.vue'
|
||||
import jmxz from './jmxz/index.vue'
|
||||
import pmbl from './pmbl/index.vue'
|
||||
import pmgz from './pmgz/index.vue'
|
||||
import pmyjqrs from './pmyjqrs/index.vue'
|
||||
import pdfView from './pdfView'
|
||||
import { contractView } from "~/api/goods/index.js"
|
||||
import { authStore } from "~/stores/auth/index.js"
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
title: '签署内容'
|
||||
})
|
||||
|
||||
const activeNames = ref([]);
|
||||
const router = useRouter();
|
||||
const goSignature=()=>{
|
||||
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'
|
||||
})
|
||||
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">支付前需同意以下内容并签字</div>
|
||||
<van-collapse v-model="activeNames" class="grow-1">
|
||||
<van-collapse-item name="1" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《拍卖公告》</div>
|
||||
</template>
|
||||
<pmgg/>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="2" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《竞买协议》</div>
|
||||
</template>
|
||||
<jmxy/>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="3" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《竞买须知》</div>
|
||||
</template>
|
||||
<jmxz/>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="4" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《拍卖笔录》</div>
|
||||
</template>
|
||||
<pmbl/>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="5" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
||||
</template>
|
||||
<pmgz/>
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="6" class="mb-6px">
|
||||
<template #title>
|
||||
<div class="text-#2B53AC text-14px">《拍卖移交确认书》</div>
|
||||
</template>
|
||||
<pmyjqrs/>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
:deep(.van-cell__right-icon){
|
||||
color: #ACACAC;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/jmxy.pdf')
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/jmxz.pdf')
|
||||
</script>
|
||||
68
app/pages/signature/protocol/pdfView/index.vue
Normal file
68
app/pages/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>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/pmbl.pdf')
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/pmgg.pdf')
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/pmgz.pdf')
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="pdf-container">
|
||||
<client-only>
|
||||
<VuePdfEmbed :source="pdfUrl" />
|
||||
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VuePdfEmbed from 'vue-pdf-embed'
|
||||
// 直接引用public目录下的文件
|
||||
const pdfUrl = ref('/pdfs/pmyjqrs.pdf')
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user