script setupimport reactive ref from vue;import axios from axios;import Vcode from vue3-puzzle-vcode;const state = reactive username password ;const isShow = reffalse;const submit = e = epreven

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import Vcode from 'vue3-puzzle-vcode';

const state = reactive({
  username: '',
  password: '',
});

const isShow = ref(false);

const submit = (e) => {
  e.preventDefault();
  // 登录逻辑
  axios.post('http://nn.nncoding.icu:8080/api/login', {
    username: state.username,
    password: state.password
  }).then(result => {
    console.log('登录成功');
    console.log(result);
  }).catch(error => {
    alert('登录失败，用户名或密码错误');
    console.log(error);
    console.log(error.response.data.message);
  });
};

const onClose = () => {
  isShow.value = false;
};

const onSuccess = () => {
  onClose(); // 验证成功，需要手动关闭模态框
};
</script>
<template>
  <div id="cloud"><span class="shadow"></span></div>
  <div id="cloud1"><span class="shadow"></span></div>
  <div id="cloud2"><span class="shadow"></span></div>
  <div class="login-page">
    <div class="login-container">
      <h2 class="login-title">登录</h2>
      <el-form class="login-form">
        <el-form-item label="账号:">
          <el-input v-model="state.username" type="text" style="width: 250px;" placeholder="手机号" required></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="state.password" type="password" style="width:250px" placeholder="密码" show-password required />
        </el-form-item>
        <el-form-item>
          <!-- :imgs="imgs" 自定义图片-->
          <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
          <el-button class="login-button" type="primary" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="register-link">
        <router-link to="/register">
          <el-button type="info" style="width: 100%;">注册</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template