frame/components/qrcode.vue

<template>
  <div id="qrcode">
    <img :src="dataUrl" />
  </div>
</template>

<script>
import Vue from 'vue';
import QRCode from 'qrcode';
export default {
  name: 'qrcode',
  props: {
    exchange: null,
    qrcode: { type: String, required: true },
    config: { type: Object, required: true },
    uri: { type: String },
  },
  components: {},
  data: () => ({
    dataUrl: null,
    token: null,
  }),
  async mounted() {
    await this.initQrcode();
  },
  created() {},
  computed: {},
  methods: {
    async initQrcode() {
      // 创建二维码
      if (!this.exchange) return;
      //二维码地址应该是变量,不过这里需要处理
      let uri = `${this.config.weixin.baseUrl}${this.uri}`;
      if (uri.startsWith('/')) {
        uri = `${location.protocol}//${location.host}${uri}`;
      }
      this.dataUrl = await QRCode.toDataURL(uri);

      this.$stomp({
        [`/exchange/${this.exchange}/${this.qrcode}`]: this.onMessage,
      });
      console.log(`/exchange/${this.exchange}/${this.qrcode}`);
      console.log(uri);
    },
    onMessage(message) {
      console.log('receive a message: ', message.body);
      this.$emit('toReturn', message);
    },
  },
};
</script>

<style lang="less" scoped></style>