liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 Commits
1 Branch
0 Tags
16 MiB
 
 
 
Tree: 3710c66191
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3710c66191'
${ noResults }
samehome/pages/login/register.vue

501 lines
12 KiB
Raw Blame History

<template>
<view class="main">
<navigation>{{ i18n.SignUp }}</navigation>
<!-- #ifdef APP-PLUS -->
<view class="body-app">
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="body">
<!-- #endif -->
<view class="welcomeText">{{ i18n.registerWelcomeText }}</view>
<view class="signInText">{{ i18n.registerCreate }}</view>
<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
<!-- 邮箱 -->
<u-form-item class="input-item" prop="email" ref="item1">
<u-icon class="icon"
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.emailInputText">
</u-input>
</u-form-item>
<!-- 验证码 -->
<u-form-item class="input-item vCode" prop="code" ref="item1">
<u-icon class="icon"
:name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.registerWelcomeText" maxlength="6">
</u-input>
<u-code :startText="i18n.Getcode" :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 class="input-item" prop="password" ref="item1">
<u-icon class="icon"
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.passwordText">
</u-input>
</u-form-item>
<!-- 重复密码 -->
<u-form-item class="input-item" prop="confirmPassword" ref="item1">
<u-icon class="icon"
:name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff"
fontSize="32rpx" border="none" :placeholder="i18n.confirmPasswordText">
</u-input>
</u-form-item>
<!-- 取款密码 -->
<u-form-item class="input-item" prop="payPassword" ref="item1">
<u-icon class="icon"
:name="userInfo.payPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.payPassword" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.withdrawalPasswordText">
</u-input>
</u-form-item>
<!-- 邀请码 -->
<u-form-item class="input-item" prop="InvitationCode" ref="item1">
<u-icon class="icon"
:name="userInfo.inviteCode ? '../../static/login/Invitation_pr.png' : '../../static/login/Invitation_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.inviteCode" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.InvitationCodeText">
</u-input>
</u-form-item>
</u--form>
<view class="agree">
<u-icon class="check" @click="agreeFlag = !agreeFlag"
:name="agreeFlag ? '../../static/login/Checkbox_pr.png' : '../../static/login/Checkbox_de.png'"
size="48rpx" width="48rpx"></u-icon>
<view class="text">{{ i18n.agreeText }}<span @click="go('/pages/login/useragreement')">{{ i18n.Terms }}</span>{{ i18n.and }}<span @click="go('/pages/login/condition')">{{
i18n.Conditions
}}</span></view>
</view>
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag" @click="register"
:throttleTime="500">
{{ i18n.SignUp }}
</u-button>
<view class="signUp">{{ i18n.haveAccount }}
<navigator class="navigator" url="./index">{{ i18n.Login }}
</navigator>
</view>
</view>
</view>
</template>
<script>
import UButton from '../../uview-ui/components/u-button/u-button.vue'
import api from '@/utils/api'
import md5 from 'js-md5'
export default {
name: "register",
data() {
return {
// 验证码倒计时
tips: '',
seconds: 60,
// 邮箱号码是否正确
isCanGetCode: false,
// 密码格式对不对
isCanPassword: false,
// 支付密码格式
isCanPayPassword:false,
userInfo: {
password: "",
email: '',
payPassword: '',
inviteCode: '',
code: '',
lang: '',
},
rules: {
payPassword: {
type: "string",
required: true,
message: this.$t("login").withdrawalPasswordMessage,
trigger: ["blur", "change"],
},
email: {
type: "string",
required: true,
message: this.$t("login").emailInputMessage,
trigger: ["blur", "change"],
},
code: {
type: "string",
required: true,
message: this.$t("login").verificationCodeMessage,
trigger: ["blur", "change"]
},
password: {
type: "string",
required: true,
message: this.$t("login").passwordInputMessage,
trigger: ["blur", "change"]
},
inviteCode: {
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,
};
},
computed: {
i18n() {
return this.$t("login");
},
},
onLoad(res) {
if(res){
this.userInfo.inviteCode=res.inviteCode
}
},
watch: {
'userInfo.email': {
handler(newValue) {
this.isCanGetCode = uni.$u.test.email(newValue);
}
},
'userInfo.password': {
handler(newValue) {
const numberReg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[A-Za-z0-9 _]{6,20}$/
this.isCanPassword = numberReg.test(newValue)
}
},
'userInfo.payPassword': {
handler(newValue) {
const numberReg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[A-Za-z0-9 _]{6,20}$/
this.isCanPayPassword = numberReg.test(newValue)
}
},
},
onShow() {},
methods: {
go(url) {
uni.navigateTo({
url: url
})
},
// 验证码相关
codeChange(text) {
this.tips = text;
if (text.length == 7) {
text = text.slice(0, 2); //截取第二个到第四个之间的字符 cd
this.tips = text + "s";
}
if (text.length == 6) {
text = text.substring(0, 1)
this.tips = text + "s";
}
if (text.length == 4) {
this.tips = this.$t("login").Getcode
}
},
// 验证码获取
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
})
api.sendEmailCode(data).then(res => {
uni.hideLoading(this.$t("login").CodeHasSent);
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast(this.$t("login").CodeHasSent);
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
})
} else {
uni.$u.toast(this.$t("login").SendAfter);
}
},
// 注册
register() {
if (!this.isCanPassword) {
uni.$u.toast(this.$t("login").passwordRule)
return
}
if (!this.isCanPayPassword) {
uni.$u.toast(this.$t("login").passwordRule)
return
}
// 验证重复输入的密码
if(this.userInfo.password!==this.userInfo.confirmPassword){
uni.$u.toast(this.$t("login").passwordConfirm)
return
}
this.$refs.uForm.validate().then(res => {
let userInfo={
email:this.userInfo.email,
password:md5(this.userInfo.password),
payPassword:md5(this.userInfo.payPassword),
inviteCode:this.userInfo.inviteCode,
code:this.userInfo.code,
}
api.register(userInfo).then(res => {
setTimeout(() => {
uni.showToast({
title: this.$t("login").resSuccess
})
}, 600)
uni.reLaunch({
url: '/pages/login/index'
})
})
}).catch(errors => {
// console.log('err')
})
},
},
components: {
UButton
}
}
</script>
<style lang="scss" scoped>
.main {
.body {
margin-top: 204rpx;
padding: 0 64rpx;
overflow: hidden;
.welcomeText {
margin-top: 48rpx;
font-size: 48rpx;
font-weight: 800;
text-align: center;
}
.signInText {
font-size: 32rpx;
text-align: center;
color: #A2A0A8;
}
.form {
font-size: 32rpx;
margin-top: 48rpx;
.input-item {
height: 112rpx;
line-height: 112rpx;
background: #211F32;
margin-bottom: 48rpx;
border-radius: 32rpx;
.icon {
margin: 0 24rpx;
}
/deep/.u-form-item__body {
padding: 0;
}
.input {
height: 112rpx;
}
}
.vCode {
.getVCodeBtn {
// position: absolute;
width: 208rpx;
height: 56rpx;
right: 28rpx;
// top: 14px;
border-radius: 8px;
line-height: 56rpx;
font-size: 24rpx;
color: #00E8A2 !important;
padding: 0;
}
}
}
.agree {
font-size: 28rpx;
.check {
display: inline-block;
vertical-align: top;
margin-right: 32rpx;
}
.text {
display: inline-block;
width: 542rpx;
}
span {
cursor: pointer;
color: #00E8A2;
padding: 0 10rpx;
}
}
.button {
margin-top: 64rpx;
height: 112rpx;
line-height: 112rpx;
border-radius: 32rpx;
font-size: 32rpx;
color: #15141F !important;
}
.signUp {
margin: 48rpx 0;
text-align: center;
font-size: 32rpx;
.navigator {
display: inline;
color: #00E8A2;
padding: 0 10rpx;
}
}
}
.body-app{
margin-top: 204rpx !important;
padding: 0 64rpx;
overflow: hidden;
.welcomeText {
margin-top: 48rpx;
font-size: 48rpx;
font-weight: 800;
text-align: center;
}
.signInText {
font-size: 32rpx;
text-align: center;
color: #A2A0A8;
}
.form {
font-size: 32rpx;
margin-top: 48rpx;
.input-item {
height: 112rpx;
line-height: 112rpx;
background: #211F32;
margin-bottom: 48rpx;
border-radius: 32rpx;
.icon {
margin: 0 24rpx;
}
/deep/.u-form-item__body {
padding: 0;
}
.input {
height: 112rpx;
}
}
.vCode {
.getVCodeBtn {
// position: absolute;
width: 154rpx;
height: 56rpx;
right: 28rpx;
// top: 14px;
border-radius: 8px;
line-height: 56rpx;
font-size: 24rpx;
color: #00E8A2 !important;
padding: 0;
}
}
}
.agree {
font-size: 28rpx;
.check {
display: inline-block;
vertical-align: top;
margin-right: 32rpx;
}
.text {
display: inline-block;
width: 542rpx;
}
span {
cursor: pointer;
color: #00E8A2;
padding: 0 10rpx;
}
}
.button {
margin-top: 64rpx;
height: 112rpx;
line-height: 112rpx;
border-radius: 32rpx;
font-size: 32rpx;
color: #15141F !important;
}
.signUp {
margin: 48rpx 0;
text-align: center;
font-size: 32rpx;
.navigator {
display: inline;
color: #00E8A2;
padding: 0 10rpx;
}
}
}
}
</style>