相关修改

package.json

@@ -27,6 +27,7 @@
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
+    "pdfobject": "^2.3.1",
     "pinia": "2.1.7",
     "qrcode": "^1.5.3",
     "vue": "3.3.9",

src/views/computingResource/resourceList.vue

@@ -182,7 +182,8 @@
             <div class="mr20">
               <div class="price">￥{{ orderPrice / 100 }}</div>
             </div>
-            <el-button type="primary" @click="create" :disabled="!checkbox">{{ selectedType === 1 ? '加入购物车' : '立即购买' }}
+            <el-button type="primary" @click="create" :disabled="!checkbox">
+              {{ selectedType === 1 ? '加入购物车' : '立即购买' }}
             </el-button>
           </div>
         </div>
@@ -208,11 +209,30 @@
     >
       <img :src="qrCode.url" alt=""/>
     </el-dialog>
+
+    <el-dialog
+        title="购买协议"
+        v-model="protocol"
+        width="800px"
+        append-to-body
+        :align-center="true"
+        :close-on-click-modal="false"
+        @closed="clearProtocol"
+    >
+      <div class="pdf-box">
+        <!--        <div id="pdf-container" style="width: 100%; height: 100%;"></div>-->
+        <iframe
+            v-if="pdfUrl"
+            :src="pdfUrl"
+            style="width:100%; height:80vh;"
+        ></iframe>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script name="ResourceList" setup>
-import {ref, watch} from 'vue'
+import {ref, watch, nextTick} from 'vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import {
@@ -226,6 +246,8 @@ import {useRoute, useRouter} from 'vue-router'
 import QRCode from 'qrcode'
 import request from '@/utils/request'
 import {PayOrderStatusEnum} from "@/utils/constants.js";
+import PDFObject from 'pdfobject';
+import axios from "axios";
 
 const route = useRoute()
 const router = useRouter()
@@ -240,6 +262,9 @@ const productTypes = ref([])
 const tableData = ref([])
 const interval = ref(undefined)
 const checkbox = ref(false)
+const protocol = ref(false)
+const pdfBlobUrl = ref('');
+const pdfUrl = ref('https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250828/文字文稿1_1756349853834.pdf')
 
 const qrCode = ref({
   url: '',
@@ -267,8 +292,37 @@ watch(() => route.query.type, (value, oldValue) => {
   }
 })
 
-function handleCheckProtocol() {
+async function handleCheckProtocol() {
   console.log('点击')
+  protocol.value = true
+  // nextTick(() => {
+  //   PDFObject.embed("https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250828/文字文稿1_1756349853834.pdf", "#pdf-container", {
+  //     height: "100%",
+  //     pdfOpenParams: {
+  //       view: "FitH",  // 页面适配
+  //       pagemode: "none" // 隐藏侧边栏
+  //     }
+  //   });
+  // })
+  // try {
+  //   // 这里用服务器给你的 PDF 地址
+  //   const res = await axios.get(pdfUrl, {
+  //     responseType: "blob",
+  //   });
+  //   console.log(res, 'res')
+  //   if (res.headers["content-type"].includes("pdf")) {
+  //     pdfBlobUrl.value = URL.createObjectURL(
+  //         new Blob([res.data], {type: "application/pdf"})
+  //     );
+  //   } else {
+  //     console.error("返回的不是 PDF 文件");
+  //   }
+  //   // pdfBlobUrl.value = URL.createObjectURL(
+  //   //     new Blob([res.data], {type: "application/pdf"})
+  //   // );
+  // } catch (e) {
+  //   console.error("加载PDF失败", e);
+  // }
 }
 
 function tabChange() {
@@ -429,34 +483,9 @@ const clearQueryInterval = () => {
   interval.value = undefined
 }
 
-// function create() {
-//   const data = initSubmitData()
-//   if (selectedType.value === 1) {
-//     shoppingAdd(data).then(res => {
-//       ElMessageBox.confirm(
-//           '添加到购物车成功',
-//           {
-//             confirmButtonText: '去提交',
-//             cancelButtonText: '关闭',
-//             type: 'success'
-//           }
-//       ).then(() => {
-//         router.push('/computingResource/shoppingCart')
-//       }).catch(() => {
-//       })
-//     })
-//
-//   }
-//
-//   if (selectedType.value === 2) {
-//     orderBuy(data).then(res => {
-//       router.push({
-//         path: '/computingResource/confirmOrder',
-//         query: {id: res.data}
-//       })
-//     })
-//   }
-// }
+const clearProtocol = () => {
+  protocol.value = true
+}
 </script>
 
 <style scoped lang="scss">
@@ -763,4 +792,16 @@ const clearQueryInterval = () => {
     cursor: pointer;
   }
 }
+
+#pdf-container {
+  width: 100%; /* 设置容器宽度 */
+  height: 600px; /* 设置容器高度 */
+  border: 1px solid #ccc; /* 可选：添加边框 */
+}
+
+.pdf-box {
+  height: 600px;
+  //overflow: hidden;
+  overflow-y: auto;
+}
 </style>

src/views/console/naturalResources.vue

@@ -127,7 +127,7 @@ function handleUpdate(row) {
   getResources({id: _id}).then(response => {
     form.value = response.data
     open.value = true
-    title.value = '查看订单'
+    title.value = '查看详情'
   })
 }