Skip to content

G
GaoQuYingJiH5-ASD
Commit 2f6b9aa2 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

Merge branch 'anquanchangshi' into gaoqucodecheck

parents 5939a762 7d764eab
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1009 additions and 468 deletions
src/_anquan_changshi-detail-text.css 0 → 100644
View file @ 2f6b9aa2
/* 全局基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #app{
background: #fff;
}
body {
background: #f5f5f5;
font-family: 'PingFang SC', sans-serif;
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
margin-top: .3rem;
}
.title-wrapper {
/*
align-items: center;
margin-bottom: 0.15rem; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
gap: 0.25rem;
width: 6.92rem;
height: 1.96rem;
background: #EAF5FF;
border-radius: 0.1rem;
padding: .2rem .35rem;
border: .01rem solid #7DC3FF;
}
.title-wrapper h3{
font-weight: bold;
font-size: 0.3rem;
color: #000000;
}
.title-wrapper p{
font-weight: 500;
font-size: 0.28rem;
color: #656565;
}
.title-icon {
width: 0.4rem;
height: 0.4rem;
}
/* 新增：附件区域样式 */
.attachment-section {
padding: 0 0.3rem 0.3rem;
/* background: #fff; */
margin-bottom: 0.2rem;
}
.attachment-title {
font-size: 0.3rem;
color: #333;
font-weight: 500;
margin-bottom: 0.15rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.1rem;
padding: 0.15rem;
/* background: #f8f9fa; */
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
text-decoration: none;
}
.attachment-link:hover {
background: #f0f2f5;
}
/* PDF预览模态框 */
.pdf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
padding: 0.5rem 0;
}
.pdf-container {
position: relative;
width: 98%;
height: 98%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: auto;
/* 长文档滚动支持 */
}
.pdf-controls {
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.3rem;
color: #fff;
font-size: 0.3rem;
}
.control-btn {
padding: 0;
width: 2rem;
height: .5rem;
line-height: .5rem;
text-align: center;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
cursor: pointer;
}
.close-btn {
position: absolute;
top: 0.4rem;
right: 6px;
color: #211a1a;
font-size: 0.6rem;
cursor: pointer;
width: 1rem;
height: 1rem;
z-index: 99999;
background: #fff;
}
\ No newline at end of file
src/_anquan_changshi-detail-text.html 0 → 100644
View file @ 2f6b9aa2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit:cover">
<title>安全常识</title>
<script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<h3 class="video-title">{{detailInfo.name}}</h3>
<p class="video-date">日期：{{detailInfo.uploadsDate}}</p>
</div>
</div>
<!-- 新增：附件链接区域 -->
<div class="attachment-section">
<div class="attachment-list">
<div class="attachment-link" @click="previewFile">
<van-icon name="paperclip" size="0.32rem" />
<span>{{detailInfo.fileName}}</span>
</div>
</div>
</div>
<!-- 两列图文列表 -->
<div style="padding: .2rem .3rem;" v-html="detailInfo.content">
收快递费了时代峰峻
</div>
</div>
<!-- PDF预览模态框 -->
<div class="pdf-modal" id="pdfModal">
<!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
<div class="pdf-container" style="padding-top: 1rem;">
<div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
<div class="pdf-controls">
<div class="control-btn" onclick="prevPage()">上一页</div>
<span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
<div class="control-btn" onclick="nextPage()">下一页</div>
<!-- 新增缩放按钮 -->
<!-- <div class="control-btn" onclick="zoomIn()">放大</div>
<div class="control-btn" onclick="zoomOut()">缩小</div>
<span>缩放：<span id="currentScale">120%</span></span> -->
</div>
<van-icon name="cross" class="close-btn" onclick="closePreview()" />
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-text.js 0 → 100644
View file @ 2f6b9aa2
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
// pdf.js核心配置（解决Worker跨域问题）
// 修改后
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js';
let pdfDoc = null; // PDF文档实例
let currentPageNum = 1; // 当前页码
let currentScale = 1.2; // 当前缩放比例（初始120%）
const MIN_SCALE = 0.5; // 最小缩放比例
const MAX_SCALE = 2.0; // 最大缩放比例
// 预览PDF主函数
// 渲染指定页码
async function renderPage(pageNum) {
const pdfViewer = document.getElementById('pdfViewer');
pdfViewer.innerHTML = ''; // 清空旧内容
// 获取指定页并渲染到canvas
const page = await pdfDoc.getPage(pageNum);
// 使用currentScale控制缩放
const viewport = page.getViewport({ scale: currentScale });
// 创建canvas并设置尺寸
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%'; // 自适应容器宽度
// 渲染到canvas
const context = canvas.getContext('2d');
await page.render({ canvasContext: context, viewport: viewport }).promise;
// 添加到DOM
pdfViewer.appendChild(canvas);
// 更新当前页码显示
document.getElementById('currentPage').textContent = pageNum;
// document.getElementById('currentScale').textContent = `${(currentScale * 100).toFixed(0)}%`;
}
// 放大（每次增加0.2倍）
function zoomIn() {
if (currentScale < MAX_SCALE) {
currentScale += 0.2;
renderPage(currentPageNum); // 重新渲染当前页
}
}
// 缩小（每次减少0.2倍）
function zoomOut() {
if (currentScale > MIN_SCALE) {
currentScale -= 0.2;
renderPage(currentPageNum); // 重新渲染当前页
}
}
// 上一页
function prevPage() {
if (pdfDoc && currentPageNum > 1) {
currentPageNum--;
renderPage(currentPageNum);
}
}
// 下一页
function nextPage() {
if (pdfDoc && currentPageNum < pdfDoc.numPages) {
currentPageNum++;
renderPage(currentPageNum);
}
}
// 关闭预览
function closePreview() {
document.getElementById('pdfModal').style.display = 'none';
pdfDoc = null; // 释放资源
currentPageNum = 1;
}
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
detailInfo:{}
}
},
created() {
let params = gemhoUtil.getUrlParams()
console.log(params);
this.merId = params.merId
},
mounted() {
this.detail()
},
methods: {
detail() { // 隐患详情
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
});
http2.post({
serviceId: API_KEY_MAP["no-page"]['id'],
interfacePublicKey: API_KEY_MAP["no-page"]["publicKey"],
interfacePrivateKey: API_KEY_MAP["no-page"]["privateKey"],
reqParams: {
sign: 17, // 隐患详情
safetyId: gemhoUtil.getParameter('id'),
}
}, (res) => {
if (!res) { // 中台返回为undefined 重新请求
vant.Toast.clear()
setTimeout(() => {
this.detail()
}, 0);
return
}
if (res) {
console.log('接口回调数据', JSON.parse(res))
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
this.detailInfo = JSON.parse(res).data
if(this.detailInfo.file){
this.detailInfo.fileName = this.detailInfo.file.split('/')[this.detailInfo.file.split('/').length-1]
}
console.log(this.detailInfo,'sssss')
}
})
},
async previewFile(pdfUrl1) {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
const pdfUrl = this.detailInfo.file //"http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
try {
// 1. 加载PDF文档（异步）
pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
console.log(pdfDoc, 'pdfjsLib.getDocument')
const totalPages = pdfDoc.numPages;
// 2. 更新总页数显示
document.getElementById('totalPages').textContent = totalPages;
// 3. 渲染第一页
currentPageNum = 1;
await renderPage(currentPageNum);
// 4. 显示模态框
document.getElementById('pdfModal').style.display = 'block';
vant.Toast.clear()
} catch (error) {
console.error('PDF加载失败:', error);
alert('PDF加载失败，请检查文件地址或网络');
vant.Toast.clear()
}
},
}
});
})
\ No newline at end of file
src/_anquan_changshi-detail-video.css 0 → 100644
View file @ 2f6b9aa2
/* 全局基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { background: #fff; font-family: 'PingFang SC', sans-serif; }
/* 视频播放区域 */
.video-container {
width: 100%;
height: 4rem; /* 固定高度或根据比例计算 */
background: #000;
margin-bottom: 0.2rem;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 视频填充方式 */
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
}
.title-wrapper {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 0.15rem;
}
.title-icon {
width: 0.4rem;
/* height: 0.4rem; */
}
.video-title {
font-size: 0.32rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.video-date {
font-size: 0.28rem;
color: #737373;
}
/* 两列图文列表 */
.grid-list {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
padding: 0 0.3rem;
}
.grid-item {
flex: 0 0 calc(50% - 0.1rem); /* 每行两列，间距0.2rem */
background: #fff;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.grid-item-image {
width: 100%;
height: 2rem;
object-fit: cover;
}
.grid-item-text {
padding: 0.15rem;
font-size: 0.28rem;
color: #333;
line-height: 1.4;
/* 单行溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
\ No newline at end of file
src/_anquan_changshi-detail-video.html 0 → 100644
View file @ 2f6b9aa2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit:cover">
<title>安全常识</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 视频播放区域 -->
<div class="video-container">
<!-- <video src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4"></video> -->
<video id="myVideo" :poster="detailInfo.videoCover" controls>
<!-- <source src="video1.mp4" crossorigin type="video/mp4"> -->
<!-- <source src="test/testVideo.mp4" type="video/mp4"> -->
<!-- <source src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4" crossorigin type="video/mp4"> -->
<source :src="detailInfo.videoUrl" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>
</div>
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<img class="title-icon" src="../image/code/video.png">
<h3 class="video-title">{{detailInfo.name}}</h3>
</div>
<p class="video-date">日期：{{ detailInfo.uploadsDate }}</p>
</div>
<!-- 两列图文列表 -->
<!-- <div class="grid-list">
<div class="grid-item" v-for="item in 11" :key="item.id">
<img class="grid-item-image" src="https://dummyimage.com/340x206" alt="相关内容封面">
<p class="grid-item-text">{{ item }}</p>
</div>
</div> -->
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-video.js 0 → 100644
View file @ 2f6b9aa2
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
detailInfo:{}
}
},
created() {
},
mounted() {
this.detail()
},
methods: {
handleVideoError(e) {
const error = e.target.error;
console.error("视频播放错误:", {
code: error.code,
message: [
"未知错误",
"网络错误（文件不可达）",
"解码错误（格式/编码不支持）",
"URL无效"
][error.code - 1]
});
},
detail(){
// 这里添加获取数据的逻辑
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 17,
safetyId: gemhoUtil.getParameter('id'),
},
},
(res) => {
if (res) {
var result = JSON.parse(res)
this.detailInfo = result.data
// this.detailInfo.videoUrl = './test/testVideo.mp4'
console.log(result, 'detail result')
// 关键新增：视频地址更新后，强制重新加载视频
const videoEl = document.getElementById('myVideo');
if (videoEl) {
videoEl.load(); // 触发浏览器重新加载视频资源
}
console.log('动态视频地址：', this.detailInfo.videoUrl); // 打印验证地址是否正确
}
vant.Toast.clear()
}
)
}, 0)
},
}
});
})
\ No newline at end of file
src/_anquan_changshi.css
View file @ 2f6b9aa2
......@@ -139,8 +139,6 @@ body {
}
.van-field__label {
font-weight: bold;
}
......@@ -149,59 +147,106 @@ body {
color: #737373;
}
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
.card:hover {
transform: translateY(-5px);
}
.subNavWrapper .van-list {
background: #F5F6FA;
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.subNavWrapper .van-cell {
margin-bottom: .3rem;
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.subNavWrapper .van-tabs__nav {
background: #F5F6FA;
margin: 0;
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
/* 新增多行溢出省略样式 */
overflow: hidden; /* 隐藏溢出内容 */
display: -webkit-box; /* 弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制2行 */
max-height: calc(0.28rem * 1.4 * 2 + 30px); /* 2行高度 + 上下padding（15px*2） */
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
.list-item {
margin-bottom: 0.2rem;
}
.container .van-cell {
padding: 12px 16px;
height: 1.5rem;
}
\ No newline at end of file
src/_anquan_changshi.html
View file @ 2f6b9aa2
......@@ -7,95 +7,13 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
</style>
</head>
</head>
<body>
<div id="app">
<div class="wrapper" v-cloak>
<div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch">
<van-search v-model="name" show-action placeholder="请输入安全常识名称" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
......@@ -103,31 +21,33 @@
</div>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px"
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px" @change="tabChange"
style="margin-bottom: 15px;">
<van-tab :title="item.title" :badge="item.msgNum||null" v-for="item in tabList"></van-tab>
</van-tabs>
<!-- <van-tabs v-model:active="activeTab" @change="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="常识视频"></van-tab>
<van-tab title="警示视频"></van-tab>
<van-tab title="应知应会"></van-tab>
<!-- <van-tab title="培训演练"></van-tab> -->
</van-tabs>
</van-tabs> -->
<!-- 隐患列表 -->
<van-list>
<div class="container">
<div class="card" v-for="item in 11">
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<div class="container" v-if="activeTab!=2">
<div class="card" v-for="item in hazardList" @click="viewDetail(item)">
<div class="image-wrapper">
<img src="https://dummyimage.com/340x206" alt="视频封面1">
<img :src="item.videoCover">
</div>
<div class="card-title">这是第一个视频标题，展示基本样式效果</div>
<div class="card-title">{{ item.name }}</div>
</div>
</div>
</van-list>
<!-- <van-list>
<van-cell v-for="item in 11"
style="position: relative;margin-bottom: 0.25rem;margin-top: 0.25rem;" @click="viewDetail(item)">
<div style="width: 100%;">
<div style="width: 100%; background-color: #f5f6fa;padding-top: .2rem;" v-if="activeTab==2" v-for="item in hazardList">
<van-cell v-for="item in hazardList" :key="item.id" class="list-item" @click="viewDetail(item)">
<!-- 第一行：隐患描述 -->
<div style="
position: relative;
position: relative; /* 新增：相对定位容器 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -135,17 +55,18 @@
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">隐患排查不松懈</div>
">
{{ item.name }}
<div style="position: relative: flex; justify-content: space-between; margin: 8px 0;">
<span
style="color: #737373; font-size: 0.28rem;">{{ '2025/2/12' }}</span>
<van-icon name="arrow" style="position: absolute; right:0;top:.5rem;font-size:.4rem;" @click="viewDetail(item,'YH_XQ')" />
</div>
<div class="date-tag-wrapper">
<spa
style="color: #737373; font-size: 0.28rem;">日期：{{ item.checkDate || '-' }}</spa>
<van-icon name="arrow" class="navToBtn" />
</div>
</van-cell>
</van-list> -->
</div>
</van-list>
</div>
</body>
......
src/_anquan_changshi.js
View file @ 2f6b9aa2
This diff is collapsed.
src/_pdf_viewer.html 0 → 100644
View file @ 2f6b9aa2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit:cover">
<title>PDF预览Demo</title>
<!-- 引入pdf.js核心库（CDN方式） -->
<script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<style>
/* 全局重置样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', sans-serif; background: #f5f5f5; }
/* 主内容区 */
.main-content { padding: 0.3rem; }
/* 附件链接样式 */
.attachment-section {
background: #fff;
border-radius: 8px;
padding: 0.3rem;
margin-bottom: 0.3rem;
}
.attachment-title {
font-size: 0.32rem;
color: #333;
font-weight: 600;
margin-bottom: 0.2rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.2rem;
background: #f8f9fa;
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
cursor: pointer;
transition: background 0.2s;
}
.attachment-link:hover { background: #f0f2f5; }
/* PDF预览模态框 */
.pdf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
padding: 0.5rem 0;
}
.pdf-container {
position: relative;
width: 90%;
height: 90%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: auto; /* 长文档滚动支持 */
}
.pdf-controls {
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.3rem;
color: #fff;
font-size: 0.3rem;
}
.control-btn {
padding: 0.1rem 0.3rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
cursor: pointer;
}
.close-btn {
/* position: absolute;
top: -0.6rem;
right: 0;
color: #fff;
font-size: 0.6rem;
cursor: pointer; */
position: absolute;
top: 0.4rem;
right: 6px;
color: #211a1a;
font-size: 0.6rem;
cursor: pointer;
width: 1rem;
height: 1rem;
z-index: 99999;
background: #000;
}
</style>
</head>
<body>
<div class="main-content">
<!-- 附件入口 -->
<div class="attachment-section">
<h3 class="attachment-title">相关附件</h3>
<!-- 点击触发PDF预览 -->
<div class="attachment-link" onclick="previewPdf()">
<van-icon name="paperclip" size="0.32rem" />
<span>危险化学品存储规范.pdf</span>
</div>
</div>
</div>
<!-- PDF预览模态框 -->
<div class="pdf-modal" id="pdfModal">
<!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
<div class="pdf-container" style="padding-top: 1rem;">
<div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
<div class="pdf-controls">
<div class="control-btn" onclick="prevPage()">上一页</div>
<span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
<div class="control-btn" onclick="nextPage()">下一页</div>
</div>
<van-icon name="cross" class="close-btn" onclick="closePreview()" />
</div>
</div>
<script>
// pdf.js核心配置（解决Worker跨域问题）
// 修改后
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js';
let pdfDoc = null; // PDF文档实例
let currentPageNum = 1; // 当前页码
// 预览PDF主函数
async function previewPdf(pdfUrl) {
pdfUrl = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
try {
// 1. 加载PDF文档（异步）
pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
console.log(pdfDoc, 'pdfjsLib.getDocument')
const totalPages = pdfDoc.numPages;
// 2. 更新总页数显示
document.getElementById('totalPages').textContent = totalPages;
// 3. 渲染第一页
currentPageNum = 1;
await renderPage(currentPageNum);
// 4. 显示模态框
document.getElementById('pdfModal').style.display = 'block';
} catch (error) {
console.error('PDF加载失败:', error);
alert('PDF加载失败，请检查文件地址或网络');
}
}
// 渲染指定页码
async function renderPage(pageNum) {
const pdfViewer = document.getElementById('pdfViewer');
pdfViewer.innerHTML = ''; // 清空旧内容
// 获取指定页并渲染到canvas
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 1.2 }); // 调整缩放比例控制清晰度
// 创建canvas并设置尺寸
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%'; // 自适应容器宽度
// 渲染到canvas
const context = canvas.getContext('2d');
await page.render({ canvasContext: context, viewport: viewport }).promise;
// 添加到DOM
pdfViewer.appendChild(canvas);
// 更新当前页码显示
document.getElementById('currentPage').textContent = pageNum;
}
// 上一页
function prevPage() {
if (pdfDoc && currentPageNum > 1) {
currentPageNum--;
renderPage(currentPageNum);
}
}
// 下一页
function nextPage() {
if (pdfDoc && currentPageNum < pdfDoc.numPages) {
currentPageNum++;
renderPage(currentPageNum);
}
}
// 关闭预览
function closePreview() {
alert('关闭')
document.getElementById('pdfModal').style.display = 'none';
pdfDoc = null; // 释放资源
currentPageNum = 1;
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment