124 行
3.2 KiB
Vue
124 行
3.2 KiB
Vue
<script setup lang="ts">
|
|
import CommonView from "@/components/CommonView.vue"
|
|
import { ref } from "vue"
|
|
import { Lock, Phone, User } from "@element-plus/icons-vue"
|
|
import { useRouter } from "vue-router"
|
|
import { ElMessage } from "element-plus"
|
|
// @ts-ignore
|
|
import API from "@/api/index.js"
|
|
|
|
const router = useRouter()
|
|
|
|
const Api = API
|
|
|
|
const email = ref("")
|
|
const pwd = ref("")
|
|
const pwd2 = ref("")
|
|
const phone = ref("")
|
|
const code = ref("")
|
|
|
|
const open = () => {
|
|
router.push("/login")
|
|
}
|
|
|
|
const register = () => {
|
|
if (email.value.length === 0) {
|
|
ElMessage.error("请输入正确的邮箱地址")
|
|
return
|
|
}
|
|
if (pwd.value.length === 0) {
|
|
ElMessage.error("请输入密码")
|
|
return
|
|
}
|
|
if (pwd2.value.length === 0) {
|
|
ElMessage.error("请输入确认密码")
|
|
return
|
|
}
|
|
if (pwd2.value !== pwd.value) {
|
|
ElMessage.error("两次输入的密码不一致")
|
|
return
|
|
}
|
|
if (phone.value.length === 0) {
|
|
ElMessage.error("请输入正确手机号")
|
|
return
|
|
}
|
|
if (code.value.length === 0) {
|
|
ElMessage.error("请输入验证吗")
|
|
return
|
|
}
|
|
if (code.value !== "123456") {
|
|
ElMessage.error("验证码错误")
|
|
return
|
|
}
|
|
Api.login({
|
|
userEmail: email.value,
|
|
userPhone: phone.value,
|
|
userPwd: pwd.value
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<CommonView title="注册">
|
|
<div style="display: flex; place-content: center">
|
|
<el-card style="max-width: 480px">
|
|
<template #header>
|
|
<div class="card-header" style="display: flex; flex-direction: row-reverse">
|
|
<el-button type="primary" @click="open">登录</el-button>
|
|
</div>
|
|
</template>
|
|
<div class="flex gap-4 mb-4">
|
|
<el-input
|
|
class="text item"
|
|
v-model="email"
|
|
style="width: 440px"
|
|
placeholder="请输入邮箱地址"
|
|
:prefix-icon="User"
|
|
:clearable="true"
|
|
/>
|
|
<el-input
|
|
v-model="pwd"
|
|
style="width: 440px; margin-top: 18px"
|
|
placeholder="请输入密码"
|
|
:prefix-icon="Lock"
|
|
:clearable="true"
|
|
:show-password="true"
|
|
/>
|
|
<el-input
|
|
v-model="pwd2"
|
|
style="width: 440px; margin-top: 18px"
|
|
placeholder="请输入确认密码"
|
|
:prefix-icon="Lock"
|
|
:show-password="true"
|
|
:clearable="true"
|
|
/>
|
|
<el-input
|
|
v-model="phone"
|
|
style="width: 440px; margin-top: 18px"
|
|
placeholder="请输入手机号"
|
|
:prefix-icon="Phone"
|
|
:clearable="true"
|
|
/>
|
|
<el-input
|
|
v-model="code"
|
|
style="width: 440px; margin-top: 18px"
|
|
placeholder="请输入验证码"
|
|
:prefix-icon="Lock"
|
|
:show-password="true"
|
|
:clearable="true"
|
|
>
|
|
<template #append>
|
|
<el-button>获取验证码</el-button>
|
|
</template>
|
|
</el-input>
|
|
<el-button style="width: 440px; margin-top: 28px" type="primary" @click="register"
|
|
>注册
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</CommonView>
|
|
</template>
|
|
|
|
<style scoped></style>
|
