FE-V2-PC/src/components/qrCodeDialog/index.vue

<!--  公共二维码dialog组件

1.引入方式

  <qr-code-dialog v-if="qrCodeDialogType" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>

  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"

  components: {
    qrCodeDialog
  },

2.必要参数

  qrCodeDialogType:false,
  qrCodeDialogData:{},

3.必要方法

  //二维码组件开关
  qrCodeDialogButton(type,id,name){
    if(type == 1){
      this.$set(this,'qrCodeDialogData',{
        type:'chemicalsCabinet',                                  //二维码类型 用于区分二维码功能类型
        parameter:id,                                             //二维码参数
        name:name,                                                //二维码名称用于下载时命名
      });
      this.$set(this,'qrCodeDialogType',true);
    }else{
      this.$set(this,'qrCodeDialogType',false);
    }
  },

-->

<template>
  <div>
    <!--添加/编辑弹窗-->
    <el-dialog class="trainingCourseAddDialog" title=' 1'
               :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogType" v-if="dialogType" width="394px">
      <div class="trainingCourseAddDialog-title-box">
        <p></p>
        <p class="el-icon-close" @click="buttonClick"></p>
      </div>
      <vue-qr v-if="vueQrImgType" ref="vueQr" class="trainingCourseAddDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
      <p class="trainingCourseAddDialog-button-p" @click="buttonClick(1)">下载二维码</p>
    </el-dialog>
  </div>
</template>

<script>
  import vueQr from 'vue-qr'
  export default {
    name: 'qrCodeDialog',
    components: {
      vueQr
    },
    props:{
      qrCodeDialogData:{},
    },
    data(){
      return{
        dialogType:true,
        vueQrCodeData:null,
        vueQrImgType:false,
        identification: localStorage.getItem('codeOnlineAdd'),            //二维码规则 服务器域名,需与微信后台开发配置内一致.
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      //初始化
      initialize(){
        this.$set(this,'vueQrCodeData', this.identification+'?code='+this.qrCodeDialogData.parameter+'&type='+this.qrCodeDialogData.type);
        this.$set(this,'vueQrImgType',true);
      },
      buttonClick(type){
        if(type == 1){
          let base64Str = this.$refs.vueQr.imgUrl;
          let aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = base64Str;
          aLink.download = this.qrCodeDialogData.name+"-二维码.png";
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
        }else{
          this.$parent.qrCodeDialogButton();
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .trainingCourseAddDialog{
    font-weight:500;
    .trainingCourseAddDialog-title-box{
      display: flex;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        font-size:18px;
        width:60px;
        height:60px;
        text-align: center;
        line-height:60px;
        color:#999;
        cursor: pointer;
      }
    }
    .trainingCourseAddDialog-vue-qr{
      display: block!important;
      height:200px;
      width:200px;
      margin:20px auto 27px;
    }
    .trainingCourseAddDialog-button-p{
      width:150px;
      height:40px;
      line-height:40px;
      margin:0 auto 30px;
      color:#fff;
      background:#0045AF;
      border-radius:10px;
      text-align: center;
      cursor: pointer;
    }
    ::v-deep .el-dialog__header{
      display: none;
    }
    ::v-deep .el-dialog__body{
      padding:0;
    }
  }
</style>