更新

package.json

@@ -12,17 +12,18 @@
     "axios": "^0.19.2",
     "bar": "^0.1.2",
     "core-js": "^3.6.4",
-    "echarts": "^4.7.0",
-    "element-ui": "^2.13.1",
+    "echarts": "^4.8.0",
+    "element-ui": "^2.13.2",
     "jsonwebtoken": "^8.5.1",
     "loadsh": "0.0.4",
-    "moment": "^2.25.3",
+    "moment": "^2.26.0",
     "naf-core": "^0.1.2",
+    "qrcodejs2": "0.0.2",
     "stomp": "^0.1.1",
     "vue": "^2.6.11",
-    "vue-meta": "^2.3.3",
-    "vue-router": "^3.1.6",
-    "vuex": "^3.1.3",
+    "vue-meta": "^2.3.4",
+    "vue-router": "^3.3.2",
+    "vuex": "^3.4.0",
     "wangeditor": "^3.1.1"
   },
   "devDependencies": {

src/components/qrcode.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="qrcode">
+    <img :src="dataUrl" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import QRCode from 'qrcode';
+export default {
+  name: 'qrcode',
+  props: {
+    qrcode: null,
+  },
+  components: {},
+  data: () => ({
+    dataUrl: null,
+    token: null,
+  }),
+  async mounted() {
+    await this.initQrcode();
+  },
+  created() {},
+  computed: {},
+  methods: {
+    async initQrcode() {
+      // 创建二维码
+      if (!this.qrcode) return;
+      let uri = `${Vue.config.weixin.baseUrl}/qrcode/${this.qrcode}/scan`;
+      if (uri.startsWith('/')) {
+        uri = `${location.protocol}//${location.host}${uri}`;
+      }
+      this.dataUrl = await QRCode.toDataURL(uri);
+      this.$stomp({
+        [`/exchange/qrcode.login/${this.qrcode}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      console.log('receive a message: ', message.body);
+      if (message.body == 'scaned') {
+        try {
+          this.$emit('toReturn', message);
+          console.log('扫码登录成功');
+        } catch (err) {
+          console.log('扫码登录失败');
+          console.error(err);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/store/index.js

@@ -26,6 +26,7 @@ import comment from '@common/store/live/comment';
 import tranaudit from '@common/store/market/tranaudit';
 import expertsuser from '@common/store/market/exportuser';
 import productpact from '@common/store/market/productpact';
+import wxchattest from './user/wxchattest';
 import users from './user';
 Vue.use(Vuex);
 
@@ -59,5 +60,6 @@ export default new Vuex.Store({
     expertsuser,
     users,
     productpact,
+    wxchattest,
   },
 });

src/store/user/wxchattest.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  wxchattestInfo: `/api/auth/wxchattest`,
+};
+const state = () => ({});
+const mutations = {
+  setUser(state, payload) {
+    if (payload) {
+      state.user = payload;
+      sessionStorage.setItem('user', JSON.stringify(payload));
+    } else {
+      let user = sessionStorage.getItem('user');
+      if (user) state.user = JSON.parse(user);
+      else return false;
+    }
+  },
+};
+
+const actions = {
+  async login({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.wxchattestInfo}`, payload);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/userCenter/basicInfo/index.vue

@@ -3,6 +3,10 @@
     <el-row>
       <el-col :span="24">
         <el-col :span="24" class="leftTop"> <span>|</span> <span>基本信息</span> </el-col>
+        <el-col :span="24" class="qrcode">
+          <span>绑定微信</span>
+          <div class="qrcodeInfo" ref="qrCodeUrl"></div>
+        </el-col>
         <el-col :span="24" class="info">
           <el-form ref="form" :model="form" :rules="rules" label-width="120px">
             <el-form-item label="用户名称" prop="name">
@@ -140,6 +144,7 @@ import upload from '@/components/uploadone.vue';
 const { mapActions: login } = createNamespacedHelpers('login');
 const { mapActions: market } = createNamespacedHelpers('market');
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+import QRCode from 'qrcodejs2';
 export default {
   name: 'index',
   props: {},
@@ -288,6 +293,19 @@ export default {
     uploadSuccess({ type, data }) {
       this.$set(this.form, `${type}`, data.uri);
     },
+    creatQrCode() {
+      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        text: 'http://free.liaoningdoupo.com/api/auth/wxchattest?redirect_uri=http://localhost:8002/bind&type=1&uid=5ecc7df9c1707e1c3054204f&openid=05', // 需要转换为二维码的内容
+        width: 100,
+        height: 100,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    },
+  },
+  mounted() {
+    this.creatQrCode();
   },
   computed: {
     ...mapState(['user']),
@@ -317,4 +335,20 @@ export default {
 .info {
   padding: 0 40px 0 0;
 }
+.qrcode {
+  padding: 10px 45px;
+  span {
+    float: left;
+    width: 85px;
+    font-size: 16px;
+    color: #606266;
+    padding: 50px 0;
+  }
+  .qrcodeInfo {
+    float: left;
+    width: 100px;
+    border: 1px solid #ccc;
+    padding: 10px;
+  }
+}
 </style>