样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/page/login/index.vue

@@ -1,88 +1,107 @@
<template>
   <div class="login">
      <div class="top" @click="$router.push('/home')"><img
            :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="" /></div>
      <div class="title textColor">{{ $t('登录') }}</div>
    <div class="top" @click="$router.push('/home')">
      <img
        :src="require(`../../assets/theme/${theme}/image/Union.png`)"
        alt=""
      />
    </div>
    <div class="title textColor">{{ $t("登录") }}</div>
      <div class="flex login-tab">
         <!--            <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
         <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}
      <div
        class="textColor1"
        :class="activeIndex == 1 ? 'active' : ''"
        @click="changeIndex(1)"
      >
        {{ $t("邮箱") }}
         </div>
         <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}
         </div> -->
      </div>
      <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)"
         v-model="username" :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon" />
      <ExInput style="padding-bottom:0!important;" :label="$t('密码')" :placeholderText="$t('请输入您的密码')"
         v-model="password" typeText="password" />
      <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('忘记密码?') }}</div>
      <div class="btn btnMain" @click="verifyLogin">{{ $t('登录') }}</div>
      <!-- <div class="btn btnMain" @click="loginButton">{{ $t('登录') }}</div> -->
      <div class="noTips textColor">{{ $t('还没有账号') }}<span class="colorMain" @click="$router.push('/register')">
            {{ $t('去注册') }}</span>
    <ExInput
      :label="getRegType(activeIndex, true)"
      :placeholderText="getRegType(activeIndex, false)"
      v-model="username"
      :dialCode="dialCode"
      @selectArea="onSelectArea"
      :area="isArea"
      :icon="icon"
    />
    <ExInput
      style="padding-bottom: 0 !important"
      :label="$t('密码')"
      :placeholderText="$t('请输入您的密码')"
      v-model="password"
      typeText="password"
    />
    <div class="forget colorMain" @click="$router.push('/forget')">
      {{ $t("忘记密码?") }}
      </div>
      <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
    <div class="btn" @click="verifyLogin">{{ $t("登录") }}</div>
    <!-- <div class="btn btnMain" @click="loginButton">{{ $t('登录') }}</div> -->
    <div class="noTips textColor">
      {{ $t("还没有账号")
      }}<span class="colorMain" @click="$router.push('/register')">
        {{ $t("去注册") }}</span
      >
    </div>
    <nationality-list
      ref="controlChild"
      :title="$t('选择区域码')"
      @getName="getName(arguments)"
    ></nationality-list>
   </div>
</template>

<script>
   import ExInput from "@/components/ex-input";
   import Axios from "@/API/login.js";
   import {
      mapActions,
      mapGetters
   } from 'vuex';
   import {
      GET_USERINFO,
      SET_CONFIG,
      SET_KEFU
   } from '@/store/const.store';
   import nationalityList from '../authentication/components/nationalityList.vue';
   import {
      ethers
   } from 'ethers';
import { mapActions, mapGetters } from "vuex";
import { GET_USERINFO, SET_CONFIG, SET_KEFU } from "@/store/const.store";
import nationalityList from "../authentication/components/nationalityList.vue";
import { ethers } from "ethers";
   export default {
      props: {

      },
  props: {},
      components: {
         ExInput,
         nationalityList
    nationalityList,
      },
      data() {
         return {
            username: '',
      username: "",
            password: "",
            activeIndex: 1,
            isArea: false,
            typeText: "password",
            dialCode: 0, //电话号前缀
            icon: '',
         }
      icon: "",
    };
      },
      computed: {
         ...mapGetters({
            theme: 'home/theme'
      theme: "home/theme",
         }),
      },
      mounted() {
         // this.loginButton()
      },
      methods: {
         ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
    ...mapActions("user", [GET_USERINFO, SET_CONFIG]),
         async loginButton() {
            // 检查钱包是否存在
            if (typeof window.ethereum !== 'undefined') {
      if (typeof window.ethereum !== "undefined") {
               try {
                  // 请求用户授权
                  const accounts = await window.ethereum.request({
                     method: 'eth_requestAccounts'
            method: "eth_requestAccounts",
                  });
                  const userAddress = accounts[0];
                  console.log("accounts,accountsaccounts", accounts);
                  // 签名消息
                  const message = "请确认您的身份。";
                  const signature = await window.ethereum.request({
                     method: 'personal_sign',
            method: "personal_sign",
                     params: [message, userAddress],
                  });
                  // const email = prompt("请输入您的邮箱地址：");
@@ -93,20 +112,18 @@
                  // 发送用户地址和签名到后端
                  await this.registerOrLoginUser(userAddress, signature, message);
               } catch (error) {
                  console.error('连接钱包时出错:', error);
          console.error("连接钱包时出错:", error);
               }
            } else {
               alert('Please install Little Fox Wallet！');
        alert("Please install Little Fox Wallet！");
               // this.$router.go(-1)
               this.$router.replace('/home')
        this.$router.replace("/home");
            }
         },
         async registerOrLoginUser(userAddress, signature, message) {
            console.log(userAddress, );
      console.log(userAddress);
            console.log(signature);
            console.log(message);
				

            
            //       const response = await fetch('https://your-api-endpoint/register-or-login', {
            //         method: 'POST',
@@ -129,11 +146,11 @@
         getRegType(activeIndex, bFlag) {
            switch (activeIndex) {
               case 0:
                  return bFlag ? this.$t('账号') : this.$t('请输入账号');
          return bFlag ? this.$t("账号") : this.$t("请输入账号");
               case 1:
                  return bFlag ? this.$t('邮箱') : this.$t('请输入您的邮箱');
          return bFlag ? this.$t("邮箱") : this.$t("请输入您的邮箱");
               case 2:
                  return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
          return bFlag ? this.$t("手机号") : this.$t("请输入手机号");
            }
         },
         onSelectArea() {
@@ -163,51 +180,55 @@
            }
         },
         verifyLogin() {
            if (this.username == '') {
      if (this.username == "") {
               switch (this.activeIndex) {
                  case 0: {
                     this.$toast(this.$t('请输入账号'));
            this.$toast(this.$t("请输入账号"));
                     break;
                  }
                  case 1: {
                     this.$toast(this.$t('请输入邮箱'));
            this.$toast(this.$t("请输入邮箱"));
                     break;
                  }
                  case 2: {
                     this.$toast(this.$t('请输入手机号'));
            this.$toast(this.$t("请输入手机号"));
                     break;
                  }
               }
               return false
        return false;
            }
            if (this.password == '') {
               this.$toast(this.$t('请输入密码'));
               return false
      if (this.password == "") {
        this.$toast(this.$t("请输入密码"));
        return false;
            }
            this.login()
      this.login();
         },
         async login() {
            Axios.loginUser({
               username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username :
                  `${this.username}`,
        username:
          this.activeIndex == 0 || this.activeIndex == 1
            ? this.username
            : `${this.username}`,
               password: this.password,
               re_password: this.repassword,
               type: this.type,
               usercode: this.invitCode,
            }).then((res) => {
               this.GET_USERINFO(res.data)
               this.SET_CONFIG() //获取判断是否乘以杠杆字段
               this.$router.push('/home')
            }).catch((error) => {
               if (error.code === 'ECONNABORTED') {
                  this.$toast(this.$t('网络超时！'));
      })
        .then((res) => {
          this.GET_USERINFO(res.data);
          this.SET_CONFIG(); //获取判断是否乘以杠杆字段
          this.$router.push("/home");
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
               } else if (error.msg !== undefined) {
                  this.$toast(this.$t(error.msg));
               }
            });
         }
      }
   }
    },
  },
};
</script>

<style lang="scss" scoped>
@@ -272,6 +293,7 @@
      font-size: 35px;
      margin-top: 36px;
      border-radius: 10px;
  background: #f7b328;
   }

   .noTips {