Skip to content

Z
zhichan
Commit 674be137 by 李宏达
Options

注册页面

parent 6e5ce53b
Showing with 429 additions and 157 deletions
igirl-web/app/front/vues/pages/register/register.html
<gsb-pcpage>
<div id="bychpage" class="login" v-if="companyinfo.company.siteTheme == \'policy\'">
<div style="width:100%;margin: 0 auto;">
<div style="z-index:1;position:relative;background-color:#31373b">
<img style="width:100%;height:auto" :src="loginUrl" />
<div class="login-title" v-if="companyinfo.company.siteTheme == \'policy\'">
<span class="tong">政企通</span>
<span class="shujuzi">政策大数据服务平台</span>
</div>
<div style="padding-bottom:20px">
<!-- <el-radio-group v-model="actname" @change="rdochange">
<el-radio label="person">个人用户注册</el-radio>
<el-radio label="ent">企业用户注册</el-radio>
</el-radio-group> -->
<div style="border-bottom:solid 1px #eee;margin-top:20px;margin-bottom:15px"></div>
<gsb-form key="pregisterFrm" style="width:50%;margin: auto;" ref="pregisterFrm" @btnclick="btnclick"
:metaData="mds" :refvalidatemethod="validmethod">
<h2 slot="title">欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}</h2>
<el-button slot="buttonarea" type="primary" style="width:60%" @click="sbhandler">提交</el-button>
</gsb-form>
<div id="bychpage" class="login" v-if="companyinfo.company.siteTheme == \'policy\'">
<div style="width:100%;margin: 0 auto;">
<div style="z-index:1;position:relative;background-color:#31373b">
<img style="width:100%;height:auto" :src="loginUrl" />
<div class="login-title" v-if="companyinfo.company.siteTheme == \'policy\'">
<span class="tong">政企通</span>
<span class="shujuzi">政策大数据服务平台</span>
</div>
<div class="login-div" v-if="a">
<div class="login-content" style="width: 380px;
height: 508px;
background: rgba(255,255,255,1);
border: 1px solid rgba(151,151,151,1);">
<div class="logins-title">
欢迎注册政企通账号
</div>
<div class="login-div" v-if="a">
<div class="login-content" style="width: 380px;
height: 508px;
background: rgba(255,255,255,1);
border: 1px solid rgba(151,151,151,1);">
<div class="logins-title">
欢迎注册政企通账号
</div>
<!-- 验证码登录 -->
<div v-if="activeIndex==1" class="login-content-inputs">
<el-form ref="form1" :rules="rules1" :model="form1" label-width="0px" key="1">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入企业名称"> <i slot="prefix"
class="el-input__icon el-icon-tickets"></i></el-input>
</el-form-item>
<el-form-item prop="mobile">
<el-input v-model="form1.mobile" placeholder="请输入11位手机号码"><i slot="prefix"
class="el-input__icon el-icon-mobile-phone"></i></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入登录密码"><i slot="prefix"
class="el-input__icon el-icon-view"></i></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:175px;" v-model="form1.code" placeholder="请输入验证码"><i slot="prefix"
class="el-input__icon el-icon-edit"></i></el-input>
<el-button id="loginCode" type="primary" plain style="width:135px;background: rgba(18,142,233,1);
color: rgba(255,255,255,1);" @click="obtaincode1">
获取验证码</el-button>
</el-form-item>
<div class="zhanghao">已有账号？
<span style="color:#108EE9;cursor:pointer" @click="login">立即登录</span>
</div>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="checklogin1" style="margin-top: 45px;">注
册</el-button>
</el-form-item>
<div style="font-size: 12px;
color: rgb(130, 130, 130);
margin-left: 100px;">登录即同意
<span style="color:#108EE9">《服务协议》</span>
</div>
</el-form>
<!-- 验证码登录 -->
<div v-if="activeIndex==1" class="login-content-inputs">
<el-form ref="form1" :rules="rules1" :model="form1" label-width="0px" key="1">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入企业名称"> <i slot="prefix"
class="el-input__icon el-icon-tickets"></i></el-input>
</el-form-item>
<el-form-item prop="mobile">
<el-input v-model="form1.mobile" placeholder="请输入11位手机号码"><i slot="prefix"
class="el-input__icon el-icon-mobile-phone"></i></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入登录密码"><i slot="prefix"
class="el-input__icon el-icon-view"></i></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:175px;" v-model="form1.code" placeholder="请输入验证码"><i slot="prefix"
class="el-input__icon el-icon-edit"></i></el-input>
<el-button id="loginCode" type="primary" plain style="width:135px;background: rgba(18,142,233,1);
color: rgba(255,255,255,1);" @click="obtaincode1">
获取验证码</el-button>
</el-form-item>
<div class="zhanghao">已有账号？
<span style="color:#108EE9;cursor:pointer" @click="login">立即登录</span>
</div>
<!-- 密码登录 -->
<div v-if="activeIndex==2" class="login-content-input">
<el-form ref="form2" :rules="rules2" :model="form2" label-width="0px" key="2">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" key="xxcccc" class="login-content-button" @click="checklogin2">登录</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">还没有账户？
<span style="color:#108EE9;cursor:pointer" @click="register">立即注册</span>
<span style="margin:0 4px;">|</span>
<span style="color:#108EE9;cursor:pointer" @click="rsetpassword">忘记密码？</span>
</div>
</el-form>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="checklogin1" style="margin-top: 45px;">注
册</el-button>
</el-form-item>
<div style="font-size: 12px;
color: rgb(130, 130, 130);
margin-left: 100px;">登录即同意
<span style="color:#108EE9">《服务协议》</span>
</div>
</div>
</el-form>
</div>
<!-- 重置密码 -->
<div class="login-div" v-if="b">
<div class="login-content">
<div class="login-content-title">
重置密码
<!-- 密码登录 -->
<div v-if="activeIndex==2" class="login-content-input">
<el-form ref="form2" :rules="rules2" :model="form2" label-width="0px" key="2">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" key="xxcccc" class="login-content-button" @click="checklogin2">登录</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div class="login-content-input">
<el-form ref="form3" :rules="rules3" :model="form3" label-width="0px" key="3">
<el-form-item prop="mobile">
<el-input v-model="form3.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form3.code" placeholder="请输入验证码"></el-input>
<el-button id="resetCode" type="primary" plain style="width:135px;" @click="obtaincode2">获取验证码
</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form3.password" placeholder="请设置6-18位密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="sumbitreset">确定</el-button>
</el-form-item>
<div style="font-size:12px;color:#108EE9;margin-top:26px;text-align:center">
<span style="margin-right:16px;cursor:pointer" @click="login">登录</span>
<span style="cursor:pointer" @click="register">注册</span>
</div>
</el-form>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">还没有账户？
<span style="color:#108EE9;cursor:pointer" @click="register">立即注册</span>
<span style="margin:0 4px;">|</span>
<span style="color:#108EE9;cursor:pointer" @click="rsetpassword">忘记密码？</span>
</div>
</el-form>
</div>
</div>
</div>
<!-- 重置密码 -->
<div class="login-div" v-if="b">
<div class="login-content">
<div class="login-content-title">
重置密码
</div>
<div class="login-content-input">
<el-form ref="form3" :rules="rules3" :model="form3" label-width="0px" key="3">
<el-form-item prop="mobile">
<el-input v-model="form3.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form3.code" placeholder="请输入验证码"></el-input>
<el-button id="resetCode" type="primary" plain style="width:135px;" @click="obtaincode2">获取验证码
</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form3.password" placeholder="请设置6-18位密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="sumbitreset">确定</el-button>
</el-form-item>
<div style="font-size:12px;color:#108EE9;margin-top:26px;text-align:center">
<span style="margin-right:16px;cursor:pointer" @click="login">登录</span>
<span style="cursor:pointer" @click="register">注册</span>
</div>
</div>
</el-form>
</div>
<!-- 用户注册 -->
<div class="login-div" v-if="c">
<div class="login-content">
<div class="login-content-title">
欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}
</div>
</div>
<!-- 用户注册 -->
<div class="login-div" v-if="c">
<div class="login-content">
<div class="login-content-title">
欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}
</div>
<div class="login-content-input">
<el-form ref="form4" :rules="rules4" :model="form4" label-width="0px" key="4">
<el-form-item prop="mobile">
<el-input v-model="form4.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form4.code" placeholder="请输入验证码"></el-input>
<el-button id="registerCode" type="primary" plain style="width:135px;" @click="obtaincode3">获取验证码
</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form4.password" placeholder="请设置6-18位密码，区分大小写"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="submitregister">注册</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div class="login-content-input">
<el-form ref="form4" :rules="rules4" :model="form4" label-width="0px" key="4">
<el-form-item prop="mobile">
<el-input v-model="form4.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form4.code" placeholder="请输入验证码"></el-input>
<el-button id="registerCode" type="primary" plain style="width:135px;" @click="obtaincode3">获取验证码
</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form4.password" placeholder="请设置6-18位密码，区分大小写"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="submitregister">注册</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">已有账户？
<span style="color:#108EE9;cursor:pointer" @click="login">去登录</span>
</div>
</el-form>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">已有账户？
<span style="color:#108EE9;cursor:pointer" @click="login">去登录</span>
</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
<div v-else>
<div style="padding-bottom:20px">
<!-- <el-radio-group v-model="actname" @change="rdochange">
<el-radio label="person">个人用户注册</el-radio>
<el-radio label="ent">企业用户注册</el-radio>
</el-radio-group> -->
<div style="border-bottom:solid 1px #eee;margin-top:20px;margin-bottom:15px"></div>
<gsb-form key="pregisterFrm" style="width:50%;margin: auto;" ref="pregisterFrm" @btnclick="btnclick" :metaData="mds"
:refvalidatemethod="validmethod">
<h2 slot="title">欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}</h2>
<el-button slot="buttonarea" type="primary" style="width:60%" @click="sbhandler">提交</el-button>
</gsb-form>
</div>
</div>
</div>
<gsb-pcpage v-else>
<div style="padding-bottom:20px">
<!-- <el-radio-group v-model="actname" @change="rdochange">
<el-radio label="person">个人用户注册</el-radio>
<el-radio label="ent">企业用户注册</el-radio>
</el-radio-group> -->
<div style="border-bottom:solid 1px #eee;margin-top:20px;margin-bottom:15px"></div>
<gsb-form key="pregisterFrm" style="width:50%;margin: auto;" ref="pregisterFrm" @btnclick="btnclick" :metaData="mds"
:refvalidatemethod="validmethod">
<h2 slot="title">欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}</h2>
<el-button slot="buttonarea" type="primary" style="width:60%" @click="sbhandler">提交</el-button>
</gsb-form>
</div>
</gsb-pcpage>
\ No newline at end of file
igirl-web/app/front/vues/pages/register/register.js
......@@ -19,6 +19,11 @@
return callback();
};
return {
mds:[],
emds:[],
vcode:"",
actname:"person",
currentFrm:null,
ldms:[],
activeIndex:"1",
loginUrl:"",
......@@ -102,7 +107,81 @@
}
},
mounted:function(){
this.mds=[
{
"title":"用户名",
"validProp":"userName",
"rule": [
{ "required": true, "message": '请输入用户名', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"userName","placeHolder":"请输入用户名","style":""},
]
},
{
"title":"用户密码",
"validProp":"password",
"rule": [
{ "required": true, "message": '请输入用户密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"用户密码","prop":"password","placeHolder":"请输入用户密码","style":""},
]
},
{
"title":"确认密码",
"validProp":"cfmpwd",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入确认密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"确认密码","prop":"cfmpwd","placeHolder":"请输入确认密码","style":""},
]
},
{
"title":"姓名",
"validProp":"nickName",
"rule": [
{ "required": true, "message": '请输入姓名', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"nickName","placeHolder":"请输入姓名","style":""},
]
},
{
"title":"手机号",
"validProp":"mobile",
"rule": [
{ "required": true, "message": '请输入手机号', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"mobile","placeHolder":"请输入手机号","style":""},
{"type":"btn","label":"获取验证码","prop":"vcodeget","placeHolder":"请输入手机号","style":{"margin-left":"8px"},"face":"primary"},
]
},
{
"title":"验证码",
"validProp":"vcode",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入验证码', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"vcode","placeHolder":"请输入收到的手机验证码","style":""},
]
},
{
"title":"身份证号",
"ctls":[
{"type":"input","label":"用户名","prop":"onlyCode","placeHolder":"请输入身份证号","style":""},
]
},
];
this.currentFrm=this.$refs.pregisterFrm;
},
created:function(){
console.log(this.pfooterinfo);
......@@ -113,6 +192,214 @@
}
},
methods:{
rdochange:function(nv){
if(nv=="person"){
this.mds=[
{
"title":"用户名",
"validProp":"userName",
"rule": [
{ "required": true, "message": '请输入用户名', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"userName","placeHolder":"请输入用户名","style":""},
]
},
{
"title":"用户密码",
"validProp":"password",
"rule": [
{ "required": true, "message": '请输入用户密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"用户密码","prop":"password","placeHolder":"请输入用户密码","style":""},
]
},
{
"title":"确认密码",
"validProp":"cfmpwd",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入确认密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"确认密码","prop":"cfmpwd","placeHolder":"请输入确认密码","style":""},
]
},
{
"title":"姓名",
"validProp":"nickName",
"rule": [
{ "required": true, "message": '请输入姓名', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"nickName","placeHolder":"请输入姓名","style":""},
]
},
{
"title":"手机号",
"validProp":"mobile",
"rule": [
{ "required": true, "message": '请输入手机号', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"mobile","placeHolder":"请输入手机号","style":""},
{"type":"btn","label":"获取验证码","prop":"vcodeget","placeHolder":"请输入手机号","style":{"margin-left":"8px"},"face":"primary"},
]
},
{
"title":"验证码",
"validProp":"vcode",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入验证码', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"vcode","placeHolder":"请输入收到的手机验证码","style":""},
]
},
{
"title":"身份证号",
"ctls":[
{"type":"input","label":"用户名","prop":"onlyCode","placeHolder":"请输入身份证号","style":""},
]
},
];
this.currentFrm=this.$refs.pregisterFrm;
}else{
this.emds=[
{
"title":"用户名",
"validProp":"userName",
"rule": [
{ "required": true, "message": '请输入用户名', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"userName","placeHolder":"请输入用户名","style":""},
]
},
{
"title":"用户密码",
"validProp":"password",
"rule": [
{ "required": true, "message": '请输入用户密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"用户密码","prop":"password","placeHolder":"请输入用户密码","style":""},
]
},
{
"title":"确认密码",
"validProp":"cfmpwd",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入确认密码', "trigger": 'blur' },
],
ctls:[
{"type":"input","label":"确认密码","prop":"cfmpwd","placeHolder":"请输入确认密码","style":""},
]
},
{
"title":"企业名称",
"validProp":"companyName",
"rule": [
{ "required": true, "message": '请输入企业名称', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"用户名","prop":"companyName","placeHolder":"请输入企业名称","style":""},
]
},
{
"title":"联系人",
"ctls":[
{"type":"input","label":"用户名","prop":"nickName","placeHolder":"请输入联系人姓名","style":""},
]
},
{
"title":"手机号",
"validProp":"mobile",
"rule": [
{ "required": true, "message": '请输入手机号', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"mobile","placeHolder":"请输入手机号","style":""},
{"type":"btn","label":"获取验证码","prop":"vcodeget","placeHolder":"请输入手机号","style":{"margin-left":"8px"},"face":"primary"},
]
},
{
"title":"验证码",
"validProp":"vcode",
"rule": [
{ "validator":"validatex","trigger": 'blur' },
{ "required": true, "message": '请输入验证码', "trigger": 'blur' },
],
"ctls":[
{"type":"input","label":"手机号","prop":"vcode","placeHolder":"请输入收到的手机验证码","style":""},
]
},
];
this.currentFrm=this.$refs.eregisterFrm;
}
},
validmethod:function (rule,value,callback) {
console.log("code validdate");
var self=this;
var fm=this.currentFrm.getFormModel();
if(rule.field=="cfmpwd"){
if(fm.password!=value){
return callback(new Error("两次输入的密码不一致，请重新输入！"));
}
}
if(rule.field=="vcode"){
if(self.vcode!=value){
return callback(new Error("验证码输入错误，请重新输入或重新获取后输入！"));
}
}
return callback();
},
sbhandler:function () {
var self=this;
var fm=this.currentFrm.getFormModel();
this.currentFrm.validate(function(v){
if(v){
self.$root.postReq("/web/userCtl/register",{u:fm}).then(function(d){
if(d.status==0){
self.$root.removetab("/register");
self.$root.pushx({
title:"登录",
name:"/login"
});
}
});
}
});
},
btnclick:function(pfm,code){
var fm=pfm;
if(code=="vcodeget"){
var that=this;
if(/^1[23456789]\d{9}$/.test(fm.mobile) == false){
this.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
}
this.$root.showMask();
/*ajax 调用获取手机验证码,并存储到*/
this.$root.postReq("/web/userCtl/fetchVcode",{mobile:fm.mobile}).then(function(d){
if(d.status==0){
that.vcode=d.data.vcodestr;
setTimeout(()=>{
that.$root.hideMask();
},3000);
}
});
}
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex=key;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment