mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 08:46:43 +08:00
feat: 文件阅读下滑至底部完成阅读
This commit is contained in:
@@ -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('请输入其它收入来源')
|
||||
}
|
||||
|
||||
@@ -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 = ''
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user