GateWay/src/views/loggin/loggin.vue

<template>
  <div class="container">
    <div class="welcome-wrapper">
      <p>欢迎 :)</p>
    </div>
    <div class="login-wrapper">
      <h4>登录</h4>
      <div class="login-checkbox">
        <van-cell-group class="custom-cell-group" inset id="password-input">
          <van-field class="custom-field" v-model="password" type="password" label="密码" />
        </van-cell-group>
        <div class="options-row">
          <van-checkbox v-model="checked">记住密码</van-checkbox>
          <span class="forgot-password" @click="goto('reset')">修改密码？</span>
        </div>
      </div>
      <van-button class="login-button" type="primary" size="large" @click="login">登录</van-button>
    </div>
    <van-toast /> <!-- 这是挂载点 -->
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 引入axios库
import '@vant/touch-emulator';
import { useStore } from 'vuex'; // 引入 useStore


export default {
  setup() {
    const checked = ref(true);
    const password = ref('');
    const router = useRouter();
    const jsonId = ref(1); // 初始 JSON ID
    const store = useStore(); // 使用 useStore 获取 store 实例

    const goto = (name) => {
      router.push({ name });
    };

    const login = () => {
      const loginData = {
        "board_id": 1,
        "JSON_id": jsonId.value,
        "gateway": {
          "log_in": {
            "type": 1,
            "pass": password.value
          }
        }
      };
      console.log(JSON.stringify(loginData)); // 将 loginData 对象转换为字符串并打印出来
      axios.post(`/communication`, loginData, {
        headers: {
          "content-type": "application/json"
        }
      })
        .then(response => {
          // 处理成功响应
          const responseData = response.data;
          if (responseData.gateway && responseData.gateway.log_in && responseData.gateway.log_in.return === 0) {
            // 登录成功
            console.log(JSON.stringify(responseData)); // 将 loginData 对象转换为字符串并打印出来
            showSuccessToast('登录成功');
            jsonId.value++;
            store.commit('setAuthenticated', true); // 提交 mutation 更新认证状态
            router.push('/');
            if (checked.value) {
              localStorage.setItem('password', password.value);
            } else {
              localStorage.removeItem('password');
            }
          } else {
            // 密码错误或其他原因导致登录失败
            showFailToast('密码错误');
            console.error('Login failed:', responseData);
          }
        })
        .catch(error => {
          // 处理错误
          showFailToast('登录失败，请重试');
          console.error('Login error:', error);
        });
    };

    onMounted(() => {
      const savedPassword = localStorage.getItem('password');
      if (savedPassword) {
        password.value = savedPassword;
        checked.value = true;
      }
      store.commit('setAuthenticated', false);
      localStorage.removeItem('isAuthenticated');

    });
    return { checked, password, goto, login };
  },
};

</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-image: linear-gradient(0deg, #78e6f5 0%, #0668fc 100%);
}

.welcome-wrapper {
  position: absolute;
  left: 20px;
  top: 10px;
  color: #fff;
}

.custom-cell-group {
  width: 100%;
  display: flex;
  justify-content: center;
}

.custom-field {
  width: 100%;
  max-width: 300px;
  border: 2px solid #146bec;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}

::v-deep .custom-field .van-field__control {
  text-align: center;
}

.login-checkbox {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin-top: 30px;
}

.forgot-password {
  color: #146bec;
  cursor: pointer;
  bottom: 0px;
}

.container .login-wrapper {
  background-color: #fff;
  width: 60%;
  height: 400px;
  padding: 0 10%;
  position: fixed;
  left: 50%;
  border-radius: 15px;
  top: 50%;
  transform: translate(-50%, -50%);
  animation-name: fadeIn;
  margin-bottom: 20px;
}

h4 {
  font-size: 40px;
  color: #146bec;
}

.login-button {
  margin-top: 40px;
}

.remember {
  margin-top: 20px;
}
</style>