hnxdcount-uniapp/pages/login/register.vue

<template>
	<view class="login">
		<view class="orderdetail_header p30">
			<view :style="{ height: statusBarHeight }"></view>
			<view style="height: 44px; display: flex; align-items: center">
				<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
			</view>
		</view>

		<image class="login_bei" src="/static/logoB.png"></image>

		<view style="padding: 0 60rpx">
			<statusBar />
			<view class="login_logo">
				<image class="login_logo_img" src="/static/logo.png"></image>
				<view class="login_logo_tit">欢迎来到星动能源</view>
			</view>
			<view style="margin-top: 100rpx">
				<view>
					<up-input fontSize="30rpx" v-model="dataFrom.userName" placeholder="请输入您的用户名" border="bottom" clearable></up-input>
				</view>
				<view style="font-size: 26rpx; color: #ff9900; margin: 10rpx 0 10rpx; padding-left: 9px">用户名由字母或数字组成，长度6-32</view>
				<view style="margin-bottom: 30rpx">
					<up-input fontSize="30rpx" v-model="dataFrom.phone" placeholder="请输入您的手机号" border="bottom" clearable></up-input>
				</view>
				<view style="margin-bottom: 30rpx; display: flex; align-items: center">
					<up-input fontSize="30rpx" v-model="dataFrom.smsCode" placeholder="请输入验证码" border="bottom" clearable></up-input>
					<up-code ref="uCode" @change="codeChange2" keep-running start-text="点我获取验证码"></up-code>
					<text @click="getCode2" :text="tips" style="font-size: 28rpx; color: #4874e5">{{ tips }}</text>
				</view>
				<view style="margin-bottom: 30rpx">
					<up-input fontSize="30rpx" v-model="dataFrom.shareCode" placeholder="请输入您的邀请码" border="bottom" clearable></up-input>
				</view>
				<view>
					<up-input fontSize="30rpx" v-model="dataFrom.passwd" type="password" placeholder="请输入您的密码" border="bottom" clearable></up-input>
				</view>
				<view style="font-size: 26rpx; color: #ff9900; margin: 10rpx 0 10rpx; padding-left: 9px">密码必须包含字母、数字长度8-32</view>
				<view style="margin-bottom: 30rpx">
					<up-input fontSize="30rpx" v-model="dataFrom.confirmPasswd" type="password" placeholder="请再次输入您的密码" border="bottom" clearable></up-input>
				</view>
			</view>
			<view style="font-size: 28rpx; color: #666; margin-top: 20rpx">
				已有账号？
				<text style="color: #4874e5" @click="toLogin">立即登录</text>
			</view>
			<view style="display: flex; justify-content: center; margin-top: 80rpx">
				<view class="login_btn" @click="submit">注册</view>
			</view>
		</view>

		<view style="display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20rpx; font-size: 26rpx; align-items: center">
			<up-checkbox @change="changeChex" :customStyle="{ marginRight: '15rpx', marginBotton: 0 }"></up-checkbox>
			已阅读并同意
			<navigator url="/pages/agreement/agreement?id=9" style="color: #4874e5">《用户注册服务协议》</navigator>
			和
			<navigator url="/pages/agreement/agreement?id=10" style="color: #4874e5">《隐私政策》</navigator>
		</view>
		<view style="height: 150rpx"></view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { registerApi, smsCode } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let tips = ref('');
let uCode = ref(null);
let passwd = ref('');
let dataFrom = reactive({
	userName: '',
	passwd: '',
	shareCode: '',
	phone: '',
	platform: 1,
	smsCode: '',
	confirmPasswd: ''
});

let xieyi = ref(false);

onLoad(() => {
	const invite_code = uni.getStorageSync('invite_code');
	if (invite_code) {
		dataFrom.shareCode = invite_code;
	}
});

let changeChex = (e) => {
	xieyi.value = e;
};

let toLogin = () => {
	uni.navigateBack();
};

let codeChange2 = (text) => {
	tips.value = text;
};

let getCode2 = () => {
	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
	if (uCode.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		});
		smsCode({
			phone: dataFrom.phone
		}).then((res) => {
			uni.hideLoading();
			uni.$u.toast('验证码已发送');
			uCode.value.start();
		});
	} else {
		uni.$u.toast('倒计时结束后再发送');
	}
};

let submit = async () => {
	if (!xieyi.value) return uni.showToast({ title: '请先阅读并勾选隐私政策和用户注册服务协议', icon: 'none' });
	if (!dataFrom.userName) return uni.showToast({ title: '请输入用户名', icon: 'none' });
	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
	if (dataFrom.phone.length != 11) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
	if (!dataFrom.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
	if (!dataFrom.shareCode) return uni.showToast({ title: '请输入邀请码', icon: 'none' });
	if (!dataFrom.passwd) return uni.showToast({ title: '请输入密码', icon: 'none' });
	if (!dataFrom.confirmPasswd) return uni.showToast({ title: '请再次输入密码', icon: 'none' });
	if (dataFrom.passwd != dataFrom.confirmPasswd) return uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
	let _res = await registerApi(dataFrom);
	uni.showToast({ title: '注册成功', icon: 'none' });
	setTimeout(() => {
		uni.navigateBack();
	}, 200);
};

let back = () => {
	uni.navigateBack();
};
</script>

<style scoped lang="scss">
.login {
	&_bei {
		position: fixed;
		right: 0;
		top: 0;
		width: 608rpx;
		height: 424rpx;
	}

	&_logo {
		margin-top: 150rpx;
		&_img {
			width: 152rpx;
			height: 106rpx;
			// background: #e6e6e6;
			// box-shadow: 0rpx 0rpx 110rpx 2rpx rgba(115, 192, 76, 0.19);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			margin-bottom: 20rpx;
		}
		&_tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #232323;
		}
	}
	&_btn {
		width: 474rpx;
		height: 78rpx;
		background: #4874e5;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #ffffff;
	}
}

.orderdetail_header {
	width: 750rpx;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}
</style>