下载二维码至钉盘

LinMeng 等级 485 0 1

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

相关推荐

解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y) 在input的释焦事件中添加blur事件, 参数X要在窗口文档显示区左上角显示的文档的 x 坐标。 参数y要在窗口文档显示区左上角显示的文档的 y 坐标。 添加jQuery插件 mounted(){ //解决ios 软键盘弹出屏幕空白 $("input,select,te
下载二维码至钉盘
后端生成二维码的普通文件流,前端接收后在img标签中渲染 将二维码下载至钉盘通过接口获取后端返回mediaId字段,采用“dingtalkjsapi”插件中的方法下载 注意:dingTalkFun中,除了corId和mediaId必传外,文件名name也是必须要传的!!! <template <div class"onlineSign"
TS核心知识点总结及项目实战案例分析
前言 最近工作一直很忙,复盘周期也有所拉长,不过还是会坚持每周复盘。今天笔者将复盘一下typescript在前端项目中的应用,至于为什么要学习typescript,我想大家也不言自明,目前主流框架vue和react以及相关生态的内部构建大部分都采用了typescript,其原因就在于它的静态类型检查极大的提高了代码的可读性和可维护性,而且定位问题非常方便。下
2B 领域下的低代码探索之路
前言 大家好,我是钉钉宜搭前端一个小团队的负责人,在阿里做了五年的低代码。今天的分享我们不讲技术细节,主要会分享下我们这五年的探索过程和当前的市场分析,希望能给大家带来一个对低代码搭建不一样视角的认识。 什么是低代码 说起低代码(LowCode)这个词,是在 2014 年,Forrester Research 第一次正式使用低代码来描述这个市场
我们离Google SRE还有多远?
经过几年的挣扎和讨论(确切说应该是3年),老板在钉钉群以通告的方式正式告别伴随我们多年的职业Title PE,改名为SRE。(后续以A SRE区别Google SRE) (https://imghelloworld.osscnbeijing.aliyuncs.com/188fb7b287badee91332a9f90c3af347.p
磁盘问题定位与解决
磁盘问题定位基本流程: 磁盘的压力分析,主要使用下面几个性能计数器 (针对单独的物理盘,每个物理磁盘都会有一组): 1. Avg. Disk Read Queue
Docker最全教程之Go实战,墙裂推荐(十八)
前言 与其他语言相比,Go非常值得推荐和学习,真香!为什么?主要是可以直接编译成机器代码(性能优越,体积非常小,可达10来M,见实践教程图片)而且设计良好,上手门槛低。本篇主要侧重于讲解了Go语言的优势,并且提供了一个推送钉钉消息的Demo。最后由于技
磁盘读写与数据库的关系
一 磁盘物理结构 (1) 盘片:硬盘的盘体由多个盘片叠在一起构成。 (https://imghelloworld.osscnbeijing.aliyuncs.com/ca8257beee4683c9331279708f8136d1.
RAID在数据库存储上的应用
随着单块磁盘在数据安全、性能、容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁盘按不同的方式组合起来,形成一个磁盘组,以获得比单
商业数据分析从入门到入职(2)Excel基础
一、Excel介绍 1.Excel简介Excel不仅仅只是存放数据的工具,其功能特别强大,甚至可以做出美观的仪表盘,如下:甚至还可以用Excel作画,可点击查看,如下:Excel存在很多版本,如2003、2007、2010、2016、2019等,一般向下兼容,不同系统的兼容性可能存在问题。文件类型主要包括xls、xlsx等。一个Excel表格
uni-app开发 常见异常和解决办法
前言uniapp 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会遇到一些异常,这些异常及其解决办法总结如下。 1.调用微信开发者工具报错IDE service port dis
uni-app开发 经验和技巧总结
## 前言uni-app 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等**多个平台**。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。## 1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
手把手教你轻松下载百度网盘超大文件
前言玩过百度网盘的都应该清楚它的强大,小编就是靠着百度网盘那强大的功能以及变态的存储空间才获得许多具有纪念价值的东西,比如某些Hacker资料,你懂的。但是小编一直以来都有一个心结未解开,那就是为毛每次使用百度网盘下载文件的时候就非得下载百度网盘客户端才可以了,估计先不说浪费时间和占用电脑资源,至少小编也是不乐意这样做的,毕竟小编电脑可是只有60个G的存储空
vi 编译器使用
打开/创建文件bashvi test.py 打开后进行修改注:下面的命令需要使用英文输入法。 1、 需要按行快速移动光标时,可以使用键盘上的编辑键Home,快速将光标移动至当前行的行首。除此之外,也可以在命令模式中使用快捷键"^"(即Shift+6)或0(数字0)。 2、 如果要快速移动光标至当前行的行尾,可以使用编辑键End。也可以在命令模式中使用快
这28个值得收藏的shell脚本能让你每天摸鱼近7个小时!
前言:在日常工作中,但凡你要跟服务器打交道,一定离不开的神器便是shell脚本,shell脚本可以极大的提高工程师的工作效率,避免一些认为因素导致的手误。那么今天圈圈就给大家分享28个shell脚本,希望对大家有帮助,脚本比较多比较长,一时间记不住可以先收藏,用到的时候及时拿出来比对一下即可!1. 轮询检测Apache状态并启用钉钉报警!/bin/bashs