update

components/qrcode.vue

@@ -10,7 +10,9 @@ import QRCode from 'qrcode';
 export default {
   name: 'qrcode',
   props: {
-    qrcode: null,
+    exchange: null,
+    qrcode: { type: String, required: true },
+    config: { type: Object, required: true },
     uri: { type: String },
   },
   components: {},
@@ -26,28 +28,23 @@ export default {
   methods: {
     async initQrcode() {
       // 创建二维码
-      if (!this.qrcode) return;
+      if (!this.exchange) return;
       //二维码地址应该是变量,不过这里需要处理
-      let uri = `${Vue.config.weixin.baseUrl}${this.uri}`;
+      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/qrcode.login/${this.qrcode}`]: this.onMessage,
+        [`/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);
-      if (message.body == 'scaned') {
-        try {
-          this.$emit('toReturn', message);
-          console.log('扫码登录成功');
-        } catch (err) {
-          console.log('扫码登录失败');
-          console.error(err);
-        }
-      }
+      this.$emit('toReturn', message);
     },
   },
 };

layout/admin/navBar.vue

@@ -37,7 +37,7 @@
     <el-dialog :visible.sync="wxDialog" title="绑定微信" width="30%" center :destroy-on-close="true">
       <el-row type="flex" justify="center">
         <el-col :span="24" style="text-align:center">
-          <img :src="dataUrl" />
+          <qrcode exchange="qrcode.bind" :uri="qrUri" :config="config" :qrcode="qrcode" @toReturn="toReturn"></qrcode>
         </el-col>
       </el-row>
     </el-dialog>
@@ -45,7 +45,9 @@
 </template>
 
 <script>
-import QRCode from 'qrcode';
+import Vue from 'vue';
+import '@frame/plugins/setting';
+import qrcode from '@frame/components/qrcode.vue';
 import dataForm from '@frame/components/form';
 import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import _ from 'lodash';
@@ -53,7 +55,7 @@ const { mapActions } = createNamespacedHelpers('login');
 export default {
   name: 'navBar',
   props: {},
-  components: { dataForm },
+  components: { dataForm, qrcode },
   data: () => ({
     weixin: require('@frame/assets/wechat.png'),
     dataUrl: '',
@@ -67,6 +69,9 @@ export default {
         { min: 6, message: '密码最少6位', trigger: 'blur' },
       ],
     },
+    qrUri: '',
+    config: {},
+    qrcode: '',
   }),
   created() {},
   computed: {
@@ -74,7 +79,7 @@ export default {
   },
   methods: {
     ...mapMutations(['deleteUser']),
-    ...mapActions(['login', 'update']),
+    ...mapActions(['login', 'update', 'getQrcode']),
     async toLogout() {
       this.deleteUser();
       this.$notify({
@@ -104,10 +109,19 @@ export default {
       if (this.$checkRes(res, '修改成功', '修改失败')) this.toClose();
     },
     async bind() {
-      let uri = `http://free.liaoningdoupo.com/api/train/authtest?redirect_uri=http://10.16.10.7:8001/confirm&uid=${this.user.id}&type=1`;
-      this.dataUrl = await QRCode.toDataURL(uri);
+      let res = await this.getQrcode();
+      this.$set(this, `qrcode`, res);
+      this.$set(this, `config`, { weixin: Vue.config.weixin, stomp: Vue.config.stomp });
+      let uri = `/api/train/authtest?redirect_uri=${Vue.config.weixin.target}/confirm&uid=${this.user.id}&type=1&qrcode=${res}`;
+      this.$set(this, `qrUri`, uri);
       this.wxDialog = true;
     },
+    toReturn(message) {
+      this.$notify({
+        type: 'success',
+        message: message.body,
+      });
+    },
   },
 };
 </script>

layout/register/login.vue

@@ -26,7 +26,9 @@
                   ></data-form>
                 </el-tab-pane>
                 <el-tab-pane label="扫码登录" name="second">
-                  扫码登录
+                  <el-row v-if="!loading" v-loading="loading" style="text-align:center">
+                    <qrcode exchange="qrcode.login" :uri="qrUri" :config="config" :qrcode="qrcode" @toReturn="toReturn"></qrcode>
+                  </el-row>
                 </el-tab-pane>
               </el-tabs>
             </el-col>
@@ -38,6 +40,9 @@
 </template>
 
 <script>
+import Vue from 'vue';
+import '@frame/plugins/setting';
+import qrcode from '@frame/components/qrcode.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 import dataForm from '@frame/components/form';
 import _ from 'lodash';
@@ -46,7 +51,7 @@ export default {
   name: 'login',
   metaInfo: { title: '登陆' },
   props: {},
-  components: { dataForm },
+  components: { dataForm, qrcode },
   data: () => ({
     loginBei: require('../../assets/bg.jpg'),
     activeName: 'first',
@@ -60,14 +65,32 @@ export default {
     },
     form: {},
     logoUrl: require('../../assets/logo.png'),
+    qrUri: '',
+    config: {},
+    qrcode: '',
+    loading: true,
   }),
-  created() {},
+  created() {
+    this.toConnection();
+  },
   computed: {},
   methods: {
-    ...mapActions(['login']),
+    ...mapActions(['login', 'getQrcode']),
     async handleSave({ data }) {
       let res = await this.login({ user: data, router: this.$router });
     },
+    async toConnection() {
+      let res = await this.getQrcode();
+      this.$set(this, `qrcode`, res);
+      this.$set(this, `config`, { weixin: Vue.config.weixin, stomp: Vue.config.stomp });
+      let uri = `/api/train/authtest?redirect_uri=${Vue.config.weixin.target}/confirm&type=2&qrcode=${res}`;
+      this.$set(this, `qrUri`, uri);
+      this.loading = false;
+    },
+    async toReturn(message) {
+      let openid = message.headers.openid;
+      let res = await this.login({ user: { openid: openid, qrcode: this.qrcode }, router: this.$router, isWx: true });
+    },
   },
 };
 </script>

package.json

@@ -8,11 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^5.4.3",
     "axios": "^0.19.2",
     "core-js": "^3.4.4",
     "element-ui": "^2.13.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",
+    "qrcode": "^1.4.4",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"

plugins/setting.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+Vue.config.weixin = {
+  // baseUrl: process.env.BASE_URL + 'weixin',
+  baseUrl: 'http://free.liaoningdoupo.com',
+  target: process.env.NODE_ENV === 'development' ? 'http://10.16.10.7:8001' : 'http://free.liaoningdoupo.com/mobile',
+};
+
+Vue.config.stomp = {
+  // brokerURL: 'ws://192.168.1.190:15674/ws',
+  brokerURL: '/ws', // ws://${location.host}/ws
+  connectHeaders: {
+    host: 'train',
+    login: 'visit',
+    passcode: 'visit',
+  },
+  // debug: true,
+  reconnectDelay: 5000,
+  heartbeatIncoming: 4000,
+  heartbeatOutgoing: 4000,
+};

store/login.js

@@ -9,13 +9,19 @@ const api = {
   user: id => `/api/train/user/update/${id}`,
   bind: `/api/train/user/bind`,
   userBind: `/api/train/user/userbind`,
+  connection: `/api/train/qrcode`,
+  wxCheck: `/api/train/wxcheck`,
+  wxLogin: `/api/train/wxlogin`,
 };
 const state = () => ({});
 const mutations = {};
 
 const actions = {
-  async login({ commit }, { user, router, path = '/', needReturn = false, typeCheck = true }) {
-    const res = await this.$axios.$post(`${api.interface}`, user);
+  async login({ commit }, { user, router, path = '/', needReturn = false, typeCheck = true, isWx = false }) {
+    let res;
+    //wx登陆,openid存在,user中是openid和qrcode;正常登陆,user中是mobile和passwd
+    if (isWx) res = await this.$axios.$post(`${api.wxLogin}`, user);
+    else res = await this.$axios.$post(`${api.interface}`, user);
     const setUser = (user, commit) => {
       localStorage.setItem('user', JSON.stringify(user));
       commit('setUser', user, { root: true });
@@ -68,6 +74,17 @@ const actions = {
     let res = await this.$axios.$post(`${api.userBind}`, payload);
     return res;
   },
+  async getQrcode({ commit }, payload) {
+    let res = await this.$axios.$get(`${api.connection}`);
+    if (res.errcode === 0) return res.data;
+    else {
+      console.warn('请求qrcode失败');
+    }
+  },
+  async wxCheck({ commit }, payload) {
+    let res = await this.$axios.$post(`${api.wxCheck}`, payload);
+    return res;
+  },
 };
 export default {
   namespaced: true,