<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 == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
|
<div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div>
|
</div> -->
|
<ExInput
|
:label="getRegType(0, true)"
|
:placeholderText="getRegType(0, 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="remember" data-v-8cc76a7b="">
|
<van-checkbox @change="checkboxChange" v-model="checked">{{
|
$t("記住帳戶密碼")
|
}}</van-checkbox>
|
</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>
|
</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: {},
|
components: {
|
ExInput,
|
nationalityList,
|
},
|
data() {
|
return {
|
checked: false,
|
username: "",
|
password: "",
|
activeIndex: 0,
|
isArea: false,
|
typeText: "password",
|
dialCode: 0, //电话号前缀
|
icon: "",
|
};
|
},
|
computed: {
|
...mapGetters({
|
theme: "home/theme",
|
}),
|
},
|
methods: {
|
...mapActions("user", [GET_USERINFO, SET_CONFIG]),
|
checkboxChange(e) {},
|
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.username,
|
password: this.password,
|
})
|
.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>
|
