完成扫码登录

.env.development

@@ -16,5 +16,6 @@ VUE_APP_COMPANY_HEALTH_XY_URL=http://wisdomhousewechat.sudaonline.net/prevention
 VUE_APP_PUNCHLOCATION_URL=http://yktwechat.xiaoxinda.com/#/health/codeScene
 
 #绑定微信
+VUE_APP_SCAN_CODE_LOGIN=7001
 VUE_APP_BIND_WECHAT_CODE=8001
 VUE_APP_BIND_PERSON_WECHAT_CODE=9001

.env.production

@@ -18,5 +18,6 @@ VUE_APP_COMPANY_HEALTH_XY_URL=http://wisdomhousewechat.sudaonline.net/prevention
 VUE_APP_PUNCHLOCATION_URL=http://yktwechat.xiaoxinda.com/#/health/codeScene
 
 #绑定微信
+VUE_APP_SCAN_CODE_LOGIN=7000
 VUE_APP_BIND_WECHAT_CODE=8000
 VUE_APP_BIND_PERSON_WECHAT_CODE=9000

.env.test

@@ -19,5 +19,6 @@ VUE_APP_COMPANY_HEALTH_XY_URL=http://wisdomhousewechat.sudaonline.net/prevention
 VUE_APP_PUNCHLOCATION_URL=http://yktwechat.xiaoxinda.com/#/health/codeScene
 
 #绑定微信
+VUE_APP_SCAN_CODE_LOGIN=7001
 VUE_APP_BIND_WECHAT_CODE=8001
 VUE_APP_BIND_PERSON_WECHAT_CODE=9001

src/api/sys/user.js

@@ -64,7 +64,34 @@ function userInfo() {
   return request.get(constant.serverUrl + "/userInfo");
 }
 
+function bindWechat(userId) {
+  var formData = new FormData();
+
+  formData.append("expire_seconds", "3600");
+  formData.append("action_name", "QR_STR_SCENE");
+  formData.append("scene_str", process.env.VUE_APP_BIND_WECHAT_CODE + "," + userId);
+
+  return request.post(constant.serverUrl + "/wechat/qrcode/create", formData);
+}
+
+function scanLogin(rnd) {
+  var formData = new FormData();
+
+  formData.append("expire_seconds", "3600");
+  formData.append("action_name", "QR_STR_SCENE");
+  formData.append("scene_str", process.env.VUE_APP_SCAN_CODE_LOGIN + "," + rnd);
+
+  return request.post(constant.serverUrl + "/wechat/qrcode/create", formData);
+}
+
+function queryScanResult(rnd){
+  var formData = new FormData();
+  formData.append("rnd", rnd);
+
+  return request.post(constant.serverUrl + "/qrcode/queryScanResult", formData);
+}
+
 export default {
   login, pageList, create, edit, add, update, remove, batchRemove, userInfo,
-  changeUserPassword,changeLoginPassword
+  changeUserPassword,changeLoginPassword,bindWechat,scanLogin,queryScanResult
 }

src/store/modules/user.js

@@ -14,7 +14,7 @@ const mutations = {
 
 const actions = {
     login({ commit }, userInfo) {
-        const { userName, password } = userInfo
+        const { userName, password } = userInfo;
 
         return new Promise((resolve, reject) => {
             userApi.login({ userName: userName.trim(), password: password }).then(response => {

src/views/Login.vue

@@ -5,56 +5,70 @@
         <img src="../assets/logo.png" width="269" height="65"/>
       </h3>
       <el-card class="box-card">
-        <el-form
-          class="card-box"
-          autocomplete="on"
-          :model="loginForm"
-          :rules="loginRules"
-          ref="loginForm"
-          label-position="left"
-        >
-          <el-form-item prop="userName">
-            <i class="el-icon-user-solid"></i>
-            <el-input
-              name="userName"
-              type="text"
-              v-model="loginForm.userName"
+        <el-tabs v-model="activeName" @tab-click="handleTabClick">
+          <el-tab-pane label="用户名登录" name="first">
+            <el-form
+              class="card-box"
               autocomplete="on"
-              placeholder="请输入用户名"
-            />
-          </el-form-item>
-          <el-form-item prop="password">
-            <i class="el-icon-lock"></i>
-            <el-input
-              name="password"
-              :type="pwdType"
-              @keyup.enter.native="handleLogin"
-              v-model="loginForm.password"
-              autocomplete="on"
-              placeholder="请输入密码"
-            />
-            <i class="el-icon-view" @click="showPwd"></i>
-          </el-form-item>
-          <el-button
-            type="primary"
-            style="width:100%;margin-bottom:30px;"
-            :loading="loading"
-            @click.native.prevent="handleLogin"
-            class="blue-btn"
-          >登录</el-button>
-        </el-form>
+              :model="loginForm"
+              :rules="loginRules"
+              ref="loginForm"
+              label-position="left"
+            >
+              <el-form-item prop="userName">
+                <i class="el-icon-user-solid"></i>
+                <el-input
+                  name="userName"
+                  type="text"
+                  v-model="loginForm.userName"
+                  autocomplete="on"
+                  placeholder="请输入用户名"
+                />
+              </el-form-item>
+              <el-form-item prop="password">
+                <i class="el-icon-lock"></i>
+                <el-input
+                  name="password"
+                  :type="pwdType"
+                  @keyup.enter.native="handleLogin"
+                  v-model="loginForm.password"
+                  autocomplete="on"
+                  placeholder="请输入密码"
+                />
+                <i class="el-icon-view" @click="showPwd"></i>
+              </el-form-item>
+              <el-button
+                type="primary"
+                style="width:100%;margin-bottom:30px;"
+                :loading="loading"
+                @click.native.prevent="handleLogin"
+                class="blue-btn"
+              >登录</el-button>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="微信扫码登录" name="second">
+            <div style="text-align:center;" v-loading="loading">
+              <img :src="qrcodeUrl" style="width:300px;fit-object:cover;"/>
+              <div>扫码后，页面将自动跳转......</div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </el-card>
     </div>
   </div>
 </template>
 <script>
+import userApi from "@/api/sys/user";
 import Constant from "@/constant";
 import { Message } from "element-ui";
+import { setToken} from '@/utils/auth'
 
 export default {
   name: "login",
   data() {
     return {
+      activeName: "first",
+      rnd : Math.ceil(Math.random()*1000000),
       loginForm: {
         userName: "",
         password: ""
@@ -75,7 +89,9 @@ export default {
       },
       pwdType: "password",
       loading: false,
-      redirect: undefined
+      redirect: undefined,
+      qrcodeUrl: "",
+      queryScanResultHandler: 0
     };
   },
   watch: {
@@ -128,7 +144,52 @@ export default {
         }
       });
     },
-    afterQRScan() {}
+    showQrcode() {
+      this.loading = true;
+
+      userApi.scanLogin(this.rnd).then(response=>{
+        var jsonData = response.data;
+        this.loading = false;
+
+        if(jsonData.result){
+          this.qrcodeUrl = jsonData.data;
+        }
+        else{
+          this.$message.warning(jsonData.message);
+        }
+      })
+
+      this.queryScanResult();
+    },
+    queryScanResult() {
+      userApi.queryScanResult(this.rnd).then(response=>{
+        var jsonData = response.data;
+
+        if(jsonData.result){
+          var token = jsonData.data;
+
+          //写vuex状态 
+          this.$store.commit("user/SET_TOKEN", token);
+          
+          //写cookie
+          setToken(token);
+
+          this.$router.push({ path: "/home" });
+        }
+        else{
+          if(this.activeName=="second"){
+            setTimeout(() => {
+              this.queryScanResult();
+            }, 3000);
+          }
+        }
+      });
+    },
+    handleTabClick(tab, event) {
+      if(this.activeName=='second'){
+        this.showQrcode();
+      }
+    }
   },
   created() {
     // window.addEventListener('hashchange', this.afterQRScan)