<template>
|
<div>
|
<div class="containers">
|
<div class="loginview">
|
<div class="card" style="-webkit-app-region: drag;">
|
<div class="loginview_left">
|
<div></div>
|
<img src="../../../static/img/img_log_home.png" alt="">
|
<div class="leftbottom">
|
<span>Fidelity</span>
|
<p class="shuxin"></p>
|
<!-- <span class="shouzheng">守正出奇</span> -->
|
</div>
|
</div>
|
<div class="loginview_right">
|
<div class="righttop_icon" style="-webkit-app-region: no-drag;">
|
<!-- <i class="el-icon-s-tools"></i> -->
|
<i class="el-icon-minus" @click="getsuoxiao"></i>
|
<i class="el-icon-close" id="logincolse" @click="getclose"></i>
|
</div>
|
<div class="rightcontent">
|
<div class="logintitle">
|
{{$t('hj24')}}Fidelity
|
</div>
|
<div class="selectlogin" style="-webkit-app-region: no-drag;">
|
<div class="everylist" v-for="(item, index) in viewtitle" :key="index"
|
@click="idx = index" :class="idx == index ? 'viewactive' : ''">
|
<p>{{ item.title }}</p>
|
<p class="noxian" :class="idx == index ? 'xian' : ''"></p>
|
</div>
|
</div>
|
<div v-if="idx == 0">
|
<div class="inputmain" style="-webkit-app-region: no-drag;">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
|
<el-form-item prop="phone">
|
<el-input type="text" :placeholder="$t('qsrsjh')" 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('hj33')}}</el-checkbox>
|
<!-- <el-checkbox v-model="islogin">自动登录</el-checkbox> -->
|
</div>
|
<div class="loginbtn" @click="submitForm('ruleForm')">
|
{{$t('hj24')}}
|
</div>
|
</el-form>
|
</div>
|
<!-- <div class="wangjimain">
|
<p>忘记密码</p>
|
<p class="shuxian"></p>
|
<p>注册账号</p>
|
</div> -->
|
</div>
|
<div v-else>
|
<div class="inputmain" style="-webkit-app-region: no-drag;">
|
<el-form :model="regruleForm" :rules="regrules" ref="regruleForm"
|
class="demo-ruleForm">
|
<div>
|
<el-form-item prop="phone">
|
<el-input type="text" :placeholder="$t('qsrsjh')" 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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../axios/api";
|
export default {
|
data() {
|
return {
|
viewtitle: [
|
{
|
title: this.$t('mmdl'),
|
},
|
{
|
title: this.$t('zczh'),
|
}
|
],
|
idx: 0,
|
ruleForm: {
|
phone: '',
|
pass: '',
|
},
|
rules: {
|
phone: [
|
{ required: true, message: this.$t('qsrsjh'), trigger: 'blur' }
|
],
|
pass: [
|
{ required: true, message: this.$t('hj30'), trigger: 'blur' }
|
],
|
},
|
regruleForm: {
|
phone: '',
|
pass: '',
|
invitecode: '',
|
code: '6666'
|
},
|
regrules: {
|
phone: [
|
{ required: true, message: this.$t('qsrsjh'), 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: {
|
getclose() {
|
alert('登录关闭')
|
// if (process.env.NODE_ENV != 'development') {
|
// require('electron').ipcRenderer.send("close")
|
// }
|
},
|
getsuoxiao() {
|
alert('登录缩小')
|
// if (process.env.NODE_ENV != 'development') {
|
// require('electron').ipcRenderer.send("min")
|
// }
|
},
|
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>
|
.containers {
|
width: 100%;
|
height: 100vh;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
|
.loginview {
|
width: 100%;
|
height: 100%;
|
|
.card {
|
height: 100%;
|
display: flex;
|
background: #fff;
|
}
|
|
.loginview_left {
|
width: 65%;
|
padding: 40px 0;
|
background: linear-gradient(to left, #f8342f, #fe5b2c);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
img {
|
width: 150px;
|
}
|
|
.leftbottom {
|
color: #fff;
|
font-size: 22px;
|
display: flex;
|
align-items: center;
|
}
|
|
.shuxin {
|
width: 3px;
|
height: 24px;
|
background: #fff;
|
margin: 0 10px;
|
}
|
|
.shouzheng {
|
color: #eee;
|
}
|
}
|
|
.loginview_right {
|
padding: 20px 20px 80px;
|
width: 45%;
|
|
.righttop_icon {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
|
i {
|
font-size: 20px;
|
color: #666;
|
padding: 0 10px;
|
}
|
}
|
|
.rightcontent {
|
margin-top: 50px;
|
|
.logintitle {
|
font-size: 24px;
|
color: #666;
|
font-weight: 600;
|
}
|
|
.selectlogin {
|
margin-top: 30px;
|
display: flex;
|
align-items: center;
|
|
.everylist {
|
margin-right: 30px;
|
font-size: 18px;
|
color: #666;
|
cursor: pointer;
|
|
.xian {
|
height: 4px;
|
background: linear-gradient(to left, #ffffff, #f83a38);
|
border-radius: 2px;
|
margin-top: 6px;
|
}
|
|
.noxian {
|
height: 4px;
|
margin-top: 6px;
|
}
|
}
|
|
.viewactive {
|
font-weight: 600;
|
}
|
}
|
|
.inputmain {
|
margin-top: 40px;
|
|
/deep/ .el-input__inner {
|
border-radius: 0;
|
border: none !important;
|
border-bottom: 1px solid #999 !important;
|
}
|
|
/deep/ .el-input__icon {
|
font-size: 20px !important;
|
}
|
|
.jicheckbox {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.loginbtn {
|
width: 100%;
|
padding: 16px 0;
|
border-radius: 6px;
|
background: rgb(255, 83, 83);
|
margin-top: 20px;
|
color: #fff;
|
font-size: 18px;
|
text-align: center;
|
letter-spacing: 2px;
|
cursor: pointer;
|
}
|
}
|
|
.wangjimain {
|
margin-top: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.shuxian {
|
width: 2px;
|
height: 18px;
|
background: #666;
|
margin: 0 20px
|
}
|
|
p {
|
font-size: 18px;
|
cursor: pointer;
|
|
&:last-child {
|
color: #f83a38;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
