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.
304 lines
6.4 KiB
304 lines
6.4 KiB
<!-- 注册页面 -->
|
|
<template>
|
|
<view class="register bx">
|
|
<div class="language">
|
|
<image @click="showSelectLanguageProp" src="@/static/login/language.png" mode="aspectFit"></image>
|
|
</div>
|
|
|
|
<!-- 加载效果 -->
|
|
<!-- <loading :loading="loading" @close="closeLoading"></loading> -->
|
|
|
|
<view v-if="!loading" class="main">
|
|
<!-- 登录标题 -->
|
|
<view class="register-title">
|
|
<view class="title">{{ $t('page.register.title') }}</view>
|
|
<!-- <view class="shop-desc">Online rebate mall.</view> -->
|
|
</view>
|
|
|
|
<!-- 输入框列表 -->
|
|
<view class="input-list">
|
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.register.phone-placeholder')" />
|
|
<input v-model="form.password" type="password"
|
|
:placeholder="$t('page.register.password-placeholder')" />
|
|
<input v-model="form.payPass" type="password"
|
|
:placeholder="$t('page.register.payPass-placeholder')" />
|
|
<input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code-placeholder')" />
|
|
|
|
</view>
|
|
|
|
<!-- 勾选协议 -->
|
|
<!-- <view class="check-box">
|
|
<u-checkbox-group v-model="agree" @change="$play">
|
|
<u-checkbox activeColor="#B0C73B" shape="circle" :label="$t('page.register.agreen')"
|
|
name="agree"></u-checkbox>
|
|
</u-checkbox-group>
|
|
<view @click.stop="toAgreement" class="agreement-content">{{ $t('page.register.agreement') }}</view>
|
|
</view> -->
|
|
|
|
<!-- 按钮组 -->
|
|
<view class="btns">
|
|
|
|
<view @click.stop="register" class="now-register-btn">{{ $t('page.register.title') }}</view>
|
|
|
|
<view @click.stop="toLogin" class="now-register-btn">{{ $t('page.register.login-now') }}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 切换语言 -->
|
|
<changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
|
|
|
|
<!-- 初始页面 -->
|
|
<!-- <pageInit></pageInit> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
|
|
import pageInit from '@/components/pageInit/pageInit.vue'
|
|
import loading from '@/components/pageInit/loading.vue'
|
|
|
|
export default {
|
|
components: {
|
|
changeLanguage,
|
|
pageInit,
|
|
loading
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
account: '',
|
|
password: '',
|
|
payPass: '',
|
|
invitationCode: ''
|
|
},
|
|
agree: [],
|
|
showSelectLanguage: false,
|
|
loading: false
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
//注册
|
|
register() {
|
|
|
|
//效验账号，必须包含字母
|
|
if (!/[A-Za-z]+$/.test(this.form.account)) {
|
|
uni.showToast({
|
|
title: this.$t('page.register.accountError'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
this.$play()
|
|
if (this.verify()) {
|
|
this.request('register', {}, this.form).then(res => {
|
|
if (res.code == 200) {
|
|
this.toLogin(false)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
//跳转登录页面
|
|
toLogin(sound) { //是否发出声音
|
|
if (sound) {
|
|
this.$play()
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
},
|
|
|
|
//校验必填项
|
|
verify() {
|
|
let {
|
|
account,
|
|
password,
|
|
payPass,
|
|
invitationCode
|
|
} = this.form
|
|
if (account.trim() == '') {
|
|
uni.showToast({
|
|
title: this.$t('page.register.accountEmpty'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (password.trim() == '') {
|
|
uni.showToast({
|
|
title: this.$t('page.register.passEmpty'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (payPass.trim() == '') {
|
|
uni.showToast({
|
|
title: this.$t('page.register.payPassEmpty'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if(invitationCode.trim() == ''){
|
|
uni.showToast({
|
|
title: this.$t('page.register.invitationCodeEmpty'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
// if (this.agree.length <= 0 && this.agree[0] != 'agree') {
|
|
// uni.showToast({
|
|
// title: this.$t('page.register.tickProtocol'),
|
|
// icon: 'none'
|
|
// });
|
|
// return false;
|
|
// }
|
|
return true
|
|
},
|
|
|
|
//显示选择语言弹框
|
|
showSelectLanguageProp() {
|
|
this.$play()
|
|
this.showSelectLanguage = true
|
|
},
|
|
|
|
//关闭语言选择弹框
|
|
closeSelectLanguageProp() {
|
|
this.showSelectLanguage = false
|
|
},
|
|
|
|
//关闭加载效果
|
|
closeLoading() {
|
|
this.loading = false;
|
|
},
|
|
|
|
//跳转用户协议
|
|
toAgreement() {
|
|
this.$play()
|
|
uni.navigateTo({
|
|
url: '/pages/instructions/instructions?index=4'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.register {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
margin: 0px auto;
|
|
background: linear-gradient(to bottom, #fcedff 0%, #ffffff 100%);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 20rpx;
|
|
|
|
.language {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.register-title {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 60rpx;
|
|
color: $uni-bg-color-app;
|
|
margin-bottom: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shop-desc {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.input-list {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 40rpx 0rpx;
|
|
|
|
input {
|
|
display: block;
|
|
width: 90%;
|
|
margin: 0rpx auto;
|
|
color: $uni-bg-color-app;
|
|
border: 1px solid #eeeeee;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
text-indent: 1em;
|
|
padding: 0rpx 15rpx;
|
|
|
|
&:focus {
|
|
border-color: #6d00be !important;
|
|
background: pink !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.forgot-password {
|
|
color: #B0C73B;
|
|
text-align: center;
|
|
|
|
text {
|
|
border-bottom: 1rpx solid #ccc;
|
|
}
|
|
}
|
|
|
|
.check-box {
|
|
display: flex;
|
|
color: rgb(96, 98, 102);
|
|
|
|
.agreement-content {
|
|
text-decoration: underline;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
padding: 0rpx 10rpx;
|
|
margin-top: 40rpx;
|
|
color: $uni-bg-color;
|
|
|
|
.now-register-btn {
|
|
background: $uni-bg-color-app;
|
|
border-radius: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
height: 90rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.now-login-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: $uni-bg-color-app;
|
|
}
|
|
}
|
|
}
|
|
</style>
|