1

PC-20250623MANY\Administrator

2025-08-21 25c1d10f03df05104e323494fefd5af1e94c98f7

 src/views/login.vue

@@ -1,191 +1,201 @@
<template>
    <div class="login-container page-w page-content">
        <div class="login-left">
            <div class="logo-container flex-center">
                <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
            </div>
            <div class="slogan">
  <div class="login-container page-w page-content">
    <div class="login-left">
      <div class="logo-container flex-center">
        <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
      </div>
      <!-- <div class="slogan">
                <h1>Purchase, Trading</h1>
                <h2>All here</h2>
            </div>
        </div>
        <div class="login-right">
            <div class="login-form">
                <h2>{{ $t('dlan') }}</h2>
                <el-form :model="loginForm" :rules="rules" ref="loginForm">
                    <el-form-item prop="phone">
                        <label>{{ $t('hj27') }}</label>
                        <el-input v-model="loginForm.phone" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item prop="userPwd">
                        <label>{{ $t('Password') }}</label>
                        <el-input v-model="loginForm.userPwd" type="password" placeholder="" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="login-button" @click="submitForm('loginForm')"
                            :loading="isloading">
                            {{ $t('dlan') }}
                        </el-button>
                    </el-form-item>
                    <div class="login-options">
                        <span>{{ $t('hj14') }}?</span>
                        <router-link to="/register" class="register-link">{{ $t('ar1') }}</router-link>
                    </div>
                </el-form>
            </div>
        </div>
            </div> -->
    </div>
    <div class="login-right">
      <div class="login-form">
        <h2>{{ $t("dlan") }}</h2>
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="phone">
            <label>{{ $t("hj27") }}</label>
            <el-input v-model="loginForm.phone" placeholder=""></el-input>
          </el-form-item>
          <el-form-item prop="userPwd">
            <label>{{ $t("Password") }}</label>
            <el-input
              v-model="loginForm.userPwd"
              type="password"
              placeholder=""
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              @click="submitForm('loginForm')"
              :loading="isloading"
            >
              {{ $t("dlan") }}
            </el-button>
          </el-form-item>
          <div class="login-options">
            <span>{{ $t("hj14") }}?</span>
            <router-link to="/register" class="register-link">{{
              $t("ar1")
            }}</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/axios/api.js'
import * as api from "@/axios/api.js";
export default {
    name: "LoginView",
    data() {
        return {
            loginForm: {
                phone: "",
                userPwd: ""
            },
            rules: {
                phone: [
                    { required: true, message: this.$t('请输入'), trigger: "blur" }
                ],
                userPwd: [
                    { required: true, message: this.$t('请输入'), trigger: "blur" }
                ]
            },
            isloading: false,
        };
    },
    methods: {
        // 提交表单 登录
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 登录逻辑
                    this.isloading = true; // 显示加载状态
                    let data = await api.login(this.loginForm);
  name: "LoginView",
  data() {
    return {
      loginForm: {
        phone: "",
        userPwd: "",
      },
      rules: {
        phone: [
          { required: true, message: this.$t("请输入"), trigger: "blur" },
        ],
        userPwd: [
          { required: true, message: this.$t("请输入"), trigger: "blur" },
        ],
      },
      isloading: false,
    };
  },
  methods: {
    // 提交表单 登录
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 登录逻辑
          this.isloading = true; // 显示加载状态
          let data = await api.login(this.loginForm);

                    if (data.status == 0) {
                        this.$store.commit("undataToken", data.data.token); // 存储token,vuex
                        window.localStorage.setItem("USERTOKEN", data.data.token); // 存储token,浏览器
                        this.$router.replace({ path: "/" }); // 跳转到首页
                    }
                    this.isloading = false; // 隐藏加载状态
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
          if (data.status == 0) {
            this.$store.commit("undataToken", data.data.token); // 存储token,vuex
            window.localStorage.setItem("USERTOKEN", data.data.token); // 存储token,浏览器
            this.$router.replace({ path: "/" }); // 跳转到首页
          }
          this.isloading = false; // 隐藏加载状态
        } else {
          console.log("error submit!!");
          return false;
        }
    }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  background: none;
  color: #fff;
  border: none;
  border-radius: 0;
  border-bottom: #ccc solid 1px;
}
.login-container {
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: #fff;
  display: flex;
  height: 100vh;
  width: 100%;
  // background-color: #fff;
}

.login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f5f5f5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #333;
}

.logo-container {
    margin-bottom: 40px;
  margin-bottom: 40px;
}

.logo {
    width: 200px;
  width: 200px;
}

.slogan {
    margin: 0 auto;
  margin: 0 auto;

    h1 {
        font-size: 36px;
        color: #333;
        margin-bottom: 10px;
        font-weight: bold;
    }
  h1 {
    font-size: 36px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
  }

    h2 {
        font-size: 36px;
        color: #c8d405;
        font-weight: bold;
    }
  h2 {
    font-size: 36px;
    color: #287dff;
    font-weight: bold;
  }
}

.login-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
    width: 70%;
    max-width: 400px;
  width: 70%;
  max-width: 400px;

    h2 {
        font-size: 24px;
        margin-bottom: 30px;
        font-weight: normal;
  h2 {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: normal;
  }

  label {
    display: block;
    margin-bottom: 8px;
    color: #606266;
  }

  .el-form-item {
    margin-bottom: 25px;
  }

  .el-input {
    width: 100%;
  }

  .login-button {
    width: 100%;
    height: 50px;
    font-size: 16px;
    border-radius: 25px;
    margin-top: 10px;
  }

  .login-options {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #606266;

    .register-link {
      color: #287dff;
      margin-left: 5px;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    label {
        display: block;
        margin-bottom: 8px;
        color: #606266;
    }

    .el-form-item {
        margin-bottom: 25px;
    }

    .el-input {
        width: 100%;
    }

    .login-button {
        width: 100%;
        height: 50px;
        background-color: #c8d405;
        border-color: #c8d405;
        font-size: 16px;
        border-radius: 25px;
        margin-top: 10px;

        &:hover,
        &:focus {
            background-color: #b8c205;
            border-color: #b8c205;
        }
    }

    .login-options {
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
        color: #606266;

        .register-link {
            color: #c8d405;
            margin-left: 5px;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
  }
}
</style>
</style>