二维码生成 复制 下载

<template>
  <zl-dialog :show.sync="shows" :hide-submit-button="true" :title="title" width="600px">
    <template #footer>
      <span style="margin-right:10px">
        <el-button type="primary" size="small" @click="handleSubmit()">确定</el-button>
      </span>
    </template>
    <div class="mgt10">
      <el-divider content-position="left">方式一：链接或者二维码给来访者</el-divider>
      <div id="qrcodeID" class="mgl10 mgb40 pr-20 flex-heng flex-align-start 】">
        <div ref="qrcode" class="mgr10 qrcode"></div>
        <ul class="wd100">
          <li class="flex-heng">
            <el-input v-model="url" disabled="" placeholder="请输入内容"></el-input>
          </li>
          <li class="btn">
            <el-button type="primary" size="mini" class="" @click="downloadBtn">下载二维码</el-button>
            <el-button type="success" size="mini" class="mgl10" @click="handleCopy">复制链接</el-button>
          </li>
        </ul>
      </div>

      <el-divider content-position="left">方式二：给访者发短信</el-divider>
    </div>

  </zl-dialog>
</template>

<script>
import { handleData } from '@ztocwst/zcloud-ui'
import { URL, AUTH_CODE } from './configure'
import { deepClone, isEmpty } from '@/utils'
import QRCode from 'qrcodejs2'
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
      default: false
    },
    detail: {
      type: Object,
      default: () => {
        return {
          editState: 1,
          data: {},
          numberList: []
        }
      }
    },
    formOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      title: '分享',
      url: 'https//:www.baidu.com',

      info: {}
    }
  },
  computed: {
    shows: {
      get() {
        return this.show
      },
      set(newValue) {
        this.$emit('update:show', newValue)
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * @name: 回显编辑 初始化数据
     * @param {*}
     * @return {*}
     */
    init() {
      this.getQRCode()
    },

    handleCopy() {
      let oInput = document.createElement('input')
      oInput.value = this.url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInputCopyTemp'
      oInput.style.display = 'none'
      this.$message.success('复制成功')
    },

    downloadBtn() {
      const qrcode = document.getElementById('qrcodeID')
      const canvas = qrcode.querySelector('canvas')
      const imgurl = canvas.toDataURL('image/jpeg')
      const a = document.createElement('a')
      a.href = imgurl
      a.download = '访客登记二维码.png' // 图片名称
      a.click()
    },

    getQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrcode, {
          text: this.url,
          width: 250,
          height: 250,
          colorDark: '#333',
          colorLight: '#fff',
          correctLevel: QRCode.CorrectLevel.L
        })
      })
    },

    // 提交
    handleSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let params = deepClone(this.form)
          params.number = this.detail.numberList.join(',')
          this.Http(URL.audit, {
            apiNum: 0,
            jtPbsPurchaseInfoVo: params
          }).then((res) => {
            if (res.success) {
              this.$message.success(`${this.title}成功`)
              this.shows = false
              this.$emit('update')
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  margin-top: 44px
}
#qrcodeID ::v-deep img{
    width: 100px !important;
    height: 100px !important;
}
</style>

</style>