440 lines
12 KiB
Vue
440 lines
12 KiB
Vue
<template>
|
||
<view class="preview-page">
|
||
<!-- 加载提示 -->
|
||
<view class="loading-overlay" v-if="loadingPdf && usePdfJs">
|
||
<view class="loading-content">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">正在加载PDF...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- PDF容器 - 移动端使用PDF.js渲染 -->
|
||
<view
|
||
class="pdf-container"
|
||
ref="pdfContainer"
|
||
v-if="usePdfJs"
|
||
:style="{ display: 'block' }"
|
||
></view>
|
||
|
||
<!-- Web-view - PC端或PDF.js加载失败时使用 -->
|
||
<web-view
|
||
class="pdf-view"
|
||
:src="pdfUrl"
|
||
v-if="!usePdfJs"
|
||
></web-view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="fixed-footer">
|
||
<view class="footer-text" @click="goToSign">前往签字</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pdfUrl: '/static/sign_contract_ccd.pdf',
|
||
userId: '',
|
||
isMobile: false,
|
||
usePdfJs: false,
|
||
pdfDoc: null,
|
||
scale: 1,
|
||
loadingPdf: false,
|
||
pdfReady: false
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
// #ifdef H5
|
||
// 移动端检测：UA + 视口宽度
|
||
const ua = (navigator.userAgent || '').toLowerCase()
|
||
const isMobileUA = /mobile|android|iphone|ipad|micromessenger/.test(ua)
|
||
const narrowViewport = (window.innerWidth || 0) <= 480
|
||
this.isMobile = isMobileUA || narrowViewport
|
||
this.usePdfJs = this.isMobile
|
||
const getUserIdFromUrl = () => {
|
||
let id = ''
|
||
const s = window.location.search || ''
|
||
if (s) {
|
||
const p = new URLSearchParams(s)
|
||
id = p.get('user_id') || p.get('userId') || ''
|
||
}
|
||
if (!id && window.location.hash) {
|
||
const hash = window.location.hash
|
||
const qIndex = hash.indexOf('?')
|
||
if (qIndex !== -1) {
|
||
const q = hash.substring(qIndex + 1)
|
||
const hp = new URLSearchParams(q)
|
||
id = hp.get('user_id') || hp.get('userId') || ''
|
||
}
|
||
}
|
||
if (!id) {
|
||
const href = window.location.href || ''
|
||
const m = href.match(/[?&]user_id=([^&#]+)/)
|
||
if (m) id = decodeURIComponent(m[1])
|
||
}
|
||
return id
|
||
}
|
||
this.userId = (options && options.user_id) ? options.user_id : getUserIdFromUrl()
|
||
console.log('===userId===', this.userId)
|
||
if (this.userId) {
|
||
try { localStorage.setItem('user_id', this.userId) } catch(e) {}
|
||
if (typeof uni !== 'undefined' && uni.setStorageSync) uni.setStorageSync('user_id', this.userId)
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
onReady() {
|
||
// #ifdef H5
|
||
// 使用setTimeout确保toast显示后再跳转
|
||
// setTimeout(() => {
|
||
// uni.navigateTo({
|
||
// url: '/pages/integral/points',
|
||
// });
|
||
// }, 500);
|
||
// return;
|
||
if (this.usePdfJs) {
|
||
// 延迟初始化，确保DOM完全就绪
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.initPdf()
|
||
}, 300)
|
||
})
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
onShow() {
|
||
// 页面显示时的逻辑
|
||
},
|
||
|
||
methods: {
|
||
// 去搜索页
|
||
goToSearch() {
|
||
uni.navigateTo({
|
||
url: '/pages/sub-pages/search/index'
|
||
});
|
||
},
|
||
// 去签字页
|
||
goToSign() {
|
||
uni.navigateTo({
|
||
url: '/pages/sub-pages/webview/sign?user_id=' + this.userId
|
||
})
|
||
},
|
||
// 加载外部脚本（PDF.js），避免影响 PC 端
|
||
loadScript(src) {
|
||
return new Promise((resolve, reject) => {
|
||
if (document.querySelector(`script[src="${src}"]`)) return resolve()
|
||
const s = document.createElement('script')
|
||
s.src = src
|
||
s.onload = () => resolve()
|
||
s.onerror = (e) => reject(e)
|
||
document.head.appendChild(s)
|
||
})
|
||
},
|
||
async initPdf() {
|
||
uni.showLoading({
|
||
title: '加载PDF中...',
|
||
mask: true
|
||
})
|
||
|
||
try {
|
||
this.loadingPdf = true
|
||
this.pdfReady = false
|
||
|
||
// 引入 PDF.js 主库与 worker
|
||
console.log('开始加载 PDF.js 库...')
|
||
await this.loadScript('https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js')
|
||
await this.loadScript('https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js')
|
||
console.log('PDF.js 库加载完成')
|
||
|
||
// 多次尝试确保容器就绪
|
||
let container = null
|
||
let attempts = 0
|
||
const maxAttempts = 5
|
||
|
||
while (!container && attempts < maxAttempts) {
|
||
await this.$nextTick()
|
||
await new Promise(resolve => setTimeout(resolve, 100))
|
||
container = this.ensurePdfContainer()
|
||
if (container && container.style) {
|
||
console.log('PDF容器已就绪')
|
||
break
|
||
}
|
||
attempts++
|
||
console.log(`尝试获取PDF容器 (${attempts}/${maxAttempts})`)
|
||
}
|
||
|
||
if (!container || !container.style) {
|
||
console.warn('PDF容器未就绪，回退到 web-view')
|
||
this.usePdfJs = false
|
||
uni.hideLoading()
|
||
return
|
||
}
|
||
|
||
const pdfjsLib = window['pdfjsLib']
|
||
if (!pdfjsLib) {
|
||
console.error('PDF.js 库未加载')
|
||
this.usePdfJs = false
|
||
uni.hideLoading()
|
||
return
|
||
}
|
||
|
||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js'
|
||
|
||
// 获取文档
|
||
console.log('开始加载 PDF 文档...')
|
||
this.pdfDoc = await pdfjsLib.getDocument(this.pdfUrl).promise
|
||
console.log('PDF 文档加载成功，开始渲染...')
|
||
|
||
await this.renderAllPages()
|
||
|
||
this.pdfReady = true
|
||
window.addEventListener('resize', this.handleResize, { passive: true })
|
||
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: 'PDF加载成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
} catch (e) {
|
||
console.error('PDF 加载失败', e)
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: 'PDF加载失败，使用备用方式',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// 加载失败时回退到 web-view
|
||
this.usePdfJs = false
|
||
} finally {
|
||
this.loadingPdf = false
|
||
}
|
||
},
|
||
ensurePdfContainer() {
|
||
// 首先尝试通过 ref 获取
|
||
if (this.$refs && this.$refs.pdfContainer) {
|
||
const el = this.$refs.pdfContainer
|
||
// 确保是真实的DOM元素
|
||
if (el && el.nodeType === 1) {
|
||
return el
|
||
}
|
||
}
|
||
|
||
// 尝试通过类名查找
|
||
if (typeof document !== 'undefined') {
|
||
let container = document.querySelector('.pdf-container')
|
||
if (container && container.nodeType === 1) {
|
||
return container
|
||
}
|
||
|
||
// 如果容器不存在，创建一个
|
||
const parent = document.querySelector('.preview-page')
|
||
if (parent) {
|
||
const footer = parent.querySelector('.fixed-footer')
|
||
const created = document.createElement('div')
|
||
created.className = 'pdf-container'
|
||
created.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:120rpx;overflow-y:auto;overflow-x:hidden;background:#fff;'
|
||
|
||
if (footer) {
|
||
parent.insertBefore(created, footer)
|
||
} else {
|
||
parent.appendChild(created)
|
||
}
|
||
|
||
console.log('PDF容器已创建')
|
||
return created
|
||
}
|
||
}
|
||
|
||
return null
|
||
},
|
||
|
||
getContainer() {
|
||
// 优先使用 ref
|
||
if (this.$refs && this.$refs.pdfContainer) {
|
||
const el = this.$refs.pdfContainer
|
||
if (el && el.nodeType === 1) {
|
||
return el
|
||
}
|
||
}
|
||
|
||
// 其次使用选择器
|
||
if (typeof document !== 'undefined') {
|
||
return document.querySelector('.pdf-container')
|
||
}
|
||
|
||
return null
|
||
},
|
||
async renderAllPages() {
|
||
if (!this.usePdfJs || !this.pdfDoc) {
|
||
console.log('取消渲染：usePdfJs=', this.usePdfJs, 'pdfDoc=', !!this.pdfDoc)
|
||
return
|
||
}
|
||
|
||
// 确保容器存在
|
||
let container = this.getContainer()
|
||
if (!container) {
|
||
await this.$nextTick()
|
||
container = this.ensurePdfContainer()
|
||
}
|
||
|
||
if (!container || !container.style) {
|
||
console.warn('PDF容器不可用，回退到 web-view')
|
||
this.usePdfJs = false
|
||
return
|
||
}
|
||
|
||
console.log('开始渲染PDF，共', this.pdfDoc.numPages, '页')
|
||
|
||
// 清空容器
|
||
container.innerHTML = ''
|
||
container.style.overflowY = 'auto'
|
||
container.style.overflowX = 'hidden'
|
||
container.style.webkitOverflowScrolling = 'touch'
|
||
|
||
// 获取容器宽度
|
||
const cw = container.clientWidth || window.innerWidth || 375
|
||
|
||
try {
|
||
// 渲染所有页面
|
||
for (let i = 1; i <= this.pdfDoc.numPages; i++) {
|
||
const page = await this.pdfDoc.getPage(i)
|
||
const viewport = page.getViewport({ scale: this.scale })
|
||
const scaleToFit = cw / viewport.width
|
||
const vp = page.getViewport({ scale: this.scale * scaleToFit })
|
||
|
||
// 创建canvas
|
||
const canvas = document.createElement('canvas')
|
||
const ctx = canvas.getContext('2d')
|
||
canvas.width = vp.width
|
||
canvas.height = vp.height
|
||
canvas.style.width = '100%'
|
||
canvas.style.height = `${vp.height}px`
|
||
canvas.style.display = 'block'
|
||
canvas.style.margin = '0 auto 12px'
|
||
|
||
container.appendChild(canvas)
|
||
|
||
// 渲染页面
|
||
await page.render({ canvasContext: ctx, viewport: vp }).promise
|
||
|
||
console.log(`PDF 第 ${i} 页渲染完成`)
|
||
}
|
||
|
||
console.log('PDF 全部渲染完成')
|
||
} catch (error) {
|
||
console.error('渲染PDF时出错:', error)
|
||
uni.showToast({
|
||
title: '渲染失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
handleResize() {
|
||
// 响应式：窗口变化时重新按容器宽度渲染
|
||
if (this.usePdfJs && this.pdfDoc) {
|
||
this.$nextTick(() => this.renderAllPages())
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.preview-page {
|
||
position: relative;
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 6rpx solid #f3f3f3;
|
||
border-top: 6rpx solid #f30303;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.pdf-view {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 120rpx;
|
||
}
|
||
|
||
.pdf-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 120rpx;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
background: #fff;
|
||
}
|
||
|
||
.fixed-footer {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 120rpx;
|
||
background: #ffffff;
|
||
border-top: 2rpx solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 30rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.footer-text {
|
||
flex: 1;
|
||
background: #f30303;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
padding: 18rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
box-shadow: 0 8rpx 20rpx rgba(255, 45, 45, 0.25);
|
||
}
|
||
</style>
|
||
|