<template>
|
<div>
|
<div class="loginmain">
|
<div class="container">
|
<section class="top">
|
<div class="logo">
|
<img src="" alt="logo">
|
</div>
|
</section>
|
<div class="content">
|
<div class="form-content">
|
<div class="left-content">
|
<div class="email-or-phone-reverse">
|
<div class="title-label" v-for="(item, index) in viewtitle" :key="index"
|
@click="idx = index">
|
<div class="way-title" :class="idx == index ? 'title-choose' : ''">
|
{{ item.title }}
|
</div>
|
<div class="signUpWayStatus" :class="idx == index ? 'signUpWayStatus-choose' : ''">
|
|
</div>
|
</div>
|
</div>
|
<div class="left-form">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"
|
v-if="idx == 0">
|
<el-form-item prop="phone">
|
<el-input type="text" :placeholder="$t('regPhone2')" v-model="ruleForm.phone"
|
prefix-icon="el-icon-phone"></el-input>
|
</el-form-item>
|
<el-form-item prop="pass">
|
<el-input type="password" :placeholder="$t('hj30')" v-model="ruleForm.pass"
|
prefix-icon="el-icon-lock">
|
</el-input>
|
</el-form-item>
|
<div class="jicheckbox">
|
<el-checkbox v-model="ispass">{{$t('jzgzh')}}</el-checkbox>
|
<!-- <el-checkbox v-model="islogin">自动登录</el-checkbox> -->
|
</div>
|
<div class="loginbtn" @click="submitForm('ruleForm')">
|
{{$t('hj24')}}
|
</div>
|
</el-form>
|
<el-form :model="regruleForm" :rules="rules" ref="regruleForm" class="demo-ruleForm"
|
v-else>
|
<div>
|
<el-form-item prop="phone">
|
<el-input type="text" :placeholder="$t('regPhone2')" v-model="regruleForm.phone"
|
prefix-icon="el-icon-phone"></el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item prop="pass">
|
<el-input type="password" :placeholder="$t('hj30')" v-model="regruleForm.pass"
|
prefix-icon="el-icon-lock">
|
</el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item prop="pass">
|
<el-input type="invitecode" :placeholder="$t('hj33')"
|
v-model="regruleForm.invitecode" prefix-icon="el-icon-user-solid">
|
</el-input>
|
</el-form-item>
|
</div>
|
<div class="loginbtn" @click="regsubmitForm('regruleForm')">
|
{{$t('hj15')}}
|
</div>
|
</el-form>
|
<div class="login-other">
|
<span class="renderDom" data-lang="useOtherSignIn">{{$t('dlfs')}}</span>
|
</div>
|
<div class="thirty-party-signIn" @click="getweikaitong">
|
<a class="rectangle apple">
|
<img src="../../assets/image/apple-circle.png" alt="phone">
|
</a>
|
<a class="rectangle google" @click="getweikaitong">
|
<img src="../../assets/image/google-circle.png" alt="google">
|
</a>
|
<a class="rectangle facebook" @click="getweikaitong">
|
<img src="../../assets/image/facebook-circle.png" alt="facebook">
|
</a>
|
|
</div>
|
</div>
|
</div>
|
<div class="right-content">
|
<div class="right-QRcode-wrap">
|
<div class="right-QRcode">
|
<div class="right-QRcode-img">
|
<img src="../../assets/image/logoewm.png" alt="">
|
</div>
|
</div>
|
<span class="right-QRcode-title renderDom">{{$t('hj1461')}}</span>
|
<div class="right-QRcode-des">
|
<span class="renderDom" data-lang="scanTips">{{$t('smewm')}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as api from "../../axios/api";
|
export default {
|
data() {
|
return {
|
viewtitle: [
|
{
|
title: this.$t('hj248'),
|
},
|
{
|
title: this.$t('hj249'),
|
}
|
],
|
idx: 0,
|
ruleForm: {
|
phone: '',
|
pass: '',
|
},
|
rules: {
|
phone: [
|
{ required: true, message: this.$t('regPhone2'), trigger: 'blur' }
|
],
|
pass: [
|
{ required: true, message: this.$t('hj30'), trigger: 'blur' }
|
],
|
},
|
regruleForm: {
|
phone: '',
|
pass: '',
|
invitecode: '',
|
code: '6666'
|
},
|
regrules: {
|
phone: [
|
{ required: true, message: this.$t('regPhone2'), trigger: 'blur' }
|
],
|
pass: [
|
{ required: true, message: this.$t('hj30'), trigger: 'blur' }
|
],
|
invitecode: [
|
{ required: true, message: this.$t('hj33'), trigger: 'blur' }
|
],
|
},
|
ispass: false,
|
islogin: false,
|
}
|
},
|
created() {
|
if (window.localStorage.getItem('phones')) {
|
this.ispass = true;
|
this.ruleForm.phone = window.localStorage.getItem('phones');
|
this.ruleForm.pass = window.localStorage.getItem('passs');
|
}
|
},
|
watch: {
|
idx(val) {
|
this.$refs.regruleForm.clearValidate();
|
this.$refs.ruleForm.clearValidate();
|
}
|
},
|
methods: {
|
getweikaitong() {
|
this.$message({
|
message: this.$t('hj17'),
|
type: 'warning'
|
});
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
let opts = {
|
phone: this.ruleForm.phone,
|
userPwd: this.ruleForm.pass,
|
};
|
this.islogin = true;
|
let data = await api.login(opts);
|
if (data.status === 0) {
|
window.localStorage.setItem('tokens', data.data.token)
|
this.$store.state.userInfo.phone = this.phone;
|
this.$store.state.haslogin = true;
|
this.$message.success(data.msg);
|
if (this.ispass == true) {
|
window.localStorage.setItem('phones', this.ruleForm.phone)
|
window.localStorage.setItem('passs', this.ruleForm.pass)
|
}
|
// alert('我要去登录了')
|
this.$router.push({
|
path: "/hushen",
|
});
|
} else {
|
this.$message.error(data.msg);
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
regsubmitForm(formNames) {
|
this.$refs[formNames].validate(async (valid) => {
|
if (valid) {
|
let opts = {
|
// agentCode:'4023', // SR330001
|
phone: this.regruleForm.phone,
|
yzmCode: this.regruleForm.code,
|
userPwd: this.regruleForm.pass,
|
agentCode: this.regruleForm.invitecode
|
}
|
this.islogin = true
|
let data = await api.register(opts)
|
if (data.status === 0) {
|
this.$message.success(this.$t('hj34'))
|
this.idx = 0
|
} else {
|
this.$message.error(data.msg)
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.loginmain {
|
width: 100%;
|
height: 100vh;
|
background: #f7f7f7;
|
|
.container {
|
text-align: left;
|
height: auto;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.top {
|
width: 100%;
|
height: 64px;
|
position: fixed;
|
z-index: 1050;
|
top: 0;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
|
.logo {
|
width: 140px;
|
height: 25px;
|
background: url(../../assets/image/logoss.png) no-repeat;
|
margin-left: 50px;
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
|
img {
|
display: none;
|
width: 140px;
|
height: 25px;
|
}
|
}
|
}
|
|
.content {
|
min-height: 616px;
|
padding: 48px 40px 25px 44px;
|
margin: 88px auto 0;
|
border-radius: 6px;
|
background: #fff;
|
text-align: left;
|
box-sizing: border-box;
|
width: 880px !important;
|
padding-right: 48px !important;
|
|
.form-content {
|
display: flex;
|
position: relative;
|
width: 53% !important;
|
|
.left-content {
|
margin-right: 48px !important;
|
margin: 0 auto;
|
width: 360px;
|
|
.email-or-phone-reverse {
|
display: flex;
|
// flex-direction: row-reverse;
|
justify-content: flex-start;
|
|
.title-label {
|
cursor: pointer;
|
margin-right: 34px;
|
|
.way-title {
|
font-size: 20px;
|
color: #999;
|
margin-bottom: 6px;
|
display: inline-block;
|
font-weight: 400;
|
cursor: pointer;
|
}
|
|
.signUpWayStatus {
|
width: 50px;
|
height: 3px;
|
margin: 0 auto;
|
}
|
|
.title-choose {
|
font-weight: 500 !important;
|
color: #111 !important;
|
}
|
|
.signUpWayStatus-choose {
|
background: #195bdd;
|
}
|
}
|
}
|
|
.left-form {
|
width: 360px;
|
margin: 50px auto 0;
|
min-height: 460px;
|
display: flex;
|
flex-direction: column;
|
|
.jicheckbox {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 40px;
|
}
|
|
.loginbtn {
|
width: 100%;
|
padding: 14px 0;
|
border-radius: 6px;
|
background: #195bdd;
|
margin-top: 20px;
|
color: #fff;
|
font-size: 18px;
|
text-align: center;
|
letter-spacing: 2px;
|
cursor: pointer;
|
}
|
|
.login-other {
|
margin-top: 70px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
|
span {
|
color: #adb0c0;
|
padding: 0 50px;
|
font-size: 12px;
|
height: 17px;
|
line-height: 17px;
|
position: relative;
|
|
&::before {
|
left: 0;
|
content: " ";
|
position: absolute;
|
top: 8px;
|
display: block;
|
width: 20px;
|
height: 1px;
|
background-color: #adb0c0;
|
}
|
|
&::after {
|
right: 0;
|
content: " ";
|
position: absolute;
|
top: 8px;
|
display: block;
|
width: 20px;
|
height: 1px;
|
background-color: #adb0c0;
|
}
|
}
|
}
|
|
.thirty-party-signIn {
|
margin-top: 17px;
|
margin-bottom: 0;
|
display: flex;
|
flex: 1 1 0%;
|
justify-content: space-evenly;
|
|
.rectangle {
|
width: 50px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
border-radius: 25px;
|
color: rgba(0, 0, 0, .1);
|
border: 1px solid #dcdcdc;
|
|
img {
|
width: 25px;
|
height: 25px;
|
}
|
}
|
}
|
}
|
}
|
|
.right-content {
|
text-align: center;
|
display: flex;
|
align-items: center;
|
width: 1px;
|
border-left: 1px solid #e9e9e9;
|
|
.right-QRcode-wrap {
|
width: 330px;
|
position: absolute;
|
top: 114px;
|
margin-left: 48px;
|
|
.right-QRcode {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
|
.right-QRcode-img {
|
display: flex;
|
width: 160px;
|
height: 160px;
|
border: 1px solid #cecece;
|
background: #fff;
|
border-radius: 8px;
|
padding: 2px;
|
z-index: 1001;
|
justify-content: space-around;
|
align-items: center;
|
animation: QRcode-img .2s linear 1;
|
|
img {
|
width: 156px;
|
height: 156px;
|
}
|
}
|
}
|
|
.right-QRcode-title {
|
font-size: 16px;
|
margin: 24px 0 0 0;
|
display: inline-block;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.right-QRcode-des {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333;
|
margin-top: 16px;
|
|
.right-QRcode-a {
|
// color: #195bdd;
|
color: #333;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
