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.
112 lines
2.9 KiB
112 lines
2.9 KiB
<template>
|
|
<div class="page-container">
|
|
<div class="page-outer">
|
|
<div class="big-title">
|
|
星途内容数字化管理后台
|
|
</div>
|
|
<div class="login-box" v-if="status == 1">
|
|
<div class="login-title">
|
|
<span class="login-title-item">账户登录</span>
|
|
</div>
|
|
<el-form>
|
|
<el-form-item size="default" label="账号"><el-input v-model="form.name" placeholder="账号" /></el-form-item>
|
|
<el-form-item size="default" label="密码"><el-input type="password" v-model="form.password" placeholder="密码" /></el-form-item>
|
|
<el-form-item><el-button size="default" type="primary" style="width: 100%;margin-top: 24px" @click="submit">登 录</el-button></el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="footer">
|
|
<el-link href="https://beian.miit.gov.cn" target="_blank">京ICP备13018361号-1</el-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useStore } from "vuex";
|
|
import { defineComponent, reactive, ref, getCurrentInstance } from "vue";
|
|
export default defineComponent({
|
|
name: 'v-login',
|
|
setup() {
|
|
const { proxy } = getCurrentInstance();
|
|
const store = useStore();
|
|
const form = reactive({
|
|
name: "",
|
|
password: "",
|
|
});
|
|
const regForm = reactive({
|
|
name: "",
|
|
password: "",
|
|
tel: "",
|
|
realName: ''
|
|
});
|
|
const status = ref(1); //1登录 2注册
|
|
return {
|
|
form,regForm,
|
|
status,
|
|
proxy,
|
|
store
|
|
};
|
|
},
|
|
methods: {
|
|
submit() {
|
|
this.proxy.$post("/admin/login", this.form).then((res) => {
|
|
const data = res.data;
|
|
if(res.code == 200) {
|
|
this.store.commit("setToken", data.token);
|
|
this.store.commit("setUserInfo", data);
|
|
this.$message.success("登录成功");
|
|
this.$router.push('/');
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
}).catch(() => {});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.page-container {
|
|
background: rgb(242, 242, 242);
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.page-outer {
|
|
width: 400px;
|
|
padding-top: 72px;
|
|
.big-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 32px;
|
|
line-height: 22px;
|
|
padding-bottom: 72px;
|
|
}
|
|
.login-box {
|
|
background: #FFF;
|
|
padding: 36px;
|
|
.login-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 36px;
|
|
.login-title-item {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
};
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 180px
|
|
}
|
|
}
|
|
}
|
|
</style> |