liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加登录逻辑

master
j1ack 3 years ago
parent
f42521286f
commit
8efb1241a1
5 changed files with 579 additions and 390 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. 13
      pages.json
  2. 68
      pages/login/forget.vue
  3. 44
      pages/login/index.vue
  4. 157
      pages/login/register.vue
  5. 7
      utils/language/en_US.js

13
pages.json
View File

@ -3,34 +3,35 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页 "pages": [ //pages数组中第一项表示应用启动页
// 首页部分 // 登陆部分
{ {
"path": "pages/home/index", "path": "pages/login/index",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
// 登陆部分
{ {
"path": "pages/login/index", "path": "pages/login/forget",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/login/forget", "path": "pages/login/register",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
// 首页部分
{ {
"path": "pages/login/register", "path": "pages/home/index",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
// markets // markets
{ {
"path": "pages/markets/index", "path": "pages/markets/index",

68
pages/login/forget.vue
View File

@ -13,14 +13,17 @@
</u-input> </u-input>
</u-form-item> </u-form-item>
<!-- 验证码 --> <!-- 验证码 -->
<u-form-item class="input-item vCode" prop="verificationCode" ref="item1"> <u-form-item class="input-item vCode" prop="code" ref="item1">
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.verificationCode ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'" :name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.verificationCode" color="#fff" fontSize="32rpx" <u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none"
border="none" :placeholder="i18n.registerWelcomeText" maxlength="6"> :placeholder="i18n.registerWelcomeText" maxlength="6">
</u-input> </u-input>
<u-button class="getVCodeBtn" color="#323045">Get code</u-button> <u-code startText="Get code" :seconds="seconds" ref="uCode" keep-running unique-key="login"
@change="codeChange">
</u-code>
<u-button class="getVCodeBtn" color="#323045" @tap="getCode">{{tips}}</u-button>
</u-form-item> </u-form-item>
<!-- 密码 --> <!-- 密码 -->
<u-form-item class="input-item" prop="password" ref="item1"> <u-form-item class="input-item" prop="password" ref="item1">
@ -56,6 +59,11 @@ export default {
name: "ForgotPassword", name: "ForgotPassword",
data() { data() {
return { return {
// 验证码倒计时
tips: '',
seconds: 60,
// 邮箱号码是否正确
isCanGetCode: false,
userInfo: { userInfo: {
name: "", name: "",
password: "", password: "",
@ -67,7 +75,7 @@ export default {
message: this.$t("login.emailInputMessage"), message: this.$t("login.emailInputMessage"),
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
verificationCode: { code: {
type: "string", type: "string",
required: true, required: true,
message: this.$t("login.verificationCodeMessage"), message: this.$t("login.verificationCodeMessage"),
@ -88,11 +96,57 @@ export default {
return this.$t("login"); return this.$t("login");
}, },
}, },
watch: {
'userInfo.email': {
handler(newValue) {
this.isCanGetCode = uni.$u.test.email(newValue);
}
}
},
onLoad() { onLoad() {
// console.log(this.$t('login.emailInputMessage')); // console.log(this.$t('login.emailInputMessage'));
}, },
onShow() { }, onShow() { },
methods: {}, methods: {
// 验证码相关
codeChange(text) {
this.tips = text;
},
// 验证码获取
getCode() {
if (!this.userInfo.email) {
uni.$u.toast(this.$t("login.Emailempty"))
return
}
if (!this.isCanGetCode) {
uni.$u.toast(this.$t("login.Emailincorrect"))
return
}
if (this.$refs.uCode.canGetCode) {
const data = {
email: this.userInfo.email,
type: 0,
}
// 模拟向后端请求验证码
uni.showLoading({
title: this.$t("login.GettingVerificationCode")
})
this.$api.sendEmailCode(data).then(res => {
if (res.code === 200) {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast(this.$t("login.CodeHasSent"));
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
} else {
uni.$u.toast(res.msg)
}
})
} else {
uni.$u.toast(this.$t("login.SendAfter"));
}
},
},
components: { UButton } components: { UButton }
} }
</script> </script>

44
pages/login/index.vue
View File

@ -2,7 +2,7 @@
<view class="main"> <view class="main">
<view class="welcomeText">{{ i18n.welcomeText }}</view> <view class="welcomeText">{{ i18n.welcomeText }}</view>
<view class="signInText">{{ i18n.signInText }}</view> <view class="signInText">{{ i18n.signInText }}</view>
<u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast"> <u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
<u-form-item class="input-item" prop="email" ref="item1"> <u-form-item class="input-item" prop="email" ref="item1">
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'" :name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
@ -15,14 +15,15 @@
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" :name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none" <u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
:placeholder="i18n.passwordInputText"> border="none" :placeholder="i18n.passwordInputText">
</u-input> </u-input>
</u-form-item> </u-form-item>
</u--form> </u--form>
<navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator> <navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator>
<u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button> <u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button>
<view class="signUp">{{ i18n.notAccountText }}<navigator class="navigator" url="./register">{{ i18n.SignUp }} <view class="signUp" @click.native="$u.throttle(login, 500)">{{ i18n.notAccountText }}
<navigator class="navigator" url="./register">{{ i18n.SignUp }}
</navigator> </navigator>
</view> </view>
@ -30,7 +31,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'login', name: 'login',
data() { data() {
return { return {
@ -62,22 +63,43 @@ export default {
onLoad() { onLoad() {
// console.log(this.$t('login.emailInputMessage')); // console.log(this.$t('login.emailInputMessage'));
}, },
onShow() { }, onShow() {},
methods: { methods: {
// 注册
login() {
this.$refs.uForm.validate().then(res => {
this.$api.login(this.userInfo).then(res => {
if (res.errCode === 'SUCCESS') {
setTimeout(() => {
uni.showToast({
title: this.$t("login.loginSuccess")
})
}, 600)
uni.switchTab({
url: '/pages/home/index'
})
} else {
uni.$u.toast(res.msg)
}
})
}).catch(errors => {
console.log('err')
})
},
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { page {
height: 100%; height: 100%;
background: url(../../static/public/BG.png) no-repeat fixed; background: url(../../static/public/BG.png) no-repeat fixed;
background-size: cover; background-size: cover;
} }
.main { .main {
padding: 0 64rpx; padding: 0 64rpx;
overflow: hidden; overflow: hidden;
@ -150,5 +172,5 @@ page {
padding: 0 10rpx; padding: 0 10rpx;
} }
} }
} }
</style> </style>

157
pages/login/register.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<view class="main" > <view class="main">
<navigation>{{ i18n.SignUp }}</navigation> <navigation>{{ i18n.SignUp }}</navigation>
<view class="body"> <view class="body">
<view class="welcomeText">{{ i18n.registerWelcomeText }}</view> <view class="welcomeText">{{ i18n.registerWelcomeText }}</view>
<view class="signInText">{{ i18n.registerCreate }}</view> <view class="signInText">{{ i18n.registerCreate }}</view>
<u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast"> <u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
<!-- 邮箱 --> <!-- 邮箱 -->
<u-form-item class="input-item" prop="email" ref="item1"> <u-form-item class="input-item" prop="email" ref="item1">
<u-icon class="icon" <u-icon class="icon"
@ -15,22 +15,26 @@
</u-input> </u-input>
</u-form-item> </u-form-item>
<!-- 验证码 --> <!-- 验证码 -->
<u-form-item class="input-item vCode" prop="verificationCode" ref="item1"> <u-form-item class="input-item vCode" prop="code" ref="item1">
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.verificationCode ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'" :name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.verificationCode" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.registerWelcomeText" maxlength="6"> <u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.registerWelcomeText" maxlength="6">
</u-input> </u-input>
<u-button class="getVCodeBtn" color="#323045">Get code</u-button> <u-code startText="Get code" :seconds="seconds" ref="uCode" keep-running unique-key="login"
@change="codeChange">
</u-code>
<u-button class="getVCodeBtn" color="#323045" @tap="getCode">{{tips}}</u-button>
</u-form-item> </u-form-item>
<!-- 密码 --> <!-- 密码 -->
<u-form-item class="input-item" prop="password" ref="item1"> <u-form-item class="input-item" prop="password" ref="item1">
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" :name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none" <u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
:placeholder="i18n.passwordText"> border="none" :placeholder="i18n.passwordText">
</u-input> </u-input>
</u-form-item> </u-form-item>
<!-- 重复密码 --> <!-- 重复密码 -->
@ -38,16 +42,16 @@
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" :name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff" fontSize="32rpx" <u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff"
border="none" :placeholder="i18n.confirmPasswordText"> fontSize="32rpx" border="none" :placeholder="i18n.confirmPasswordText">
</u-input> </u-input>
</u-form-item> </u-form-item>
<!-- 取款密码 --> <!-- 取款密码 -->
<u-form-item class="input-item" prop="withdrawalPassword" ref="item1"> <u-form-item class="input-item" prop="payPassword" ref="item1">
<u-icon class="icon" <u-icon class="icon"
:name="userInfo.withdrawalPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'" :name="userInfo.payPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'"
size="48rpx" width="48rpx"></u-icon> size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.withdrawalPassword" color="#fff" fontSize="32rpx" <u-input class="input" type="password" v-model="userInfo.payPassword" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.withdrawalPasswordText"> border="none" :placeholder="i18n.withdrawalPasswordText">
</u-input> </u-input>
</u-form-item> </u-form-item>
@ -69,9 +73,11 @@
i18n.Conditions i18n.Conditions
}}</span></view> }}</span></view>
</view> </view>
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag">{{ i18n.SignUp }} <u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag" @click="register" :throttleTime="500">
{{ i18n.SignUp }}
</u-button> </u-button>
<view class="signUp">{{ i18n.haveAccount }}<navigator class="navigator" url="./index">{{ i18n.Login }} <view class="signUp">{{ i18n.haveAccount }}
<navigator class="navigator" url="./index">{{ i18n.Login }}
</navigator> </navigator>
</view> </view>
</view> </view>
@ -81,23 +87,38 @@
</template> </template>
<script> <script>
import UButton from '../../uview-ui/components/u-button/u-button.vue' import UButton from '../../uview-ui/components/u-button/u-button.vue'
export default { export default {
name: "register", name: "register",
data() { data() {
return { return {
// 验证码倒计时
tips: '',
seconds: 60,
// 邮箱号码是否正确
isCanGetCode: false,
userInfo: { userInfo: {
name: "",
password: "", password: "",
email: '',
payPassword: '',
inviteCode: '',
code: '',
lang: '',
}, },
rules: { rules: {
payPassword: {
type: "string",
required: true,
message: this.$t("login.withdrawalPasswordMessage"),
trigger: ["blur", "change"],
},
email: { email: {
type: "string", type: "string",
required: true, required: true,
message: this.$t("login.emailInputMessage"), message: this.$t("login.emailInputMessage"),
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
verificationCode: { code: {
type: "string", type: "string",
required: true, required: true,
message: this.$t("login.verificationCodeMessage"), message: this.$t("login.verificationCodeMessage"),
@ -109,6 +130,19 @@ export default {
message: this.$t("login.passwordInputMessage"), message: this.$t("login.passwordInputMessage"),
trigger: ["blur", "change"] trigger: ["blur", "change"]
}, },
InvitationCode: {
type: "string",
required: true,
message: this.$t("login.InvitationCodeMessage"),
trigger: ["blur", "change"]
},
confirmPassword: {
type: "string",
required: true,
message: this.$t("login.confirmPasswordMessage"),
trigger: ["blur", "change"]
},
}, },
agreeFlag: false, agreeFlag: false,
}; };
@ -121,14 +155,85 @@ export default {
onLoad() { onLoad() {
// console.log(this.$t('login.emailInputMessage')); // console.log(this.$t('login.emailInputMessage'));
}, },
onShow() { }, watch: {
methods: {}, 'userInfo.email': {
components: { UButton } handler(newValue) {
} this.isCanGetCode = uni.$u.test.email(newValue);
}
}
},
onShow() {},
methods: {
// 验证码相关
codeChange(text) {
this.tips = text;
},
// 验证码获取
getCode() {
if (!this.userInfo.email) {
uni.$u.toast(this.$t("login.Emailempty"))
return
}
if (!this.isCanGetCode) {
uni.$u.toast(this.$t("login.Emailincorrect"))
return
}
if (this.$refs.uCode.canGetCode) {
const data = {
email: this.userInfo.email,
type: 0,
}
// 模拟向后端请求验证码
uni.showLoading({
title: this.$t("login.GettingVerificationCode")
})
this.$api.sendEmailCode(data).then(res => {
if (res.code === 200) {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast(this.$t("login.CodeHasSent"));
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
} else {
uni.$u.toast(res.msg)
}
})
} else {
uni.$u.toast(this.$t("login.SendAfter"));
}
},
// 注册
register() {
this.$refs.uForm.validate().then(res => {
this.$api.register(this.userInfo).then(res => {
if (res.errCode === 'SUCCESS') {
setTimeout(() => {
uni.showToast({
title: this.$t("login.resSuccess")
})
}, 600)
uni.switchTab({
url: '/pages/login/index'
})
} else {
uni.$u.toast(res.msg)
}
})
}).catch(errors => {
console.log('err')
})
},
},
components: {
UButton
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
.body { .body {
margin-top: 204rpx; margin-top: 204rpx;
@ -234,5 +339,5 @@ export default {
} }
} }
} }
</style> </style>

7
utils/language/en_US.js
View File

@ -27,6 +27,13 @@ export default {
checkTheTermsOfService: 'Please review and agree to the terms of service', checkTheTermsOfService: 'Please review and agree to the terms of service',
// register // register
loginSuccess:"Login successful",
resSuccess:"Registration success",
Emailempty:"E-mail can not be empty",
Emailincorrect:"Email is incorrect",
GettingVerificationCode:"Getting verification code",
CodeHasSent:"Verification code has been sent",
SendAfter:"Send after the countdown is over",
registerWelcomeText: "Getting Started", registerWelcomeText: "Getting Started",
registerCreate: "Create an account to continue!", registerCreate: "Create an account to continue!",
verificationCodeText: 'Verification Code', verificationCodeText: 'Verification Code',

Write Preview
Loading…
Cancel
Save