qrcode.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div id="qrcode">
  3. <img :src="dataUrl" />
  4. </div>
  5. </template>
  6. <script>
  7. import Vue from 'vue';
  8. import QRCode from 'qrcode';
  9. export default {
  10. name: 'qrcode',
  11. props: {
  12. qrcode: null,
  13. },
  14. components: {},
  15. data: () => ({
  16. dataUrl: null,
  17. token: null,
  18. }),
  19. async mounted() {
  20. await this.initQrcode();
  21. },
  22. created() {},
  23. computed: {},
  24. methods: {
  25. async initQrcode() {
  26. // 创建二维码
  27. if (!this.qrcode) return;
  28. //二维码地址应该是变量,不过这里需要处理
  29. let uri = `${Vue.config.weixin.baseUrl}/qrcode/${this.qrcode}/scan`;
  30. if (uri.startsWith('/')) {
  31. uri = `${location.protocol}//${location.host}${uri}`;
  32. }
  33. this.dataUrl = await QRCode.toDataURL(uri);
  34. this.$stomp({
  35. [`/exchange/qrcode.login/${this.qrcode}`]: this.onMessage,
  36. });
  37. },
  38. onMessage(message) {
  39. console.log('receive a message: ', message.body);
  40. if (message.body == 'scaned') {
  41. try {
  42. this.$emit('toReturn', message);
  43. console.log('扫码登录成功');
  44. } catch (err) {
  45. console.log('扫码登录失败');
  46. console.error(err);
  47. }
  48. }
  49. },
  50. },
  51. };
  52. </script>
  53. <style lang="less" scoped></style>