116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<template>
|
|
<el-dialog custom-class="my-dialog" title="用户登录" :visible="isLoginVisible" width="400px">
|
|
<el-form status-icon ref="refruleForm" :rules="rules" :model="ruleForm" label-width="60px" size="small">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input v-model="ruleForm.password" show-password placeholder="请输入密码"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeViews" size="small">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm" size="small">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import Cookie from 'js-cookie'
|
|
import { reactive, ref, toRefs } from '@vue/reactivity'
|
|
import { ElMessage } from 'element-plus'
|
|
import Api from '../Api/user.js' // register
|
|
export default {
|
|
model: {
|
|
value: 'isLoginVisible',
|
|
events: 'closeViews'
|
|
},
|
|
props: {
|
|
isLoginVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const form = reactive({
|
|
ruleForm: {
|
|
username: '',
|
|
password: ''
|
|
}
|
|
})
|
|
// 定义校验规则 表单代码中必须以 :rules 接收
|
|
const rules = {
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
email: [
|
|
{
|
|
type: 'email',
|
|
required: true,
|
|
message: '请输入正确的邮箱',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
const refruleForm = ref(null)
|
|
// 确定按钮的格式
|
|
const submitForm = () => {
|
|
refruleForm.value.validate((valid) => {
|
|
if (valid) {
|
|
const formData = { ...form.ruleForm }
|
|
Api.login(formData.email, formData.password)
|
|
.then((res) => {
|
|
Cookie.set('userInfo', JSON.stringify(res))
|
|
context.emit('setUser')
|
|
ElMessage.success('登录成功')
|
|
closeViews()
|
|
})
|
|
.catch((err) => {
|
|
if (err.code === 210) {
|
|
ElMessage.error('账号或密码不正确')
|
|
} else if (err.code === 211) {
|
|
Api.register(formData.email, formData.password).then((res) => {
|
|
Cookie.set('userInfo', JSON.stringify(res))
|
|
context.emit('setUser')
|
|
ElMessage.success('注册成功')
|
|
closeViews()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// 关闭弹窗
|
|
function closeViews() {
|
|
refruleForm.value.resetFields()
|
|
context.emit('closeViews', false)
|
|
}
|
|
return {
|
|
...toRefs(form),
|
|
closeViews,
|
|
submitForm,
|
|
refruleForm,
|
|
rules
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.my-dialog {
|
|
background: red;
|
|
}
|
|
.my-dialog /deep/.el-dialog__header {
|
|
border-bottom: 1px solid #eee !important;
|
|
}
|
|
.my-dialog /deep/.el-dialog__title {
|
|
font-size: 16px;
|
|
color: #e03b5d;
|
|
}
|
|
</style>
|