qrCode二维码生成器

        <el-form-item label="签名" class="manual-sign-area" v-if="bussinessInfo.needManuallySigned">
          <template v-if="!form.sign">
            <div class="code-area">
              <canvas ref="manual_sign" id="manual_sign" class="manual-sign"></canvas>
              <span class="expire" v-if="manualSignInfo.now >= manualSignInfo.total" @click="makeupQrcode">二维码已失效<br/>点击刷新</span>
            </div>
            <span class="manual-sign-hint">{{manualSignInfo.hint}}</span>
          </template>
          <template v-else>
            <div class="code-area-sign">
              <img class="sign-img" :src="`data:image/jpeg;base64,${form.sign}`"/>
            </div>
            <span class="sign-rewrite-handle" @click="rewriteHandler">重新输入</span>
          </template>
        </el-form-item>

<script>
import Types from 'vue-types';
import { mapState } from 'vuex';
import QRCode from 'qrcode';
import capticalUtil from '@c/utils/capital.js';
import { queryManualSign } from '@inv/services/bpm/flow/approvalDetail';
import md5 from 'js-md5';
export default {
  components: {
    MemberSelect: () => import('./select.vue'), // Select组件
  },
  props: {
    currentBussinessInfo:{
      default:null,
    },
    buttonType: {
      default:null
    }
  },
  data() {
      manualSignInfo:{
        hint: '请在app上签名确认',
        timeStamp: '',
        intervalId: 0,
        total:  1, //3秒轮询一次，轮5分钟共 100次
        now: 0,
        random: '', //随机码
      },

    }
  },
  computed: {
    bussinessInfo() {
      return this.currentBussinessInfo || {};
      
    },
    ...mapState({
      userName: state => state.user.firstName,
      userId: state => state.user.userId,
      tenantId: state => state.user.tenantId,
    }),
  },
  methods: {
    getId(length){
  		return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
	},
    /**
     * 验证二维码是否已经校验
     */
    async verifyQrcode() {
      this.manualSignInfo.now ++;
      if(this.manualSignInfo.now >= this.manualSignInfo.total) {
        clearInterval(this.manualSignInfo.intervalId);
        return;
      }
      return
      const res = await queryManualSign({
        key: this.manualSignInfo.random
      });
      if(res.code == 0) {
        if(res.result) {
          this.form.sign = res.result;
          this.manualSignInfo.hint = '签名成功';
          clearInterval(this.manualSignInfo.intervalId);
        }
      } else {
        kr.ui.error(res.message);
      }
    },
    /**
     * 构造二维码url
     */
    makeupQrcodeUrl() {
      const isLocal = ['0.0.0.0', 'localhost', '127.0.0.1'].some((origin) => location.origin.includes('localhost'));
      const origin = isLocal ? 'https://zkcx.jingdata.com': location.origin;
      const md5Str = md5(this.tenantId.toString() + this.userId + origin);

      this.manualSignInfo.timeStamp = +(new Date()) + 1000 * 5; //5分钟有效期
      this.manualSignInfo.random = this.getId(12);

      return JSON.stringify({
        timeStamp: this.manualSignInfo.timeStamp,
        encrypt: md5Str,
        random: this.manualSignInfo.random,
      });
    },
    /**
     * 构造二维码
     */
    makeupQrcode(){
      const ref = this.$refs['manual_sign'];
      if(this.currentBussinessInfo.needManuallySigned && ref) {
        clearInterval(this.manualSignInfo.intervalId);
        this.manualSignInfo.now = 0;
        this.manualSignInfo.hint = '请在app上签名确认';
        QRCode.toCanvas(ref,
          this.makeupQrcodeUrl(),
          {
            margin: 0,
            width: 150
          },
          (error) => {
          if (error) {
            kr.ui.error(error.message);
          }
        });
        this.manualSignInfo.intervalId = setInterval(() => {
          this.verifyQrcode();
        }, 3000);
      }
    },
    /**
     * 重新输入
     */
    rewriteHandler() {
      // this.form.sign = null;
      //  修复手签签名完成后重签无效的问题
      this.form = {
        ...this.form,
        sign: null
      };


    /**
     * [submit 对外抛出confirmDialog事件，表单数据为参数]
     */
    async submit() {
      const valid = await this.$refs[this.refName].validate();
      if (valid) {
        const data = JSON.parse(JSON.stringify(this.form));
        Object.assign(data, this.dialogParams.additionalData);
        this.$emit('confirmDialog', data);
        this.$refs[this.refName].resetFields();
        return data;
      } else {
        this.$message.warning('您还有未填写的信息');
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.currentBussinessInfo && this.currentBussinessInfo.needManuallySigned) {
        this.makeupQrcode();
      }
    });
  },
  beforeDestroy() {
    clearInterval(this.manualSignInfo.intervalId);
  },
}
</script>