下载二维码至钉盘

后端生成二维码的普通文件流，前端接收后在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>