feat: 登录功能

src/axios/api.js

@@ -22,6 +22,7 @@ import search from "./module/search.js"
 import service from "./module/service.js"
 import knowledge from "./module/knowledge.js"
 import news from "./module/news.js"
+import user from "./module/user.js"
 
 const api = {
     home,
@@ -32,6 +33,7 @@ const api = {
     knowledge,
     news,
     getCaptcha,
+    user,
 }
 
 export default api

src/axios/module/user.js

+import {
+	POST
+} from "../fetch.js"
+
+const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
+
+// 用户登录
+const login = (params = {}) => {
+	return POST(`${Prefix}/office/loglogin/api/login`, params)
+}
+
+export default {
+	login,
+}

src/views/User/index.vue

@@ -62,7 +62,7 @@ export default {
     display: flex;
     flex: 0 0 112px;
     justify-content: center;
-    padding-top: 58px;
+    //padding-top: 58px;
     width: 100%;
     text-align: left;
 
@@ -123,7 +123,7 @@ export default {
   .gs-entry {
     .header{
       flex: 0 0 60px;
-      padding-top: 20px;
+      //padding-top: 20px;
       padding-bottom: 10px;
 
       .content {

src/views/User/login.vue

 <template>
   <EntryCard title="网站用户登录">
     <div class="login">
-      <el-tabs v-model="activeName" class="tab-no-bottom">
-        <el-tab-pane label="用户名登录" name="first">
+      <div class="entry-login-title">用户名登录</div>
       <el-form :model="userForm" status-icon ref="userLoginFormRef">
         <el-form-item prop="userName"
                       :rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]"
         >
           <el-input v-model="userForm.userName"
-                        placeholder="请输入用户名/条码卡号(test)"></el-input>
+                    placeholder="请输入用户名/条码卡号"></el-input>
         </el-form-item>
 
-            <el-form-item prop="password"
+        <el-form-item prop="passWord"
                       :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
         >
           <el-input type="password"
-                        v-model="userForm.password"
-                        placeholder="请输入密码(test)"
+                    v-model="userForm.passWord"
+                    placeholder="请输入密码"
                     autocomplete="off"></el-input>
         </el-form-item>
 
         <el-form-item class="validate-append"
-                          prop="validateCode"
+                      prop="verification"
                       :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
         >
           <el-input
-                  v-model="userForm.validateCode"
+              v-model="userForm.verification"
               placeholder="请输入验证码"
           >
-                <template slot="append"><img src="../../assets/image/validate.jpg" alt=""></template>
+            <template slot="append"><img :src="captchaPath" style="cursor: pointer" @click="getCaptcha" alt="">
+            </template>
           </el-input>
         </el-form-item>
 
@@ -46,45 +46,14 @@
           <el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
         </el-form-item>
       </el-form>
-        </el-tab-pane>
-
-        <el-tab-pane label="手机号登录" name="second">
-          <el-form :model="mobileForm" status-icon>
-            <el-form-item>
-              <el-input v-model="mobileForm.mobile"
-                        placeholder="请输入手机号"></el-input>
-            </el-form-item>
-
-            <el-form-item>
-              <el-input
-                  v-model="mobileForm.validateCode"
-                  placeholder="请输入短信验证码"
-              >
-                <template slot="append">
-                  <el-button v-if="!hasSent" type="primary" @click.stop="sendValidateCode">发送验证码</el-button>
-                  <el-button disabled v-else>
-                    发送验证码({{ time }}S)
-                  </el-button>
-                </template>
-              </el-input>
-            </el-form-item>
-
-            <el-form-item>
-              <el-button type="primary" @click="loginByMobile" style="width: 100%">登 录</el-button>
-            </el-form-item>
-
-            <el-form-item class="bottom-btn">
-              <el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-      </el-tabs>
     </div>
   </EntryCard>
 
 </template>
 
-<script>import EntryCard from './entry-card.vue'
+<script>
+import EntryCard from './entry-card.vue'
+import {getUUID} from "@/utils/utils";
 
 export default {
   name: "login",
@@ -99,37 +68,58 @@ export default {
       activeName: 'first',
       userForm: {
         userName: '',
-        password: '',
-        validateCode: ''
-      },
-      mobileForm: {
-        mobile: '',
-        validateCode: ''
+        passWord: '',
+        verification: ''
       },
+      captchaPath: '',
+      uuid: '',
+      captcha: '',
+      errorMsg: '',
     }
   },
+  created() {
+    this.getCaptcha();
+  },
   methods: {
+    getCaptcha() {
+      this.uuid = getUUID()
+      const query = {
+        uuid: this.uuid
+      };
+      this.$api.getCaptcha(query).then((res) => {
+        this.captchaPath = window.URL.createObjectURL(res.body);
+      });
+    },
     loginByUser() {
       this.$refs['userLoginFormRef'].validate((valid) => {
         if (valid) {
-          if (this.userForm.validateCode.toLowerCase() === 'kjjj') {
-            if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
-              localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'}))
-              this.$router.push({path: '/MyManage/UnVerify/index'})
-            } else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') {
-              localStorage.setItem('gs-user', JSON.stringify({type: 'verify'}))
-              this.$router.push({path: '/MyManage/SystemMember/index'})
-            } else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') {
-              localStorage.setItem('gs-user', JSON.stringify({type: 'admin'}))
-              this.$router.push({path: '/MyManage/admin/check'})
-            } else {
-              this.userLoginError = '用户名或密码不正确！'
-              this.showUserLoginError = true;
-            }
-          } else {
-            this.userLoginError = '验证码不正确！'
+          // if (this.userForm.validateCode.toLowerCase() === 'kjjj') {
+          //   if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
+          //     localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'}))
+          //     this.$router.push({path: '/MyManage/UnVerify/index'})
+          //   } else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') {
+          //     localStorage.setItem('gs-user', JSON.stringify({type: 'verify'}))
+          //     this.$router.push({path: '/MyManage/SystemMember/index'})
+          //   } else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') {
+          //     localStorage.setItem('gs-user', JSON.stringify({type: 'admin'}))
+          //     this.$router.push({path: '/MyManage/admin/check'})
+          //   } else {
+          //     this.userLoginError = '用户名或密码不正确！'
+          //     this.showUserLoginError = true;
+          //   }
+          // } else {
+          //   this.userLoginError = '验证码不正确！'
+          //   this.showUserLoginError = true;
+          // }
+          this.$api.user.login({
+            ...this.userForm
+          }).then(res => {
+            console.log(res)
+            if (!res.success) {
+              this.userLoginError = res.returnMsg || '用户名或密码不正确！'
               this.showUserLoginError = true;
             }
+          })
         } else {
           console.log('error submit!!');
           return false;
@@ -137,9 +127,6 @@ export default {
       });
 
     },
-    loginByMobile() {
-
-    },
     sendValidateCode() {
       if (this.mobileForm.mobile === '') {
         this.$message({type: 'error', message: '请输入手机号码'});
@@ -163,6 +150,14 @@ export default {
 .login {
   width: 360px;
 
+  .entry-login-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: $theme-color1;
+    margin-bottom: 44px;
+    text-align: center;
+  }
+
   .el-form {
 
     .validate-append .el-input-group__append {