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 }
