Parallax causes pages to go dark

[048913]

/

<template>
  <div class="parallax-container">
    <v-img
      :src="backgroundImage"
      :height="parallaxHeight"
      class="parallax-background"
      width="100vw"
      cover
    >
      <v-main class="main-container">
        <div class="content-wrapper">
          <div v-if="isLogin" class="content">
            <v-alert v-if="showBanner" closable :type="bannerColor" class="mb-4">
              {{ bannerText }}
            </v-alert>
            <h1>登录</h1>
            <v-form>
              <v-text-field v-model="username" :counter="15" label="账号" required></v-text-field>
              <v-text-field v-model="password" label="密码" required type="password"></v-text-field>
            </v-form>
            <v-sheet
              class="py-8 px-6 mx-auto ma-4 text-center"
              elevation="4"
              max-width="500"
              rounded="lg"
              width="100%"
            >
              <h3 class="text-h5">请输入验证码</h3>
              <div class="text-subtitle-2 font-weight-light mb-3">点击生成按钮获取验证码</div>

              <v-otp-input
                v-model="otp"
                class="mb-8"
                divider="•"
                length="4"
                variant="outlined"
              ></v-otp-input>

              <v-alert closable v-if="otpError" class="mb-4" type="error">
                验证码错误，请重新输入
              </v-alert>

              <div class="text-caption">
                <v-btn
                  color="primary"
                  size="x-small"
                  @click="generateOtp"
                >
                  生成验证码
                </v-btn>
              </div>

              <div class="generated-otp">
                生成的验证码: {{ generatedOtp }}
              </div>
            </v-sheet>

            <v-checkbox
              v-model="checkbox"
              :rules="[v => !!v || '你必须同意后才能进行登录!']"
              label="你是否同意用户协议?"
              required
            ></v-checkbox>

            <v-btn
              :disabled="loading"
              :loading="loading"
              class="text-none mb-4"
              @click="handleLoginClick"
            >
              登录
            </v-btn>
            <v-btn
              class="text-none mb-4"
              @click="changeComponents"
            >
              没有账号?点我进行注册
            </v-btn>
          </div>

          <div v-else class="content">
            <v-alert v-if="showBanner" closable :type="bannerColor" class="mb-4">
              {{ bannerText }}
            </v-alert>
            <h1>注册</h1>
            <v-form>
              <v-text-field v-model="username" label="账号" required></v-text-field>
              <v-text-field v-model="password" label="密码" type="password" required></v-text-field>
              <v-text-field v-model="name" label="姓名" type="name" required></v-text-field>
              <v-text-field v-model="IdCard" label="Id" type="ID" required></v-text-field>
              <v-combobox
                v-model="gender"
                :items="['男', '女','不方便透露']"
                clearable
                label="性别"
                required
              ></v-combobox>
              <v-text-field v-model="birthday" label="生日" type="date" required></v-text-field>

              <v-file-input
                v-model="img_user"
                accept="image/*"
                label="用户头像"
              ></v-file-input>
            </v-form>
            <v-checkbox
              v-model="checkbox"
              :rules="[v => !!v || '你必须同意后才能进行注册!']"
              label="你是否同意用户协议?"
              required
            ></v-checkbox>

            <v-btn
              :disabled="loading"
              :loading="loading"
              class="text-none mb-4"
              @click="handleRegisterClick"
            >
              注册
            </v-btn>
            <v-btn
              color="primary"
              @click="changeComponents"
            >
              已有账号?点我登录
            </v-btn>
          </div>
        </div>
      </v-main>
    </v-img>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores';

const router = useRouter();

const backgroundImage = ref('');
const loading = ref(false);
const otp = ref('');
const generatedOtp = ref('');
const username = ref('');
const password = ref('');
const name = ref('');
const IdCard = ref('');
const gender = ref('');
const birthday = ref('');
const otpError = ref(false);
const isLogin = ref(true);
const img_user = ref(null);
const showBanner = ref(false);
const bannerText = ref('');
const bannerColor = ref('');
const checkbox = ref(false);
const parallaxHeight = ref(window.innerHeight);

function changeComponents() {
  isLogin.value = !isLogin.value;
}

const generateOtp = () => {
  generatedOtp.value = Math.floor(1000 + Math.random() * 9000).toString();
};

const updateParallaxHeight = () => {
  parallaxHeight.value = window.innerHeight;
};

onMounted(async () => {
  generateOtp();
  window.addEventListener('resize', updateParallaxHeight);

  try {
    const module = await import('@/assets/images/index.jpg');
    backgroundImage.value = module.default;
  } catch (error) {
    console.error('Failed to load background image:', error);
  }
});

onUnmounted(() => {
  window.removeEventListener('resize', updateParallaxHeight);
});

// 登录方法
const handleLoginClick = async () => {
  if (otp.value !== generatedOtp.value) {
    otpError.value = true;
    return;
  }
  if (username.value === '' || password.value === '' || checkbox.value === false) {
    return;
  }
  try {
    loading.value = true;
    const response = await axios.post('http://localhost:8000/api/login/', {
      username: username.value,
      password: password.value,
    });

    if (response.status === 200) {
      const userStore = useUserStore();
      userStore.setUser(response.data);
      router.push('/index');
      showBanner.value = true;
      bannerText.value = '登录成功';
      bannerColor.value = 'success';
    } else {
      showBanner.value = true;
      bannerText.value = '登录失败';
      bannerColor.value = 'error';
    }
  } catch (error) {
    otpError.value = true;
    showBanner.value = true;
    bannerText.value = '登录失败: ' + error.message;
    bannerColor.value = 'error';
  } finally {
    loading.value = false;
  }
};

// 注册方法
const handleRegisterClick = async () => {
  try {
    loading.value = true;
    const formData = new FormData();
    formData.append('username', username.value);
    formData.append('password', password.value);
    formData.append('name', name.value);
    formData.append('id_card', IdCard.value);
    formData.append('birthday', birthday.value);
    formData.append('gender', gender.value);
    formData.append('user_number', '1'); // 虽然后端会生成，但这里可以暂时添加

    if (img_user.value) {
      formData.append('img', img_user.value);
    }

    const response = await axios.post('http://localhost:8000/api/register/', formData);
    if (response.status === 201) {
      isLogin.value = true;
      showBanner.value = true;
      bannerText.value = '注册成功';
      bannerColor.value = 'success';
    } else {
      showBanner.value = true;
      bannerText.value = '注册失败';
      bannerColor.value = 'error';
    }
  } catch (error) {
    showBanner.value = true;
    bannerText.value = '注册失败: ' + error.message;
    bannerColor.value = 'error';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.parallax-container {
  height: 100vh;
  overflow-y: auto;
  position: relative;
}

.parallax-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 2rem 0;
}

.content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.content {
  text-align: center;
  width: 30%;
  background-color: rgba(135, 206, 235, 0.5);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 8px;
  max-height: none;
  overflow-y: visible;
}

.h1 {
  text-align: center;
  background: black;
}

::v-deep .v-sheet {
  background-color: skyblue;
  backdrop-filter: blur(10px);
}

::v-deep .v-input__control {
  background: grey;
  backdrop-filter: blur(10px);
}

::v-deep .v-input__slot {
  border-radius: 4px;
  backdrop-filter: blur(10px);
}

::v-deep .v-btn {
  background-color: skyblue;
  backdrop-filter: blur(10px);
  color: white;
}

::v-deep .v-btn:hover {
  background-color: #004d40;
}

.generated-otp {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
</style>