uav-uniapp-demo-24-8-18/pages/register/register.vue

<!-- 注册页面 -->
<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">TikTok shop</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.username-placeholder')" />
				<input v-model="form.password" type="password"
					:placeholder="$t('page.register.password-placeholder')" />
				<input v-model="form.okPassword" type="password" :placeholder="$t('page.register.confirm-password')" />
				<input v-model="form.payPass" type="password"
					:placeholder="$t('page.register.PaymentPassword-placeholder')" />
				<input v-model="form.okPayPass" type="password"
					:placeholder="$t('page.register.PaymentPassword-placeholder')" />
				<input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code')" />

			</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.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: false
			}
		},
		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: 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: 30rpx;
				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>