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.
344 lines
7.7 KiB
344 lines
7.7 KiB
<!-- 注册页面 -->
|
|
<template>
|
|
<view class="register bx">
|
|
|
|
<!-- 背景图片 -->
|
|
<view class="bg-box">
|
|
<image @click="showSelectLanguageProp" class="language" src="@/static/login/language.png" mode="aspectFit">
|
|
</image>
|
|
<image src="@/static/logo.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 加载效果 -->
|
|
<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="register-descript">{{ $t('page.register.please-register') }}</view>
|
|
|
|
</view>
|
|
|
|
<!-- 输入框列表 -->
|
|
<view class="input-list">
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.username') }}</view>
|
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.register.username-placeholder')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.password') }}</view>
|
|
|
|
<input v-model="form.password" type="password"
|
|
:placeholder="$t('page.register.password-placeholder')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.confirm-password') }}</view>
|
|
|
|
<input v-model="form.okPassword" type="password"
|
|
:placeholder="$t('page.register.confirm-password')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.PaymentPassword') }}</view>
|
|
|
|
<input v-model="form.payPass" type="password" :placeholder="$t('page.register.PaymentPassword-placeholder')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.confirm-PaymentPassword') }}</view>
|
|
|
|
<input v-model="form.okPayPass" type="password"
|
|
:placeholder="$t('page.register.PaymentPassword-placeholder')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.register.invitation-code') }}</view>
|
|
|
|
<input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code')" />
|
|
</view>
|
|
|
|
</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="forgot-password">
|
|
<text>{{ $t('page.register.forgot-password') }}</text>
|
|
</view> -->
|
|
|
|
<!-- 按钮组 -->
|
|
<view class="btns">
|
|
|
|
<view @click.stop="register" class="now-register-btn">{{ $t('page.register.register') }}</view>
|
|
|
|
<view @click.stop="toLogin" class="now-login-btn">{{ $t('page.register.login') }}</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: '',
|
|
okPassword: '',
|
|
payPass: '',
|
|
okPayPass: '',
|
|
invitationCode: ''
|
|
},
|
|
agree: [],
|
|
showSelectLanguage: false,
|
|
loading: true
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
//注册
|
|
register() {
|
|
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,
|
|
okPassword,
|
|
payPass,
|
|
okPayPass
|
|
} = 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 (okPassword.trim() == '') {
|
|
uni.showToast({title: this.$t('page.register.okPassEmpty'),icon : 'none'});
|
|
return false;
|
|
}
|
|
if (password.trim() != okPassword.trim()) {
|
|
uni.showToast({title: this.$t('page.register.passInconsistency'),icon : 'none'});
|
|
return false;
|
|
}
|
|
if (payPass.trim() == '') {
|
|
uni.showToast({title: this.$t('page.register.payPassEmpty'),icon : 'none'});
|
|
return false;
|
|
}
|
|
if (okPayPass.trim() == '') {
|
|
uni.showToast({title: this.$t('page.register.okPayPassEmpty'),icon : 'none'});
|
|
return false;
|
|
}
|
|
if (payPass.trim() != okPayPass.trim()) {
|
|
uni.showToast({title: this.$t('page.register.payPassInconsistency'),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: black;
|
|
background-image: url('@/static/login/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 20rpx;
|
|
|
|
.bg-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 25%;
|
|
|
|
.language {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
|
|
.register-title {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #B0C73B;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.register-descript {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.input-list {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 40rpx 0rpx;
|
|
|
|
.input-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid #B0C73B;
|
|
padding: 20rpx;
|
|
border-radius: 5rpx;
|
|
margin-bottom: 25rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
|
|
.input-descript {
|
|
color: #B0C73B;
|
|
}
|
|
|
|
input {
|
|
color: #B0C73B;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.now-login-btn,
|
|
.now-register-btn {
|
|
background: #B0C73B;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.now-login-btn {
|
|
height: 60rpx;
|
|
width: 90%;
|
|
font-size: 28rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.now-register-btn {
|
|
height: 90rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|