后端生成二维码的普通文件流,前端接收后在img标签中渲染
将二维码下载至钉盘---通过接口获取后端返回mediaId字段,采用“dingtalk-jsapi”插件中的方法下载
注意:dingTalkFun中,除了corId和mediaId必传外,文件名name也是必须要传的!!!
<template>
<div class="onlineSign">
<div class="main">
<img class="erwm" :src="codeData" alt="">
<div class="explainText">说明:请扫描二维码进行回执签收</div>
<div>
<mt-button class="downLoad" @click="downLoad()">下载二维码</mt-button>
</div>
</div>
</div>
</template>
<script>
import * as dd from "dingtalk-jsapi";
export default {
name:'onlineSign',
data(){
return{
polNo:"",
codeData:'',
mediaId:'',
corpId:""
}
},
created(){
document.title='保单送达及回销';
this.polNo = this.$route.query.businessNo;
this.getCode();
// this.dingReady();
if(this.$store.state.constant.isDingTalk){
this.dingReady();
}
},
methods:{
//生成二维码
getCode(){
let params={polNo:this.polNo};
this.TOOL.doAjax(params,"weChatReceipt").then(data =>{
if(data.data.code!=1) return;
this.codeData=data.data.base64Code;
})
},
downLoad(){
let params={polNo:this.polNo};
this.TOOL.doAjax(params,"qrcodeDownLoad").then(data =>{
console.log(data);
let that=this;
if(data.data.code == 1){
this.mediaId=data.data.mediaId;
console.log(this.mediaId);
if(that.$store.state.constant.isDingTalk){
that.dingtalkFun(data.data.mediaId,that.corpId);
}else{
that.TOOL.showToast('请检查当前环境是否为钉钉');
// that.TOOL.showToast(data.data.msg);
}
}else{
this.TOOL.showToast('回执二维码下载失败,请重新下载');
}
})
},
dingReady(){
const url = window.location.href;
let params={url}
this.TOOL.doAjax(params,'dingDingSign').then(data => {
if(data.data.code!='1'){
this.TOOL.showToast(data.data.msg);
}else{
console.log(data);
const{timeStamp,agentId,corpId,signature,nonceStr,token} = data.data;
console.log(token);
this.corpId=corpId;
dd.ready(function() {
dd.config({
agentId, // 必填,微应用ID
corpId,//必填,企业ID
timeStamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名
type:0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi;不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
jsApiList : [
'biz.cspace.saveFile',
// 'biz.cspace.preview',
] // 必填,需要使用的jsapi列表,注意:不要带dd。
});
})
}
});
},
dingtalkFun(mediaId,corpId){
dd.biz.cspace.saveFile({
corpId,
url:mediaId, // 文件在第三方服务器地址, 也可为通过服务端接口上传文件得到的media_id,详见参数说明
name:this.polNo + ".jpg",
onSuccess: function(data) {
console.log(data);
// alert(JSON.stringify(data));
this.TOOL.showToast("下载成功,请至我的钉盘查看")
},
onFail: function(err) {
console.log(err);
// alert(JSON.stringify(err));
this.TOOL.showToast("下载失败,请稍后重试或联系系统管理员");
}
})
}
}
}
</script>
<style lang="less" scoped>
.onlineSign{
padding: 40px 15px 0;
.main{
width:300px;
text-align:center;
margin: 0 auto;
.erwm{
width: 160px;
}
.explainText{
margin-top: 20px;
color: #666666;
font-size:12px;
}
.downLoad {
background: #356AE6;
border-radius: 8px;
color: #FFFFFF;
margin-top: 30px;
font-size: 16px;
width: 170px;
height: 40px;
}
}
}
</style>