tuanfeng-shop-user/pages_category_page2/userModule/register.vue

<!-- 注册 -->
<template>
	<view class="container flex-column">
		<global-loading />
		<view class="register" @click="$jump('/pages_category_page2/userModule/login', '', 0, 'reLaunch')">
			登录
		</view>
		<view class="PhoneAuthentication">
			<text class="textRL">手机号快捷注册</text>
			<text class="textTips">注册完后将会自动发登录</text>
		</view>
		<view class="LoginForm">
			<view class="iphoneNum-box">
				<text class="labels">手机号</text>
				<input v-model="registerQuery.phone" type="text" placeholder="请输入手机号">
			</view>
			<view class="iphoneNum-box">
				<text class="labels">验证码</text>
				<input v-model="registerQuery.verificationCode" type="text" placeholder="请输入验证码">
				<view v-if="!disabled" class="getcode" @click="getVerify">
					{{ text }}
				</view>
				<view v-else class="awaitCode">
					{{ text }}
				</view>
			</view>
			<view class="iphoneNum-box">
				<text class="labels">设置密码</text>
				<input v-model="registerQuery.password" type="text" password placeholder="请设置密码">
			</view>
			<view class="iphoneNum-box">
				<text class="labels">再次输入密码</text>
				<input v-model="registerQuery.passwordAgain" type="text" password placeholder="请设置密码">
			</view>
			<view class="ReadingAgreement">
				<radio style="transform:scale(0.8)" color="#CE2601" :checked="agreement" @click="agreement = !agreement" />
				<view class="Agreement">
					我已阅读并同意<text class="redText" @click="$jump('protocol?type=app_user_agreement')">
						《巨蜂商城用户服务协议》
					</text>以及<text class="redText" @click="$jump('protocol?type=app_privacy_agreement')">
						《隐私政策》
					</text>
				</view>
			</view>
		</view>
		<tui-button
			:disabled="!agreement" type="danger" width="650rpx" margin="0 auto"
			height="82rpx"
			style="margin-top: 60rpx;" @click="getRegister"
		>
			立即注册
		</tui-button>
		<view class="problem">
			<text @click="$jump('/pages_category_page2/userModule/login', '', 0, 'reLaunch')">
				已有账号<text
					class="redText"
				>
					去登录
				</text>
			</text>
			<text>无法接收验证码？</text>
		</view>

	</view>
</template>

<script>
import sendVerifyCode from '@/mixins/SendVerifyCode'
import { J_STORAGE_KEY } from '../../config/constant'
const NET = require('../../utils/request')
const API = require('../../config/api')
import { getVerifyCodeApi } from '../../api/user'
export default {
	name: 'Register',
	mixins: [ sendVerifyCode ],
	data() {
		return {
			// 注册
			registerQuery: {
				phone: '',
				verificationCode: '',
				password: '',
				passwordAgain: ''
			},
			agreement: false
		}
	},
	methods: {
		// 注册账号
		getRegister() {
			const phoneCodeVerification = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
			if (this.registerQuery.phone == '') {
				this.$showToast('请输入手机号！')
			} else if (!phoneCodeVerification.test(this.registerQuery.phone)) {
				this.$showToast('请输入正确的手机号！')
			} else if (this.registerQuery.verificationCode == '') {
				this.$showToast('请获取验证码！')
			} else if (!this.registerQuery.password) {
				this.$showToast('请设置密码！')
			} else if (this.registerQuery.password !== this.registerQuery.passwordAgain) {
				this.$showToast('请设置密码！')
			} else if (!this.agreement) {
				this.$showToast('请先阅读并同意《用户服务协议和个人隐私协议》')
			} else {
				// uni.showLoading({
				// 	mask: true,
				// 	title: '正在注册...',
				// 	duration: 2000,
				// })
				NET.request(API.Login, {
					type: 1, // type为1是注册
					phone: this.registerQuery.phone,
					verificationCode: this.registerQuery.verificationCode,
					password: this.registerQuery.password
				}, 'POST').then((res) => {
					uni.hideLoading()
					this.$showToast('注册成功！')
					const item = res.data
					uni.setStorageSync(J_STORAGE_KEY, item)
					setTimeout(() => {
						this.$switchTab('/pages/tabbar/user/index')
					}, 600)
				})
					.catch((res) => {
						this.$showToast(res.data.message)
					})
			}
		},
		// 获取验证码
		getVerify() {
			const phoneCodeVerification = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
			if (this.registerQuery.phone == '') {
				this.$showToast('请输入手机号！')
			} else if (!phoneCodeVerification.test(this.registerQuery.phone)) {
				this.$showToast('请输入正确的手机号！')
			} else {
				getVerifyCodeApi({
					phone: this.registerQuery.phone
				}).then((res) => {
					this.sendCode()
				})
					.catch((res) => {
						this.$showToast(res.data.message)
					})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #FFFFFF;

	.redText {
		color: #CE2601;
	}

	.register {
		margin-top: 50rpx;
		position: relative;
		text-align: right;
		padding-right: 40rpx;
	}

	.PhoneAuthentication {
		margin-top: 15rpx;
		font-family: Source Han Sans CN;
		width: 466rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		padding: 0px 30rpx;
		gap: 8rpx;

		.textRL {
			font-size: 44rpx;
			font-weight: 600;
			line-height: 60rpx;
			color: #222229;
		}

		.textTips {
			font-size: 24rpx;
			font-weight: 350;
			line-height: 32rpx;
			color: #888889;
		}
	}

	.LoginForm {
		margin-top: 50rpx;
		width: 750rpx;

		.iphoneNum-box {
			/* 自动布局 */
			margin: 0 auto;
			height: 114rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 32rpx;
			border-bottom: 2rpx solid #E6E6E8;
			width: 690rpx;
			color: #222229;

			.labels {
				font-size: 32rpx;
				font-weight: normal;
				line-height: 48rpx;
			}
		}

		.ReadingAgreement {
			width: 710rpx;
			margin: 0 auto;
			margin-top: 33rpx;
			gap: 32rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.Agreement {
				margin-left: -15rpx;
			}
		}
	}

	.problem {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 654rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 350;
		line-height: 32rpx;
		color: #878788;
	}

	.getcode {
		position: absolute;
		right: 30rpx;
		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		text-align: right;
		color: #CE2601;
	}

	.awaitCode {
		position: absolute;
		right: 30rpx;
		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		text-align: right;
		color: #888889;
	}
}
</style>