ContestPortal/src/views/login/registered.vue

<template>
  <div class="login-form">
    <div class="login-title">注册</div>
    <div class="form">
      <el-form :model="form" label-width="0">
        <el-form-item>
          <el-col :span="11">
            <el-input
              v-model="form.username"
              :prefix-icon="User"
              placeholder="账号"
              style="height: 0.2344rem"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500"></span>
          </el-col>
          <el-col :span="11">
            <el-input
              v-model="form.realname"
              :prefix-icon="User"
              placeholder="姓名"
              style="height: 0.2344rem"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.workno"
            placeholder="工号/学号"
            :prefix-icon="Iphone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-cascader
          v-model="form.department"
            placeholder="选择院系"
            :options="options"
            style="width: 100%; height: 0.2344rem"
          /> -->
          <el-cascader
            :props="props"
            style="width: 100%; height: 0.2344rem"
            v-model="form.department"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="手机号码"
            v-model="form.mobile"
            :prefix-icon="Iphone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="密码"
            v-model="form.password"
            :prefix-icon="Lock"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="确认密码"
            v-model="form.confirmPassword"
            :prefix-icon="Lock"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-input
            placeholder="验证码"
            v-model="form.smscode"
            :prefix-icon="Lock"
          ></el-input> -->
          <div class="captcha">
            <el-input
              v-model="form.smscode"
              style="height: 0.2344rem"
              maxlength="4"
              :prefix-icon="Lock"
            />
            <div class="code" @click="getcodeinfo">
              <img :src="codeUrl" alt="" srcset="" />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn">
        <div @click="$emits('backLogin')">返回</div>
        <div class="gradient" @click="ragistered">注册</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { User, Iphone, Lock } from '@element-plus/icons-vue'
import { getFaculties } from '@/api/race'
import { ElMessage } from 'element-plus'
import { getCode, sturegister } from '@/api/user'
const $emits = defineEmits(['backLogin'])
const form = reactive<any>({
  username: '',
  realname: '',
  workno: '',
  department: '',
  mobile: '',
  password: '',
  confirmPassword: '' /*, policy: false*/,
  smscode: '',
})
const KeyValue: any = {
  username: '账号',
  realname: '姓名',
  workno: '学号',
  department: '院系',
  mobile: '手机号',
  password: '密码',
  confirmPassword: '确认密码' /*, policy: false*/,
  smscode: '验证码',
}

const FacultiesList = ref([])
const getFacultiesList = async (data: any) => {
  const res: any = await getFaculties(data)
  console.log(res, 'res')
  FacultiesList.value = res.result
}
// 配置部门级联选择器
const props = {
  lazy: true,
  checkStrictly: true,
  emitPath: false,
  async lazyLoad(node: any, resolve: any) {
    await getFacultiesList({
      primaryKey: 'key',
      pid: node.value,
    })
    const nodes = FacultiesList.value.map((item: any) => ({
      value: item.id,
      label: item.title,
    }))
    resolve(nodes)
  },
}

const ragistered = async () => {
  for (const key in form) {
    if (form[key] === '') {
      ElMessage.warning(`${KeyValue[key]}不能为空`)
      return console.log(KeyValue[key], '不能为空')
    } else {
      if (key === 'mobile') {
        const phoneRegex = /^1[3-9]\d{9}$/
        if (!phoneRegex.test(form[key])) {
          return ElMessage.warning(`手机号格式不正确`)
        }
      }
    }
  }
  if (!(form.password === form.confirmPassword)) {
    return ElMessage.warning(`两次密码不同`)
  }
  console.log(form)
  let data = {
    checkKey: 1629428467008,
    departmentid: form.department,
    password: form.password,
    phone: form.mobile,
    realname: form.realname,
    smscode: form.smscode,
    username: form.username,
    workno: form.workno,
  }
  const res: any = await sturegister(data)
  if (res.code === 200) {
    ElMessage.success(`注册成功`)
    $emits('backLogin')
  } else {
    ElMessage.warning(res.message)
    getcodeinfo()
  }
  console.log(res)
}
const codeUrl = ref('')

// 获取验证码
const getcodeinfo = async () => {
  const res: any = await getCode(1629428467008)
  codeUrl.value = res.result
  console.log(codeUrl.value)
}
getcodeinfo()
</script>

<style lang="scss" scoped>
.login-form {
  width: 640px;
  height: 820px;
  border-radius: 15px;
  background-color: #ffffff1a !important;
  padding: 70px 60px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
  .login-title {
    font-size: 32px;
    font-weight: 700;
  }
  .form {
    margin-top: 45px;
    padding: 0 40px;
    .captcha {
      width: 100%;
      height: 100%;
      position: relative;
      .code {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 105px;
        height: 100%;
        // background-color: pink;
        display: flex;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .submit {
      width: 399px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      color: #fff;
      border-radius: 10px;
      margin-top: 35px;
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
    div {
      width: 210px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 10px;
    }
    div:nth-child(1) {
      border: 1px solid #dbdbdb;
      color: #3c3c3c;
    }
    div:nth-child(2) {
      color: #fff;
    }
  }
}
:deep(.el-form-item) {
  display: flex;
  flex-direction: row !important;
  height: 45px;
  margin-top: 25px;
  .el-input {
    height: 100%;
  }
  input {
    height: 100%;
  }
}
</style>