下载二维码至钉盘

LinMeng 等级 781 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>
收藏
评论区

相关推荐

下载二维码至钉盘
后端生成二维码的普通文件流,前端接收后在img标签中渲染 将二维码下载至钉盘通过接口获取后端返回mediaId字段,采用“dingtalkjsapi”插件中的方法下载 注意:dingTalkFun中,除了corId和mediaId必传外,文件名name也是必须要传的!!! <template <div class"onlineSign"
我们离Google SRE还有多远?
经过几年的挣扎和讨论(确切说应该是3年),老板在钉钉群以通告的方式正式告别伴随我们多年的职业Title PE,改名为SRE。(后续以A SRE区别Google SRE) (https://imghelloworld.osscnbeijing.aliyuncs.com/188fb7b287badee91332a9f90c3af347.p
Docker最全教程之Go实战,墙裂推荐(十八)
前言 与其他语言相比,Go非常值得推荐和学习,真香!为什么?主要是可以直接编译成机器代码(性能优越,体积非常小,可达10来M,见实践教程图片)而且设计良好,上手门槛低。本篇主要侧重于讲解了Go语言的优势,并且提供了一个推送钉钉消息的Demo。最后由于技
java接入钉钉机器人(带源码)
#### 前言 登录钉钉网页: [https://im.dingtalk.com](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fim.dingtalk.com) 登录说明文档地址,以备随时查询: [https://ding-doc.dingtalk.com/doc#/servera
5分钟快速接入钉钉实现钉钉考勤
![](https://img2020.cnblogs.com/blog/2029875/202007/2029875-20200714151949917-313112373.png) ### 一、前言 由于今年疫情影响,假期的无限延长让大家都不得不进行线上办公,说到线上办公就毫无疑问,钉钉是这个疫情假期最大的赢家,APP的火热程度以及下载量甚至压过了微
IM群聊消息的已读未读功能在存储空间方面的实现思路探讨
本文由作者“fzully”投稿,收录时,有较大范围修订和改动,感谢原作者的分享。 1、引言 ==== IM系统中,特别是在企业应用场景下,消息的已读未读状态是一个强需求。 以阿里的钉钉为例,钉钉的产品定位是用于商务交流,其“强制已读回执”功能,让职场人无法再“假装不在线”、“假装没收到”。更有甚者,钉钉的群聊“强制已读回执”功能,甚至能够知道谁读了消息
509道Java面试题解析:2020年最新Java面试题
《Java面试全解析》是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了。 我本人是 2009 年参加编程工作的,一路上在技术公司摸爬滚打,前几年一直在上海,待过的公司有 360 和游久游戏,因为自己家庭的原因,放弃了阿里钉钉团队的 offer 回到了西
Alibaba Cloud Linux 2 LTS 正式发布,提供更高性能和更多保障
Alibaba Cloud Linux 2 LTS版本发布后,阿里云将会为该版本提供长达5年的软件维护、问题修复服务。从2019-03-27开始到2024-03-31结束。包括: * **免费的服务和支持:**Alibaba Cloud Linux 2的客户可以通过阿里云工单系统、钉钉或者社区等途径来寻求阿里云的免费支持服务。 * **软件持续更新
Chatops实践之Hubot +钉钉实现自动创建Jenkins Job
使用这个技术的原因 ========= 我目前每天有一个小时要给业务创建Jenkins 的Job,他的流程其实很简单,研发把Git仓库的地址发给我,我把Git仓库写到Jenkins里,然后Jenkins\_job的命名规则为Git库地址+项目名称(用jenkins插件做权限管理用的规则),在把jenkins的Trigger地址在Gialb 的webhook
Linux系统如何迁移至LVM磁盘
#### 今天遇到一个问题,算是比较严重的把。就是要把当前系统转移到 LVM 卷里面去,下面有一些发生过程介绍。  #### 不感兴趣可以直接跳过,看实战部分《如何迁移系统至LVM卷》 朋友今天突然找我,说是要把系统的根分区磁盘扩大。接到这个问题,我马上开始查看下系统情况。是一台 CentOS 6.6 的系统,有俩块磁盘分别 vda1 是 15G 根,v
Prometheus部署+邮箱告警+企业微信告警+钉钉告警
Prometheus部署+邮箱报警+企业微信报警+钉钉报警 ============================= #### 1 部署Prometheus server ###### 1.1 下载二进制包 $ wget https://github.com/prometheus/prometheus/releases/download/v2
Python 自动化发送钉钉消息
在进行Python截取网络报表并发送钉钉群过程中,碰到一些问题,也用到一些工具,在这里做一下简单总结。整个过程归纳如图: ![](https://img2018.cnblogs.com/blog/840488/201906/840488-20190625123504622-1532994586.png) 1 版本配置 ====== windows 10
SpringBoot + Redisson实现分布式锁
**一、什么是分布式?** ------------- 要想说什么是分布式,那么首先要知道分布式之前的系统是什么样的架构,之前的架构又存在什么样的问题? **单体架构** 分布式之前就是单体架构,单体架构顾名思义就是将所有的业务功能打包在一个应用中,然后部署在服务器上。如果我们把单体架构比作一个汽车工厂,那么从汽车发动机到汽车上的一个螺丝钉都需要由它
SpringBoot admin+Eureka+钉钉通知 实现微服务监控
SpringBoot admin+Eureka+钉钉通知 ============================ 一、效果 ---- ###### 登录账号+密码 ![](https://raw.githubusercontent.com/wangjiafang/PicGo/master/img/20191018102612.png) ######
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
Vue 仿钉钉流程图(流程节点绘制 vue+Ant Design of Vue) ======================================== #### 仿钉钉流程图 Api包括:一维数组传参,获取单节点数据,返回所有节点组成的一位数组 生成每个节点的父节点Id集合 很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理