下载二维码至钉盘

LinMeng
• 阅读 1409

后端生成二维码的普通文件流,前端接收后在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>
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Wesley13 Wesley13
2年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
4月9日JindoFS系列直播【存储计算分离场景的计算适应优化】
主题:存储计算分离场景的计算适应优化时间:2020.4.9(周四)19:00参与方式:扫描下方二维码加入钉钉群,群内直接观看或点击直播间链接:https://developer.aliyun.com/live/2592讲师:王道远花名健身,阿里云EMR技术专家,ApacheSpa
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这