feat: 文件阅读下滑至底部完成阅读

This commit is contained in:
刘慧影
2025-09-09 09:15:00 +08:00
parent 268d53128e
commit 0537596d95
3 changed files with 231 additions and 39 deletions

View File

@@ -261,6 +261,7 @@
placeholder="请选择"
v-validate="'required'"
@click="toSelect('8')"
v-if="branchType != '14'"
/>
<van-field
v-show="isShowOthenSalarySource"
@@ -290,6 +291,7 @@
v-validate="'required|onlyNumber'"
clearable
maxlength="5"
v-if="branchType != '14'"
>
<div slot="label" class="flex flex-wrap">
<span>负债金额</span>
@@ -1253,7 +1255,7 @@
}
this.userInfo.occupationCode = data.occupationCode //职业类别编码
this.userInfo.occupationName = data.occupationName //职业类别名称
this.userInfo.salarySource = data.salarySource //收入来源
this.userInfo.salarySource = this.branchType == '14' ? '' : data.salarySource //收入来源
this.userInfo.otherSalarySource = data.otherSalarySource // 其他收入来源
this.userInfo.lifeGrade = data.lifeGrade //寿险等级
this.userInfo.healthGrade = data.healthGrade //健康等级
@@ -1269,7 +1271,7 @@
this.setCustomerMarriage(data.marryStatus)
// this.userInfo.familyAnnualIncome = data.familyAnnualIncome //家庭年收入
this.userInfo.email = data.email //电子邮箱
this.userInfo.liabilitiesMoney = data.liabilitiesMoney //负债金额
this.userInfo.liabilitiesMoney = this.branchType == '14' ? '' : data.liabilitiesMoney //负债金额
// this.userInfo.companyProvince = data.companyProvince //单位省
// this.userInfo.companyCity = data.companyCity //单位市
// this.userInfo.companyArea = data.companyArea //单位区
@@ -1475,7 +1477,7 @@
this.userInfo.workcompany = '无'
}
if (this.userInfo.salarySource == '4') {
if (this.userInfo.salarySource == '4' && this.branchType != '14') {
if (!this.userInfo.otherSalarySource) {
return this.$toast('请输入其它收入来源')
}

View File

@@ -275,6 +275,7 @@
placeholder="请选择"
v-validate="'required'"
@click="toSelect('9')"
v-if="branchType != '14'"
/>
<van-field
v-show="isShowOthenSalarySource"
@@ -306,6 +307,7 @@
clearable
maxlength="5"
:readonly="isAppnt"
v-if="branchType != '14'"
>
<div slot="label" class="flex flex-wrap"><span>负债金额</span><span>万元</span></div>
</van-field>
@@ -1176,10 +1178,10 @@
this.effectiveDateTypeAble = age <= 45
} else {
if (age < 16) {
this.userInfo.salarySource = 4
this.userInfo.salarySource = this.branchType == '14' ? null : 4
this.userInfo.otherSalarySource = '无'
this.userInfo.averageAnnualIncome = '0'
this.userInfo.liabilitiesMoney = '0'
this.userInfo.liabilitiesMoney = this.branchType == '14' ? '' : '0'
}
}
if (this.userInfo.certificateValidate && !this.userInfo.certiexpiredate) {
@@ -1289,7 +1291,7 @@
}
this.userInfo.occupationCode = data.occupationCode //职业类别编码
this.userInfo.occupationName = data.occupationName //职业类别名称
this.userInfo.salarySource = data.salarySource //收入来源
this.userInfo.salarySource = this.branchType == '14' ? null : data.salarySource //收入来源
this.userInfo.otherSalarySource = data.otherSalarySource // 其他收入来源
this.userInfo.lifeGrade = data.lifeGrade //寿险等级
this.userInfo.healthGrade = data.healthGrade //健康等级
@@ -1305,7 +1307,7 @@
this.setCustomerMarriage(data.marryStatus)
// this.userInfo.familyAnnualIncome = data.familyAnnualIncome //家庭年收入
// this.userInfo.email = data.email //电子邮箱
this.userInfo.liabilitiesMoney = data.liabilitiesMoney //负债金额
this.userInfo.liabilitiesMoney = this.branchType == '14' ? '' : data.liabilitiesMoney //负债金额
// this.userInfo.companyProvince = data.companyProvince //单位省
// this.userInfo.companyCity = data.companyCity //单位市
// this.userInfo.companyArea = data.companyArea //单位区
@@ -1650,7 +1652,7 @@
return this.$toast('0-7岁未成年人须由其父母投保请确定')
}
if (this.userInfo.salarySource == '4') {
if (this.userInfo.salarySource == '4' && this.branchType != '14') {
if (!this.userInfo.otherSalarySource) {
return this.$toast('请输入其它收入来源')
}
@@ -2004,10 +2006,10 @@
}
if (!from) {
if (idToData(val).age < 16) {
this.userInfo.salarySource = 4
this.userInfo.salarySource = this.branchType == '14' ? null : 4
this.userInfo.otherSalarySource = ''
this.userInfo.averageAnnualIncome = '0'
this.userInfo.liabilitiesMoney = '0'
this.userInfo.liabilitiesMoney = this.branchType == '14' ? '' : '0'
} else {
this.userInfo.salarySource = ''
this.userInfo.averageAnnualIncome = ''

View File

@@ -8,15 +8,20 @@
<van-icon v-if="index != fileList.length - 1" name="arrow" style="margin: 0px 5px;"/>
</p>
</div>
<van-notice-bar :scrollable='false' v-if='!Time' class='notice'>
<!-- 普通渠道的读秒提示 -->
<van-notice-bar :scrollable='false' v-if='branchType != "14" && !Time' class='notice'>
{{ `提示:阅读时长需在${this.Time ? this.time : this.number}秒以上` }}
</van-notice-bar>
<div id="pdf" style="overflow: scroll;background: #eee;" :style="[{height:isPreview ? '100vh' : '75vh'}]">
<div id="pdf" style="overflow: scroll;background: #eee;" :style="[{height:isPreview ? '100vh' : '75vh'}]" @scroll="handleScroll">
<div id="pdfH5ID"></div>
<!-- 银保渠道右侧标注提示 -->
<div v-if='branchType == "14" && !isScrollToBottom' class='scroll-tip'>
请下滑至底部完成阅读
</div>
</div>
<div style="height: 20vh;" v-if="!isPreview">
<van-radio-group v-model='radio' class='pb10 pt10 pl10 fs20'>
<van-radio name='1' @click='click'>
<van-radio name='1' @click='click' :disabled="branchType == '14' && !isScrollToBottom">
本人确认已阅读<span>{{documentName}}</span>
</van-radio>
</van-radio-group>
@@ -63,6 +68,10 @@
chaoluButtonDisabled: true,
chaoluStatus: false,
productType: '',
branchType: '',
// 银保渠道滚动检测相关
isScrollToBottom: false,
scrollTimer: null
}
},
components: {
@@ -72,13 +81,22 @@
[NoticeBar.name]: NoticeBar
},
created(){
if(window.localStorage.getItem('branchType')) {
this.branchType = window.localStorage.getItem('branchType')
} else if(this.$route.query.branchType){
window.localStorage.setItem('branchType', this.$route.query.branchType)
this.branchType = this.$route.query.branchType
}
if(this.$route.query.currentIndex){
this.Time = true
this.isPreview = true
} else if(window.sessionStorage.getItem('signH5Img')){
this.Time = true
} else {
this.timeOut()
// 银保渠道不需要读秒
if(this.branchType != '14') {
this.timeOut()
}
}
setTimeout(() => {
// eslint-disable-next-line no-undef
@@ -113,6 +131,31 @@
},
methods: {
// 处理滚动事件
handleScroll(event) {
if (this.branchType != '14') return
// 防抖处理
if (this.scrollTimer) {
clearTimeout(this.scrollTimer)
}
this.scrollTimer = setTimeout(() => {
const element = event.target
const scrollTop = element.scrollTop
const scrollHeight = element.scrollHeight
const clientHeight = element.clientHeight
// 判断是否滚动到底部
if (scrollTop + clientHeight >= scrollHeight - 5) {
this.isScrollToBottom = true
// 滚动到底部后,自动设置阅读完成状态
if (!this.isOver) {
this.isOver = true
this.Time = true
}
} else {
this.isScrollToBottom = false
}
}, 100)
},
getOrderDetail(){
if(this.$route.query.currentIndex) {
this.current = Number(this.$route.query.currentIndex)
@@ -144,15 +187,37 @@
// 点击阅读时
click() {
let that = this
if (that.isOver == false) {
Dialog.confirm({
title: '提示',
message: '该内容涉及您的重大权益,请您仔细阅读',
showCancelButton: false
}).then(() => {
that.radio = ''
})
// 银保渠道
if (this.branchType == '14') {
if (!this.isScrollToBottom) {
Dialog.confirm({
title: '提示',
message: '请下滑至底部完成阅读',
showCancelButton: false
}).then(() => {
that.radio = ''
})
return
}
} else {
// 普通渠道的原有逻辑
if (that.isOver == false) {
Dialog.confirm({
title: '提示',
message: '该内容涉及您的重大权益,请您仔细阅读',
showCancelButton: false
}).then(() => {
that.radio = ''
})
} else {
if(this.fileList[this.current - 1].documentCode == '2'){
that.chaoluButtonDisabled = false
}
}
}
// 银保渠道滚动到底部后的处理
if (this.branchType == '14' && this.isScrollToBottom) {
if(this.fileList[this.current - 1].documentCode == '2'){
that.chaoluButtonDisabled = false
}
@@ -257,19 +322,42 @@
},
changeFile(readStatus){
this.documentName = this.fileList[this.current - 1].documentName
if(readStatus){
this.radio = '1'
this.isOver = true
this.Time = true
} else if(window.sessionStorage.getItem('signH5Img')) {
this.radio = '1'
this.isOver = true
this.chaoluButtonDisabled = false
// 银保渠道
if (this.branchType == '14') {
this.isScrollToBottom = false
if(readStatus){
this.radio = '1'
this.isOver = true
this.Time = true
this.isScrollToBottom = true
} else if(window.sessionStorage.getItem('signH5Img')) {
this.radio = '1'
this.isOver = true
this.chaoluButtonDisabled = false
this.isScrollToBottom = true
} else {
this.radio = ''
this.isOver = false
this.Time = true
this.isScrollToBottom = false
}
} else {
this.radio = ''
this.isOver = false
this.timeOut()
// 其他渠道
if(readStatus){
this.radio = '1'
this.isOver = true
this.Time = true
} else if(window.sessionStorage.getItem('signH5Img')) {
this.radio = '1'
this.isOver = true
this.chaoluButtonDisabled = false
} else {
this.radio = ''
this.isOver = false
this.timeOut()
}
}
let thispdfurl = ''
if(this.fileList[this.current - 1].originalUrl && (this.fileList[this.current - 1].originalUrl.indexOf('https://') != -1 || this.fileList[this.current - 1].originalUrl.indexOf('http://') != -1)) {
thispdfurl = this.fileList[this.current - 1].originalUrl
@@ -361,8 +449,8 @@
},
computed: {
listenChange() {
const { isOver, radio } = this
return { isOver, radio }
const { isOver, radio, isScrollToBottom } = this
return { isOver, radio, isScrollToBottom }
}
},
beforeRouteLeave(to, from, next) {
@@ -372,15 +460,29 @@
window.sessionStorage.removeItem('signH5Val')
window.sessionStorage.removeItem('signInfo')
}
// 清理定时器
if (this.scrollTimer) {
clearTimeout(this.scrollTimer)
}
next()
},
watch: {
listenChange(val) {
let that = this
if (val.isOver == true && val.radio != '') {
that.isDisabledComplite = false
// 银保渠道
if (this.branchType == '14') {
if (val.isScrollToBottom == true && val.radio != '') {
that.isDisabledComplite = false
} else {
that.isDisabledComplite = true
}
} else {
that.isDisabledComplite = true
// 其他渠道
if (val.isOver == true && val.radio != '') {
that.isDisabledComplite = false
} else {
that.isDisabledComplite = true
}
}
}
}
@@ -422,4 +524,90 @@
padding: 10px 20px;
}
}
</style>
/* 银保渠道右侧标注样式 - 统一红色主题 */
.scroll-tip {
position: fixed;
right: 15px;
top: 50%;
transform: translateY(-50%);
// background: linear-gradient(135deg, #E9332E 0%, #ff4757 100%);
color: white;
padding: 10px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
z-index: 1000;
width: 20px;
text-align: center;
line-height: 1.3;
background-color: #fffbe8;
// box-shadow: 0 4px 20px #f4da58;
// border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
// animation: slideInRight 0.5s ease-out, pulse 2s ease-in-out infinite 0.5s;
cursor: pointer;
transition: all 0.3s ease;
color: #ed6a0c;
/* 添加向下箭头图标 */
&::after {
content: '↓';
display: block;
font-size: 16px;
margin-top: 4px;
animation: bounce 1.5s ease-in-out infinite;
}
&:hover {
transform: translateY(-50%) scale(1.05);
// box-shadow: 0 6px 25px rgba(233, 51, 46, 0.6);
}
}
/* 滑入动画 */
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateY(-50%) translateX(100px);
}
100% {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
/* 脉冲动画 - 红色主题 */
@keyframes pulse {
// 0%, 100% {
// box-shadow: 0 4px 20px rgba(233, 51, 46, 0.4);
// }
// 50% {
// box-shadow: 0 6px 25px rgba(233, 51, 46, 0.7);
// }
}
/* 箭头弹跳动画 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-3px);
}
60% {
transform: translateY(-2px);
}
}
/* 银保渠道禁用状态的样式 */
/deep/ .van-radio--disabled {
.van-radio__icon {
background-color: #f2f3f5;
border-color: #dcdee0;
}
.van-radio__label {
color: #c8c9cc;
}
}
</style>