Skip to content

B
beyond-clouds-frontM
Commit 54ec67f2 by yanju
Options

Merge branch 'yoona' into 'master' 

完成登录、注册、找回密码基础页面

See merge request !8
parents 3b1775ac 5eefda1f
Showing with 565 additions and 25 deletions
pages/users/login.vue
<template> <template>
<yun-slider>
<yun-div <yun-div
:width-v="704" :width-v="704"
:height-v="820" :padding-v="[65,60,0,60]"
:padding-v="[65,60,72,60]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}" :extend-style="{boxSizing: 'border-box'}"
:border-r="[8]" :border-r="[8]"
slot="card"
> >
<yun-div <yun-div
:show-ske="false" :show-ske="false"
:margin-v="[0,0,56,0]" :margin-v="[0,0,56,0]"
:font-style="[32,43,500,'#999','center']" :font-style="[32,43,500,'#999','center']"
> >
<span>密码登录</span> <span :class="{actived: isPassword}" @click="handleLoginWayOne">密码登录</span>
<span :style="{margin: commonReturnFlexedLength(18)}">·</span> <span :style="{margin: commonReturnFlexedLength(18)}">·</span>
<span>短信登录</span> <span :class="{actived: !isPassword}" @click="handleLoginWayTwo">短信登录</span>
</yun-div> </yun-div>
<yun-input <yun-input
:key="inputKey"
:width-v="584" :width-v="584"
:height-v="86" :height-v="86"
:border-r="[8]" :border-r="[8]"
...@@ -26,8 +24,9 @@ ...@@ -26,8 +24,9 @@
v-model="account" v-model="account"
:validate="validate" :validate="validate"
></yun-input> ></yun-input>
<yun-div :show-ske="false"> <yun-div :show-ske="false" v-if="isPassword">
<yun-input <yun-input
key="loginPassword"
:width-v="584" :width-v="584"
:height-v="86" :height-v="86"
:border-r="[8,0,0,8]" :border-r="[8,0,0,8]"
...@@ -40,12 +39,35 @@ ...@@ -40,12 +39,35 @@
:width-v="56" :width-v="56"
:height-v="86" :height-v="86"
:border-r="[8]" :border-r="[8]"
bg-color-v="#F4F8FA"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"> :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="10" color="#999"></yun-icon> <yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-button :disabled="true" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(0.2)}">登 录</yun-button> <yun-div :show-ske="false" v-else>
<yun-input
key="loginVerificationCode"
:width-v="584"
:height-v="86"
:border-r="[8,0,0,8]"
left-word="验证码："
v-model="VerificationCode"
:validate="validateCode"
:input-type="inputType"
></yun-input>
<yun-div
:show-ske="false"
:height-v="86"
:margin-v="[0,30,0,0]"
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
{{timing}}
</yun-div>
</yun-div>
<yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">登 录
</yun-button>
<yun-div <yun-div
:show-ske="false" :show-ske="false"
:margin-v="[25,0,0,0]" :margin-v="[25,0,0,0]"
...@@ -58,32 +80,34 @@ ...@@ -58,32 +80,34 @@
<label for="automatic"></label> <label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div> <yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div>
</yun-div> </yun-div>
<yun-div>忘记密码</yun-div> <yun-div @click.native="toReset">忘记密码</yun-div>
</yun-div> </yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]"> <yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']" bg-color-v="#F4F8FA"> <yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :src="QQ"></yun-img> <yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :src="QQ"></yun-img>
</yun-div> </yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']" bg-color-v="#F4F8FA"> <yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="wechat"></yun-img> <yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="wechat"></yun-img>
</yun-div> </yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']" bg-color-v="#F4F8FA"> <yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="dingding"></yun-img> <yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="dingding"></yun-img>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-slider>
</template> </template>
<script> <script>
import commonMixin from "../../components/moblie/commonMixin"; import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg' import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg' import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg' import dingding from '../../assets/svg/dingding.svg'
export default { export default {
mixins:[commonMixin], mixins: [commonMixin],
data() { data() {
return { return {
QQ, QQ,
...@@ -91,6 +115,7 @@ export default { ...@@ -91,6 +115,7 @@ export default {
dingding, dingding,
account: '', account: '',
password: '', password: '',
VerificationCode: '',
validate: [ validate: [
{ {
regex: /^1[3456789]\d{9}$/, regex: /^1[3456789]\d{9}$/,
...@@ -99,13 +124,66 @@ export default { ...@@ -99,13 +124,66 @@ export default {
], ],
validatePassword: [ validatePassword: [
{ {
regex: /^\s$/g, regex: /\S/,
alertWord: '密码不能为空' alertWord: '密码不能为空'
} }
], ],
validateCode: [
{
regex: /\S/,
alertWord: '验证码不能为空'
}
],
iconName: 'invisible', iconName: 'invisible',
inputType: 'password', inputType: 'password',
isSelect: false isSelect: false,
opacity: 0.2,
isPassword: true,
timing: '发送验证码',
inputKey: 'passwordLogin'
}
},
computed: {
isClick: function () {
if (this.account !== '' && (this.password !== '' || this.VerificationCode !== '')) {
this.opacity = 1
return false
} else {
this.opacity = 0.2
return true
}
}
},
methods: {
toReset() {
this.$router.push('/users/reset')
},
showPassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password'
this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
},
handleLoginWayOne() {
Object.assign(this.$data, this.$options.data())
this.isPassword = true
},
handleLoginWayTwo() {
Object.assign(this.$data, this.$options.data())
this.isPassword = false
this.inputKey = 'codeLogin'
},
sendSms() {
if (this.timing === '发送验证码') {
console.log('发送验证码');
let time = 60;
let timer = setInterval(() => {
this.timing = `${time}秒`
time --;
}, 1000);
setTimeout(() => {
clearInterval(timer)
this.timing = '发送验证码'
}, 60000)
}
} }
} }
...@@ -113,6 +191,10 @@ export default { ...@@ -113,6 +191,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.actived {
color: #2F2F2F !important;
}
#automatic + label { #automatic + label {
display: inline-block; display: inline-block;
width: 24*$length; width: 24*$length;
...@@ -123,6 +205,7 @@ export default { ...@@ -123,6 +205,7 @@ export default {
border: 1*$length solid #999; border: 1*$length solid #999;
box-sizing: border-box; box-sizing: border-box;
} }
#automatic:checked + label::before { #automatic:checked + label::before {
display: block; display: block;
width: 24*$length; width: 24*$length;
...@@ -135,9 +218,11 @@ export default { ...@@ -135,9 +218,11 @@ export default {
color: #fff; color: #fff;
@include border-radius(2*$length); @include border-radius(2*$length);
} }
#automatic:checked + label { #automatic:checked + label {
border: none; border: none;
} }
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;
} }
......
pages/users/register.vue
<template> <template>
<yun-div
:width-v="704"
:padding-v="[65,60,0,60]"
:margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}"
:border-r="[8]"
>
<yun-div
:show-ske="false"
:margin-v="[0,0,56,0]"
:font-style="[32,43,500,'#999','center']"
>
<span :class="{actived: isPhone}" @click="handleLoginWayOne">手机号注册</span>
<span :style="{margin: commonReturnFlexedLength(18)}">·</span>
<span :class="{actived: !isPhone}" @click="handleLoginWayTwo">邮箱号注册</span>
</yun-div>
<yun-input
v-if="isPhone"
key="registerPhone"
:width-v="584"
:height-v="86"
:border-r="[8]"
left-word="手机号："
v-model="account"
:validate="validate"
></yun-input>
<yun-input
v-else
key="registerEmail"
:width-v="584"
:height-v="86"
:border-r="[8]"
left-word="邮箱号："
v-model="account"
:validate="validateEmail"
></yun-input>
<yun-div :show-ske="false">
<yun-input
:key="inputKey"
:width-v="584"
:height-v="86"
:border-r="[8,0,0,8]"
left-word="密码："
v-model="password"
:validate="validatePassword"
:input-type="inputType"
></yun-input>
<yun-div
:width-v="56"
:height-v="86"
:border-r="[8]"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon>
</yun-div>
</yun-div>
<yun-div :show-ske="false" v-if="isPhone">
<yun-input
key="VerificationCode"
:width-v="584"
:height-v="86"
:border-r="[8,0,0,8]"
left-word="验证码："
v-model="VerificationCode"
:validate="validateCode"
:input-type="inputType"
></yun-input>
<yun-div
:show-ske="false"
:height-v="86"
:margin-v="[0,30,0,0]"
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
{{timing}}
</yun-div>
</yun-div>
<yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">
注 册
</yun-button>
<yun-div
:show-ske="false"
:margin-v="[25,0,0,0]"
:width-v="584"
:flex-v="['row','space-between','center']"
:font-style="[24,24,500,'#999','left']"
>
<yun-div :flex-v="['row','space-between','center']">
<input id="automatic" type="checkbox" v-model="isSelect">
<label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span>和<span style="color:#666666;">隐私政策</span></yun-div>
</yun-div>
<yun-div @click.native="toReset">忘记密码</yun-div>
</yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :src="QQ"></yun-img>
</yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="wechat"></yun-img>
</yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="dingding"></yun-img>
</yun-div>
</yun-div>
</yun-div>
</template> </template>
<script> <script>
import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg'
export default { export default {
mixins: [commonMixin],
data() {
return {
QQ,
wechat,
dingding,
account: '',
password: '',
VerificationCode: '',
validate: [
{
regex: /^1[3456789]\d{9}$/,
alertWord: '手机号格式错误'
}
],
validateEmail: [
{
regex: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
alertWord: '邮箱格式错误'
}
],
validatePassword: [
{
regex: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/,
alertWord: '密码要求长度为8-16位，包含数字和字母'
}
],
validateCode: [
{
regex: /\S/,
alertWord: '验证码不能为空'
}
],
iconName: 'invisible',
inputType: 'password',
isSelect: false,
opacity: 0.2,
isPhone: true,
timing: '发送验证码',
inputKey: 'registerPhonePassword'
}
},
computed: {
isClick: function () {
if (this.isPhone) {
if (this.account !== '' && this.password !== '' && this.VerificationCode !== '') {
this.opacity = 1
return false
} else {
this.opacity = 0.2
return true
}
} else {
if (this.account !== '' && this.password !== '') {
this.opacity = 1
return false
} else {
this.opacity = 0.2
return true
}
}
}
},
methods: {
toReset() {
this.$router.push('/users/reset')
},
showPassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password'
this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
},
handleLoginWayOne() {
Object.assign(this.$data, this.$options.data())
this.isPhone = true
},
handleLoginWayTwo() {
Object.assign(this.$data, this.$options.data())
this.isPhone = false
this.inputKey = 'registerEmailPassword'
},
sendSms() {
if (this.timing === '发送验证码') {
console.log('发送验证码');
let time = 60;
let timer = setInterval(() => {
this.timing = `${time}秒`
time --;
}, 1000);
setTimeout(() => {
clearInterval(timer)
this.timing = '发送验证码'
}, 60000)
}
}
}
}
</script>
<style lang="scss" scoped>
.actived {
color: #2F2F2F !important;
} }
</script>
#automatic + label {
display: inline-block;
width: 24*$length;
height: 24*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
border: 1*$length solid #999;
box-sizing: border-box;
}
#automatic:checked + label::before {
display: block;
width: 24*$length;
height: 24*$length;
line-height: 24*$length;
content: "\2713";
text-align: center;
font-size: 12*$length;
background-color: #75D098;
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label {
border: none;
}
input[type=checkbox] {
display: none;
}
</style>
pages/users/reset.vue
<template> <template>
<yun-div
:width-v="704"
:padding-v="[65,60,0,60]"
:margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}"
:border-r="[8]"
>
<yun-div
:show-ske="false"
:margin-v="[0,0,56,0]"
:font-style="[32,43,500,'#999','center']"
>
<span class="actived">忘记密码</span>
</yun-div>
<yun-input
:width-v="584"
:height-v="86"
:border-r="[8]"
left-word="手机号："
v-model="account"
:validate="validate"
></yun-input>
<yun-div :show-ske="false">
<yun-input
:width-v="584"
:height-v="86"
:border-r="[8,0,0,8]"
left-word="新密码："
v-model="password"
:validate="validatePassword"
:input-type="inputType"
></yun-input>
<yun-div
:width-v="56"
:height-v="86"
:border-r="[8]"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon>
</yun-div>
</yun-div>
<yun-div :show-ske="false">
<yun-input
:width-v="584"
:height-v="86"
:border-r="[8,0,0,8]"
left-word="验证码："
v-model="VerificationCode"
:validate="validateCode"
:input-type="inputType"
></yun-input>
<yun-div
:show-ske="false"
:height-v="86"
:margin-v="[0,30,0,0]"
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
>
{{timing}}
</yun-div>
</yun-div>
<yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">
重置账号
</yun-button>
<yun-div
:show-ske="false"
:margin-v="[25,0,0,0]"
:width-v="584"
:flex-v="['row','space-between','']"
:font-style="[24,24,500,'#999','left']"
>
<yun-div :flex-v="['row','space-between','']">
<input id="automatic" type="checkbox" v-model="isSelect">
<label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span>和<span style="color:#666666;">隐私政策</span></yun-div>
</yun-div>
<yun-div>
<span @click="toLogin">登录</span>
<span>·</span>
<span @click="toRegister">注册</span>
</yun-div>
</yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :src="QQ"></yun-img>
</yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="wechat"></yun-img>
</yun-div>
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
bg-color-v="#F4F8FA">
<yun-img :ske-w="80" :ske-h="80" :width-v="40" :height-v="40" :border-r="['50%']" :src="dingding"></yun-img>
</yun-div>
</yun-div>
</yun-div>
</template> </template>
<script> <script>
import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg'
export default {
mixins: [commonMixin],
data() {
return {
QQ,
wechat,
dingding,
account: '',
password: '',
VerificationCode: '',
validate: [
{
regex: /^1[3456789]\d{9}$/,
alertWord: '手机号格式错误'
}
],
validatePassword: [
{
regex: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$/,
alertWord: '密码要求长度为8-16位，包含数字和字母'
}
],
validateCode: [
{
regex: /\S/,
alertWord: '验证码不能为空'
}
],
iconName: 'invisible',
inputType: 'password',
isSelect: false,
opacity: 0.2,
isPassword: true,
timing: '发送验证码'
}
},
computed: {
isClick: function () {
if (this.account !== '' && this.password !== '' && this.VerificationCode !== '') {
this.opacity = 1
return false
} else {
this.opacity = 0.2
return true
}
}
},
methods: {
toLogin() {
this.$router.push('/users/login')
},
toRegister() {
this.$router.push('/users/register')
},
showPassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password'
this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
},
sendSms() {
if (this.timing === '发送验证码') {
console.log('发送验证码');
let time = 60;
let timer = setInterval(() => {
this.timing = `${time}秒`
time --;
}, 1000);
setTimeout(() => {
clearInterval(timer)
this.timing = '发送验证码'
}, 60000)
}
}
}
}
</script>
<style lang="scss" scoped>
.actived {
color: #2F2F2F !important;
}
#automatic + label {
display: inline-block;
width: 24*$length;
height: 24*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
border: 1*$length solid #999;
box-sizing: border-box;
}
export default { #automatic:checked + label::before {
display: block;
width: 24*$length;
height: 24*$length;
line-height: 24*$length;
content: "\2713";
text-align: center;
font-size: 12*$length;
background-color: #75D098;
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label {
border: none;
}
input[type=checkbox] {
display: none;
} }
</script> </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