82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive } from "vue";
|
|
import { api } from "@/api";
|
|
|
|
const form = reactive<{
|
|
email: string;
|
|
nickname: string;
|
|
password: string;
|
|
}>({
|
|
email: "",
|
|
nickname: "",
|
|
password: "",
|
|
});
|
|
|
|
const onSubmit = () => {
|
|
api.UserController.registerUser(form).then((resp) => {
|
|
let vo = resp.data;
|
|
if (vo.code === 200) {
|
|
console.log("register success!");
|
|
} else {
|
|
console.warn("register failed: ", vo.msg);
|
|
return;
|
|
}
|
|
api.updateCurrentUserInfo();
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="register-div">
|
|
<div style="flex-grow: 1"></div>
|
|
<el-card class="register-card">
|
|
<el-form :model="form" label-width="60px">
|
|
<h1 class="card-title">用 户 注 册</h1>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="form.email" />
|
|
</el-form-item>
|
|
<el-form-item label="昵称">
|
|
<el-input v-model="form.nickname" />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="form.password" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button class="register-button" type="primary" @click="onSubmit"
|
|
>注册</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<div style="flex-grow: 1"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.register-div {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.register-card {
|
|
width: 480px;
|
|
max-width: 90%;
|
|
margin-bottom: 240px;
|
|
}
|
|
|
|
.card-title {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.register-button {
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
}
|
|
</style>
|