uav-uniapp-240725/pages/register/register.vue

<!-- 注册页面 -->
<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>