需求:微信小程序在线预览PDF合同文件,加载完成后强制阅读10秒才可点击同意按钮
H5代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信小程序在线预览PDF</title>
<link rel="stylesheet" href="./css/pdfh5.css">
<link rel="stylesheet" href="./css/style.css">
<style>
#pdf {
width: 100%;
height: 100vh;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 32px;
right: 32px;
bottom: 10px;
height: 50px;
background-image: linear-gradient(270deg, #FF5D31 0%, #FFA853 100%);
border-radius: 44px;
font-weight: 500;
font-size: 16px;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div id="pdf"></div>
<div class="btn" style="opacity: .8;" v-if="show">{{message}}</div>
<div class="btn" v-else @click="submit">同意签署</div>
</div>
<script src="./js/pdf.js"></script>
<script src="./js/pdf.worker.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/pdfh5.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
num: 10,
timer: null
},
computed: {
message() {
if (this.num === 10) {
return '合同加载中...'
} else {
return '阅读倒计时' + this.num + '秒'
}
}
},
methods: {
submit() {
wx.miniProgram.postMessage({ data: 'done' })
},
},
mounted() {
let searchURL = window.location.search;
searchURL = searchURL.substring(1, searchURL.length);
const pdfurl = searchURL.split("&")[0].split("=")[1];
const pdfh5 = new Pdfh5('#pdf', {
pdfurl,
}, {
lazy: true
});
pdfh5.on("complete", (status) => {
if (status === 'error') return
this.timer = setInterval(() => {
if (this.num === 0) {
this.show = false
clearInterval(this.timer)
} else {
this.num -= 1
}
}, 1000)
})
},
unmounted() {
this.timer && clearInterval(this.timer)
},
})
</script>
</body>
</html>
微信小程序:
javascript
wxml
<web-view src="{{src}}" bindmessage="bindmessage" />
js
Page({
data: {
src: '',
},
onLoad() {
this.setData({
src: `${将H5页面部署到服务器的地址}?file=${pdf文件路径}`
})
},
bindmessage(e) {
if (e.detail.data[0] === 'done') {
// todo 处理同意后的逻辑
}
},
})