<template>
|
<v-page>
|
<view class="login">
|
<v-header class="nav-tab" :leftClick="()=>_router.replace('/pages/base/index')" :left-arrow='false'>
|
<template #right>
|
<view class="per-bot d-flex align-center newlang">
|
<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
|
<view class="color-light" >
|
<v-lang @change="
|
marketList = [];
|
"></v-lang>
|
<i class="iconfont m-l-xs fn-sm"></i>
|
</view>
|
</view>
|
</template>
|
</v-header>
|
<main class="flex-fill flex-shrink">
|
<!-- logo图 -->
|
<view class="fn-center logo">
|
<img src="../../static/img/logo2.png" class="h-80" style="border-radius: 10px;" />
|
</view>
|
<!-- 账号密码 -->
|
<view class="account">
|
<v-input class=" account-ipt" v-model="form.account" :placeholder="$t('login.a1')">
|
<template #left>
|
<img style="width: 48rpx;height: 48rpx;margin-right: 32rpx;"
|
src="../../static/img/icon-account.png" alt="" />
|
</template>
|
</v-input>
|
<v-input class="password-ipt" v-model="form.password" type="password" :placeholder="$t('login.a3')">
|
<template #left>
|
<img style="width: 48rpx;height: 48rpx;margin-right: 32rpx;"
|
src="../../static/img/icon-paaword.png" alt="" />
|
</template>
|
</v-input>
|
</view>
|
<!-- 记住密码 -->
|
<view class="checkbox">
|
<checkbox-group @change="remenberme">
|
<checkbox value="remember"
|
style="transform:scale(0.6);border-radius: 8rpx;border-color:#c3c3c3 ;"
|
:checked="remember" />
|
{{$t('login.b1')}}
|
</checkbox-group>
|
</view>
|
<!-- 登录logBtn -->
|
<view class="login-btn">
|
<v-button type="yellow" block class="btn" key="loginbtn" style="border-radius: 16rpx;"
|
@click="toLogin">{{$t('login.a4')}}</v-button>
|
</view>
|
<!-- <view class="fn-center p-t-lg p-b-md" >
|
<img :src="logoMap.logo" class="h-80" />
|
<image src="../../static/img/bitfinex-logo.svg" mode="widthFix" style="width: 200px;" ></image>
|
</view> -->
|
<!-- 登录账号密码 -->
|
<!-- <view class="form m-lg bg-panel-3 p-lg rounded-md box-shadow"> -->
|
<!-- <view class="form-item border-b m-b-lg p-b-xs ">
|
<v-input class="color-light" v-model="form.account" :placeholder="$t('login.a1')"></v-input>
|
</view> -->
|
<!-- <view class="form-item border-b m-b-xl p-b-xs">
|
<view class="label m-b-lg">{{$t('login.a2')}}</view>
|
<v-input class="color-light" v-model="form.password" type="password"
|
:placeholder="$t('login.a3')"></v-input>
|
</view> -->
|
<!-- 记住密码 -->
|
<!-- <view class="form-item m-b-xl p-b-xs">
|
<checkbox-group @change="remenberme">
|
<checkbox value="remember" style="transform:scale(0.5)" :checked="remember" />
|
{{$t('login.b1')}}
|
</checkbox-group>
|
</view> -->
|
<!-- <view class="m-b-lg">
|
<v-button type="red" block class="w-max m-y-md rounded-xs" key="loginbtn"
|
@click="toLogin">{{$t('login.a4')}}</v-button>
|
</view> -->
|
<!-- </view> -->
|
<view class="m-x-lg d-flex" style="margin-top: 48rpx;">
|
<v-link tag="div" to="/pages/safe/forget-password" class="tips fn-sm"
|
style="color: #2A2C2F;">{{$t('login.a5')}}？</v-link>
|
<view class="mlaotu fn-12" style="color: #969BA1;">
|
{{$t('login.a6')}}，
|
<v-link to="/pages/reg/index?from=login" style="color: #2A2C2F;;"
|
class="d-inline-block">{{$t('login.a7')}}</v-link>
|
</view>
|
</view>
|
</main>
|
<view class="m-x-lg p-x-lg">
|
<!-- <view class="p-y-md border-t fn-center">
|
{{$t('login.a6')}}，
|
<v-link to="/pages/reg/index?from=login" class="color-theme-1 d-inline-block" >{{$t('login.a7')}}</v-link>
|
</view> -->
|
</view>
|
<!-- 二次验证弹框 -->
|
<van-popup :show="secondaryShow" @close="secondaryShow=false" closeable close-on-popstate position="bottom"
|
custom-style="height:40%">
|
<van-tabs class="m-t-lg p-t-lg" v-if="secondaryShow" :sticky="false" :active="form2.code_type"
|
@change="changeTab">
|
<van-tab title="Google" v-if="secondaryData.google_status==1" :name="3">
|
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
|
v-model="form2.code"></v-input>
|
</van-tab>
|
<van-tab :title="$t('login.a8')" v-if="secondaryData.phone_status==1" :name="1">
|
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
|
v-model="form2.code">
|
<template #right>
|
<v-code type="green-plain" url="/login/sendSmsCodeBeforeLogin"
|
:data="{signature:form2.signature}" ref="mobileCode"></v-code>
|
</template>
|
</v-input>
|
</van-tab>
|
<van-tab :title="$t('login.a9')" v-if="secondaryData.email_status==1" :name="2">
|
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
|
v-model="form2.code">
|
<template #right>
|
<v-code type="green-plain" url="/login/sendEmailCodeBeforeLogin"
|
:data="{signature:form2.signature}" ref="emailCode"></v-code>
|
</template>
|
</v-input>
|
<view class="m-md"></view>
|
</van-tab>
|
</van-tabs>
|
<view class="m-md">
|
<v-button type="yellow" block class="w-max rounded-md"
|
@click="sendCodeLogin">{{$t('login.a4')}}</v-button>
|
</view>
|
</van-popup>
|
<van-toast id="van-toast" />
|
</view>
|
</v-page>
|
</template>
|
<script>
|
import Member from "@/api/member";
|
import {
|
mapActions,
|
mapState
|
} from "vuex";
|
export default {
|
data() {
|
return {
|
|
form: {
|
type: 1,
|
account: "",
|
password: "",
|
},
|
remember: false,
|
form2: {
|
code: "",
|
code_type: "",
|
signature: "",
|
},
|
secondaryData: {},
|
secondaryShow: false,
|
activeName: 1,
|
};
|
},
|
computed: {
|
...mapState({
|
logoMap: "logoMap",
|
}),
|
},
|
methods: {
|
...mapActions({
|
setToken: "token",
|
setUser: "user",
|
}),
|
changeTab(ev) {
|
this.form2.code_type = ev.detail.name
|
},
|
remenberme(e) {
|
if (e.detail.value.indexOf('remember') != -1) {
|
this.remember = true
|
} else {
|
this.remember = false
|
}
|
},
|
// 去登陆
|
toLogin() {
|
|
if (this.form.account.includes("@")) {
|
this.form.type = 2;
|
} else {
|
this.form.type = 1;
|
}
|
if (!this.form.account) {
|
this.$toast(this.$t("login.a1"));
|
return;
|
}
|
if (!this.form.password) {
|
this.$toast(this.$t("login.a3"));
|
return;
|
}
|
Member.login(this.form)
|
.then((res) => {
|
if (res.code == 1021) {
|
//二次验证
|
this.loginVer(res.data);
|
} else {
|
this.loginSuccess(res.data);
|
}
|
})
|
.catch(() => {});
|
},
|
loginVer(data) {
|
// console.log(data)
|
this.secondaryShow = true;
|
this.secondaryData = data;
|
this.form2.signature = data.signature;
|
if (data.google_status == 1) {
|
this.form2.code_type = 3;
|
} else if (data.phone_status == 1) {
|
this.form2.code_type = 1;
|
this.$nextTick(() => {
|
this.$refs.mobileCode.send();
|
});
|
} else if (data.email_status == 1) {
|
this.form2.code_type = 2;
|
this.$nextTick(() => {
|
this.$refs.emailCode.send();
|
});
|
}
|
},
|
// 发送验证码 二次验证登录用
|
sendCodeLogin() {
|
Member.loginConfirm(this.form2, {
|
loading: true
|
}).then((res) => {
|
this.loginSuccess(res.data);
|
});
|
},
|
// 登录成功
|
loginSuccess(data) {
|
this.setToken(data.token);
|
this.setUser(data.user);
|
|
if (this.remember) {
|
localStorage.setItem('LoginForm', JSON.stringify(this.form))
|
} else {
|
localStorage.setItem('LoginForm', '')
|
}
|
this._router.push("/pages/base/index");
|
},
|
},
|
mounted() {
|
if (localStorage.getItem('LoginForm')) {
|
this.form = JSON.parse(localStorage.getItem('LoginForm'))
|
}
|
},
|
|
};
|
</script>
|
<style lang="scss" scoped>
|
.login {
|
height: 100vh;
|
background-image: url("/static/img/loginbg.png");
|
background-size: 100% 100% ;
|
background-repeat: no-repeat;
|
.newlang {
|
background-color: #fff;
|
height: 60rpx;
|
padding: 14rpx 24rpx;
|
box-sizing: border-box;
|
border-radius: 16rpx;
|
|
|
}
|
|
.logo {
|
margin-bottom: 100rpx;
|
margin-top: 152rpx;
|
}
|
|
.account {
|
padding: 0 48rpx;
|
|
.account-ipt {
|
margin-bottom: 32rpx;
|
}
|
|
.account-ipt,
|
.password-ipt {
|
border-radius: 16rpx;
|
padding-left: 32rpx;
|
height: 104rpx;
|
background: #F7F8FC;
|
}
|
}
|
|
.checkbox {
|
padding-left: 58rpx;
|
margin-top: 24rpx;
|
}
|
|
.login-btn {
|
padding: 0 48rpx;
|
margin-top: 60rpx;
|
}
|
}
|
|
.nav-tab {
|
background: transparent;
|
|
&::after {
|
border: none;
|
}
|
}
|
|
.mlaotu {
|
margin-left: auto;
|
}
|
</style>
|
