pages/sub_basic/register.vue

<template>
	<view class="register" @touchmove.stop.prevent="moveHandle">
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="注册" :border-bottom="false" :is-back="false"></u-navbar>
		<!-- #endif -->
		<view class="register-con">
			<view class="register-con-logo">
				<!-- #ifdef MP-WEIXIN -->
				<u-image src="/pages/sub_basic/images/login/logo.png" width="300rpx" mode="widthFix"></u-image>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-image src="./images/login/logo.png" width="300rpx" mode="widthFix"></u-image>
				<!-- #endif -->
			</view>
			<view class="register-con-form">
				<u-field v-model="tel" placeholder="请输入手机号" label-width="50" maxlength="11" type="number"clear-size="40">
					<u-icon slot="icon" name="shouji" custom-prefix="custom-icon" color="#999999"></u-icon>
				</u-field>
				<u-field v-model="code" placeholder="请输入验证码" label-width="50" maxlength="6" type="number"clear-size="40">
					<u-icon slot="icon" name="code" custom-prefix="custom-icon" color="#999999"></u-icon>
					<u-button slot="right" @click="getCode" size="mini" :disabled="isChecked" :custom-style="btn">{{codeText}}</u-button>
				</u-field>
				<u-field v-model="pwd" icon="lock-fill" placeholder="请设置6-12位密码" label-width="50" icon-color="#999999" maxlength="12"
				 :password="true" type="number"clear-size="40"></u-field>
			</view>
			<view class="register-con-agreement">
				<u-checkbox v-model="checked" shape="circle" label-size="26" icon-size="16"><text style="margin-left: 20rpx;">我已同意<text class="register-con-agreement-text" @click="toUrl('/pages/sub_mine/agreement')">《用户协议》</text></text></u-checkbox>
			</view>
			<u <u-button @click="register" :custom-style="registerConBtn">立即注册</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeText: "获取验证码",
				pwd: "",
				tel: "",
				code: "",
				isChecked: false,
				timer: "",
				checked: false,
				registerConBtn:{
					width: '600rpx',
					backgroundColor: '#2FA8E1',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				},
				btn:{
					color: '#2FA8E1',
					backgroundColor: '#FFFFFF',
					borderColor:'#2FA8E1',
					borderWidth: '1rpx',
					borderStyle: 'solid',
					fontFamily: "PingFang-SC-Regular"
				}
			}
		},
		methods: {
			moveHandle(){
				return
			},
			getCode() {
				let that = this
				let tel = that.tel
				if (tel == "") {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none",
						duration: 800
					})
					return false
				}
				uni.removeStorageSync('token')
				that.$u.post('/i/code', {
					phone: tel
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 800
					})
					let i = 60
					that.isChecked = true
					that.timer = setInterval(() => {
						if (i != 0) {
							i--
							that.codeText = i + "s"
						} else {
							clearInterval(that.timer)
							that.codeText = "重新获取"
							that.isChecked = false
						}
					}, 1000)
				})
			},
			async register() {
				let that = this
				let {
					tel,
					pwd,
					code,
					checked
				} = that
				if (tel == "") {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (code == "") {
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (pwd == "") {
					uni.showToast({
						title: "请设置您的密码",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (!checked) {
					uni.showToast({
						title: "请先阅读并同意用户协议",
						icon: "none",
						duration: 800
					})
					return false
				}
				let param = {
					phone: tel,
					code: code,
				}
				let ret = await that.$u.post("/i/checkcode", param)
				if (ret.code === 200) {
					let {
						randcode,
						uid
					} = ret
					let params = {
						"pwd": pwd,
						"repwd": pwd,
						"id": uid,
						"random": randcode
						// "id":"2c9b808573b4eff001740fccd23c63fc",
						// "random":"r5m7anoef7ku5gdsz6o4gi2rkk5enf"
					}
					that.$u.post("/i/register", params).then((res) => {
						uni.setStorageSync("token", res.token)
						uni.setStorageSync("userid", res.userid)
						uni.setStorageSync("tenantid", res.tenantid)
						uni.setStorageSync("tokenexpire", res.expire)
						uni.setStorageSync("tokentime", res.now)
						uni.setStorageSync("signed", res.signed)
						uni.setStorageSync("paypwdset", res.paypwdset)
						uni.showToast({
							title: "注册成功",
							icon: "none",
							duration: 800,
							complete(res) {
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/sub_basic/login"
									})
								}, 1500)
							}
						})
					})
				}
			}



		},
		onUnload() {
			let that = this
			clearInterval(that.timer)
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		border-radius: 50rpx;
		width: 150rpx;
		color: #2FA8E1;
		border: 2rpx #2FA8E1 solid;
		font-size: 25rpx;
	}

	.register {
		width: 100vw;
		font-family: "PingFang-SC-Medium";
		background-color: #FFFFFF;
		height: 100vh;

		&-con {
			padding: 30rpx;

			&-agreement {
				font-family: "PingFang-SC-Medium";
				margin-left: 50rpx;
				margin-top: 15rpx;
				color: #999999;
				&-text {
					color: #2FA8E1;
				}
			}

			&-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-family: "PingFang-SC-Medium";
					font-size: 32rpx;
					color: #333333;
				}
			}

			&-logo {
				display: flex;
				justify-content: center;
				padding: 30rpx 0;
				align-items: center;
				text-align: center;
			}

			&-form {
				width: 650rpx;
				margin: auto;
			}

			&-btn {
				background-color: #2FA8E1;
				padding: 50rpx 0;
				color: #FFFFFF;
				width: 600rpx;
				font-size: 30rpx;
				margin-top: 100rpx;
			}
		}

	}
</style>