open_platform/src/views/RegisterView.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.register({
    userEmail: email.value,
    userPhone: phone.value,
    userPwd: pwd.value
  }).then(() => {
    ElMessage.success("注册成功")
    open()
  })
}
</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>