guosen-ldt-shop/pages/login/register.vue

<template>
	<view style="position: relative;">
		<back></back>
		<view class="content">
			<view class="bg"></view>
			<view class="bg1"></view>
			<view class="top">
				<view class="title">
					<text>注册联兑通账号</text>
					<text>请输入手机号进行注册</text>
				</view>
			</view>

			<view style="width: 76%;margin-top: 80rpx;">
				<u-form :model="form" ref="uForm" :rules="rules" :error-type="['message']">
					<u-form-item label="手机号" prop="phone" label-width="150">
						<u-input :border="false" placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
					</u-form-item>
					<u-form-item label="验证码" prop="code" label-width="150">
						<view class="flex">
							<u-input style="width: 100%;" :border="false" placeholder="请输入验证码" v-model="form.code"
								type="text"></u-input>
							<u-button shape="circle" slot="right" :custom-style="customStyle" size="mini"
								@click="getCode">{{codeTips}}</u-button>
						</view>
					</u-form-item>
					<u-form-item label="密码" prop="password" label-width="150">
						<u-input :border="false" placeholder="请设置登录密码" v-model="form.password" type="password">
						</u-input>
					</u-form-item>
					<u-form-item label="确认密码" prop="newPassword" label-width="150">
						<u-input :border="false" placeholder="请再次输入密码" v-model="form.newPassword" type="password">
						</u-input>
					</u-form-item>
				</u-form>
			</view>

			<view style="width: 86%;margin-top: 100rpx;">
				<view @click="next" class="btn cu-btn round" style="width:100%;height: 90rpx;font-size: 34rpx;">
					确认
				</view>
				<!-- <view class="center" style="margin-top: 100rpx;">
					<text style="color: #949494;">确认注册即代表已阅读并同意</text>
					<text style="color: #0000ff;">《软件服务协议》</text>
				</view> -->
			</view>
		</view>

		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	import back from "@/components/back.vue"
	export default {
		components:{
			back
		},
		data() {
			return {
				customStyle: {
					'backgroundColor': '#EF9944',
					'color': '#ffffff'
				},
				codeTips: '',
				form: {
					phone: '',
					code: '',
					password: '',
					newPassword: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],

					}, {
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入登录密码',
						trigger: ['change', 'blur'],
					}],
					newPassword: [{
						required: true,
						message: '请再次输入登录密码',
						trigger: ['change', 'blur'],
					}, {
						message: '密码不一致',
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							return this.form.password == value
						},
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options != null) {
				if (this.$isNotEmpty(options.q)) {
					//获取普通二维码的参数
					let params= this.$util.getUrlParams(options.q)
					this.$cache.put('promotionCode', params.promotionCode)
					return
				}
				if (this.$isNotEmpty(options.promotionCode)) {
					//获取小程序码的参数
					this.$cache.put('promotionCode', options.promotionCode)
				}
			}
			
		},
		methods: {
			back() {
				uni.navigateTo({
					url: "account-login"
				})
			},
			next() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.register()
					}
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
			async register() {
				let p = {
					phone: this.form.phone,
					secret: md5Libs.md5(this.form.password),
					smsId: this.$cache.get('smsId'),
					value: this.form.code,
				}
				this.$api.accout.register(p).then(res => {
					if (res.success) {
						uni.navigateTo({
							url: "/pages/shop-info/shop-info?phone=" + this.form.phone
						})
					}
				})
			},
			// 获取验证码
			getCode() {
				if (this.$isEmpty(this.form.phone)) {
					this.$u.toast('请输入手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						let params = {
							phone: this.form.phone
						}
						let p = this.$u.queryParams(params)
						this.$api.sms.send(p).then(res => {
							if (res.data.success) {
								this.$cache.put('smsId', res.data.id)
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
							} else {
								this.$u.toast(res.data);
							}
							this.$refs.uCode.start();
						})
						uni.hideLoading()
					}, 200);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.btn {
		background-color: $color;
		color: #FFFFFF;
	}

	.btn {
		background-color: $color;
		color: #FFFFFF;
	}

	.bg {
		overflow: hidden;
		z-index: 99;
		height: 400rpx;
		width: 400rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: $color;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 50rpx #e28e3f;
	}

	.bg1 {
		overflow: hidden;
		height: 460rpx;
		width: 460rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: $color;
		border-radius: 50%;
		box-shadow: #c6813b;
	}

	.back {
		position: absolute;
		top: var(--status-bar-height);
		left: 20rpx;
		padding-top: var(--status-bar-height);
	}

	.content {
		height: 96vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.top {
			width: 76%;
			display: flex;

			.title {
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				text-align: left;

				text:first-child {
					font-weight: 800;
					font-size: 50rpx;
					color: #000;
					margin-bottom: 20rpx;
				}

				text:last-child {
					font-size: 28rpx;
					color: #7f7f7f;
				}
			}


		}
	}
</style>