后台管理系统登录

src/api/registerAndLogin.js

@@ -35,4 +35,24 @@ export default {
     queryQiaoBiVipType(data){
         return axios.post('/permission/api/vipType/queryQiaoBiVipType',data)
     },
+    /**
+     * 手机号登录
+     * @param {*} data 
+     * @param {String} data.phoneNum - 手机号
+     * @param {String} data.phoneCode - 验证码
+     * @returns 
+     */
+    loginByPhone(data){
+        return axios.post('/permission/api/admin/loginByPhone',data)
+    },
+    /**
+     * 账号密码登录
+     * @param {*} data 
+     * @param {String} data.username - 账号
+     * @param {String} data.password - 密码
+     * @returns 
+     */
+    login(data) {
+        return axios.post('/permission/api/admin/login', data)
+    },
 }

src/router/index.js

@@ -127,9 +127,33 @@ router.beforeEach((to, from, next) => {
   next();
 })
 
-
+function routeExists(array,path,parentPath){
+  for(var i = 0;i<array.length;i++){
+    var item = array[i]
+    var nowPath = item.path
+    if(item.path.indexOf('/') != 0){
+      nowPath = parentPath + '/' + nowPath
+    }
+    if(!item.children || item.children.length == 0){
+      if(path == nowPath){
+        return true
+      }
+    }else{
+      var data = item.children
+      var sign = routeExists(data,path,nowPath)
+      if(sign){
+        return true
+      }
+    }
+  }
+  return false
+}
 // 在你的路由配置文件中
 router.afterEach((to, from) => {
+  var sign = routeExists(backStageManageRouterItem,to.path)
+  if(!sign){
+    return
+  }
   var obj = {
     name:to.meta.title,
     path:to.path,

src/views/backStageManage/login/index.vue

@@ -1,5 +1,60 @@
 <template>
-  <div>1</div>
+  <div class="login" :style="`background-image:url(${require('@/assets/image/register_background.png')})`">
+    <div class="content">
+      <div class="logo">
+        <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
+      </div>
+      <div class="body">
+        <div class="title">
+          <div>窍笔后台管理系统</div>
+        </div>
+        <div class="input">
+          <el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" >
+            <template v-if="loginType == 1">
+              <div>
+                <el-form-item prop="phoneNum">
+                  <el-input v-model="form.phoneNum" placeholder="请输入手机号" maxlength="11">
+                    <i slot="prefix" class="el-icon-phone icon"></i>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="phoneCode">
+                  <el-input v-model="form.phoneCode" placeholder="请输入验证码">
+                    <i slot="prefix" class="iconfont icon-yanzhengma icon"></i>
+                    <el-button slot="append" class="phoneCode" :disabled="phoneCodeText.indexOf('秒')!=-1" @click="getPhoneCode">{{phoneCodeText}}</el-button>
+                  </el-input>
+                </el-form-item>
+              </div>
+            </template>
+            <template v-if="loginType == 2">
+              <div>
+                <el-form-item prop="username" >
+                  <el-input v-model="form.username" placeholder="请输入账号">
+                    <i slot="prefix" class="iconfont icon-tianjiazhanghao icon"></i>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password" >
+                  <el-input v-model="form.password" placeholder="请输入密码">
+                    <i slot="prefix" class="iconfont icon-mima icon"></i>
+                  </el-input>
+                </el-form-item>
+              </div>
+            </template>
+           
+          </el-form>
+        </div>
+        <div class="forget">
+          <span class="forget_btn" @click="forget">忘记密码了？</span>
+          <span class="forget_btn" @click="changeLoginType">切换{{loginType==1?'账号密码':'手机号'}}登录</span>
+        </div>
+        <div class="btn">
+          <el-button round style="width:100%;background:var(--color);color:white;height:50px;" @click="submit">登录</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="copyright">
+      copyright©灵智信息服务（深圳）有限公司
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,14 +63,224 @@ export default {
   props: {},
   data() {
     return {
+      loginType:1,
+      form:{},
+      phoneCodeText:'获取验证码',
+      rules:{
+        phoneNum: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            pattern:
+              /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
+        ],
+        phoneCode:[
+          {required: true, message: "请输入验证码", trigger: "blur"}
+        ],
+        username: [
+          { required: true, message: "请输入账号", trigger: "blur" },
+        ],
+        password:[
+          {required: true, message: "请选择密码", trigger: "blur"}
+        ]
+      }
     };
   },
   watch: {},
   computed: {},
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    forget(){},
+    //切换登录方式
+    changeLoginType(){
+      this.loginType=(this.loginType==1?2:1)
+      this.$refs.ruleForm.resetFields();
+    },
+    //获取验证码
+    getPhoneCode(){
+      if(!this.form.phoneNum){
+        this.$message.warning('请输入手机号')
+        return
+      }
+      const regex =  /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
+      if(!regex.test(this.form.phoneNum)){
+        this.$message.warning('请输入正确的手机号码')
+        return false
+      }
+      if(this.phoneCodeText.indexOf('秒')!=-1){
+        return
+      }
+      var params = {
+        phoneNum:this.form.phoneNum
+      }
+      this.$api.getPhoneCode(params).then(response=>{
+        if(response.code == 200){
+          var num = 60
+          this.phoneCodeText = num + '秒'
+          var timer = setInterval(()=>{
+            num -= 1
+            this.phoneCodeText = num + '秒'
+            if(num == 0){
+              this.phoneCodeText = '再次获取验证码'
+              clearInterval(timer)
+            }
+          },1000)
+        }else{
+          this.$message.error(response.message)
+        }
+      }).catch(error=>{
+
+      })
+    },
+    //提交信息
+    submit(){
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.$router.push(
+            {
+              path:'/administrator/home',
+            }
+          )
+          return
+          if(this.invitationCode){
+            this.form.inviteCode = this.invitationCode
+          }
+          this.$api.personnelSignUp(this.form).then(response=>{
+            if(response.code == 200){
+              this.$message.success('登录成功')
+              this.$router.replace(
+                {
+                  path:'/home',
+                }
+              )
+            }else{
+              this.$message.error(response.message)
+            }
+          })
+          
+        }else {
+          return false;
+        }
+      })
+      
+    },
+  },
 };
 </script>
+<style lang="scss">
+.login{
+  .content{
+    .el-form-item{
+      margin-bottom: 10px;
+    }
+    
+    .el-input__inner{
+      // border-radius: 8px;
+      height: 35px;
+      border: 1px solid var(--color) ;
+      box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
+    }
+    .el-input-group__append{
+      border: 1px solid var(--color) ;
+      border-left: 0;
+      box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
+      background-color: var(--color);
+      color: white;
+    }
+    .el-input__prefix{
+      line-height: 35px !important;
+    }
+    .is-error{
+      margin-bottom: 20px;
+      .el-input__inner{
+        border: #F56C6C ;
+        box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
+      }
+      .el-input-group__append{
+        border: #F56C6C ;
+        box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
+      }
+    }
+    
+    .content_btn{
+      .el-button{
+        width: 100%;
+        background-color: var(--color);
+        border-color: var(--color);
+      }
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
+.login{
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  background-attachment: fixed;
+}
+
+
+.content{
+  width: 600px;
+  height: fit-content;
+  background: rgba($color: white, $alpha: 0.6);
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  z-index: 999;
+  padding: 20px;
+  .img{
+    height: 50px;
+  }
+}
+.body{
+  width:350px;
+  padding: 20px 0 35px 0;
+  margin: auto;
+  .title{
+    text-align: center;
+    font-size: 34px;
+    // color: var(--color);
+    color: black;
+    font-weight: bold;
+    &>div{
+      margin-bottom: 10px;
+    }
+  }
+  .input{
+    margin:20px 0;
+    &>div{
+      margin-bottom: 10px;
+    }
+  }
+}
+.forget{
+  display: flex;
+  justify-content: space-between;
+  // text-align: center;
+  font-size: 14px;
+  .forget_btn{
+    color: var(--color);
+    cursor: pointer;
+  }
+}
+.btn{
+  margin-top:20px;
+}
+.copyright{
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 35px;
+  margin: auto;
+  text-align: center;
+  color: black;
+  z-index: 9999;
+}
 </style>

src/views/register/index.vue

@@ -242,6 +242,7 @@ export default {
   background-size: cover;
   background-position: center;
   position: relative;
+  background-attachment: fixed;
 }
 // .register::after{
 //   content:'';