下载二维码至钉盘

LinMeng
• 阅读 1181

后端生成二维码的普通文件流,前端接收后在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>
点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
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
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue