vist_go_uniApp/pages/user/register.vue

<template>
	<view class="bg-white height-vh">
		<view class="width100 flex-column-plus pad-32">
			<view class="flex-items mar-l-40 mar-t-20">
				<!-- <image class="logo" src="../../static/images/image5@3x.png" mode=""></image> -->
			</view>
			<view class=" mar-t-50 pad-32 radius-16">
				<view class="input-container">
					<input class="uni-input" v-model="user.email" placeholder="请输入邮箱" />
					<view class="clear-btn" @click="clearInput('email')" v-if="user.email">x</view>
				</view>
				<view class="input-container mar-t-16">
					<input class="uni-input" type="password" v-model="user.password" placeholder="请输入密码" />
					<view class="clear-btn" @click="clearInput('password')" v-if="user.password">x</view>
				</view>
				<view class="input-container mar-t-16">
					<input class="uni-input" type="password" v-model="user.repassword" placeholder="再次确认密码" />
					<view class="clear-btn" @click="clearInput('repassword')" v-if="user.repassword">x</view>
				</view>
				<view class="input-container mar-t-16 flex-row flex-items flex-sp-between input-code-container">
					<input class="uni-input input-code" v-model="user.code" placeholder="邮箱验证码" />
					<view class="clear-btn" @click="clearInput('code')" v-if="user.code">x</view>
					<button type="primary" size="mini" :plain="true" @click="getCode">{{ text }}</button>
				</view>

				<button class="mar-t-32 font32" style="background-color: #3C86F7;" type="primary" :loading="loading"
					@click="register">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		register
	} from '@/config/api.js';
	const seconds = 60 // 60秒倒计时
	export default {
		data() {
			return {
				user: {
					email: '',
					password: '',
					repassword: '',
					code: '',
					memberCode: '',
					payPwd: ''
				},
				loading: false,
				timer: null,
				seconds: seconds,
				status: false,
				text: ''
			}
		},
		onLoad() {

			this.text = "获取验证码"
		},
		onShow() {},
		onUnload() {
			this.timer && this.clearTimer();
		},
		methods: {
			async getCode() {
				if (this.status) return
				//校验验邮箱
				// console.log("jiaoyan", this.$utils.checkmail(this.user.email))
				// if (!this.$utils.checkmail(this.user.email)) {
				// 	return uni.$u.toast(this.$t('login').test_email)
				// }

				const res = await getCode({
					mail: this.user.email
				})
				if (res.code !== 200) return uni.$u.toast(res.msg)

				this.status = true
				this.countdown()

				this.timer = setInterval(() => {
					if (this.seconds === 0) {
						this.timer && this.clearTimer()
						this.status = false
						this.text = "获取验证码"
						this.seconds = seconds
					} else {
						this.countdown()
					}
				}, 1000)

				uni.$u.toast("验证码已发送")
			},
			countdown() {
				this.seconds--
				this.text = this.seconds + 's'
			},
			clearTimer() {
				console.log('注销定时器')
				clearInterval(this.timer)
				this.timer = null
			},
			register() {
				// 检查密码和长度
				// let reg = /^[a-zA-Z0-9]\w{5,14}$/
				// if (!reg.test(this.user.password)) return uni.$u.toast(this.$t('login').r_password)

				// // 检查确认密码
				// if (this.user.repassword !== this.user.password) return uni.$u.toast(this.$t('login').r_password_msg)

				// // 请输入验证码
				// if (!this.user.code || this.user.code.length !== 6) return uni.$u.toast(this.$t('login').code_len)

				// 请求注册
				register({
					mail: this.user.email,
					password: this.user.password,
					memberCode: this.user.memberCode,
					code: this.user.code,
					payPwd: this.user.payPwd
				}).then(res => {
					console.log(res)
					if (res.code === 400) return uni.$u.toast(res.msg)
					uni.showToast({
						title: "注册成功",
						duration: 2000,
						mask: true,
						complete: res => {
							this.$route('/pages/user/login');

						}
					});
				})
			},
			clearInput(field) {
				this.user[field] = '';
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.logo {
		width: 170rpx;
		height: 47rpx;
	}

	.uni-input {
		height: 80rpx;
		line-height: 80rpx;
		border: none; // 去掉输入框边框
		outline: none; // 去掉输入框聚焦时的外边框
		flex: 1;
		padding: 0;
	}

	.input-container {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ccc; // 添加底部浅灰色线条
		padding-bottom: 5rpx;
		margin-bottom: 16rpx;
	}

	.input-code-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.input-code {
		margin-left: 0;
		box-sizing: border-box;
	}

	button {
		white-space: nowrap;
		margin-right: 10rpx;
	}

	.clear-btn {
		cursor: pointer;
		padding: 0 10rpx;
		color: #999;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-btn:hover {
		color: #333;
	}
</style>