ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增找回密码（邮箱验证）、注册、修改密码

master
ltlzx 4 years ago
parent
bfd4d6ede9
commit
549ceef60e
10 changed files with 288 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      common/common.scss
  2. 14
      pages.json
  3. 12
      pages/account/myProfile.vue
  4. 37
      pages/login/changePwd.vue
  5. 128
      pages/login/index.vue
  6. 120
      pages/login/verifyEmail.vue
  7. BIN
      static/img/apple.png
  8. BIN
      static/img/close.png
  9. BIN
      static/img/facebook.png
  10. BIN
      static/img/gugei.png

56
common/common.scss
View File

@ -89,4 +89,58 @@
} }
} }
} }
.login{
padding: 0 32rpx;
.login_input{
height: 97.33rpx;
border: 1px solid #323333;
border-radius: 48.67rpx;
font-size: 22.67rpx;
padding-left: 33.33rpx;
margin-bottom: 56rpx;
}
.tips{
color: #DA0303;
font-size: 18.67rpx;
font-weight: bold;
}
.forgot{
font-size: 22.67rpx;
color: #666666;
margin-top: 29.33rpx;
text-align: right;
margin-bottom: 34.67rpx;
}
.login_submit{
width: 100%;
height: 88rpx;
line-height: 88rpx;
background-color: #000000;
color: white;
border-radius: 6.67rpx;
margin-bottom: 52rpx;
font-weight: bold;
}
.agreement{
display: flex;
// align-items: center;
// padding: 0 33.33rpx;
font-size: 24rpx;
font-weight: bold;
.agreement_image{
width: 24rpx;
height: 24rpx;
margin-right: 13.33rpx;
padding-top: 4rpx;
}
.text{
color: #4F92F1;
display: inline-block;
margin: 0 4px;
}
}
}

14
pages.json
View File

@ -70,6 +70,20 @@
"style": { "style": {
"titleNView":false "titleNView":false
} }
},
{
"path": "pages/login/verifyEmail",
"style": {
"navigationBarTitleText": "Verify Email Address",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/login/changePwd",
"style": {
"navigationBarTitleText": "Change Password",
"navigationBarBackgroundColor":"#FFFFFF"
}
} }
], ],
"globalStyle": { "globalStyle": {

12
pages/account/myProfile.vue
View File

@ -22,12 +22,14 @@
<img src="/static/img/right1.png" alt="" class="right_img"> <img src="/static/img/right1.png" alt="" class="right_img">
</view> </view>
</view> </view>
<view class="profile_item "> <navigator url="/pages/login/changePwd" >
<text>Change Password</text> <view class="profile_item ">
<view class="profile_item_right"> <text>Change Password</text>
<img src="/static/img/right1.png" alt="" class="right_img"> <view class="profile_item_right">
<img src="/static/img/right1.png" alt="" class="right_img">
</view>
</view> </view>
</view> </navigator>
<view class="profile_item "> <view class="profile_item ">
<text>Ship to</text> <text>Ship to</text>
<view class="profile_item_right"> <view class="profile_item_right">

37
pages/login/changePwd.vue
View File

@ -0,0 +1,37 @@
<template>
<view>
<view class="login">
<input type="text" class="login_input" placeholder="New password">
<input type="text" class="login_input" placeholder="Confirm password">
<button class="login_submit" @click="submit">SUBMIT</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
submit(){
uni.showToast({
title: 'password is changed',
icon:'none'
});
}
}
}
</script>
<style lang="scss" scoped>
page{
border-top: 13.33rpx #F7F7F7 solid;
padding-top: 48rpx;
}
.login_submit{
font-size: 26.67rpx;
}
</style>

128
pages/login/index.vue
View File

@ -1,32 +1,44 @@
<template> <template>
<view> <view class="login_body">
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#010101" class="select"></uni-segmented-control> <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#010101" class="select"></uni-segmented-control>
<view class="body"> <view class="body">
<view class="login" v-show="current==0"> <view class="login" v-show="current==0">
<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData"> <input type="text" class="login_input" placeholder="eamil address">
<uni-forms-item label="" name="email"> <input type="text" class="login_input" placeholder="password">
<input type="text" class="login_input" placeholder="eamil address"> <view class="tips">The email address or password you enterde is incorrect.</view>
</uni-forms-item> <navigator url="/pages/login/verifyEmail" >
<uni-forms-item label="" name="pwd"> <view class="forgot">Forgot your Password?</view>
<input type="text" class="login_input" placeholder="password"> </navigator>
</uni-forms-item> <button class="login_submit" >SIGIN IN</button>
</uni-forms>
<view class="tips">Forgot your Password?</view>
<button class="login_submit">sign in</button>
<view class="agreement"> <view class="agreement">
<img src="../../static/img/select2.png" mode="" class="agreement_image"></img> <img src="../../static/img/select2.png" mode="" class="agreement_image"></img>
<view class=""> <view class="">
by continuong, you agree to be <text class="text"> terms of use</text> and <text class="text">privacy policy</text>. by continuong, you agree to be <text class="text"> terms of use </text> and <text class="text"> privacy policy</text>.
</view> </view>
</view> </view>
</view> </view>
<view class="" v-show="current==1"> <view class="login" v-show="current==1">
<input type="text" class="login_input" placeholder="name">
<input type="text" class="login_input" placeholder="eamil address">
<input type="text" class="login_input" placeholder="password">
<button class="login_submit">REGISTER</button>
<view class="agreement">
<img src="../../static/img/select2.png" mode="" class="agreement_image"></img>
<view class="">
by continuong, you agree to be <text class="text"> terms of use </text> and <text class="text"> privacy policy</text>.
</view>
</view>
</view> </view>
<view class="mode"> <view class="mode">
<view class="mode_title">or continue with</view> <view class="mode_title">or continue with</view>
<view class="mode_content">
<image src="/static/img/facebook.png" class="mode_content_image"></image>
<image src="/static/img/gugei.png" class="mode_content_image"></image>
<image src="/static/img/apple.png" class="mode_content_image"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -42,18 +54,6 @@
email:'', email:'',
pwd:'' pwd:''
}, },
dynamicRules: {
email: {
rules: [{
required: false,
errorMessage: '域名不能为空'
}, {
format: 'email',
errorMessage: '域名格式错误'
}]
}
},
} }
}, },
methods:{ methods:{
@ -68,76 +68,58 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login_body{
padding-top: 145.33rpx;
}
.select{ .select{
margin-top: 145.33rpx; margin-bottom: 80rpx;
font-size: 33.33rpx; font-size: 33.33rpx;
font-weight: bold; font-weight: bold;
margin-bottom: 80rpx;
}
.body{
padding: 0 32rpx;
}
.login{
.login_input{
height: 97.33rpx;
border: 1px solid #323333;
border-radius: 48.67rpx;
font-size: 22.67rpx;
padding-left: 33.33rpx;
}
.tips{
font-size: 22.67rpx;
color: #666666;
margin-top: 73.33rpx;
text-align: right;
margin-bottom: 34.67rpx;
}
.login_submit{
width: 100%;
height: 88rpx;
background-color: #000000;
color: white;
border-radius: 6.67rpx;
margin-bottom: 52rpx;
font-weight: bold;
}
.agreement{
display: flex;
// align-items: center;
// padding: 0 33.33rpx;
font-size: 24rpx;
font-weight: bold;
.agreement_image{
width: 24rpx;
height: 24rpx;
margin-right: 13.33rpx;
}
.text{
color: #4F92F1;
}
}
} }
.mode{ .mode{
position: fixed; position: fixed;
bottom: 138.67rpx; bottom: 138.67rpx;
width: 100%; width: 100%;
left: 0;
.mode_title{ .mode_title{
font-size: 26.67rpx; font-size: 26.67rpx;
color: #666666; color: #666666;
position: relative; position: relative;
text-align: center; text-align: center;
width: 100%; width: 100%;
&:before{ &:before{
content: ""; content: "";
height: 1px; height: 1px;
width: 89.33rpx; width: 89.33rpx;
background-color: #BCBCBC; background-color: #BCBCBC;
position: absolute; position: absolute;
left: 50%; left: 20%;
top: 50%;
}
&:after{
content: "";
height: 1px;
width: 89.33rpx;
background-color: #BCBCBC;
position: absolute;
right: 20%;
top: 50%; top: 50%;
} }
} }
.mode_content{
display: flex;
align-items: center;
justify-content: center;
margin-top: 50.67rpx;
.mode_content_image{
width: 54.67rpx;
height: 54.67rpx;
margin-right: 49.33rpx;
}
}
} }
</style> </style>

120
pages/login/verifyEmail.vue
View File

@ -0,0 +1,120 @@
<template>
<view>
<view class="login">
<view class="verify_tips">
To verify your email,we've send a verification code to xxxx@xx.com
</view>
<input type="text" class="login_input" placeholder="eamil address">
<view class="tips">The email address or password you enterde is incorrect.</view>
<button class="login_submit" >CONTINUE</button>
<view class="verify_text">Resend code</view>
</view>
<view class="mask"></view>
<view class="verify_popup">
<view class="verify_popup_close">
<image src="../../static/img/close.png" mode=""></image>
</view>
<view class="verify_popup_title">Send!</view>
<view class="verify_popup_msg">we send a new verification code to xxxx@xx.com</view>
<view class="verify_popup_btn">
<button>okay</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
border-top: 13.33rpx #F7F7F7 solid;
padding-top: 49.33rpx;
}
.verify_tips{
font-size: 28rpx;
font-weight: bold;
margin-bottom: 52rpx;
}
.tips{
margin: 44rpx 0;
}
.login_submit{
margin-bottom: 33.33rpx;
}
.verify_text{
font-size: 24rpx;
text-align: center;
font-weight: bold;
}
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 998;
top: 0;
left: 0;
}
.verify_popup{
width: 540rpx;
height: 366.67rpx;
position: fixed;
left: 50%;
margin-left: -270rpx;
top: 50%;
margin-top: -190rpx;
background-color: white;
border-radius: 20rpx;
z-index: 999;
box-sizing: border-box;
padding:15rpx 22rpx;
.verify_popup_close{
text-align: right;
image{
width: 40rpx;
height: 40rpx;
}
}
.verify_popup_title{
font-size: 40rpx;
font-weight: 600;
text-align: center;
margin-bottom: 40rpx;
}
.verify_popup_msg{
font-size: 26.67rpx;
font-weight: 400;
margin-bottom: 40rpx;
text-align: center;
}
.verify_popup_btn{
text-align: center;
button{
width: 321.33rpx;
height: 56rpx;
border-radius: 28rpx;
background-color: black;
color: white;
border: none;
font-size: 26.67rpx;
font-weight: bold;
line-height: 56rpx;
}
}
}
</style>

BIN
static/img/apple.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/img/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/img/facebook.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/img/gugei.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

Write Preview
Loading…
Cancel
Save