更新项目配置和添加小程序模块
- 修改 ArticleController.java - 更新 application.yml 配置 - 更新 frontend/.env.production 环境配置 - 添加 single_uniapp22miao 小程序模块 - 添加 logs 目录
This commit is contained in:
panchengyong
439
single_uniapp22miao/pages/index/index.vue
Normal file
439
single_uniapp22miao/pages/index/index.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<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/templates-ay.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>
|
||||
|
||||
Reference in New Issue
Block a user