<template>
|
<div id="register" style="position: relative;">
|
<div class="header">
|
<!-- <header>
|
<div><img src="../../assets/images/homeLogin.png" style="width: 168px;height: 38px;margin-left: 32px;"
|
@click="goLoginPage" alt=""></div>
|
<div style="margin-left: 27px;border-bottom: 1px solid #fff;display: flex;width: calc(100% - 168px);">
|
<ul>
|
<li v-for="(item, index) in menuList" :class="{ active: activeIndex == index }"
|
@click="changeMenu(item, index)">
|
<Dropdown v-if="item.children.length > 0" transfer>
|
<div style="display: flex;">
|
<img :src="item.icon" alt="">
|
<div @click="chooseRoute(item)">{{ item.title }}</div>
|
</div>
|
<template #list>
|
<DropdownMenu>
|
<DropdownItem v-for="children in item.children" >
|
<div @click="chooseRoute(children)">{{ children.title }}</div>
|
</DropdownItem>
|
</DropdownMenu>
|
</template>
|
</Dropdown>
|
<div style="display: flex;" v-else>
|
<img :src="item.icon" alt="">
|
<div>
|
{{ item.title }}
|
</div>
|
</div>
|
</li>
|
</ul>
|
<div style="display: flex;margin-left: 80px;cursor: pointer;position: absolute;right: 0;">
|
<img src="../../assets/images/home44.png" style="width: 34px;height: 34px;" alt="">
|
<div style="color: #F0F9FF;line-height: 35px;margin-left: 11px;width: 50px;" @click="openLoginModal"> 登录</div>
|
</div>
|
|
</div>
|
|
</header> -->
|
<LoginHeader></LoginHeader>
|
|
|
<div class="main">
|
<div class="left">
|
<p>专注企业风险评估</p>
|
<p></p>
|
<p>FOCUSED ON ENTERPRISE</p>
|
<p>RISK ASSESSMENT</p>
|
<div class="bottom">
|
<p></p><span>维优信用 WEYCREDIT.COM</span><p></p>
|
</div>
|
<img src="../../assets/images/home/homeReg.jpg" alt="">
|
</div>
|
|
<div class="register">
|
<img src="../../assets/images/home/home61.png"
|
style="width: 267px;height: 60px;margin: 89px 218px 68px 236px">
|
<div style="display: flex;justify-content: space-between;padding: 0 50px;">
|
<Radio v-model="single" style="padding: 0 0px;">个人注册</Radio>
|
<Poptip placement="bottom" trigger="hover">
|
<p style="cursor: pointer;color: #1183a7;">如需注册企业用户，请联系维优产品顾问</p>
|
<div slot="content">
|
<img src="../../assets/images/companyWechat.png" style="width: 225px;height: 220px;" alt="">
|
</div>
|
</Poptip>
|
</div>
|
|
|
<Form ref="loginForm" class="loginForm" :model="form" :rules="rules" style="padding: 0 50px;"
|
@keydown.enter.native="handleSubmit">
|
|
<input type="userName" name="Name" style="width: 0;height: 0;border: none;outline: none;" />
|
<input type="password" name="password" style="width: 0;height: 0;border: none;outline: none;" />
|
<FormItem prop="userName">
|
<Input size="large" v-model="form.userName" placeholder="请输入用户名">
|
<!-- <Icon custom="custom custom-mima" slot="prefix"/> -->
|
|
<Icon custom="custom custom-yonghuming" slot="prefix" />
|
</Input>
|
</FormItem>
|
<FormItem prop="phone" class="sendCode">
|
<Input size="large" v-model="form.phone" placeholder="请输入手机号">
|
<!-- <Icon custom="custom custom-biaoshima" slot="prefix" /><Icon type="ios-call-outline" /> -->
|
<Icon type="ios-call" slot="prefix" />
|
</Input>
|
<div class="send" @click="getCode">{{ verifyDate }}</div>
|
</FormItem>
|
<FormItem prop="code">
|
<Input size="large" v-model="form.code" placeholder="请输入验证码">
|
<Icon type="ios-key-outline" slot="prefix" />
|
</Input>
|
</FormItem>
|
<FormItem prop="password">
|
<Input size="large" type="password" password v-model="form.password" placeholder="请输入密码">
|
<Icon custom="custom custom-mima" slot="prefix" />
|
</Input>
|
</FormItem>
|
|
|
|
<FormItem style="margin-bottom: 10px;">
|
<Button size="large" @click="handleSubmit" class="handleSubmit" type="primary" long
|
:loading="loading">注册</Button>
|
</FormItem>
|
<div style="display: flex;justify-content: space-between;">
|
|
<Checkbox v-model="form.remember" class="rember" style="font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #999999;">我已阅读并同意<span style="color: ##0050BA ;">服务条款</span>、<span style="color: ##0050BA ;">隐私政策</span>
|
</Checkbox>
|
<div style="cursor: pointer;font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFB13D;" @click="openLoginModal"><span style="position: relative;
|
top: -5px;">前去登录 </span> <img src="../../assets/images/home/home70.png" style="width: 20px;height: 20px;" alt="">
|
</div>
|
</div>
|
|
</Form>
|
</div>
|
</div>
|
</div>
|
<footer id="footer">
|
<div class="info">
|
<div class="left">
|
<img src="../../assets/images/home/home_zu49.png" style="width: 113px;height: 106px;margin-right: 50px;"
|
alt="">
|
<div>
|
|
<!-- <p style="font-size: 20px;font-weight: 600;margin-bottom: 5px;">专注企业风险评估</p> -->
|
<Poptip placement="bottom" trigger="hover">
|
<p style="cursor: pointer;font-size: 20px;font-weight: 600;margin-bottom: 5px;">添加维优信用客服微信</p>
|
<div slot="content">
|
<img src="../../assets/images/companyWechat.png" alt="">
|
</div>
|
</Poptip>
|
|
<p style="font-size: 14px;font-weight: 400;margin-bottom: 5px;">客服邮箱：weycredit@qq.com</p>
|
|
<p style="font-size: 14px;font-weight: 400;margin-bottom: 5px;">服务时间：7*24小时</p>
|
|
</div>
|
</div>
|
<div class="right">
|
<!-- <div style="width: 120px;">
|
<div style="width: 100%;text-align: center;">维优客服</div>
|
<img src="../../assets/images/companyWechat.png" style="width: 100px;margin-left:10px ;" alt="">
|
</div> -->
|
<div style="width: 120px;">
|
<div style="width: 100%;text-align: center;">维优资管研究院</div>
|
<img src="../../assets/images/home/wyzgyjy.png" style="width: 100px;margin-left:10px ;" alt="">
|
</div>
|
<div style="width: 120px;">
|
<div style="width: 100%;text-align: center;">维优智能监控</div>
|
<img src="../../assets/images/home/wyznjk.png" style="width: 100px;margin-left:10px ;" alt="">
|
</div>
|
</div>
|
|
</div>
|
<div class="copyRight"
|
style=" position: absolute;width: 100%;bottom: 0;text-align: center;height: 100px;line-height: 100px;">
|
<!-- <div>
|
<p></p>
|
<p></p>
|
</div>
|
<img src="" alt=""> -->
|
{{ `维优信息@版权所有 | 2018-2023 |` }}
|
<a href="http://beian.miit.gov.cn" style="color: white;" target="_blank">津ICP备19009024号-1</a>
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
</template>
|
|
<script>
|
// import LoginForm from '_c/login-form'
|
// import { mapActions } from 'vuex'
|
import $ from 'jquery'
|
import axios from '@/libs/api.request'
|
// import wexinchat from '@/view/diligenceTools/wexinchatPoptip.vue'
|
// import Cookies from "js-cookie";
|
import LoginHeader from './loginHeader.vue'
|
|
export default {
|
components: {
|
LoginHeader
|
// LoginForm,
|
// wexinchat
|
},
|
data() {
|
return {
|
second: 0,
|
verifyDate: '发送验证码',
|
year: '',//当前年份
|
single: true,
|
loginModal: true,
|
hotSearch: ['政信大数据', '企业大数据'],
|
search: '',
|
activeIndex: 0,
|
logo: require('../../assets/images/home/home61.png'),
|
menuList: [
|
{
|
title: '首页',
|
url: '/',
|
// icon: '../../assets/images/home/home_631.png',
|
icon: require('../../assets/images/home/home_631.png'),
|
children: [],
|
disabled: false
|
// show: true
|
},
|
{
|
title: '融资大数据',
|
icon: require('../../assets/images/home/home_16.png'),
|
children: [
|
{
|
title: '全球要闻',
|
url: 'newsFlashEx_tool',
|
disabled: false
|
|
},
|
{
|
title: '票据融资',
|
url: 'piaoDetail',
|
disabled: false
|
},
|
{
|
title: '银行借款',
|
url: 'bankMarket',
|
disabled: false
|
},
|
{
|
title: '租赁融资',
|
url: 'bankMarket',
|
disabled: false
|
},
|
{
|
title: '应收账款融资',
|
url: 'receivablesMarket',
|
disabled: false
|
},
|
{
|
title: '信托融资',
|
url: 'trustMarket',
|
disabled: false
|
},
|
{
|
title: '资管/私募融资',
|
url: 'trustMarket',
|
disabled: false
|
},
|
{
|
title: '抵质押情况',
|
url: 'PledgeMovableProperty',
|
disabled: false
|
},
|
{
|
title: '其他动产权利登记',
|
url: 'MovablePropertyRegistration',
|
disabled: false
|
},
|
],
|
show: true
|
}, {
|
title: '政信大数据',
|
icon: require('../../assets/images/home/home_13.png'),
|
children: [
|
{
|
title: '区域经济',
|
url: 'zoneAnalyse',
|
disabled: false
|
},
|
{
|
title: '城投平台',
|
url: 'zhengxinCompanys',
|
disabled: false
|
},
|
{
|
title: '融资动态',
|
url: 'zoneAnalyse',
|
disabled: false
|
},
|
{
|
title: '政信评估',
|
url: 'zongheEvaluates',
|
disabled: true
|
},
|
],
|
show: true
|
}, {
|
title: '企业大数据',
|
icon: require('../../assets/images/home/home_11.png'),
|
children: [
|
{
|
title: '深度信息',
|
url: 'publicMessage_tool',
|
disabled: false
|
},
|
{
|
title: '融资与抵质押',
|
url: 'financeCollateralPledge',
|
disabled: false
|
},
|
{
|
title: '上市信息',
|
url: 'shangShiInfos',
|
disabled: false
|
},
|
{
|
title: '新三板上市信息',
|
url: 'xinSanBanInfos',
|
disabled: false
|
},
|
{
|
title: '信用评级',
|
url: 'basicAttributes_tool',
|
disabled: false
|
},
|
|
],
|
show: true
|
},
|
{
|
title: '监管大数据',
|
icon: require('../../assets/images/home/home_15.png'),
|
children: [
|
// {
|
// title: '资金监控',
|
// url: 'fundMonitoring',
|
// disabled: true
|
|
// },
|
|
{
|
title: '监管处罚',
|
url: 'bankPunishNewEvent',
|
disabled: false
|
}
|
|
]
|
},
|
{
|
title: '智能分析平台',
|
icon: require('../../assets/images/home/home14.png'),
|
children: [
|
{
|
title: '企业关系挖掘',
|
url: 'enterpriseRelationshipMining',
|
disabled: true
|
},
|
{
|
title: '企业评估-通用版',
|
url: '_homeEx',
|
disabled: true
|
},
|
{
|
title: '企业评估-租赁公司',
|
url: 'rentExchangeCompany',
|
disabled: true
|
},
|
{
|
title: '企业评估-城投平台',
|
url: 'rentExchangeCompanyZF',
|
disabled: true
|
},
|
{
|
title: '企业评估-专业版',
|
url: 'home',
|
disabled: true
|
},
|
{
|
title: '监控平台',
|
url: 'controlList',
|
disabled: true
|
},
|
]
|
},
|
|
],
|
|
phoneRules: {
|
// type: Number,
|
// default: () => {
|
// return [
|
// { required: true, message: '手机号不能为空', trigger: 'blur' }
|
// ]
|
// }
|
},
|
passwordRules: {
|
// type: Number | String,
|
// default: () => {
|
// return [
|
// { required: true, message: '密码不能为空', trigger: 'blur' }
|
// ]
|
// }
|
},
|
userNameRules: {
|
// type: String,
|
// default: () => {
|
// return [
|
// { required: true, message: '用户名不能为空', trigger: 'blur' }
|
// ]
|
// }
|
},
|
CompanyCodeRules: {
|
// type: Number | String,
|
// default: () => {
|
// return [
|
// { required: true, message: '机构标识码不能为空' },
|
// // { pattern: /^[a-zA-Z]([a-zA-Z0-9]{3,11})$/, message: '请输入字母开头的4-12位机构标识码' }
|
// ]
|
// }
|
},
|
form: {
|
remember: true,
|
code: '', // 验证码
|
phone: '', // 手机
|
password: '',// 密码
|
userName: '',// 用户名
|
},
|
loading: false,
|
isTrigger: false,
|
|
|
}
|
},
|
computed: {
|
rules() {
|
return {
|
code: this.CompanyCodeRules,
|
phone: this.phoneRules,
|
password1: this.passwordRules,
|
userName: this.userNameRules
|
}
|
}
|
},
|
created() {
|
this.year = new Date().getFullYear()
|
},
|
watch: {
|
|
},
|
mounted() {
|
|
|
},
|
methods: {
|
chooseRoute(e) {
|
console.log(e);
|
if (e.disabled == true) {
|
this.$store.commit('openloginModal', true)
|
} else {
|
this.$router.push(e.url)
|
}
|
},
|
changeMenu(item, index) {
|
this.activeIndex = index
|
if (item.url) {
|
this.$router.push(item.url)
|
}
|
},
|
goLoginPage() {
|
this.$router.push('/')
|
},
|
openLoginModal() {
|
this.$store.commit('openloginModal', true)
|
// this.$router.push('/')
|
// console.log(this.$store.state.user.loginModal);
|
// this.loginModal = this.$store.state.user.loginModal
|
// console.log(this.loginModal);
|
},
|
|
getCode() {
|
if (this.second > 0) {
|
this.$Message.info(`请${this.second--}秒后尝试`);
|
return false
|
}
|
console.log(this.form.phone);
|
let reg_tel =
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
if (!reg_tel.test(this.form.phone)) {
|
this.$Message.info("请检查您的手机号");
|
}
|
else {
|
axios
|
.request({
|
url: "/User/SendSms",
|
params: { phoneNumber: this.form.phone, hasReg: false },
|
method: "post",
|
})
|
.then(
|
(res) => {
|
if (res.data.Check) {
|
if (this.isTrigger) return;
|
this.second = 60;
|
let inval = setInterval(() => {
|
if (this.second === 0) {
|
this.verifyDate = "重新获取验证码";
|
this.isTrigger = false;
|
clearInterval(inval);
|
} else {
|
this.isTrigger = true;
|
this.verifyDate = `${this.second--}秒后重发`;
|
}
|
}, 1000);
|
} else {
|
// this.$Message.info(res.data.Msg);
|
}
|
},
|
(res) => {
|
// this.$Message.info(res.data.Msg);
|
}
|
);
|
}
|
},
|
handleSubmit() {
|
if (!this.form.remember) {
|
this.$Message.info("请阅读并同意协议")
|
return false
|
}
|
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
let reg_name = /^[a-zA-Z0-9]{4,20}$/;
|
let reg_paw = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{6,20}$/;
|
let reg_code = /^\d{4}$/;
|
if (!this.form.phone || !this.form.code || !this.form.password || !this.form.userName) {
|
console.log(this.form.phone, this.form.code, this.form.password, this.form.userName);
|
this.$Message.info("请补全信息");
|
} else {
|
if (!reg_name.test(this.form.userName)) {
|
this.$Message.info("用户名必须是4-20位字母和数字的组合！");
|
} else if (!reg_tel.test(this.form.phone)) {
|
this.$Message.info("请填写正确手机账号！");
|
} else if (!reg_paw.test(this.form.password)) {
|
this.$Message.info("密码必须是6-18位包含字母,数字和特殊字符的组合！");
|
} else if (!reg_code.test(this.form.code)) {
|
this.$Message.info("验证码必须是4位数字的组合！");
|
} else {
|
console.log(this.form);
|
axios
|
.request({
|
url: "/User/RegAccount",
|
params: {
|
LoginName: this.form.userName,
|
Mobile: this.form.phone,
|
Code: this.form.code,
|
Password: this.form.password
|
},
|
method: "post",
|
})
|
.then(
|
(res) => {
|
if (res.data.Check) {
|
// this.$router.push('/')
|
// localStorage.removeItem('token');//只需要在退出成功后清除了就可以
|
this.form = {
|
remember: true,
|
code: '', // 验证码
|
phone: '', // 手机
|
password: '',// 密码
|
userName: '',// 用户名
|
}
|
this.verifyDate = '发送验证码'
|
this.second = 0
|
}
|
},
|
(res) => {
|
this.$Message.info(res.data.Msg);
|
}
|
);
|
}
|
|
}
|
},
|
|
},
|
|
}
|
</script>
|
<style lang="less" scoped>
|
#register {
|
min-width: 1450px;
|
background-color: #F6FBFE;
|
}
|
|
.active {
|
// width: 40px;
|
// height: 4px;
|
// background-color: #FFB13D;
|
border-bottom: 4px solid #FFB13D;
|
}
|
|
.header {
|
width: 100%;
|
height: 950px;
|
background: url(../../assets/images/topBack.png) 100% 950px no-repeat;
|
background-position: center;
|
position: relative;
|
|
|
|
.ivu-input-group>.ivu-input:last-child,
|
/deep/ .ivu-input-group-append {
|
background-color: #FFB13D;
|
|
}
|
|
/deep/ .ivu-input-group-large .ivu-input,
|
.ivu-input-group-large>.ivu-input-group-prepend,
|
.ivu-input-group-large>.ivu-input-group-append {
|
height: 41px;
|
border-top-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
}
|
|
.ivu-input-group>span>.ivu-input:first-child,
|
.ivu-input-group>.ivu-input:first-child,
|
/deep/ .ivu-input-group-prepend {
|
display: none;
|
}
|
}
|
|
.main {
|
width: 960px;
|
height: 750px;
|
|
border-radius: 20px;
|
margin: 30px auto 80px;
|
display: flex;
|
|
.left {
|
width: 380px;
|
height: 750px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 20px;
|
font-family: Microsoft YaHei;
|
font-weight: 600;
|
color: #FFFFFF;
|
line-height: 30px;
|
padding-top: 100px;
|
position: relative;
|
|
img {
|
width: 380px;
|
height: 750px;
|
position: absolute;
|
top: 0;
|
|
}
|
|
p:nth-child(1) {
|
position: relative;
|
z-index: 999;
|
width: 90%;
|
margin: 10px auto;
|
font-size: 30px;
|
font-weight: 600;
|
text-align: left;
|
}
|
|
p:nth-child(2) {
|
position: relative;
|
left:-13% ;
|
z-index: 999;
|
width: 62%;
|
margin: 10px auto;
|
height: 1px;
|
background-color: #fff;
|
justify-content: left;
|
// font-size: 45px;
|
// font-weight: 600;
|
// text-align: left;
|
}
|
|
p:nth-child(3) {
|
//斜体
|
position: relative;
|
z-index: 999;
|
width: 90%;
|
margin: 10px auto;
|
font-size: 16px;
|
font-weight: 600;
|
text-align: left;
|
font-style: italic;
|
}
|
|
p:nth-child(4) {
|
position: relative;
|
z-index: 999;
|
width: 90%;
|
margin: 0 auto;
|
font-size: 16px;
|
font-weight: 600;
|
text-align: left;
|
font-style: italic;
|
}
|
|
p:nth-child(3) {
|
position: relative;
|
z-index: 999;
|
margin-top: 20px;
|
}
|
|
.bottom {
|
position: relative;
|
z-index: 999;
|
width: 90%;
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
bottom: 20px;
|
height: 30px;
|
font-size: 16px;
|
font-weight: 500;
|
span{
|
display: inline-block;
|
}
|
|
p {
|
position: relative;
|
z-index: 999;
|
width: 10px;
|
height: 10px;
|
background-color: #fff;
|
border-radius: 50%;
|
margin-top: 10px;
|
}
|
|
}
|
|
}
|
|
|
// img {
|
// width: 380px;
|
// height: 750px;
|
// }
|
|
.register {
|
width: 576px;
|
background-color: #fff;
|
}
|
}
|
|
.sendCode {
|
/deep/ .ivu-form-item-content {
|
position: relative;
|
// display: flex;
|
}
|
}
|
|
.send {
|
cursor: pointer;
|
width: 120px;
|
height: 40px;
|
background: #FFB13D;
|
border-radius: 8px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
text-align: center;
|
position: absolute;
|
line-height: 40px;
|
right: 0;
|
top: 0;
|
|
|
}
|
|
footer {
|
width: 100%;
|
height: 250px;
|
background: #0050BA;
|
color: #fff;
|
// margin-top: -50px;
|
|
.info {
|
width: 1138px;
|
margin: 0px auto 30px;
|
padding-top: 30px;
|
display: flex;
|
justify-content: space-between;
|
|
.left {
|
display: flex;
|
|
}
|
|
.right {
|
display: flex;
|
}
|
|
}
|
}</style>
|
