refactor(signature): 重构签署内容页面

- 移除多个单独的 PDF 组件，整合为一个通用的 pdfView 组件
- 使用计算属性生成协议列表，提高代码可维护性
- 添加折叠面板组件，优化用户体验
- 实现拍卖笔录 PDF 的动态加载
- 优化页面布局和样式

app/api/goods/index.js

@@ -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
+    })
 }

app/components/itemDetail/index.vue

@@ -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>

app/pages/signature/protocol/index.vue

@@ -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>

app/pages/signature/protocol/jmxy/index.vue

@@ -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>

app/pages/signature/protocol/jmxz/index.vue

@@ -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>

app/pages/signature/protocol/pdfView/index.vue

@@ -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>

app/pages/signature/protocol/pmbl/index.vue

@@ -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>

app/pages/signature/protocol/pmgg/index.vue

@@ -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>

app/pages/signature/protocol/pmgz/index.vue

@@ -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>

app/pages/signature/protocol/pmyjqrs/index.vue

@@ -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>