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.
60 lines
1.3 KiB
60 lines
1.3 KiB
3 years ago
|
<template>
|
||
|
|
<div class="page-container">
|
||
|
|
<div class="page-outer">
|
||
|
|
<a-form>
|
||
|
|
<a-form-item label="账号">
|
||
|
|
<a-input v-model:value="form.username" placeholder="账号" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item label="密码">
|
||
|
|
<a-input-password v-model:value="form.password" placeholder="密码" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item>
|
||
|
|
<a-button type="primary" style="width: 100%" @click="submit"
|
||
|
|
>登 录</a-button
|
||
|
|
>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { defineComponent, reactive, getCurrentInstance } from "vue";
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'v-login',
|
||
|
|
setup() {
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
const store = useStore();
|
||
|
|
const form = reactive({
|
||
|
|
username: "admin",
|
||
|
|
password: "111111",
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
form,
|
||
|
|
proxy,
|
||
|
|
store
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submit() {
|
||
|
|
this.proxy.$post("/login", this.form).then((res) => {
|
||
|
|
const data = res.data;
|
||
|
|
this.store.commit("setToken", data.token);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.page-container {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.page-outer {
|
||
|
|
width: 400px;
|
||
|
|
transform: translate(50%, 50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|