vue登錄彈框

 

頭部組件

<template>
<!--  公共頭部-->
    <div class="header flexCenter">
      <div class="logo">陝西新聞圖片網</div>
      <div class="menu flexBetween">
        <div class="menu_item flexCenter flex-v" v-for="(item,index) in menuList" :key="index" :class="{active:index == currentIndex}" @click="changeMenu(index)">
          {{item.title}}<span>{{item.en_title}}</span>
        </div>
      </div>
      <div>


        <div class="login flexBetween" v-if="isLogin">
          <img src="../assets/image/roundImg01.png" style="width: 40px;height: 40px;"/>
          <span @click="signOut" style="cursor: pointer">退出</span>
        </div>
        <div class="login flexBetween" v-else>
          <span @click="login" style="cursor: pointer">登錄</span>
        </div>
      </div>
    </div>
</template>

<script>
  import * as auth from '@/utils/auth'
    export default {
        name: "Header",
      props:{
        activeIndex:{
          type:Number,
          default:0
        }
      },
      data(){
          return {
            menuList:[
              {title:'首頁', en_title:'HOME', linkName:'index'},{title:'新聞', en_title:'NEWS', linkName:'news'},
              {title:'影像', en_title:'IMAGE', linkName:'other'},{title:'直播', en_title:'LIVE', linkName:'other'},
              {title:'展覽', en_title:'EXHIBITION', linkName:'show'},{title:'大賽', en_title:'COMPETITION', linkName:'compet'},
              {title:'期刊', en_title:'PERIODICAL', linkName:'periodical'},{title:'攝影師', en_title:'PHOTOGRAPHER', linkName:'other'},
              {title:'服務', en_title:'SERVICE', linkName:'other'},{title:'合作', en_title:'COOPERATION', linkName:'other'}
            ],
          }
      },
      computed:{
        currentIndex:{
          get: function () {
            return this.activeIndex
          },
          set: function () {

          }
        },
        isLogin:{
          get: function () {
            return this.$store.getters.isLogin
          },
          set: function () {

          }
        }
      },
      watch:{
        isLogin:function (newVal) {
          this.isLogin = newVal;
        }
      },
      methods: {
        //  切換菜單
        changeMenu(index){
          this.currentIndex = index;
          this.$router.push({name:this.menuList[index].linkName});
        },

        //登錄
        login(){
          //需要登錄
          this.$store.commit('user/updateLoginStatus',true);
        },

        //退出
        signOut(){
          this.$store.dispatch('user/logOut').then(()=>{}).catch(()=>{this.loading = false})
        },
      }
    }
</script>

<style lang="scss">
.header {
  height: 150px;
  background-color: #fff;
  border-bottom: 2px solid $color-main;
  /deep/ .el-icon-user:before {
    font-size: 25px;
  }
  .logo {
    width: 22%;
    font-size: 40px;
    display: inline-block;
  }
  .menu {
    width: 60%;
    display: inline-flex;
    margin: 0 4%;
    .menu_item {
      font-size: 24px;
      color: $color-font-deep-deep;
      text-align: center;
      cursor: pointer;
      &.active {
        color: $color-main;
        position: relative;
        span {
          color: $color-main;
        }
        &:after {
          content: '';
          position: absolute;
          bottom: -10px;
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: $color-main;
          border-radius: 50%;
        }
      }
      span {
        font-size: 12px;
        color: $color-font-light-light;
      }
    }
  }
}
</style>

 

登錄彈框組件：

<template>
<!--  登錄彈框-->
    <div class="login_form">
<!--    功能需要登錄，且用戶未登錄時彈出 :visible.sync="dialogTableVisible"  -->
      <el-dialog title="登錄" :visible.sync="dialogTableVisible" @close="handleClose" width="480px">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="0px">
          <el-form-item prop="mobileNumber">
            <el-input placeholder="輸入用戶名稱" v-model="form.mobileNumber">
              <template slot="prepend">賬號</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input placeholder="輸入密碼" v-model="form.passWord" type="password">
              <template slot="prepend">密碼</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="btn main" @click="login('ruleForm')">立即登錄</div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
  import {validatePhone} from '@/utils/validate'
    export default {
        name: "login",
      computed:{
        dialogTableVisible: {
          //獲取計算屬性的值
          get:function(){
            return this.$store.getters.needLogin && (!this.$store.getters.isLogin)
          },
          //更改計算屬性的值
          set:function () {

          }

        }
     },

      data(){
          return {
            form: {
              mobileNumber:'',
              passWord:'',
              type: 0
            },
            rules:{
              mobileNumber:[
                { required: true, message: '請輸入手機號', trigger: 'blur' },
                { validator: validatePhone, trigger: 'blur' }
              ],
              passWord:[
                { required: true, message: '請輸入密碼', trigger: 'blur' }
              ]
            }
          }
      },
      methods: {
        //登錄
        login(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //登錄，並設置用戶信息到cookie
              this.$store.dispatch('user/getUserLogin',this.form).then(() => {
              //  關閉登錄彈框
                this.dialogTableVisible = false;
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false;
            }
          });
        },

      //  如果彈框關掉，將needLogin=false
        handleClose(){
          this.$store.commit('user/updateLoginStatus',false);
          this.dialogTableVisible = false;
        }
      }
    }
</script>

<style scoped lang="scss">
  .login_form {
    width: 480px;
    height: 410px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px 55px;
    /deep/ .el-form-item {
      margin-top: 30px;
    }
    /deep/ .el-input__inner {
      height: 50px;
      line-height: 50px;
    }
    .btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-radius: 25px;
    }
    .wxLogin {
      flex-direction: column;
      color: #07b906;
    }
  }
</style>

vuex中

import * as auth from '@/utils/auth';
const state = {
  needLogin:false,//是否需要登錄
  isLogin:false,//是否已經登錄
}

const mutations = {
  //更新用戶是否需要登錄的狀態
  updateLoginStatus(state,data){
    state.needLogin = data;
    console.log('sss',state.needLogin)
  },

  //退出
  logOut(state,data){
    state.isLogin = false;
  },


  //更新登錄狀態
  setUserLogin(state,data){
    state.isLogin = true;
  }
}

const actions = {

  /**
   * 用戶登錄：存儲cookie 並更新登錄狀態
   */
  getUserLogin ({commit},params) {
    return new Promise((resolve, reject) => {
      // userLogin(params).then(response => {
      //   const {data} = response
      //   commit('setUserLogin', data)
      //設置用戶信息到cookie************模擬數據
      auth.setAdminInfo({
        'userUuid':'dzz',
        'logoUrl':''
      });
      commit('setUserLogin')

        resolve()
      // }).catch(error => {
      //   reject(error)
      // })
    })
  },

  //退出：移除cookie，並更新登錄狀態
  logOut({commit}){
    return new Promise((resolve,reject)=>{
      auth.removeAdminInfo();
      commit('logOut')
      resolve()
    })
  },
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}