<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="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';
|
export default {
|
props: {
|
|
},
|
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;
|
}
|
|
.top {
|
padding-left: 18px;
|
padding-top: 18px;
|
|
img {
|
width: 37px;
|
height: 37px;
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 54px;
|
margin-bottom: 66px;
|
}
|
|
.login-tab {
|
margin-bottom: 40px;
|
|
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");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
|
.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;
|
}
|
|
.noTips {
|
margin-top: 44px;
|
}
|
</style>
|
