web-class-frontend/app/pages/login/components/RegisterPart.vue

<script setup lang="ts">
  import type {
    FormProps,
    UploadInstanceFunctions,
    FormInstanceFunctions,
  } from 'tdesign-vue-next';
  import type { IAPIResponse } from '~/utils/APIResponse';
  const store = useLoginStore();
  const { registerForm, currentType } = storeToRefs(store);
  const rules: FormProps['rules'] = {
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { email: true, message: '请输入邮箱', trigger: 'change' },
    ],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    passwordRepeat: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      {
        validator: (val) => val === registerForm.value.password,
        message: '两次输入密码不一致',
        trigger: 'change',
      },
    ],
    birth: [{ required: true, message: '请输入出生日期', trigger: 'change' }],
  };
  const uploadImage = ref<UploadInstanceFunctions>();
  const formInstance = ref<FormInstanceFunctions>();
  async function submitForm() {
    console.log(formInstance.value);
    if (!formInstance.value) return;
    const result = await formInstance.value.validate();
    if (typeof result === 'boolean' && result) {
      formInstance.value.submit();
    }
  }
</script>

<template>
  <div class="w-full">
    <div class="flex md:flex-row flex-col items-center gap-4 justify-around">
      <div class="flex flex-col items-center gap-4 max-w-96">
        <t-form
          ref="formInstance"
          :label-width="10"
          :data="registerForm"
          :rules="rules"
          @submit="() => store.register()"
        >
          <t-form-item name="email">
            <TInput v-model="registerForm.email" placeholder="请输入邮箱" />
          </t-form-item>
          <t-form-item name="username">
            <TInput
              v-model="registerForm.username"
              placeholder="请输入用户名"
            />
          </t-form-item>
          <t-form-item name="password">
            <TInput
              v-model="registerForm.password"
              placeholder="请输入密码"
              type="password"
            />
          </t-form-item>
          <t-form-item name="passwordRepeat">
            <TInput
              v-model="registerForm.passwordRepeat"
              placeholder="请再次输入密码"
              type="password"
            />
          </t-form-item>
          <t-form-item name="birth">
            <TDatePicker
              v-model="registerForm.birth"
              placeholder="请输入出生日期"
            />
          </t-form-item>
        </t-form>
      </div>

      <TUpload
        ref="uploadImage"
        action="/api/file/uploadAvatar"
        class="set-width-length bg-white bg-opacity-70"
        theme="custom"
        accept="image/*"
        :draggable="true"
        :format-response="
          (res) => {
            res = res as IAPIResponse<string>;
            if (res.code === 200) {
              registerForm.avatarURL = res.data;
              return { url: res.data };
            }
            return { fail: res.message };
          }
        "
      >
        <div v-if="registerForm.avatarURL" class="aspect-square h-full">
          <t-image
            :src="registerForm.avatarURL"
            class="w-40 h-40 object-cover rounded-md"
            fit="contain"
          />
        </div>
        <div v-else>
          <span class="text-blue-400"> 点击上传头像</span>
          <span> / 拖拽到此区域 </span>
        </div>
      </TUpload>
    </div>

    <div
      class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
    >
      <button class="text-white" @click="submitForm">注册用户</button>
      <button class="text-white" @click="currentType = PageType.login"
        >返回登录
      </button>
    </div>
  </div>
</template>

<style scoped lang="less">
  :deep(.t-upload__dragger),
  .set-width-length {
    @apply w-64;
    @apply h-40;
    @apply p-0;
    @apply border-0;
  }
  // {
  //  @apply w-40;
  //  @apply h-40;
  //}
  :deep(.t-date-picker) {
    @apply w-full;
  }
</style>