frontend-app/pages/register/register.vue

<template>
	<view class="register_warp">
		<view class="register_title_warp">注册</view>
		<view class="register_ifo_warp">
			<view class="register_info_item">
				<up-input
				    placeholder="请输入手机号"
				    border="surround"
				    v-model="form.mobile"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="register_info_item">
				<up-input
					placeholder="请输入验证码"
					border="surround"
					v-model="form.smsCode"
					:customStyle="inputCss"
				>
					<template #suffix style="margin-right: 10rpx;">
						<view v-if="countdown" class="code-warp">
							<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
							<text style="margin-left: 10rpx;">s</text>
						</view>
						<view v-else @click="getMobileCode" class="code_msg">
							获取验证码
						</view>
					</template>
				</up-input>
			</view>
			<view class="register_info_item">
				<up-input
					placeholder="请输入登录密码"
					border="surround"
					v-model="form.loginPassword"
					:customStyle="inputCss"
					:type="loginPasswordIsShow ?'text':'password'"
				>
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="loginPasswordIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPasswordIsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPasswordIsShow=true;"></up-image>
					</template>
				</up-input>
			</view>
			<view class="register_info_item">
				<up-input
					placeholder="再次输入登录密码"
					border="surround"
					v-model="form.loginPassword2"
					:customStyle="inputCss"
					:type="loginPassword2IsShow ?'text':'password'"
				>
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="loginPassword2IsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPassword2IsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPassword2IsShow=true;"></up-image>
					</template>
				</up-input>
			</view>
			<!-- <view class="register_info_item">
				<up-input
					placeholder="请输入交易密码"
					border="surround"
					v-model="form.transactionCode"
					:customStyle="inputCss"
					:type="transactionCodeIsShow ?'text':'password'"
				>
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="transactionCodeIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=true;"></up-image>
					</template>
				</up-input>
			</view> -->
			<view class="register_info_item">
				<up-input
				    placeholder="推荐码"
				    border="surround"
				    v-model="form.referralCode"
					:customStyle="inputCss"
				  ></up-input>
			</view>
		</view>
	
		<view class="login_comm_but login_comm_but_yes" @click="registerFun" :loading="butLoading">
			注册
		</view>
		<view class="policy_warp">
			<up-checkbox
				name="isCheck"
				usedAlone
				v-model:checked="isPolicy"
				shape="circle"
				activeColor="#FF7C41"
				size="19"
				iconSize="18"
			>
				<template #label>
					<text>已阅读并同意</text>
					<text class="policy_a_warp">《哈希优品服务协议》</text>
					<text>及</text>
					<text class="policy_a_warp">《隐私政策》</text>
				</template>
			</up-checkbox>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import { SMS_TYPE } from '@/utils/enumUtils.js';
	import { getUserList } from '@/api/common.js';
	import { register } from '@/api/auth.js';
	import { setStorageFun,TOKEN_NAME,USER_KEY,USER_DATA,USER_LOGIN_TIME } from '@/utils/auth.js';
	
	export default {
		data() {
			return {
				form:{
					mobile:null,
					smsCode:null,// 验证码
					loginPassword:null,
					loginPassword2:null,
					transactionCode:null,// 交易密码
					referralCode:null,// 推荐码
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "30rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				countdown:false,// 清空倒计时
				loginPasswordIsShow:false,
				loginPassword2IsShow:false,
				transactionCodeIsShow:false,// 交易密码
				isPolicy:false,
				butLoading:false,
			}
		},
		methods: {
			async registerFun(){
				const form = this.form;
				if(!form.mobile){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入手机号",
					});
					return;
				}
				if(!form.smsCode){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入验证码",
					});
					return;
				}
				if(!form.loginPassword){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入登录密码",
					});
					return;
				}
				if(!form.loginPassword2){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入二次确认密码",
					});
					return;
				}
				if(form.loginPassword !== form.loginPassword2){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "两次输入的登录密码不一致",
					});
					return;
				}
				if(!form.referralCode){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入推荐码",
					});
					return;
				}
				if(!this.isPolicy){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请阅读完相关协议以及政策，并且勾选同意选项",
					});
					return;
				}
				this.butLoading = true;
				const params = {
					mobile:form.mobile,
					smsCode:form.smsCode,
					password:form.loginPassword,
					inviteCode:form.referralCode,
				}
				const resp = await register(params);
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					setStorageFun(TOKEN_NAME,data.token);
					// 用于无感登录
					setStorageFun(USER_KEY,'');
					const userInfo = {
						avatar:data.avatarUrl,
						name: data.name,
						userId: data.userId,
						grade:data.grade,
						inviteCode:data.inviteCode,
					};
					setStorageFun(USER_DATA,userInfo);
					// 当前登录得时间戳
					let currentTimeStamp = new Date().getTime();
					setStorageFun(USER_LOGIN_TIME,currentTimeStamp);
					this.$refs.uToastRef.show({
						type: 'success',
						message: resp.msg,
					});
					setTimeout(()=>{
						uni.switchTab({
						    url: '/pages/home/home',
						})
					},2000);
				}
				this.butLoading = false;
				
			},
			/**
			 * 获取手机验证码
			 */
			async getMobileCode(){
				const form = this.form;
				if(!form.mobile){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入手机号码",
					});
					return;
				}
				this.countdown = true;
				
				const params={
					mobile:form.mobile,
					type:SMS_TYPE.REGISTER,
				}
				const response = await getUserList(params);
				if(response && response.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
				}else{
					this.countdown = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.register_warp{
		height: calc(100vh - 280rpx);
		padding: 40rpx;
	}
	.register_title_warp{
		font-weight: bold;
		font-size: 62rpx;
		color: #333333;
	}
	.register_ifo_warp{
		margin-top: 30rpx;
		.register_info_item{
			margin-bottom: 40rpx;
		}
	}
</style>