<template> <div class="login"> <el-form :rules="rules" ref='ruleForm' label-width="80px" label-position="right" v-model="user"> <el-form-item prop="username"> <el-input placeholder="用户名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" placeholder="密码"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button type="primary" @click="login('ruleForm')">登录</el-button> <el-button type="info" @click="resetTempPwd">重置密码</el-button> </div> </div> </template> <script> import { mapState, mapMutations } from 'vuex' import { login, resetTempPwd } from '../../utils/api.js' export default { data() { return { user: {}, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] }, pwdError: '', loading: false }; }, computed: { ...mapState(['username','isLogin']) }, methods: { ...mapMutations(['loginUser']), resetTempPwd(){ this.$confirm('确认重置密码吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(async () => { let res = await resetTempPwd() this.pwdError = '' if (res) { this.$router.push({ path: '/resetPwd' }) } else { this.$message({ message: '重置密码失败', type: 'error' }) } }).catch(() => { console.log('取消') }) }, login(formName) { this.$refs[formName].validate((valid, fieldsView) => { if (!valid) { return false; } let { username, password } = this.user this.loading = true login({username,password}).then(res=>{ this.$store.commit('loginUser',res) this.$router.push('/index') this.$message({ message: '登录成功', type: 'success' }) }).catch(() => { this.pwdError = '' this.loading = false }); }); } } } </script>