下载二维码至钉盘

后端生成二维码的普通文件流，前端接收后在img标签中渲染

将二维码下载至钉盘---通过接口获取后端返回mediaId字段，采用“dingtalk-jsapi”插件中的方法下载

注意：dingTalkFun中，除了corId和mediaId必传外，文件名name也是必须要传的！！！

1<template>
2  <div class="onlineSign">
3    <div class="main">
4      <img class="erwm" :src="codeData" alt="">
5      <div class="explainText">说明：请扫描二维码进行回执签收</div>
6      <div>
7        <mt-button class="downLoad" @click="downLoad()">下载二维码</mt-button>
8      </div>
9    </div>
10  </div>
11</template>
12<script>
13import * as dd from "dingtalk-jsapi";
14export default {
15  name:'onlineSign',
16  data(){
17    return{
18     polNo:"",
19     codeData:'',
20     mediaId:'',
21     corpId:""
22    }
23  },
24  created(){
25    document.title='保单送达及回销';
26    this.polNo = this.$route.query.businessNo;
27    this.getCode();
28    // this.dingReady();
29     if(this.$store.state.constant.isDingTalk){
30        this.dingReady();
31      }
32  },
33  methods:{
34    //生成二维码
35   getCode(){
36     let params={polNo:this.polNo};
37     this.TOOL.doAjax(params,"weChatReceipt").then(data =>{
38       if(data.data.code!=1) return;
39       this.codeData=data.data.base64Code;
40     })
41   },
42    downLoad(){
43     let params={polNo:this.polNo};
44     this.TOOL.doAjax(params,"qrcodeDownLoad").then(data =>{
45       console.log(data);
46       let that=this;
47       if(data.data.code == 1){
48        this.mediaId=data.data.mediaId;
49        console.log(this.mediaId);
50          if(that.$store.state.constant.isDingTalk){
51          that.dingtalkFun(data.data.mediaId,that.corpId);
52        }else{
53          that.TOOL.showToast('请检查当前环境是否为钉钉');
54          // that.TOOL.showToast(data.data.msg);
55        }
56
57       }else{
58         this.TOOL.showToast('回执二维码下载失败，请重新下载');
59       }
60     })
61   },
62    dingReady(){
63      const url = window.location.href;
64      let params={url}
65      this.TOOL.doAjax(params,'dingDingSign').then(data => {
66      if(data.data.code!='1'){
67          this.TOOL.showToast(data.data.msg);
68      }else{
69        console.log(data);
70        const{timeStamp,agentId,corpId,signature,nonceStr,token} = data.data;
71        console.log(token);
72        this.corpId=corpId;
73        dd.ready(function() {
74            dd.config({
75                agentId, // 必填，微应用ID
76                corpId,//必填，企业ID
77                timeStamp, // 必填，生成签名的时间戳
78                nonceStr, // 必填，生成签名的随机串
79                signature, // 必填，签名
80                type:0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
81                jsApiList : [
82                    'biz.cspace.saveFile',
83                    // 'biz.cspace.preview',
84                ] // 必填，需要使用的jsapi列表，注意：不要带dd。
85            });
86        })
87        }
88      });
89    },
90    dingtalkFun(mediaId,corpId){
91        dd.biz.cspace.saveFile({
92            corpId,
93            url:mediaId,  // 文件在第三方服务器地址， 也可为通过服务端接口上传文件得到的media_id，详见参数说明
94            name:this.polNo + ".jpg",
95            onSuccess: function(data) {
96              console.log(data);
97              // alert(JSON.stringify(data));
98              this.TOOL.showToast("下载成功，请至我的钉盘查看")
99            },
100            onFail: function(err) {
101               console.log(err);
102              // alert(JSON.stringify(err));
103              this.TOOL.showToast("下载失败，请稍后重试或联系系统管理员");
104            }
105          })
106   }
107  }
108}
109 
110
111</script>
112<style lang="less" scoped>
113.onlineSign{
114  padding: 40px 15px 0;
115  .main{
116    width:300px;
117    text-align:center;
118    margin: 0 auto;
119    .erwm{
120    width: 160px;
121    }
122    .explainText{
123      margin-top: 20px;
124      color: #666666;
125      font-size:12px;
126    }
127    .downLoad {
128      background: #356AE6;
129      border-radius: 8px;
130      color: #FFFFFF;
131      margin-top: 30px;
132      font-size: 16px;
133      width: 170px;
134      height: 40px;   
135    }
136  }
137}
138</style>