mobile_h5/actMgt/pages/login/register.vue

<template>
	<view class="body body-bg">
		<view class="main uni-column">
			<view class="topLogo"></view>
			<text class="title">主理人注册</text>
			<view class="box uni-column">
				<uni-forms ref="form" class="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="" name="username">
						<input class="input" placeholder-class="input-placeholder" type="text" maxlength="15"
							placeholder="请输入用户名" v-model="formData.username" />
					</uni-forms-item>
					<uni-forms-item label="" name="password">
						<input class="input" placeholder-class="input-placeholder" password type="text" maxlength="15"
							placeholder="请输入密码" v-model="formData.password" />
					</uni-forms-item>
					<uni-forms-item label="" name="repassword">
						<input class="input" placeholder-class="input-placeholder" password type="text" maxlength="15"
							placeholder="请再次输入密码" v-model="formData.repassword" />
					</uni-forms-item>
					<uni-forms-item label="" name="phone">
						<input class="input" placeholder-class="input-placeholder" type="tel" maxlength="11"
							placeholder="请输入手机号" v-model="formData.phone" />
					</uni-forms-item>
					<view class="uni-row uni-jcsb uni-ais">
						<uni-forms-item label="" name="vfcode" style="width: 48%; margin-right: 10px;">
							<input class="input" placeholder-class="input-placeholder" type="text" maxlength="6"
								placeholder="请输入验证码" v-model="formData.vfcode" />
						</uni-forms-item>
						<button class="btnSendVfcode" style="padding: 0px;" :disabled="!sendVfCode.state"
							@click="sendVfcodeClick">
							<view v-if="sendVfCode.state">
								获取验证码
							</view>
							<view v-else class="uni-row uni-jcc">
								<uni-countdown color="#c6c6c6" @timeup="timeup" :show-day="false" :showHour="false"
									:showMinute="false" :second="sendVfCode.counttime"></uni-countdown>
								秒后重试
							</view>
						</button>
					</view>
				</uni-forms>

				<button class="button" @click="registerClick">注 册</button>
				<text class="hint">已有账号？点击 <text style="color: #FF8D1A;" @click="loginClick">登录</text></text>
			</view>
			<view class="bottomLogo"></view>
		</view>
		<text class="bottomText">&copy; 彩图奔跑 All Rights Reserved.</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools';
	import {
		apiSmsSend,
		apiSignUp
	} from '/utils/api.js';

	export default {
		data() {
			return {
				sendVfCode: {
					state: true,
					counttime: 30 // 倒计时 秒
				},

				formData: {
					username: "",
					password: "",
					repassword: "",
					phone: "",
					vfcode: "",
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 15,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					repassword: {
						rules: [{
								required: true,
								errorMessage: '请再次输入密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value != data.password) {
										callback('两次输入的密码不一致');
										return false;
									} else {
										return true;
									}
								}
							}
						]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: "^((1[3456789][0-9]{1})+\\d{8})$",
								errorMessage: '请输入合法的手机号',
							}
						]
					},
					vfcode: {
						rules: [{
								required: true,
								errorMessage: '请输入验证码',
							},
							{
								minLength: 4,
								maxLength: 6,
								errorMessage: '请输入合法的验证码',
							}
						]
					}
				}
			}
		},
		onLoad() {
			// console.log("metadata:", this.metadata);
			// console.log("token:", this.$store.state.token);
			// this.$store.commit('setToken', "123456");
			// console.log("token:", this.$store.state.token);
		},
		computed: {
			...mapGetters([
				'metadata'
			]),
		},
		methods: {
			smsSend() {
				uni.request({
					url: apiSmsSend,
					header: this.metadata,
					method: "POST",
					data: {
						phone: this.formData.phone,
					},
					success: (res) => {
						console.log("smsSend", res);
						if (res.data.code == 0) {
							
						} else {
							uni.showToast({
								title: `验证码发送失败：${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("smsSend err", err);
					},
				});
			},
			register() {
				uni.request({
					url: apiSignUp,
					header: this.metadata,
					method: "POST",
					data: {
						phone: this.formData.phone,
						username: this.formData.username,
						password: this.formData.password,
						vfCode: this.formData.vfcode
					},
					success: (res) => {
						console.log("register", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							this.$store.commit("setUsername", data.userName);
							this.$store.commit("setUserlevel", data.level);
							this.$store.commit("setToken", data.token);

							uni.showToast({
								title: `注册成功`,
								icon: 'none',
								duration: 3000
							});
							
							setTimeout(() => {
								const url = '/pages/actManage/index';
								tools.appAction(url, "uni.switchTab");
							}, 100);
						} else {
							uni.showToast({
								title: `注册失败：${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("register err", err);
					},
				});
			},
			registerClick() {
				this.$refs.form.validate().then(res => {
					// console.log('表单数据信息：', res);
					this.register();
				}).catch(err => {
					// console.log('表单错误信息：', err);
				});
			},
			loginClick() {
				const url = "/pages/login/login";
				tools.appAction(url, "uni.navigateTo");
			},
			sendVfcodeClick() {
				// 部分表单进行校验，接受一个参数，类型为 String 或 Array ，只校验传入 name 表单域的值
				this.$refs.form.validateField(['phone']).then((res) => {
					// 成功返回，res 为对应表单数据
					this.sendVfCode.state = false;
					this.smsSend();
				}).catch((err) => {
					// 表单校验验失败，err 为具体错误信息
				});
			},
			// 倒计时结束
			timeup() {
				this.sendVfCode.state = true;
			}
		}
	}
</script>

<style scoped>
	.body-bg {
		width: 100vw;
		height: 100vh;
		background: url("/static/bg_login.png") no-repeat;
		background-size: 100% 100%;
		/* background-size: 100% auto; */
		justify-content: space-between;
	}

	.main {
		width: 90%;
		/* height: 590px; */
		margin-top: 10%;
		justify-content: space-evenly;
	}

	.topLogo {
		width: 90px;
		height: 110px;
		background: url("/static/run.png") no-repeat;
		background-size: contain;
	}

	.title {
		margin: 10px 0px;
		font-weight: 500;
		color: #ffffff;
		font-size: 30px;
		text-align: center;
	}

	.box {
		width: 92%;
		padding-top: 25px;
		padding-bottom: 20px;
		justify-content: space-evenly;
		background-color: white;
		border-radius: 13px;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	}

	.form {
		width: 80%;
	}

	.input {
		width: 90%;
		height: 36px;
		padding: 0 5%;
		border: 1px solid;
		border-color: #c6c6c6;
		border-radius: 3px;
	}

	.input-placeholder {
		font-weight: 300;
		color: #bfbfbf;
		font-size: 14px;
	}

	.btnSendVfcode {
		width: 48%;
		height: 38px;
		font-size: 13px;
		line-height: 38px;
	}

	.button {
		width: 82%;
		margin: 5px 0px;
		background: #ffb40b;
		border-radius: 6px;
		font-weight: 500;
		color: #333333;
		word-spacing: 15px;
	}

	.hint {
		margin-top: 10px;
		font-size: 16px;
		font-weight: 500;
		color: #383838;
	}

	.bottomLogo {
		width: 232px;
		height: 36px;
		margin-top: 20px;
		background: url("/static/ctbp.png") no-repeat;
		background-size: contain;
	}

	.bottomText {
		margin-bottom: 30px;
		font-weight: 500;
		color: #000000;
		font-size: 12px;
		text-align: center;
	}
</style>