2022年5月29日从svn移到git

src/views/Login.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="login" :style="`background: url(${webBaseUrl}/temp/background.jpg) no-repeat`">
+    <el-form :model="form" ref="form" :rules="rules">
+      <p>登陆</p>
+      <el-form-item prop="loginName">
+        <el-input v-model="form.loginName" placeholder="用户名"><i slot="prefix" class="el-icon-user-solid"></i></el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input v-model="form.password" placeholder="账户密码" show-password><i slot="prefix" class="el-icon-lock"></i></el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <el-row :span="24">
+          <el-col :span="10">
+            <el-input size="small"
+                v-model="form.code" placeholder="验证码"
+                auto-complete="off" maxlength="5" @keydown.enter.native="loginSubmit">
+          </el-input>
+          </el-col>
+          <el-col :span="14">
+              <img :src="form.image" @click="refreshCode" class="code"/>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item>
+        <section>
+          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
+          <!-- <span>忘记密码</span> -->
+        </section>
+      </el-form-item>
+      <el-form-item><el-button type="primary" @click="loginSubmit">点击登录</el-button></el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import loginApi from "@/api/login";
+  export default {
+    computed: {
+      ...mapGetters(['portalLoginRememberMe'])
+    },
+    data(){
+      return {
+          form:{
+            loginName:'',//10181457
+            password:'',//666666
+            //验证码的值
+            code: "",
+            //验证码的索引
+            key: "",
+            image:''
+          },
+          rules: {
+            loginName: [
+                { required: true, message: '请输入用户名', trigger: 'blur' }
+              ],
+            password: [
+                { required: true, message: '请输入密码', trigger: 'blur' }
+              ],
+            code: [
+                { required: true, message: '请输入验证码', trigger: 'blur' }
+              ],
+          },
+          rememberMe:false,
+          loading:false,
+          redirect: undefined
+      }
+    },
+    mounted() {
+      this.refreshCode();
+      if(this.portalLoginRememberMe && this.portalLoginRememberMe.rememberMe){
+        this.rememberMe = true;
+        this.form.loginName = this.portalLoginRememberMe.loginName;
+        this.form.password = this.portalLoginRememberMe.password;
+      }
+    },
+    watch: {
+      $route: {
+        handler: function(route) {
+          this.redirect = route.query && route.query.redirect;
+        },
+        immediate: true
+      }
+    },
+    methods:{
+      refreshCode(){
+        loginApi.captcha()
+        .then(res => {
+          const data = res.result;
+          this.form.key = data.key;
+          this.form.image = data.image;
+        });
+      },
+      loginSubmit(){
+        let $this=this;
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+              this.$store.dispatch("Login", this.form).then(rs => {
+                if(rs.status == 200){
+                  // 记住密码
+                  if(this.rememberMe){
+                    let rememberMeOjb = {rememberMe:true,loginName:this.form.loginName,password:this.form.password};
+                    this.$store.dispatch("portal/SetLoginRememberMe", rememberMeOjb)
+                  }else{
+                    let rememberMeOjb = {rememberMe:false,loginName:'',password:''};
+                    this.$store.dispatch("portal/SetLoginRememberMe", rememberMeOjb)
+                  }
+                  //console.log(this.redirect,'this.redirect');
+                  this.$router.push({ path: this.redirect || "/study/index" }).catch(()=>{
+                      $this.loading = false;
+                  });
+                }else{
+                  // 刷新验证码
+                  this.refreshCode();
+                  this.form.code = "";
+                  this.loading = false;
+                  this.$message({type: 'error', message: rs.message});
+                }
+              }).catch((err) => {
+                // 刷新验证码
+                this.refreshCode();
+                this.form.code = "";
+                this.loading = false;
+                this.$message({type: 'error', message: err.message});
+              });
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.login {
+  height: 100%;
+  width: 100%;
+  background-size: 100% 100%;
+  .el-form {
+    position: absolute;
+    width: 240px;
+    left: 16%;
+    top: 50%;
+    transform: translate(0, -50%);
+    p {
+      text-align: center;
+      font-size: 50px;
+      color: #347cef;
+      margin: 0;
+      margin-bottom: 43px;
+    }
+    ::v-deep .el-form-item {
+      .el-input {
+        .el-input__inner {
+          border-radius: 999px;
+          border:1px solid #686868;
+        }
+        .el-input__prefix {
+          margin-left: 4px;
+        }
+      }
+      .el-button {
+        width: 100%;
+        border-radius: 999px;
+        letter-spacing: 10px;
+      }
+    }
+    section {
+      padding: 0 5px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      margin-bottom: 22px;
+      ::v-deep .el-checkbox {
+        .el-checkbox__label {
+          font-size: 12px;
+        }
+      }
+      span {
+        cursor: pointer;
+      }
+    }
+    .code{
+      width: 135px;
+      // padding: 0 10px;
+      height: 40px;
+      // border: 1px solid #686868;
+      margin-left: 5px;
+      border-radius: 20px;
+    }
+  }
+}
+</style>