| | |
| | | <template> |
| | | <div class="login"> |
| | | <div class="top" @click="$router.push('/home')"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" |
| | | alt="" /></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> |
| | | <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div> |
| | | <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }} |
| | | </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="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> |
| | |
| | | <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 { |
| | | 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: { |
| | | |
| | |
| | | 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: |
| | |
| | | verifyLogin() { |
| | | if (this.username == '') { |
| | | switch (this.activeIndex) { |
| | | case 0: |
| | | { |
| | | case 0: { |
| | | this.$toast(this.$t('请输入账号')); |
| | | break; |
| | | } |
| | | case 1: |
| | | { |
| | | case 1: { |
| | | this.$toast(this.$t('请输入邮箱')); |
| | | break; |
| | | } |
| | | case 2: |
| | | { |
| | | case 2: { |
| | | this.$toast(this.$t('请输入手机号')); |
| | | break; |
| | | } |
| | |
| | | }, |
| | | 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, |
| | |
| | | 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)); } |
| | | if (error.code === 'ECONNABORTED') { |
| | | this.$toast(this.$t('网络超时!')); |
| | | } else if (error.msg !== undefined) { |
| | | this.$toast(this.$t(error.msg)); |
| | | } |
| | | }); |
| | | } |
| | | } |