feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 src/page/login/index.vue

@@ -1,206 +1,280 @@
<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="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>
             <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="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>
   <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="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>
         <!-- <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>
      </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'
export default {
    props: {
   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';
   export default {
      props: {

    },
    components: {
        ExInput,
        nationalityList
    },
    data() {
        return {
            username: '',
            password: "",
            activeIndex: 1  ,
            isArea: false,
            typeText: "password",
            dialCode: 0, //电话号前缀
            icon: '',
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    methods: {
        ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
        getRegType(activeIndex, bFlag) {
            switch (activeIndex) {
                case 0:
                    return bFlag ? this.$t('账号') : this.$t('请输入账号');
                case 1:
                    return bFlag ? this.$t('邮箱') : this.$t('请输入您的邮箱');
                case 2:
                    return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
            }
        },
        onSelectArea() {
            this.openBtn();
        },
        //打开国家列表底部弹窗
        openBtn() {
            this.$refs.controlChild.open();
        },
        //获取到当前选中国家的code值
        getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
        },
        changeIndex(index) {
            this.activeIndex = index;
            switch (index) {
                case 0:
                case 1: {
                    this.isArea = false;
                    break;
                }
                case 2: {
                    this.isArea = true;
                    break;
                }
            }
        },
        verifyLogin() {
            if (this.username == '') {
                switch (this.activeIndex) {
                    case 0:
                        {
                            this.$toast(this.$t('请输入账号'));
                            break;
                        }
                    case 1:
                        {
                            this.$toast(this.$t('请输入邮箱'));
                            break;
                        }
                    case 2:
                        {
                            this.$toast(this.$t('请输入手机号'));
                            break;
                        }
                }
                return false
            }
            if (this.password == '') {
                this.$toast(this.$t('请输入密码'));
                return false
            }
            this.login()
        },
        async login() {
            Axios.loginUser({
                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('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        }
    }
}
      },
      components: {
         ExInput,
         nationalityList
      },
      data() {
         return {
            username: '',
            password: "",
            activeIndex: 1,
            isArea: false,
            typeText: "password",
            dialCode: 0, //电话号前缀
            icon: '',
         }
      },
      computed: {
         ...mapGetters({
            theme: 'home/theme'
         }),
      },
      mounted() {
         // this.loginButton()
      },
      methods: {
         ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
         async loginButton() {
            // 检查钱包是否存在
            if (typeof window.ethereum !== 'undefined') {
               try {
                  // 请求用户授权
                  const accounts = await window.ethereum.request({
                     method: 'eth_requestAccounts'
                  });
                  const userAddress = accounts[0];
                  console.log("accounts,accountsaccounts", accounts);
                  // 签名消息
                  const message = "请确认您的身份。";
                  const signature = await window.ethereum.request({
                     method: 'personal_sign',
                     params: [message, userAddress],
                  });
                  // const email = prompt("请输入您的邮箱地址：");
                  // if (!email) {
                  //    alert("邮箱地址是必填项！");
                  //    return;
                  // }
                  // 发送用户地址和签名到后端
                  await this.registerOrLoginUser(userAddress, signature, message);
               } catch (error) {
                  console.error('连接钱包时出错:', error);
               }
            } else {
               alert('Please install Little Fox Wallet！');
               // this.$router.go(-1)
               this.$router.replace('/home')
            }
         },
         async registerOrLoginUser(userAddress, signature, message) {
            console.log(userAddress, );
            console.log(signature);
            console.log(message);
				

				
            //       const response = await fetch('https://your-api-endpoint/register-or-login', {
            //         method: 'POST',
            //         headers: {
            //           'Content-Type': 'application/json',
            //         },
            //         body: JSON.stringify({ address: userAddress, signature, message }),
            //       });

            //       const data = await response.json();
            //       if (data.success) {
            //         // 保存用户信息和 token
            //         localStorage.setItem('userToken', data.token);
            //         localStorage.setItem('userAddress', userAddress);
            //         // 导航到主界面或显示成功信息
            //       } else {
            //         console.error(data.message);
            //       }
         },
         getRegType(activeIndex, bFlag) {
            switch (activeIndex) {
               case 0:
                  return bFlag ? this.$t('账号') : this.$t('请输入账号');
               case 1:
                  return bFlag ? this.$t('邮箱') : this.$t('请输入您的邮箱');
               case 2:
                  return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
            }
         },
         onSelectArea() {
            this.openBtn();
         },
         //打开国家列表底部弹窗
         openBtn() {
            this.$refs.controlChild.open();
         },
         //获取到当前选中国家的code值
         getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
         },
         changeIndex(index) {
            this.activeIndex = index;
            switch (index) {
               case 0:
               case 1: {
                  this.isArea = false;
                  break;
               }
               case 2: {
                  this.isArea = true;
                  break;
               }
            }
         },
         verifyLogin() {
            if (this.username == '') {
               switch (this.activeIndex) {
                  case 0: {
                     this.$toast(this.$t('请输入账号'));
                     break;
                  }
                  case 1: {
                     this.$toast(this.$t('请输入邮箱'));
                     break;
                  }
                  case 2: {
                     this.$toast(this.$t('请输入手机号'));
                     break;
                  }
               }
               return false
            }
            if (this.password == '') {
               this.$toast(this.$t('请输入密码'));
               return false
            }
            this.login()
         },
         async login() {
            Axios.loginUser({
               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('网络超时！'));
               } else if (error.msg !== undefined) {
                  this.$toast(this.$t(error.msg));
               }
            });
         }
      }
   }
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    padding: 30px;
    font-size: 26px;
    box-sizing: border-box;
}
   .login {
      width: 100%;
      padding: 30px;
      font-size: 26px;
      box-sizing: border-box;
   }

.top {
    padding-left: 18px;
    padding-top: 18px;
   .top {
      padding-left: 18px;
      padding-top: 18px;

    img {
        width: 37px;
        height: 37px;
    }
}
      img {
         width: 37px;
         height: 37px;
      }
   }

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 66px;
}
   .title {
      font-weight: 700;
      font-size: 52px;
      margin-top: 54px;
      margin-bottom: 66px;
   }

.login-tab {
    margin-bottom: 40px;
   .login-tab {
      margin-bottom: 40px;

    div {
        padding: 0 40px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        border-radius: 8px;
        margin-right: 20px;
    }
      div {
         padding: 0 40px;
         height: 68px;
         line-height: 68px;
         text-align: center;
         border-radius: 8px;
         margin-right: 20px;
      }

    .active {
        @include themify() {
            background: themed("tab_background");
        }
      .active {
         @include themify() {
            background: themed("tab_background");
         }

        @include themify() {
            color: themed("text_color");
        }
    }
}
         @include themify() {
            color: themed("text_color");
         }
      }
   }

.forget {
    font-size: 24px;
    line-height: 28px;
    margin-top: 18px;
}
   .forget {
      font-size: 24px;
      line-height: 28px;
      margin-top: 18px;
   }

.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 35px;
    margin-top: 36px;
    border-radius: 10px;
}
   .btn {
      color: #fff;
      height: 88px;
      line-height: 88px;
      text-align: center;
      font-size: 35px;
      margin-top: 36px;
      border-radius: 10px;
   }

.noTips {
    margin-top: 44px;
}
   .noTips {
      margin-top: 44px;
   }
</style>