<template>
|
<div class="wrapper">
|
<div class="header">
|
<!-- <a href="/homes" class="nav-left pull-left">
|
<img :src="siteInfo.siteLogo" alt="">
|
</a>-->
|
<el-header>
|
<home-header></home-header>
|
</el-header>
|
|
</div>
|
<div class="loginbg-box">
|
<!-- <img class="login-img" src="../../assets/image/login.jpeg" alt=""> -->
|
</div>
|
<div class="login-box">
|
<div class="form-box top-box">
|
<!-- <p class="animated fadeInDown">专线直连 机构版交易</p> -->
|
<!-- <p class="prompt animated fadeInUp">为投资者量身定做机构版投资软件</p> -->
|
</div>
|
<div class="form-box">
|
<h2 style="text-align:center">用户登录</h2>
|
<el-form
|
:hide-required-asterisk="true"
|
:model="form"
|
ref="ruleForm"
|
:rules="rule"
|
class="demo-form-inline"
|
>
|
<el-form-item label prop="phone">
|
<el-input
|
maxlength="11"
|
max="11"
|
type="text"
|
class="user-phone"
|
v-model="form.phone"
|
placeholder="请输入手机号码"
|
>
|
<i slot="prepend" class="iconfont icon-user1" style="font-size:13px"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item label prop="pwd">
|
<el-input type="password" class="user-phone" v-model="form.pwd" placeholder="请输入密码">
|
<i slot="prepend" class="iconfont icon-zu" style="font-size: 15px;"></i>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button
|
class="box-btn"
|
type="primary"
|
:loading="islogin"
|
@click="checkPhone('ruleForm')"
|
>立即登录</el-button>
|
</div>
|
<div class="text-right clearfix">
|
<div class="pull-left">
|
<a @click="toForget">忘记密码？</a>
|
</div>
|
<div class="pull-right">
|
还没有账号？
|
<a @click="toRegister">立即注册</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div></div>
|
<newFooter></newFooter>
|
<!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../axios/api";
|
import HomeFooter from "../../components/Footer";
|
import HomeHeader from "../../components/HeaderOrder";
|
import newFooter from '@/components/newFooter'
|
|
export default {
|
components: {
|
HomeFooter,
|
HomeHeader,
|
newFooter
|
},
|
props: {},
|
data() {
|
let validatePass = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请输入手机号码"));
|
} else {
|
// let myreg = /^[1][3,4,5,7,8][0-9]{9}$/ //手机号码验证
|
let myreg = /^[0-9]{11}$/; // 手机号码验证
|
if (!myreg.test(value)) {
|
callback(new Error("请输入正确的手机号码"));
|
}
|
callback();
|
}
|
};
|
// let validatePass2 = (rule, value, callback) => {
|
// if (value === '') {
|
// callback(new Error('请输入密码'))
|
// } else {
|
// let value = psd.replace(/\s*/g, '')
|
// let myreg = '/^[a-zA-Z0-9!@#$%^&*.]{6,12}$/' // 手机号码验证
|
// if (!myreg.test(value)) {
|
// callback(new Error('请输入正确的手机号码'))
|
// }
|
// callback()
|
// }
|
// }
|
return {
|
islogin: false,
|
siteInfo: {},
|
form: {
|
phone: "",
|
pwd: "",
|
},
|
rule: {
|
phone: [
|
{
|
required: true,
|
validator: validatePass,
|
message: "请输入手机号码",
|
trigger: "blur",
|
},
|
],
|
pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
},
|
};
|
},
|
watch: {},
|
computed: {},
|
created() {},
|
mounted() {
|
this.getInfoSite();
|
},
|
methods: {
|
async getInfoSite() {
|
// 获取网站信息
|
let result = await api.getInfoSite();
|
if (result.status === 0) {
|
this.siteInfo = result.data;
|
this.$store.state.siteInfo = this.siteInfo;
|
} else {
|
this.$message.error(result.msg);
|
}
|
},
|
async checkPhone(val) {
|
// 先验证是否已经注册
|
let data = await api.checkPhone({ phoneNum: this.form.phone });
|
if (data.status === 0) {
|
// 如果用户已存在返回 0
|
this.submit(val);
|
} else {
|
this.$message.success("用户还未注册,请先注册");
|
this.$router.push("/register");
|
}
|
},
|
submit(formName) {
|
// 提交
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
let opts = {
|
phone: this.form.phone,
|
userPwd: this.form.pwd,
|
};
|
this.islogin = true;
|
let data = await api.login(opts);
|
if (data.status === 0) {
|
this.$store.state.userInfo.phone = this.phone;
|
// window.localStorage.setItem('phone',this.form.phone)
|
// setLocalstorage('phone',this.form.phone)
|
this.$store.state.haslogin = true;
|
this.$message.success(data.msg);
|
// this.$router.push('/home')
|
this.toTransform();
|
} else {
|
this.$message.error(data.msg);
|
}
|
this.islogin = false;
|
} else {
|
return false;
|
}
|
});
|
},
|
async toTransform() {
|
let opt = {
|
pageNum: 1,
|
pageSize: 1,
|
};
|
this.loading = true;
|
let data = await api.getStock(opt);
|
if (data.status === 0) {
|
this.$router.push({
|
path: "/transaction",
|
query: {
|
code: data.data.list[0].code,
|
},
|
});
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
toRegister() {
|
// 去注册
|
this.$store.state.loginIsShow = false;
|
this.$router.push("/register");
|
},
|
toForget() {
|
this.$router.push("/forget");
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.login-box .text-right[data-v-23b3be22]{
|
margin: 25px 0 22px;
|
}
|
.login-box .form-box[data-v-23b3be22]{
|
|
height: 400px;
|
border-radius: 5px;
|
}
|
.black-bg {
|
.user-phone {
|
background-color: #2f2f2f;
|
border-radius: 50px;
|
}
|
.el-button--primary{
|
background-color: rgb(2, 77, 161) !important;
|
border: none;
|
border-radius: 50px;
|
}
|
}
|
.red-bg {
|
.user-phone {
|
|
border: 1px solid rgb(150, 150, 150);
|
border-radius: 50px;
|
}
|
.el-button--primary{
|
border: none;
|
border-radius: 50px;
|
}
|
}
|
/deep/ .user-phone input {
|
border: none;
|
}
|
/deep/ .login-box .el-input-group__prepend {
|
left: 12px;
|
}
|
.header {
|
height: 60px;
|
// background: #fff;
|
img {
|
height: 58px;
|
line-height: 58px;
|
}
|
}
|
|
.el-form-item {
|
margin-bottom: 40px;
|
}
|
|
.login-box {
|
width: 80%;
|
margin: 0 auto;
|
height: 540px;
|
position: relative;
|
|
.form-box {
|
width: 320px;
|
height: 480px;
|
text-align: center;
|
position: absolute;
|
right: 0;
|
top: 32px;
|
// background: #fff;
|
color: #fff;
|
background: rgba(3, 3, 3, 0.6);
|
z-index: 2;
|
padding: 0 40px;
|
border-radius: 4px;
|
|
h2 {
|
height: 30px;
|
line-height: 30px;
|
text-align: left;
|
font-size: 26px;
|
padding-top: 30px;
|
}
|
|
.el-form {
|
padding-top: 50px;
|
}
|
}
|
|
.dialog-footer {
|
margin-top: 20px;
|
}
|
|
.text-right {
|
margin: 50px 0 25px;
|
}
|
|
/deep/ .el-input__inner {
|
height: 40px;
|
line-height: 40px;
|
text-indent: 30px;
|
}
|
|
.login-box .iconfont {
|
font-size: 28px;
|
}
|
|
/deep/ .el-form-item__error {
|
padding-top: 12px;
|
}
|
}
|
|
.header {
|
// padding: 0 20px;
|
}
|
|
.login-box .top-box {
|
position: absolute;
|
top: 34%;
|
width: 50%;
|
height: 150px;
|
left: 0;
|
right: auto;
|
background: none;
|
|
.prompt {
|
color: #b6b6b6;
|
font-size: 18px;
|
}
|
|
p {
|
color: #efbb53;
|
font-size: 34px;
|
margin-bottom: 40px;
|
}
|
}
|
</style>
|
