分享功能重新获取token,此token包括用户信息和链接时效

This commit is contained in:
liyuetong
2021-09-15 17:55:42 +08:00
committed by zhangqi1
parent efa28fc8cc
commit 2bda17733b
3 changed files with 506 additions and 22 deletions

View File

@@ -24,7 +24,7 @@ $width-list: 2 8 10 12 15 18 20 35 40 41 45 50 60 70 80 86 90 100 105 110 120 13
240 250 260 280 300 315 325 345 350 365 400 440 445 450 550 700 1340;
// 内外边距列表
$distance-list: -25 0 1 2 5 6 7 8 9 10 12 15 20 25 30 35 40 45 50 60 70 80 86 90 100 120 130 145 150 165 185 210 250;
$distance-list: -25 0 1 2 5 6 7 8 9 10 12 15 20 25 30 35 40 45 50 60 65 70 80 86 90 100 120 130 145 150 165 185 210 250;
$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, left, right, bottom;
//圆角弧度

View File

@@ -1,23 +1,99 @@
<template>
<div class="orderDetail-container">
<div v-for="(item, index) in allowanceSignDTOLst" :key="index">
<p class="fw600 border-gb">
<!-- 申请人 -->
<div v-if="item.type == 1 && !isWeixin">
<p class="fw600 border-gb">
<span>申请人</span><span class="ml60">{{ allowanceApplyDTO.name }}</span>
</p>
<p v-if="!isWeixin">点击签名按钮进行申请人签名</p>
<p class="border-gb">
<span>申请人</span>
<van-button type="danger" color="#2E4591" class="ml5" size="small" @click="signFunc(item.type, item.id)" :disabled="isSure" v-no-more-click="1000">{{
item.signStatus == '0' ? '签名' : '已签名'
}}</van-button>
<img class="w60 h40 v-middle ml10" v-if="item.signPath" :src="imgUrl + item.signPath.replace(/\+/g, '%2B')" alt="" /><br />
</p>
</div>
<div v-if="item.type == 2">
<div v-if="isWeixin" class="bg-white mt10 fs14 tips">
<p>
尊敬的
<span>{{ allowanceEnjoyDTO.name }}</span
>先生/女士您好
</p>
<p>恭喜您获得国富人寿桂冠专属父母赡养津贴需要您点击签字按钮进行签字申请</p>
</div>
<p v-if="!isWeixin" class="fw600 border-gb">
<span>享受人</span><span class="ml60">{{ allowanceEnjoyDTO.name }}</span>
</p>
<p v-if="!isWeixin">点击签名按钮进行享受人签名</p>
<p class="border-gb">
<span v-if="!isWeixin">享受人</span>
<van-button type="danger" color="#2E4591" class="ml5" size="small" @click="signFunc(item.type, item.id)" :disabled="isSure" v-no-more-click="1000">{{
item.signStatus == '0' ? '签名' : '已签名'
}}</van-button>
<img class="w60 h40 v-middle ml10" v-if="item.signPath" :src="imgUrl + item.signPath.replace(/\+/g, '%2B')" alt="" /><br />
<!-- 享受人有分享功能 -->
<van-button
type="danger"
color="#2E4591"
class="ml65 mt10"
v-if="!isWeixin"
size="small"
@click="share('0')"
:disabled="isSure"
v-no-more-click="1000"
>分享</van-button
>
</p>
</div>
<!-- <div v-if="isWeixin" class="bg-white mt10 fs14 tips">
<p>
尊敬的
<span>{{ allowanceEnjoyDTO.name }}</span
>先生/女士您好
</p>
<p>恭喜您获得国富人寿桂冠专属父母赡养津贴需要您点击签字按钮进行签字申请</p>
</div>
<p v-if="!isWeixin" class="fw600 border-gb">
<span>{{ item.type == 1 ? '申请人' : '享受人' }}</span
><span class="ml60">{{ item.type == 1 ? allowanceApplyDTO.name : allowanceEnjoyDTO.name }}</span>
</p>
<p>点击签名按钮进行{{ item.type == 1 ? '申请人' : '享受人' }}签名</p>
<p v-if="!isWeixin">点击签名按钮进行{{ item.type == 1 ? '申请人' : '享受人' }}签名</p>
<p class="border-gb">
<span>{{ item.type == 1 ? '申请人' : '享受人' }}</span>
<van-button type="danger" color="#2E4591" class="ml5" size="small" @click="sign(item.type, item.id)" :disabled="isSure" v-no-more-click="1000">{{
<span v-if="!isWeixin">{{ item.type == 1 ? '申请人' : '享受人' }}</span>
<van-button type="danger" color="#2E4591" class="ml5" size="small" @click="signFunc(item.type, item.id)" :disabled="isSure" v-no-more-click="1000">{{
item.signStatus == '0' ? '签名' : '已签名'
}}</van-button>
<img class="w60 h40 v-middle ml10" v-if="item.signPath" :src="imgUrl + item.signPath.replace(/\+/g, '%2B')" alt="" /><br>
<!-- 享受人有分享功能 -->
<van-button type="danger" color="#2E4591" class="ml70 mt10" v-if="item.type == 2" size="small" @click="share('0')" :disabled="isSure" v-no-more-click="1000">分享</van-button>
</p>
<img class="w60 h40 v-middle ml10" v-if="item.signPath" :src="imgUrl + item.signPath.replace(/\+/g, '%2B')" alt="" /><br />
<van-button
type="danger"
color="#2E4591"
class="ml65 mt10"
v-if="item.type == 2 && !isWeixin"
size="small"
@click="share('0')"
:disabled="isSure"
v-no-more-click="1000"
>分享</van-button
>
</p> -->
</div>
<van-button type="danger" color="#2E4591" class="bottom-btn" @click="nextStep" v-no-more-click="1000">提交审批</van-button>
<SignTure :SignShow="SignShow" :signInfo="signInfo" @close="SignClose" @SignSuccessful="SignSuccessful"></SignTure>
<SignTure :SignShow="SignShow" :signInfo="allowanceEnjoyDTO" @close="SignClose" @SignSuccessful="SignSuccessful"></SignTure>
<!-- 短信验证 -->
<van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">
<p class="p10 fs14">为确保是您本人操作短信验证码已发送至您手机号{{ encyCustomerMobile }}请您输入验证码以完成后续投保操作</p>
<van-cell-group class="flex align-items-c pr5 mb15">
<van-field maxlength="6" placeholder="请输入短信验证码" v-model="authCode" clearable label-width="0" />
<van-button type="danger" color="#2E4591" plain size="small" class="w160 p0" @click="getAuthCode" :disabled="codeDisabled" v-no-more-click="2000">{{
codeDisabled ? `${countDown}s后重新获取` : '获取验证码'
}}</van-button>
</van-cell-group>
</van-dialog>
</div>
</template>
<script>
@@ -25,6 +101,11 @@ import { Toast, CellGroup, Field, Dialog, Collapse, CollapseItem, Cell, Popup, D
import { getAllowanceDetail, saveOrUpdateAllowanceUrl, approveInit } from '@/api/ebiz/allowance/allowance'
import SignTure from './component/SignTure'
import config from '@/config'
import { getWhitelist } from '@/api/ebiz/whitelist'
import { weixinShare } from '@/assets/js/utils/wxShare.js'
import { checkPhone } from '@/api/ebiz/customer/customer'
import { getSignInvalid, checkSignInvalid, getAuthCode, autchCodeCheck, getRecognitionUrl, getRecognitionResult } from '@/api/ebiz/sale/sale'
import { getShareParam } from '@/api/ebiz/cardList/cardList.js'
export default {
name: 'detail',
@@ -47,32 +128,375 @@ export default {
let isWeixin = this.$utils.device().isWeixin //判断环境
return {
allowanceNo: this.$route.query.allowanceNo, //1d374d920e3e40568113
isSure: false,
signStatus: false,
isSure: false, //是否禁用签字和分享(已签字状态禁用)
// 是否在微信
isWeixin,
allowanceApplyDTO: {}, //申请人
allowanceEnjoyDTO: {},
allowanceBankDTO: {},
allowanceSignDTOLst: [],
SignShow: false, // 签字组件展示
signInfo: JSON.parse(localStorage.getItem('curSignInfo')), // 签字文件信息,这里只有姓名
SignShow: false, // 签字组件是否展示
signType: '1', //1:申请人; 2:享受人
insureBase64: '',
imgUrl: config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=`
imgUrl: config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=`,
// 微信分享校验值
signInvalid: '',
// 微信分享链接是否失效 false 为未失效 true为已失效
isInvalid: false,
// 是谁分享的微信链接 1为被保险人 0或2为投保人
// shareCode: '',
// 是否从空签成功跳转过来 1为是 其他为不是
// airSign: '',
//人脸识别认证次数
faceAuthCount: {
enjoy: 0,
weixin: 0
},
smsAuthNum: 3, //人脸只可识别三次
idcardData: {
realName: '',
idno: '',
redirectUrl: '',
businessSource: '5' //微信端人脸识别业务来源:1-电投2-入司3-理赔4-保全 5津贴
},
encyCustomerMobile: '', //获取短信验证码--手机号
show: false, // 获取短信验证码
codeDisabled: false, // 获取验证码按钮是否禁用
timeId: null, // 计时器ID
countDown: 60, // 倒计时
authCode: '' // 验证码
}
},
filters: {},
created() {
this.getAllowanceDetail() // 获取订单详情
this.init() //初始化微信端和app端
},
mounted() {},
methods: {
// 初始化
async init() {
if (this.isWeixin) {
window.localStorage.setItem('token', this.$route.query.token)
// let signInvalid = sessionStorage.getItem('signInvalid')
// let rs = await this.checkSignInvalid(signInvalid) // 微信分享验证校验值
// if (rs == '1') {
// this.isInvalid = false
// } else {
// this.isInvalid = true //已失效
// }
await this.getAllowanceDetail() // 获取详情
if (localStorage['faceAuthWeXin-requestId'] && localStorage['faceAuthWeXin-bizToken'] && this.$route.query.faceAuthCountWeixin != undefined) {
this.getRecognitionResult(JSON.parse(localStorage['faceAuthWeXin-requestId']), JSON.parse(localStorage['faceAuthWeXin-bizToken']))
}
weixinShare({
title: '国富人寿桂冠专属父母赡养津贴申请',
imgUrl: 'http://47.96.143.111:8000/app/images/logo.png',
desc: '点击去签字'
})
this.faceAuthCount.enjoy = this.$route.query.faceAuthCountAppnt == undefined ? 0 : Number(this.$route.query.faceAuthCountAppnt)
this.faceAuthCount.weixin = this.$route.query.faceAuthCountWeixin == undefined ? 0 : Number(this.$route.query.faceAuthCountWeixin)
} else {
this.getAllowanceDetail() // 获取详情
// this.getSignInvalid() // 微信分享获取校验值
}
},
// 微信分享获取校验值--app初始化
getSignInvalid() {
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
let data = {}
getSignInvalid(data).then((res) => {
if (res.result == '0') {
this.$toast.clear()
this.signInvalid = res.content.sign
}
})
},
// 微信分享验证校验值--微信初始化
async checkSignInvalid(signInvalid) {
let that = this
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
let data = {
sign: signInvalid
}
return new Promise((resolve) => {
checkSignInvalid(data).then((res) => {
if (res.result == '0') {
that.$toast.clear()
let status = res.content.status
resolve(status)
}
})
})
},
//人脸识别--微信
async recognition() {
localStorage.setItem('faceAuthWeXin-requestId', '')
localStorage.setItem('faceAuthWeXin-bizToken', '')
//获取腾讯人脸识别URL接口
await this.getRecognitionUrl()
},
//获取腾讯人脸识别URL接口--微信
getRecognitionUrl() {
return new Promise(() => {
this.idcardData.redirectUrl = location.origin + this.replaceSearch()
let data = {
realName: this.idcardData.realName,
idno: this.idcardData.idno,
redirectUrl: this.idcardData.redirectUrl,
businessSource: this.idcardData.businessSource
}
getRecognitionUrl(data).then(
(res) => {
if (res.result == '0') {
localStorage.setItem('faceAuthWeXin-requestId', JSON.stringify(res.content.requestId))
localStorage.setItem('faceAuthWeXin-bizToken', JSON.stringify(res.content.bizToken))
window.location.href = res.content.url
} else {
this.$toast(res.resultMessage)
}
},
(error) => {
console.log(error)
}
)
})
},
//替换redirectUrl腾讯人脸识别链接--微信
replaceSearch() {
let obj = this.$route.query,
str = '/#/allowance/application/signatureConfirmation?'
obj.faceAuthCountAppnt = this.faceAuthCount.enjoy
obj.faceAuthCountWeixin = this.faceAuthCount.weixin
for (let key in obj) {
str += `&${key}=${obj[key]}`
}
return str
},
//获取腾讯人脸识别结果接口--微信初始化
getRecognitionResult(requestId, bizToken) {
return new Promise(() => {
getRecognitionResult({ requestId, bizToken }).then(
(res) => {
if (res.result == '0') {
this.recognizeResult = res.result
} else {
this.$toast(res.resultMessage || '人脸识别认证失败')
}
this.sendimage(this.recognizeResult)
},
(error) => {
console.log(error)
}
)
localStorage.setItem('faceAuthWeXin-requestId', '')
localStorage.setItem('faceAuthWeXin-bizToken', '')
})
},
// 微信人脸验证后 返回值 操作
sendimage(e) {
if (e == '0') {
//人脸成功
this.SignShow = true //去签字
} else {
this.faceAuthCount.weixin++
console.log('腾讯人脸识别失败', this.faceAuthCount.weixin, typeof this.faceAuthCount.weixin)
if (this.faceAuthCount.weixin >= this.smsAuthNum) {
//人脸识别3次没有通过后获取短信验证码
this.realPeopelCheck()
}
}
},
//人脸识别3次没有通过后获取短信验证码
realPeopelCheck() {
this.$toast.loading({
// 持续展示 toast
duration: 0,
// 禁用背景点击s
forbidClick: true,
loadingType: 'spinner',
message: '加载中……'
})
let data = {}
this.authCode = null
data = {
name: this.allowanceEnjoyDTO.name,
idType: this.allowanceEnjoyDTO.idType,
idNo: this.allowanceEnjoyDTO.idNo,
mobile: this.allowanceBankDTO.mobile
}
this.encyCustomerMobile = this.allowanceBankDTO.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
// eslint-disable-next-line no-unused-vars
return new Promise((resolve, reject) => {
checkPhone(data).then((res) => {
if (res.result == '0') {
console.log(res)
this.show = true
} else {
Dialog.confirm({
title: '提示',
message: '抱歉,您预留的手机号非您本人的手机号!',
showCancelButton: false
})
}
})
})
},
// 验证码确认事件
async authConfirm() {
//清理计时器
this.clearTimer()
this.changeSubmit()
},
// 获取短信验证码
getAuthCode() {
this.codeDisabled = true
//倒计时
this.timeId = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
window.clearInterval(this.timeId)
this.codeDisabled = false
this.countDown = 60
}
}, 1000)
getAuthCode({
operateType: 'appntInfoEntry',
type: 'H5',
operateCode: this.allowanceBankDTO.mobile,
system: 'agentApp',
operateCodeType: '0'
}).then((res) => {
console.log(res)
if (res.result == 0) {
this.sid = res.sessionId
} else {
this.$toast(res.resultMessage)
}
})
},
// 清理计时器
clearTimer() {
window.clearInterval(this.timeId)
this.timeId = null
this.countDown = 60
this.codeDisabled = false
},
//提交变更申请
async changeSubmit() {
let that = this
if (null == this.sid) {
this.$toast('请先进行发送短信验证码')
return
}
let res = await autchCodeCheck({
smsId: this.sid,
code: this.authCode
})
if (res.result == 0) {
that.SignShow = true //去签字
} else {
this.$toast(res.resultMessage)
}
},
beforeDestroy() {
//清理计时器
this.clearTimer()
},
//点击签名
sign(signType, signId) {
this.SignShow = true
signFunc(signType, signId) {
if (signType == '2') {
this.start_ocr(signType, signId)
} else {
this.SignShow = true //去签字
}
this.signType = signType
this.signId = signId
},
// 人脸识别
async start_ocr() {
let that = this
if (this.isWeixin) {
if (this.allowanceEnjoyDTO.idType != '1') {
this.SignShow = true //去签字
} else {
// 白名单校验
const res = await getWhitelist({
idNo: this.allowanceEnjoyDTO.idNo,
name: this.allowanceEnjoyDTO.name,
whiteType: 'allowance_face_show'
})
if (res.result === '0') {
// 在白名单内
if (res.content && res.content.length) {
this.SignShow = true //去签字
return
}
} else {
this.$toast(res.resultMessage)
}
// 人脸识别
if (this.faceAuthCount.enjoy < this.smsAuthNum) {
this.idcardData.realName = this.allowanceEnjoyDTO.name
this.idcardData.idno = this.allowanceEnjoyDTO.idNo
this.recognition()
} else {
this.realPeopelCheck()
}
}
} else {
//在app内
// 白名单校验
console.log('在app内白名单校验')
if (this.allowanceEnjoyDTO.idType != '1') {
this.SignShow = true //去签字
} else {
const res = await getWhitelist({
idNo: this.allowanceEnjoyDTO.idNo,
name: this.allowanceEnjoyDTO.name,
whiteType: 'allowance_face_show'
})
if (res.result === '0') {
// 在白名单内
if (res.content && res.content.length) {
this.SignShow = true //去签字
return
}
} else {
this.$toast(res.resultMessage)
}
if (this.faceAuthCount.enjoy < this.smsAuthNum) {
// 人脸识别
//eslint-disable-next-line no-undef
const authRes = await EWebBridge.webCallAppInJs('face_auth', {
businessSource: '5', //业务来源:1-电投2-入司3-理赔4-保全 5津贴
number: that.allowanceEnjoyDTO.idNo, //身份证号码
name: that.allowanceEnjoyDTO.name //姓名
}).then((data) => {
console.log(JSON.parse(data), 'APP人脸识别结果')
if (JSON.parse(data).state == '1') {
this.SignShow = true //去签字
} else {
that.faceAuthCount.enjoy++
if (this.faceAuthCount.enjoy >= this.smsAuthNum) {
this.realPeopelCheck()
}
}
})
} else {
this.realPeopelCheck()
}
}
}
},
//签字组件关闭
SignClose(value) {
this.SignShow = value
@@ -85,6 +509,7 @@ export default {
this.curBase64 = data.path
this.save(this.curBase64)
},
// 保存签字
save(signPath) {
let that = this
let obj = {
@@ -125,13 +550,61 @@ export default {
this.allowanceApplyDTO = allowanceDTO.allowanceApplyDTO
this.allowanceEnjoyDTO = allowanceDTO.allowanceEnjoyDTO
this.allowanceSignDTOLst = allowanceDTO.allowanceSignDTOLst //签字相关信息
this.allowanceBankDTO = allowanceDTO.allowanceBankDTO //账户相关信息
} else {
this.$toast(res.resultMessage)
}
})
},
//分享
share() {},
// 微信分享
async share() {
console.log('`````````````测试安卓url`````````````````')
// console.log(
// location.origin +
// '/#/sale/signatureConfirmation?orderNo=' +
// localStorage.orderNo +
// '&token=' +
// localStorage.token +
// '&saleInsuredInfo=' +
// this.$CacheUtils.getLocItem('saleInsuredInfo') +
// '&saleInsuredPersonInfo=' +
// this.$CacheUtils.getLocItem('saleInsuredPersonInfo') +
// '&relationToAppnt=' +
// JSON.parse(this.$CacheUtils.getLocItem('saleInsuredPersonInfo')).relationToAppnt +
// // '&shareCode=' +
// // code +
// '&signInvalid=' +
// this.signInvalid +
// '&productCode=' +
// localStorage.productCode
// )
// eslint-disable-next-line no-undef
//分享功能重新获取token此token包括用户信息和链接时效
//链接时效当天24点点击链接提示“当前链接已时效请您联系分享人再次分享。链接当天24点失效”,shareType值找后端配置
let res = await getShareParam({ shareType: 'card_pay' })
EWebBridge.webCallAppInJs('bridge', {
flag: 'share',
extra: {
title: `国富人寿桂冠专属父母赡养津贴申请`,
content: '点击去签字',
url:
location.origin +
'/#/allowance/application/signatureConfirmation?allowanceNo=' +
this.allowanceNo +
'&token=' +
res.content,
// '&relationToAppnt=' +
// JSON.parse(this.$CacheUtils.getLocItem('saleInsuredPersonInfo')).relationToAppnt +
// '&shareCode=' +
// code +
// '&signInvalid=' +
// this.signInvalid,
img: this.$assetsUrl + 'images/logo.png'
}
})
},
nextStep() {
for (let item of this.allowanceSignDTOLst) {
if (!item.signPath) {
@@ -172,6 +645,13 @@ export default {
}
}
</script>
<style lang="scss">
#app {
.van-dialog__confirm {
color: #1989fa;
}
}
</style>
<style lang="scss" scoped>
.orderDetail-container {
background-color: #fff;
@@ -183,5 +663,8 @@ export default {
width: 100%;
height: 100%;
}
.tips {
line-height: 20px;
}
}
</style>

View File

@@ -150,9 +150,10 @@ export default {
this.$toast(err)
})
},
//识别手写笔记比对接口,这里只需姓名去比对和签字是否一致
recognizeHandWriting(path) {
// let data = {
// text: this.signInfo.name, // 抄录文字
// text: this.signInfo.name, // 签字文字
// imageType: '0',
// imagePath: path
// }