You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.6 KiB
106 lines
2.6 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="content border rounded-md">
|
|
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">时物链条插件商城</h1>
|
|
<el-form ref="signInFormRef" :model="signInForm" :rules="rules" label-width="60px" status-icon>
|
|
<el-form-item class="mb-3" label="账号" prop="username" style="margin-bottom: 22px !important">
|
|
<el-input v-model="signInForm.username" type="text"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="密码" prop="password" style="margin-bottom: 22px !important">
|
|
<el-input v-model="signInForm.password" type="password"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit">
|
|
立即登录
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { signIn } from 'apis';
|
|
import { ElMessage } from 'element-plus';
|
|
import { useStore } from 'vuex';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const signInFormRef = ref(null);
|
|
const signInForm = reactive({
|
|
username: '',
|
|
password: '',
|
|
});
|
|
|
|
const rules = reactive({
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: '请输入账号',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
});
|
|
|
|
// 提交
|
|
function onSubmit() {
|
|
signInFormRef.value.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
const params = {
|
|
client: 1,
|
|
data: {
|
|
identifier: signInForm.username,
|
|
credential: signInForm.password,
|
|
},
|
|
type: 3,
|
|
};
|
|
const resData = await signIn(params);
|
|
store.commit('user/setUser', resData);
|
|
ElMessage.success('登录成功， 欢迎回来');
|
|
setTimeout(() => {
|
|
// 跳转到首页
|
|
router.push({ name: 'plugshop' });
|
|
}, 1000);
|
|
} catch (error) {
|
|
ElMessage.error(error);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('@/assets/u1.jpg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.content {
|
|
width: 480px;
|
|
padding: 30px;
|
|
background: #fff;
|
|
}
|
|
|
|
.content :deep(.el-form-item) {
|
|
display: flex;
|
|
margin-bottom: 22px !important;
|
|
}
|
|
</style>
|
|
|