Skip to content

G
gs1
Commit b9d58637 by tang
Options

fix: 注册静态页面开发【100】；找回密码静态页面开发【100%】

parent f50c5dd3
Showing with 427 additions and 12 deletions
src/views/entry/entry-card.vue
...@@ -24,16 +24,21 @@ export default { ...@@ -24,16 +24,21 @@ export default {
background: #FFFFFF; background: #FFFFFF;
border-radius: 6px; border-radius: 6px;
padding: 40px; padding: 40px;
text-align: left;
font-family: PingFangSC-Medium, PingFang SC;
.header { .header {
height: 24px; height: 24px;
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: $theme-color1; color: $theme-color1;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
} }
.body{
display: flex;
}
} }
</style> </style>
src/views/entry/index.vue
...@@ -54,6 +54,7 @@ export default { ...@@ -54,6 +54,7 @@ export default {
flex-direction: column; flex-direction: column;
background-color: #0D2C6C; background-color: #0D2C6C;
align-items: center; align-items: center;
overflow: hidden;
.header { .header {
flex: 0 0 112px; flex: 0 0 112px;
...@@ -65,6 +66,7 @@ export default { ...@@ -65,6 +66,7 @@ export default {
max-width: 1500px; max-width: 1500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
.content { .content {
flex: 1; flex: 1;
...@@ -80,6 +82,7 @@ export default { ...@@ -80,6 +82,7 @@ export default {
color: white; color: white;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-top: 40px;
span { span {
......
src/views/entry/login.vue
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
autocomplete="off"></el-input> autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="validate-append">
<el-input <el-input
v-model="userForm.validateCode" v-model="userForm.validateCode"
placeholder="请输入验证码" placeholder="请输入验证码"
> >
<template slot="append"><img src="" alt=""></template> <template slot="append"><img src="../../assets/image/validate.jpg" alt=""></template>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -36,20 +36,24 @@ ...@@ -36,20 +36,24 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="手机号登录" name="second"> <el-tab-pane label="手机号登录" name="second">
<el-form :model="mobileForm" status-icon> <el-form :model="mobileForm" status-icon>
<el-form-item> <el-form-item>
<el-input v-model="userForm.mobile" <el-input v-model="mobileForm.mobile"
placeholder="请输入手机号"></el-input> placeholder="请输入手机号"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input
v-model="userForm.validateCode" v-model="mobileForm.validateCode"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
> >
<template slot="append"> <template slot="append">
<el-button type="primary" @click="sendValidateCode">发送验证码</el-button> <el-button v-if="!hasSent" type="primary" @click.stop="sendValidateCode">发送验证码</el-button>
<el-button disabled v-else>
发送验证码({{ time }}S)
</el-button>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -76,6 +80,9 @@ export default { ...@@ -76,6 +80,9 @@ export default {
components: {EntryCard}, components: {EntryCard},
data() { data() {
return { return {
hasSent: false,
timer: null,
time: 60,
activeName: 'first', activeName: 'first',
userForm: { userForm: {
userName: '', userName: '',
...@@ -96,7 +103,19 @@ export default { ...@@ -96,7 +103,19 @@ export default {
}, },
sendValidateCode() { sendValidateCode() {
if (this.mobileForm.mobile === '') {
this.$message({type: 'error', message: '请输入手机号码'});
} else {
this.hasSent = true;
this.timer = setInterval(() => {
this.time -= 1;
if (this.time === 0) {
clearInterval(this.timer);
this.time = 60;
this.hasSent = false;
}
}, 1000);
}
} }
}, },
} }
...@@ -108,11 +127,20 @@ export default { ...@@ -108,11 +127,20 @@ export default {
::v-deep .el-form { ::v-deep .el-form {
.validate-append .el-input-group__append {
padding: 0;
height: 100%;
img {
height: 40px;
}
}
.el-input-group__append { .el-input-group__append {
border-color: transparent; border-color: transparent;
border: none; border: none;
button.el-button { button.el-button--primary {
background-color: $theme-color1; background-color: $theme-color1;
border-color: $theme-color1; border-color: $theme-color1;
color: white; color: white;
......
src/views/entry/register.vue
<template> <template>
<EntryCard title="网站用户注册"> <EntryCard title="网站用户注册">
<div class="register"> <div class="register">
<el-form ref='ruleForm'
label-position='right'
label-width='140px'
:model='form'>
<el-form-item label='用户名'
prop='userName'
:rules="[{
required: true,
message: '不能为空',
}]">
<el-input v-model='form.userName' autocomplete='off'></el-input>
</el-form-item>
<el-form-item label='E-mail地址'
prop='email'
:rules="[{
required: true,
message: '不能为空',
},
{ type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}]">
<el-input v-model='form.email' autocomplete='off'></el-input>
</el-form-item>
<el-form-item label='手机号码'
prop='mobile'
:rules="[{
required: true,
message: '不能为空',
},
{ validator:checkMobileReg },
{ validator:checkMobile, trigger:'blur' },]">
<el-input v-model='form.mobile' autocomplete='off'></el-input>
</el-form-item>
<el-form-item label='手机验证码'
prop='validate'
:rules="[{
required: true,
message: '不能为空',
},{ validator: checkValidate, trigger:'blur' }]"
>
<el-input
v-model="form.validate"
placeholder="请输入短信验证码"
>
<template slot="append">
<el-button v-if="!hasSent" type="primary" @click.stop="sendValidateCode">发送验证码</el-button>
<el-button disabled v-else>
发送验证码({{ time }}S)
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label='密码'
prop='password'
type='password'
:rules="[{required: true,message: '不能为空',},
{ pattern: pwdPattern, message: '密码需要6～16位数字+字母组合',},
{ validator:validatePass,}]">
<el-input type='password' placeholder="请输入密码" v-model='form.password'></el-input>
</el-form-item>
<el-form-item label='重复密码'
prop='rePassword'
:rules="[
{ required: true,message: '不能为空',},
{ validator: validatePass2 }
]">
<el-input type='password' placeholder="请再次输入密码" v-model='form.rePassword'
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register" style="width: 100%">注 册</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
已有账号，
<el-button type="text" @click="$router.push({name:'login'})">马上登录</el-button>
</el-form-item>
</el-form>
</div> </div>
</EntryCard> </EntryCard>
</template> </template>
<script> <script>
import EntryCard from './entry-card.vue' import EntryCard from './entry-card.vue'
export default { export default {
name: "register", name: "register",
components:{EntryCard} components: {EntryCard},
data() {
return {
hasSent: false,
timer: null,
time: 60,
form: {
userName: '',
email: '',
mobile: '',
password: '',
rePassword: '',
validate: '',
},
mobilePattern: /^((13[0-9])|(15[^4])|(18[0-9])|(17[0-8])|(147))\d{8}$/,
pwdPattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,16}$/,
}
},
methods: {
register() {
},
sendValidateCode() {
if (this.form.mobile === '') {
this.$message({type: 'error', message: '请输入手机号码'});
} else {
this.hasSent = true;
this.timer = setInterval(() => {
this.time -= 1;
if (this.time === 0) {
clearInterval(this.timer);
this.time = 60;
this.hasSent = false;
}
}, 1000);
}
},
checkMobileReg(rule, value, callback) {
if (value !== '') {
if (this.mobilePattern.test(value)) {
callback();
} else {
callback(new Error('手机号码格式不正确'));
}
}
},
checkMobile() {
console.log('checkMobile');
return new Promise((resolve) => {
resolve(true);
});
},
checkValidate() {
return new Promise((resolve) => {
resolve(true);
});
},
validatePass(rule, value, callback) {
if (this.form.rePassword !== '') {
this.$refs.ruleForm.validateField('rePassword');
}
callback();
},
validatePass2(rule, value, callback) {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login{ .register {
width: 520px;
margin-right: 60px;
::v-deep .el-form {
.el-input-group__append {
border-color: transparent;
border: none;
button.el-button--primary {
background-color: $theme-color1;
border-color: $theme-color1;
color: white;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #f5825d;
border-color: #f5825d;
}
}
.bottom-btn .el-form-item__content {
display: flex;
justify-content: flex-end;
align-items: center;
color: #999999;
font-size: 13px;
.el-button {
font-size: 13px;
}
}
} }
}
</style> </style>
src/views/entry/reset-pass.vue
<template> <template>
<EntryCard title="忘记密码"> <EntryCard title="忘记密码">
<div class="reset-pass"> <div class="reset-pass">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="手机号找回" name="first">
<el-form :model="mobileForm" status-icon>
<el-form-item>
<el-input v-model="mobileForm.userName"
placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop='mobile'
:rules="[{
required: true,
message: '不能为空',
}]">
<el-input v-model="mobileForm.mobile"
placeholder="请输入手机号"
>
<template slot="append">
<el-button v-if="!hasSent" type="primary" @click.stop="resetByMobile">手机获取密码</el-button>
<el-button disabled v-else>
手机获取密码({{ time }}S)
</el-button>
</template>
</el-input>
</el-form-item>
<p style="font-size: 13px;font-weight: 400;color: #F23535;">注：同一手机号每日最多操作三次</p>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'login'})">去登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="邮箱找回" name="second">
<el-form :model="emailForm" status-icon>
<el-form-item>
<el-input v-model="emailForm.userName"
placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop='email'
:rules="[{
required: true,
message: '不能为空',
},
{ type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}]">
<el-input
v-model="emailForm.email"
placeholder="请输入邮箱号"
>
<template slot="append">
<el-button v-if="!hasSent" type="primary" @click.stop="resetByEmail">邮箱获取密码</el-button>
<el-button disabled v-else>
邮箱获取密码({{ time }}S)
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'login'})">去登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="卡号找回" name="third">
<el-form :model="cardForm" status-icon>
<!-- <el-form-item>-->
<!-- <el-input v-model="mobileForm.userName"-->
<!-- placeholder="请输入用户名"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <el-input-->
<!-- v-model="mobileForm.mobile"-->
<!-- placeholder="请输入手机号"-->
<!-- >-->
<!-- <template slot="append">-->
<!-- <el-button v-if="!hasSent" type="primary" @click.stop="resetByMobile">手机获取密码</el-button>-->
<!-- <el-button disabled v-else>-->
<!-- 手机获取密码({{ time }}S)-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item class="bottom-btn">-->
<!-- <el-button type="text" @click="$router.push({name:'login'})">去登录</el-button>-->
<!-- </el-form-item>-->
</el-form>
</el-tab-pane>
</el-tabs>
</div> </div>
</EntryCard> </EntryCard>
...@@ -11,10 +105,99 @@ ...@@ -11,10 +105,99 @@
export default { export default {
name: "reset-pass", name: "reset-pass",
components: {EntryCard} components: {EntryCard},
data() {
return {
hasSent: false,
timer: null,
time: 60,
activeName: 'first',
mobileForm: {
userName: '',
mobile: ''
},
emailForm: {
userName: '',
email: ''
},
cardForm: {},
}
},
methods: {
resetByMobile() {
if (this.mobileForm.mobile === '') {
this.$message({type: 'error', message: '请输入手机号码'});
} else {
this.hasSent = true;
this.timer = setInterval(() => {
this.time -= 1;
if (this.time === 0) {
clearInterval(this.timer);
this.time = 60;
this.hasSent = false;
}
}, 1000);
}
},
resetByEmail() {
if (this.emailForm.email === '') {
this.$message({type: 'error', message: '请输入邮箱号'});
} else {
this.hasSent = true;
this.timer = setInterval(() => {
this.time -= 1;
if (this.time === 0) {
clearInterval(this.timer);
this.time = 60;
this.hasSent = false;
}
}, 1000);
}
}
},
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.reset-pass {
width: 360px;
::v-deep .el-form {
.el-input-group__append {
border-color: transparent;
border: none;
button.el-button--primary {
background-color: $theme-color1;
border-color: $theme-color1;
color: white;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #f5825d;
border-color: #f5825d;
}
}
.bottom-btn .el-form-item__content {
display: flex;
justify-content: flex-end;
align-items: center;
color: #999999;
font-size: 13px;
.el-button {
color: #999999;
font-size: 13px;
&:hover, &:focus {
color: #f5825d;
}
}
}
}
}
</style> </style>
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