登录页面

src/components/login/login-1 copy.vue

@@ -1,165 +0,0 @@
-<template>
-  <div id="login-1">
-    <el-row>
-      <el-col :span="24" class="main" :style="{ 'background-image': 'url(' + backimage + ')' }">
-        <el-col :span="24" class="one">
-          <div class="w_1200">
-            <el-col :span="11" class="left">
-              <el-col :span="24" class="info">
-                <el-col :span="24" class="txt">
-                  <el-col :span="4">
-                    <el-image :src="logo_url" class="image"></el-image>
-                  </el-col>
-                  <el-col :span="20">
-                    <h1>{{ name }}</h1></el-col
-                  >
-                </el-col>
-                <el-col :span="24" class="form">
-                  <el-form :model="form" :rules="rules" ref="form">
-                    <el-form-item prop="account">
-                      <el-input placeholder="账号" v-model="form.account" suffix-icon="el-icon-user"> </el-input>
-                    </el-form-item>
-                    <el-form-item prop="password">
-                      <el-input placeholder="密码" v-model="form.password" type="password" suffix-icon="el-icon-lock"> </el-input>
-                    </el-form-item>
-                    <el-col :span="24" class="codes">
-                      <el-col :span="17">
-                        <el-form-item prop="code">
-                          <el-input placeholder="验证码" v-model="form.code"> </el-input>
-                        </el-form-item>
-                      </el-col>
-                      <el-col :span="6" class="code">
-                        <el-image :src="code" class="image"></el-image>
-                      </el-col>
-                    </el-col>
-                    <el-form-item class="btn">
-                      <el-button type="primary" @click="toLogin('form')">登录</el-button>
-                      <el-button type="warning" @click="toRegister()">注册</el-button>
-                    </el-form-item>
-                  </el-form>
-                </el-col>
-              </el-col>
-            </el-col>
-            <el-col :span="13" class="right">
-              <el-image :src="back" class="image"></el-image>
-            </el-col>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'login-1',
-  props: {},
-  components: {},
-  data: function () {
-    return {
-      // logo
-      logo_url: require('@/assets/logo.png'),
-      // 验证码
-      code: require('@/assets/login/login_1_3.png'),
-      // 背景图片
-      back: require('@/assets/login/login_1_2.png'),
-      // 右侧图片
-      backimage: require('@/assets/login/login_1_1.png'),
-      name: '长春市福瑞科技有限公司',
-      form: {},
-      rules: {
-        account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
-        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
-        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
-      },
-    };
-  },
-  created() {},
-  methods: {
-    toLogin(formName) {
-      this.$refs[formName].validate(async (valid) => {
-        if (valid) {
-          this.$emit('toLogin', { data: this.form, formName: formName });
-        } else {
-          console.log('error submit!!');
-          return false;
-        }
-      });
-    },
-    toRegister() {
-      this.$emit('toRegister');
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 15vh 0;
-}
-.main {
-  background-size: 100% 100%;
-  height: 100vh;
-  background-repeat: no-repeat;
-  overflow: hidden;
-  .one {
-    height: 93vh;
-    width: 96vw;
-    margin: 2%;
-    background: rgba(255, 255, 255, 0.7);
-    border-radius: 20px;
-  }
-
-  .left {
-    .info {
-      border-radius: 20px;
-      background: #fff;
-      box-shadow: 0 0 10px #bdbdbd;
-      padding: 5%;
-      .txt {
-        margin: 20px 0;
-        .image {
-          width: 50px;
-          height: 50px;
-        }
-        h1 {
-          margin: 3px 0;
-        }
-      }
-    }
-    .form {
-      .codes {
-        margin: 0 0 10px 0;
-        .code {
-          height: 40px;
-          background: rgba(55, 55, 55, 0.5);
-          margin: 0 0 0 3%;
-          .image {
-            height: 40px;
-          }
-        }
-      }
-      .btn {
-        margin: 15% 0 0 0;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>

src/components/login/login-1.vue

@@ -17,7 +17,7 @@
                         <el-input placeholder="账号" v-model="form.account" suffix-icon="el-icon-user"> </el-input>
                       </el-form-item>
                       <el-form-item prop="password">
-                        <el-input placeholder="密码" v-model="form.password" type="password" suffix-icon="el-icon-lock"> </el-input>
+                        <el-input placeholder="密码" v-model="form.password" type="password" suffix-icon="el-icon-lock" show-password> </el-input>
                       </el-form-item>
                       <el-col :span="24" class="codes">
                         <el-col :span="17">
@@ -30,8 +30,8 @@
                         </el-col>
                       </el-col>
                       <el-form-item class="btn">
-                        <el-button type="primary" @click="toLogin('form')">登录</el-button>
-                        <el-button type="danger" @click="toRegister()">注册</el-button>
+                        <el-button type="primary" size="small" @click="toLogin('form')">登录</el-button>
+                        <el-button type="danger" size="small" @click="toRegister()">注册</el-button>
                       </el-form-item>
                     </el-form>
                   </el-col>

src/components/login/login-2.vue

@@ -18,7 +18,7 @@
                   <form-1 class="form1 animate__animated animate__bounceInLeft" @toLogin="toLogin" @toRegister="toRegister"></form-1>
                 </el-tab-pane>
                 <el-tab-pane label="手机号登录" name="2">
-                  <form-2 class="form1 animate__animated animate__bounceInRight" @toLogin="toLogin" @toRegister="toRegister" @toCode="toCode"></form-2>
+                  <form-2 class="form1 animate__animated animate__bounceInRight" @toLogin="toLogin" @toRegister="toRegister"></form-2>
                 </el-tab-pane>
               </el-tabs>
             </el-col>
@@ -50,15 +50,12 @@ export default {
   },
   created() {},
   methods: {
-    toLogin(formName) {
-      this.$emit('toLogin', { data: this.form, formName: formName });
+    toLogin({ data }) {
+      this.$emit('toLogin', { data: data });
     },
     toRegister() {
       this.$emit('toRegister');
     },
-    toCode() {
-      this.$emit('toCode');
-    },
   },
   computed: {
     ...mapState(['user']),

src/components/login/login-3.vue

@@ -13,15 +13,14 @@
                   </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                  <el-input placeholder="密码" v-model="form.password" type="password">
+                  <el-input placeholder="密码" v-model="form.password" type="password" show-password>
                     <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
                   </el-input>
                 </el-form-item>
                 <el-form-item class="btn">
-                  <el-button type="primary" @click="toLogin('form')">登录</el-button>
+                  <el-button type="primary" size="small" @click="toLogin('form')">登录</el-button>
                 </el-form-item>
               </el-form>
-              <el-col :span="24" class="info_3"> 输入任意用户名和密码即可 </el-col>
             </el-col>
           </el-col>
         </div>
@@ -44,7 +43,6 @@ export default {
       rules: {
         account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
         password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
-        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
       },
     };
   },
@@ -53,7 +51,7 @@ export default {
     toLogin(formName) {
       this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          this.$emit('toLogin', { data: this.form, formName: formName });
+          this.$emit('toLogin', { data: this.form });
         } else {
           console.log('error submit!!');
           return false;
@@ -63,9 +61,6 @@ export default {
     toRegister() {
       this.$emit('toRegister');
     },
-    toCode() {
-      this.$emit('toCode');
-    },
   },
   computed: {
     ...mapState(['user']),

src/components/login/login-4.vue

@@ -13,7 +13,7 @@
                   <el-input placeholder="请输入账号" v-model="form.account"> </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                  <el-input placeholder="密码" v-model="form.password" type="password"> </el-input>
+                  <el-input placeholder="密码" v-model="form.password" type="password" show-password> </el-input>
                 </el-form-item>
                 <el-col :span="24">
                   <el-switch v-model="value" active-text="记住密码" active-color="#555" inactive-color="#ccc"> </el-switch>
@@ -25,7 +25,7 @@
                 </el-col>
               </el-form>
             </el-col>
-            <el-col :span="24" class="info_3">立即注册 </el-col>
+            <el-col :span="24" class="info_3" @click.native="toRegister()">立即注册 </el-col>
           </el-col>
         </div>
       </el-col>
@@ -128,6 +128,9 @@ export default {
       font-size: 14px;
       text-align: center;
     }
+    .info_3:hover {
+      cursor: pointer;
+    }
   }
 }
 /deep/.el-switch__label {

src/components/login/parts/form-1.vue

@@ -8,7 +8,7 @@
               <el-input placeholder="账号" v-model="form.account" prefix-icon="el-icon-user"> </el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input placeholder="密码" v-model="form.password" type="password" prefix-icon="el-icon-lock"> </el-input>
+              <el-input placeholder="密码" v-model="form.password" type="password" prefix-icon="el-icon-lock" show-password> </el-input>
             </el-form-item>
             <el-col :span="24" class="codes">
               <el-col :span="17">
@@ -24,12 +24,11 @@
               <el-col :span="12"> <el-checkbox v-model="checked">自动登录</el-checkbox></el-col>
               <el-col :span="12" class="text">
                 <span>立即注册</span>
-                <span>忘记密码</span>
               </el-col>
             </el-col>
             <el-col :span="24" class="btn">
               <el-form-item class="btn">
-                <el-button type="primary" @click="toLogin('form')">登录</el-button>
+                <el-button type="primary" size="small" @click="toLogin('form')">登录</el-button>
               </el-form-item>
             </el-col>
           </el-form>
@@ -40,15 +39,13 @@
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import { mapState, createNamespacedHelpers, createLogger } from 'vuex';
 export default {
   name: 'form-1',
   props: {},
   components: {},
   data: function () {
     return {
-      // 验证码
-      code: require('@/assets/login/login_1_3.png'),
       form: {},
       rules: {
         account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
@@ -56,6 +53,8 @@ export default {
         code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
       },
       checked: true,
+      // 验证码
+      code: require('@/assets/login/login_1_3.png'),
     };
   },
   created() {},
@@ -63,7 +62,7 @@ export default {
     toLogin(formName) {
       this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          this.$emit('toLogin', { data: this.form, formName: formName });
+          this.$emit('toLogin', { data: this.form });
         } else {
           console.log('error submit!!');
           return false;

src/components/login/parts/form-2.vue

@@ -21,12 +21,11 @@
               <el-col :span="12"> <el-checkbox v-model="checked">自动登录</el-checkbox></el-col>
               <el-col :span="12" class="text">
                 <span>立即注册</span>
-                <span>忘记密码</span>
               </el-col>
             </el-col>
             <el-col :span="24" class="btn">
               <el-form-item class="btn">
-                <el-button type="primary" @click="toLogin('form')">登录</el-button>
+                <el-button type="primary" size="small" @click="toLogin('form')">登录</el-button>
               </el-form-item>
             </el-col>
           </el-form>
@@ -57,7 +56,7 @@ export default {
     toLogin(formName) {
       this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          this.$emit('toLogin', { data: this.form, formName: formName });
+          this.$emit('toLogin', { data: this.form });
         } else {
           console.log('error submit!!');
           return false;
@@ -65,7 +64,7 @@ export default {
       });
     },
     toCode() {
-      this.$emit('toCode');
+      console.log('获取验证码');
     },
   },
   computed: {

src/router/index.js

@@ -24,11 +24,8 @@ router.beforeEach((to, from, next) => {
     store.commit('setUser', user, { root: true });
     next();
   } else {
-    if (to.meta.is_filter) {
-      next('/login');
-    } else {
-      next();
-    }
+    if (to.meta.is_filter) next('/login');
+    else next();
   }
 });
 export default router;

src/views/login.vue

@@ -6,7 +6,6 @@
         <!-- <login-2 @toLogin="toLogin" @toRegister="toRegister"></login-2> -->
         <!-- <login-3 @toLogin="toLogin" @toRegister="toRegister"></login-3> -->
         <login-4 @toLogin="toLogin" @toRegister="toRegister"></login-4>
-        <el-button type="primary" size="small" @click="toLogin()">登录登录</el-button>
       </el-col>
     </el-row>
   </div>
@@ -14,6 +13,7 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('admin');
 export default {
   name: 'login',
   props: {},
@@ -28,10 +28,13 @@ export default {
   },
   created() {},
   methods: {
-    toLogin(data) {
-      let token = 'test_token';
-      sessionStorage.setItem('token', token);
-      this.$router.push('/homeIndex');
+    ...mapActions(['login']),
+    async toLogin({ data }) {
+      let res = await this.login(data);
+      if (this.$checkRes(res)) {
+        sessionStorage.setItem('token', res.data);
+        this.$router.push('/homeIndex');
+      }
     },
     toRegister() {
       this.$router.push({ path: '/register' });

vue.config.js

@@ -23,7 +23,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/projectadmin/api': {
-        target: 'http://broadcast.waityou24.cn', //http://192.168.1.144:16001
+        target: 'http://broadcast.waityou24.cn', //http://127.0.0.1:10102
         changeOrigin: true,
         ws: false,
       },