'学生登录'

src/api/user.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-13 10:11:24
+ * @Last Modified time: 2023-03-17 18:38:05
  */
 import request from '@/utils/request'
 
@@ -24,9 +24,9 @@ export function login(data) {
 }
 
 //获取邮件
-export function getCode(data){
+export function getCode(data) {
   return request({
-    url: 'student/mail/code',
+    url: '/student/mail/code',
     method: 'post',
     data
   })
@@ -58,7 +58,7 @@ export function getResults(params) {
 }
 
 //开始考试详情
-export function getResultsData(id,params) {
+export function getResultsData(id, params) {
   return request({
     url: `/student/test_results/${id}`,
     method: 'get',
@@ -67,15 +67,16 @@ export function getResultsData(id,params) {
 }
 
 //学员拍照上传考试结果
-export function getPhotoResults(id) {
+export function getPhotoResults(id, data) {
   return request({
     url: `/student/test_results/imageUpload/${id}`,
     method: 'post',
+    data
   })
 }
 
 //提交答题结果
-export function uploadTestResults(id,data) {
+export function uploadTestResults(id, data) {
   return request({
     url: `/student/test_results/${id}`,
     method: 'put',
@@ -91,6 +92,35 @@ export function viewExamResults(id) {
   })
 }
 
+//注册
+export function userLogon(data) {
+  return request({
+    url: '/student/auth/sign_up',
+    method: 'post',
+    data
+  })
+}
+
+//账号密码登录
+export function accountLogin(data) {
+  return request({
+    url: '/student/auth/login',
+    method: 'post',
+    data
+  })
+}
+
+//获取省市信息
+export function getCityIntfo(data) {
+  return request({
+    url: '/api/treeprovince',
+    method: 'post',
+    data
+  })
+}
+
+
+
 export function logout() {
   return request({
     url: '/vue-element-admin/user/logout',

src/components/ViewHeader/index.vue

@@ -55,9 +55,5 @@ export default {
       height: 100%;
     }
   }
-
-  .btn {
-    // background-color: $defaultColor;
-  }
 }
 </style>

src/main.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-07 16:07:17
+ * @Last Modified time: 2023-03-20 15:52:07
  */
 import Vue from 'vue'
 
@@ -28,9 +28,10 @@ import * as filters from './filters' // global filters
 
 
 //引入加密函数，并将其封装
-import {handleParams,Aesdecrypt} from '@/utils/cryptoJS';
+import { handleParams, Aesdecrypt, removeProperty } from '@/utils/cryptoJS';
 Vue.prototype.$handleParams = handleParams;//封装机密格式的参数
 Vue.prototype.$Aesdecrypt = Aesdecrypt;//封装机密格式的参数
+Vue.prototype.$removeProperty = removeProperty;//去除空值
 
 /**
  * If you don't want to use mock-server
@@ -45,6 +46,7 @@ if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   locale: enLang // 如果使用中文，无需设置，请删除

src/permission.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-01 14:40:23
+ * @Last Modified time: 2023-03-17 16:45:37
  */
 import router from './router'
 import store from './store'
@@ -14,9 +14,9 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+const whiteList = ['/login', '/auth-redirect', '/login_info'] // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start()
 

src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-14 18:19:16
+ * @Last Modified time: 2023-03-17 16:45:18
  */
 import Vue from 'vue'
 import Router from 'vue-router'
@@ -61,6 +61,11 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
+  {
+    path: '/login_info',
+    component: () => import('@/views/login-info/index.vue'),
+  },
+
   {
     path: '/auth-redirect',
     component: () => import('@/views/login/auth-redirect'),
@@ -77,6 +82,7 @@ export const constantRoutes = [
     hidden: true
   },
 
+
   // {
   //   path: '/documentation',
   //   component: Layout,
@@ -127,32 +133,33 @@ export const asyncRoutes = [
     path: '/',
     component: Layout,
     redirect: '/personal',
-    children:[
+    children: [
       {
-        path:'personal',
-        name:'personal',
+        path: 'personal',
+        name: 'personal',
         component: () => import('@/views/personal/index.vue'),
       },
       {
-        path:'affirm',
-        name:'affirm',
+        path: 'affirm',
+        name: 'affirm',
         component: () => import('@/views/affirm/index.vue'),
       },
       {
-        path:'test-result',
-        name:'test-result',
+        path: 'test-result',
+        name: 'test-result',
         component: () => import('@/views/test-result/index.vue'),
       },
       {
-        path:'upload-result',
-        name:'upload-result',
+        path: 'upload-result',
+        name: 'upload-result',
         component: () => import('@/views/upload-result/index.vue'),
       },
       {
-        path:'analysis',
-        name:'analysis',
+        path: 'analysis',
+        name: 'analysis',
         component: () => import('@/views/analysis/index.vue'),
       },
+
     ]
   },
 

src/store/modules/user.js

@@ -2,9 +2,9 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-07 15:00:39
+ * @Last Modified time: 2023-03-20 15:37:37
  */
-import { login, logout, getInfo } from '@/api/user'
+import { login, logout, getInfo, accountLogin } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 
@@ -16,12 +16,12 @@ const state = {
   roles: [],
   hasUser: false,
   //创建一个对象
-  user:{},
+  user: {},
 }
 
 const mutations = {
   //存vuex里
-  SET_USER:(state,user)=>{
+  SET_USER: (state, user) => {
     state.user = user
   },
   SET_TOKEN: (state, token) => {
@@ -66,6 +66,24 @@ const actions = {
     })
   },
 
+  // user login
+  AccountLogin({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      accountLogin(userInfo).then(response => {
+        // const { data } = response
+        //存储在vuex中
+        commit('SET_TOKEN', response.access_token)
+        //存储在Cookies中
+        setToken(response.access_token)
+        //返回继续执行then
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {

src/utils/validate.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-14 11:12:01
+ * @Last Modified time: 2023-03-17 14:58:10
  */
 /**
  * Created by PanJiaChen on 16/11/18.
@@ -71,6 +71,7 @@ export function validEmail(email) {
   return reg.test(email)
 }
 
+
 /**
  * @param {string} str
  * @returns {Boolean}

src/views/login/components/account.vue

+<script>
+/**
+ * @Author: AnthonyD
+ * @Date:   2023-03-17 13:37:43
+ * @Last Modified by:   AnthonyD
+ * @Last Modified time: 2023-03-20 17:27:35
+ */
+</script><template>
+  <div>
+    <el-form
+      :model="loginForm"
+      :rules="loginRules"
+      ref="ruleForm"
+      class="demo-ruleForm"
+    >
+      <el-form-item prop="name">
+        <div>
+          <p style="font-weight: bold; line-height: 25px" class="pointer">
+            账号
+          </p>
+          <div>
+            <el-input
+              ref="account_input"
+              v-model="loginForm.name"
+              placeholder="手机号/邮箱/身份证号"
+              type="text"
+              tabindex="1"
+            >
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item prop="password">
+        <div>
+          <p style="font-weight: bold; line-height: 25px" class="pointer">
+            密码
+          </p>
+          <div>
+            <el-input
+              ref="password"
+              :key="passwordType"
+              :type="passwordType"
+              placeholder="输入密码"
+              v-model="loginForm.password"
+              name="password"
+              @keyup.native="checkCapslock"
+              @blur="capsTooltip = false"
+              @keyup.enter.native="handleLogin"
+              tabindex="2"
+            >
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+
+  data() {
+    const validateAccount = (rule, value, callback) => {
+      if (!value || /[\u4E00-\u9FA5]/g.test(value) || '') {
+        console.log(value);
+        callback(new Error('请重新账号输入'));
+      } else {
+        callback();
+      }
+    };
+    const validatePassword = (rule, value, callback) => {
+      if (!value || !(value.length >= 8)) {
+        callback(new Error('密码错误，请重新输入'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loginForm: {
+        name: null,
+        password: null,
+      },
+      passwordType: 'password',
+      loginRules: {
+        name: [{ required: true, trigger: 'blur', validator: validateAccount }],
+        password: [
+          { required: true, trigger: 'blur', validator: validatePassword },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // if (!this.loginForm.name) {
+    //   this.$refs.account_input.focus();
+    // } else if (!this.loginForm.password) {
+    //   this.$refs.password.focus();
+    // }
+  },
+  methods: {
+    checkCapslock(e) {
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z';
+    },
+    //
+    handleLogin() {
+      this.$emit('Login', null);
+    },
+  },
+};
+</script>
+
+<style lang="" scoped>
+</style>

src/views/login/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-15 11:00:55
+ * @Last Modified time: 2023-03-20 18:33:10
  */
 </script>
 <template>
@@ -20,14 +20,94 @@
         <div>
           <h3 class="title">国家烟草识别培训系统</h3>
         </div>
-        <el-form
+        <!-- 账号登陆 -->
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="账号登陆" name="account">
+            <account-login
+              ref="user_login"
+              @Login="handleLogin"
+            ></account-login>
+          </el-tab-pane>
+          <!-- 邮箱登陆 -->
+          <el-tab-pane label="邮箱登陆" name="email"
+            ><el-form
               :model="loginForm"
               :rules="loginRules"
               ref="ruleForm"
               class="demo-ruleForm"
             >
               <el-form-item prop="email">
-            <!-- 手机号 -->
+                <div>
+                  <p
+                    style="font-weight: bold; line-height: 25px"
+                    class="pointer"
+                  >
+                    邮箱
+                  </p>
+                  <div>
+                    <el-input
+                      ref="username"
+                      v-model="loginForm.email"
+                      placeholder="输入邮箱"
+                      name="username"
+                      type="text"
+                      tabindex="1"
+                    >
+                    </el-input>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item prop="verification_code">
+                <div>
+                  <p
+                    style="font-weight: bold; line-height: 25px"
+                    class="pointer"
+                  >
+                    验证码
+                  </p>
+                  <div>
+                    <el-row>
+                      <el-col :span="15" style="padding-right: 25px">
+                        <el-input
+                          ref="password"
+                          v-model="loginForm.verification_code"
+                          placeholder="输入验证码"
+                          :maxlength="4"
+                          name="password"
+                          autocomplete="off"
+                          @keyup.native="checkCapslock"
+                          @blur="capsTooltip = false"
+                          @keyup.enter.native="handleLogin"
+                          tabindex="2"
+                        >
+                        </el-input>
+                      </el-col>
+                      <el-col :span="9">
+                        <el-button
+                          @click="sendMessage"
+                          type="warning"
+                          style="background-color: #e6a23c; float: right"
+                          :disabled="time > 0"
+                        >
+                          {{ timer ? '重新发送' + time + 's' : '获取验证码' }}
+                          <i class="el-icon-loading" v-if="is_loading"></i>
+                        </el-button>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+        <!-- <el-form
+          :model="loginForm"
+          :rules="loginRules"
+          ref="ruleForm"
+          class="demo-ruleForm"
+          v-if="false"
+        >
+          <el-form-item prop="email">
             <div>
               <p style="font-weight: bold" class="pointer">邮箱</p>
               <div>
@@ -64,9 +144,6 @@
                     </el-input>
                   </el-col>
                   <el-col :span="8">
-                    <!-- <button class="send_message" @click="sendMessage">
-                      发送短信
-                    </button> -->
                     <el-button
                       @click="sendMessage"
                       type="warning"
@@ -81,10 +158,12 @@
               </div>
             </div>
           </el-form-item>
-        </el-form>
-
+        </el-form> -->
+        <div class="login_enter_box_">
+          <a @click="goLogin()">没有账号？点击注册</a>
+        </div>
         <!-- 登录按钮 -->
-        <div style="margin-top: 25px">
+        <div style="margin-top: 9px">
           <el-button
             :loading="loading"
             type="primary"
@@ -101,10 +180,11 @@
 <script>
 import { validUsername, validEmail } from '@/utils/validate';
 import SocialSign from './components/SocialSignin';
-import { getCode } from '@/api/user.js';
+import { getCode, accountLogin } from '@/api/user.js';
+import AccountLogin from './components/account';
 export default {
   name: 'Login',
-  components: { SocialSign },
+  components: { SocialSign, AccountLogin },
   data() {
     const validateUsername = (rule, value, callback) => {
       console.log(value);
@@ -116,14 +196,13 @@ export default {
     };
     const validatePassword = (rule, value, callback) => {
       console.log(value);
-      if (!(value.length == 4)) {
+      if (!value || !(value.length == 4)) {
         callback(new Error('验证码错误，请重新输入'));
       } else {
         callback();
       }
     };
     return {
-      is_loading: false,
       loginForm: {
         email: null,
         phone: null,
@@ -140,7 +219,6 @@ export default {
           { required: true, trigger: 'blur', validator: validatePassword },
         ],
       },
-      passwordType: 'password',
       capsTooltip: false,
       loading: false,
       showDialog: false,
@@ -148,6 +226,8 @@ export default {
       otherQuery: {},
       timer: null,
       time: null,
+      is_loading: false,
+      activeName: 'account',
     };
   },
   watch: {
@@ -165,13 +245,7 @@ export default {
   created() {
     // window.addEventListener('storage', this.afterQRScan)
   },
-  mounted() {
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus();
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus();
-    }
-  },
+  mounted() {},
   destroyed() {
     // window.removeEventListener('storage', this.afterQRScan)
   },
@@ -215,8 +289,15 @@ export default {
       //   .catch(() => {
       //     this.loading = false;
       //   });
-      console.log('11111111');
-
+      if (this.activeName == 'account') {
+        this.$store
+          .dispatch('user/AccountLogin', this.$refs.user_login.loginForm)
+          .then((response) => {
+            console.log('登录返回值' + response);
+            this.loading = false;
+            this.$router.push('/');
+          });
+      } else if (this.activeName == 'email') {
         let data = {
           verification_key: this.loginForm.eamil_key,
           verification_code: this.loginForm.verification_code,
@@ -229,34 +310,14 @@ export default {
             //   path: this.redirect || '/',
             //   query: this.otherQuery,
             // });
-          console.log(response);
+            console.log('登录返回值' + response);
             this.loading = false;
             this.$router.push('/');
           })
           .catch(() => {
             this.loading = false;
           });
-
-      // this.$refs.loginForm.validate((valid) => {
-      //   if (valid) {
-      //     this.loading = true;
-      //     this.$store
-      //       .dispatch('user/login', this.loginForm)
-      //       .then(() => {
-      //         this.$router.push({
-      //           path: this.redirect || '/',
-      //           query: this.otherQuery,
-      //         });
-      //         this.loading = false;
-      //       })
-      //       .catch(() => {
-      //         this.loading = false;
-      //       });
-      //   } else {
-      //     console.log('error submit!!');
-      //     return false;
-      //   }
-      // });
+      }
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
@@ -286,7 +347,6 @@ export default {
     // }
     sendMessage() {
       this.is_loading = true;
-      // this.$refs.retrieveForm.validateField('email', (errMsg) => {});
       getCode({ email: this.loginForm.email })
         .then((res) => {
           this.loginForm.eamil_key = res.key || null;
@@ -301,6 +361,11 @@ export default {
           console.log('效验通过');
         }
       });
+      // this.$refs.ruleForm.validateField('email', (errMsg) => {
+      // });
+    },
+    goLogin() {
+      this.$router.push('/login_info');
     },
   },
 };
@@ -330,16 +395,6 @@ $light_gray: #eee;
   box-sizing: border-box;
   padding: 62px 69px;
 
-  .login-form {
-    background-color: #fff;
-    width: 400px;
-    height: 384px;
-    padding: 40px;
-    margin-top: 7px;
-    border-radius: 10px;
-    float: right;
-  }
-
   .title-container {
     position: relative;
 
@@ -384,6 +439,27 @@ $light_gray: #eee;
   box-shadow: 4px 4px 15px #c2c4c9;
   border-radius: 15px;
   position: relative;
+  .login-form {
+    background-color: #fff;
+    width: 400px;
+    height: 430px;
+    padding: 40px;
+    border-radius: 10px;
+    position: absolute;
+    right: 10%;
+    top: 18%;
+    .login_enter_box_ {
+      text-align: right;
+      position: absolute;
+      bottom: 22%;
+      right: 10%;
+      a {
+        font-size: 12px;
+        text-decoration: underline;
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 .sign_container {

src/views/upload-result/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-03-01 16:25:21
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-14 16:18:01
+ * @Last Modified time: 2023-03-17 11:25:26
  */
 </script>
 
@@ -111,6 +111,8 @@
                 <h3 class="photo_header_title">上传纸质考试照片</h3>
               </el-col>
               <el-col :span="12" style="text-align: right">
+                <!-- :on-success="handleAvatarSuccess" -->
+                <!-- :http-request="uploadSubmit" -->
                 <el-upload
                   name="image"
                   v-if="test_results && test_results.test_results_image"
@@ -118,6 +120,7 @@
                   :action="
                     IP + '/student/test_results/imageUpload/' + result_id
                   "
+                  :on-progress="uploadSubmit"
                   :on-success="handleAvatarSuccess"
                   :headers="headers"
                   :show-file-list="false"
@@ -138,7 +141,7 @@
                 </el-upload> -->
               </el-col>
             </el-row>
-            <div class="grid-content_upload">
+            <div class="grid-content_upload" v-loading="is_loading">
               <div class="upload_btn">
                 <div
                   class="img_box"
@@ -153,6 +156,7 @@
                   :action="
                     IP + '/student/test_results/imageUpload/' + result_id
                   "
+                  :on-progress="uploadSubmit"
                   :on-success="handleAvatarSuccess"
                   :headers="headers"
                   drag
@@ -198,6 +202,7 @@ export default {
       imgrul: null,
       test_card_info: {},
       is_force: false,
+      is_loading: false,
     };
   },
   created() {
@@ -293,8 +298,19 @@ export default {
     //   });
     // },
     handleAvatarSuccess(res, file) {
-      // this.imageUrl = URL.createObjectURL(file.raw);
-      this.getTestData();
+      if (res.code == 200 && res.message) {
+        this.is_loading = false;
+        this.test_results.test_results_image = res.status;
+        for (let i in this.test_result_sub_data) {
+          if (res.message[this.test_result_sub_data[i].id]) {
+            this.test_result_sub_data[i].value =
+              res.message[this.test_result_sub_data[i].id];
+          }
+        }
+      }
+    },
+    uploadSubmit(event, file, fileList) {
+      this.is_loading = true;
     },
   },
 };
@@ -397,18 +413,18 @@ export default {
 .grid-content_upload {
   text-align: center;
   background: #fafafa;
-  height: 648px;
+  height: 779px;
   border: 2px solid #dcdfe6;
   border-radius: 5px;
   position: relative;
   .img_box {
     width: 100%;
-    height: 640px;
+    // height: 100%;
     // position: absolute;
     text-align: center;
     img {
       width: 100%;
-      height: 100%;
+      height: 775px;
     }
   }
 }