a77/pages/login/register.vue

<template>
	<view class="register container">
		<view class="title">
			<view class="login_view">
				<view class="">
					注册
				</view>
				<view class="">
				</view>
			</view>
			<view class="text">
				<image src="@/static/logo.png" mode="widthFix" style="width: 120rpx;"></image>
			</view>
		</view>

		<view class="login_content">

			<view class="input_item">
				<view class="">
					<input type="number" v-model="tel" placeholder="输入手机号">
				</view>
			</view>

			<view class="input_item">
				<view class="">
					<input type="text" v-model="codeImgVal" placeholder="输入图形验证">
				</view>
				<view class="sendcode" @click="getVerify()" style="border: 0;">
					<image :src="codeImgData.image" mode="widthFix" style="width: 150rpx;"></image>
				</view>
			</view>


			<view class="input_item">
				<view class="">
					<input type="number" v-model="code" placeholder="输入验证码">
				</view>
				<view class="sendcode" @click="sendCode()" v-if="count<=0" style="">
					发送验证码
				</view>
				<view class="sendcode" v-else>
					{{count}}秒后重新发
				</view>
			</view>

			<view class="input_item">
				<view class="">
					<input type="password" v-model="pwd" placeholder="输入登录密码">
				</view>
			</view>
			<view class="input_item">
				<view class="">
					<input type="password" v-model="repwd" placeholder="确认密码">
				</view>
			</view>
			<view class="input_item">
				<view class="">
					<input type="password" v-model="paypwd" maxlength="6" placeholder="输入支付密码">
				</view>
			</view>
			<view class="input_item">
				<view class="">
					<input type="number" v-model="icode" placeholder="邀请码(非必填)">
				</view>
			</view>

		</view>


		<view class="login_btn bcggreen colorBlack" @click="register">
			注册
		</view>
		<view class="gologin">
			已有账号，<text style="color: #0C9D5B;" @click="rdt('/pages/login/login')">去登录</text>
		</view>
	</view>
</template>


<script>
	export default {
		components: {},
		data() {
			return {
				tel: "",
				pwd: "",
				repwd: "",
				code: "",
				icode: "",
				count: 0,
				paypwd: "",
				time: "",
				dw: false, //下载控制
				codeImgData: {},
				codeImgVal: '',
			}
		},
		onLoad(e) {
			if (e.code == "undefined" || e.code == null) {
				this.icode = ""
			} else {
				this.icode = e.code
			}
			this.dw = true
			this.getVerify()


		},
		onHide() {
			clearInterval(this.time)
		},
		methods: {
			getVerify() {
				this.api.graphVer().then(res => {
					this.codeImgData = res.data
				})
			},

			// 发送验证码
			sendCode() {
				if (!this.codeImgVal) {
					this.$api.pop("请输入图形验证")
					return;
				}
				this.api.smsCode(this.tel, this.codeImgVal, this.codeImgData.uniqid).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.data.time < 115) {
							this.$api.pop(res.data.time + 's后重试')
						} else {
							this.$api.pop(res.info)
							this.count = 60
							setInterval(() => {
								if (this.count <= 0) {
									this.count = 0
									return
								}
								--this.count
							}, 1000)
						}
					}
				})
			},





	

			register() {
				if (this.icode == null || this.icode == undefined) {
					this.icode == ""
				}
				if (!this.tel) {
					this.$api.pop("请输入手机号")
					return
				}
				if (!this.code) {
					this.$api.pop("请输入验证码")
					return
				}
				if (!this.pwd) {
					this.$api.pop("请输入密码")
					return
				}
				if (!this.repwd) {
					this.$api.pop("请再次输入密码")
					return
				}
				if (this.pwd != this.repwd) {
					this.$api.pop("两次输入密码不一致")
					return
				}
				if (!this.paypwd) {
					this.$api.pop("请输入支付密码")
					return
				}

				if (this.icode == null || this.icode == undefined) {
					this.icode == ""
				}
				this.api.register(this.tel, this.pwd, this.repwd, this.code, this.icode, this.paypwd).then(res => {
					if (res.code == 1) {
						this.$api.pop("注册成功")
						setTimeout(() => {
							this.$api.rdt("/pages/login/index")
						}, 1500)
					}
				})

			}
		}
	}
</script>


<style scoped lang="less">
	.register {
		box-sizing: border-box;
	}

	.title {
		width: 600rpx;
		font-size: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 70rpx auto 0 auto;
	}

	.login_view {
		font-size: 68rpx;
	}

	.login_content {
		margin-top: 70rpx;
		margin-left: 100rpx;
	}

	.text {
		width: 120rpx;
	}

	.input_item {
		display: flex;
		border-bottom: 1px solid #333333;
		width: 550rpx;
		height: 70rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		line-height: 70rpx;
		color: #999999;
		justify-content: space-between;

	}

	/deep/ .uni-input-wrapper {
		color: #fff;
	}

	.input_item>view:last-child {
		/* margin-left: auto; */

	}

	input {
		min-width: 200rpx;
		max-width: 360rpx;
		height: 70rpx;
		line-height: 70rpx;
	}


	.sendcode {
		color: #fff;
		font-size: 28rpx;
		border-bottom: 1px solid #fff;
		height: 55rpx;
	}




	.login_btn {
		width: 550rpx;
		height: 100rpx;
		color: #000;
		background: linear-gradient(to bottom, #69FF60, #0C9D5B);
		font-size: 32rpx;
		line-height: 100rpx;
		margin: 0 auto;
		margin-top: 88rpx;
		text-align: center;
		border-radius: 138rpx;
	}

	.gologin {
		font-size: 28rpx;
		margin: 22rpx auto;
		text-align: center;
	}

	.blue {
		color: #0C9D5B;
	}


	.agreement {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		text-indent: 14rpx;
		margin-top: 32rpx;
		margin-bottom: 50rpx;
	}

	.circle {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px solid #999999;
	}

	.circle_checked {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background: #0C9D5B;
		border: 1px solid #0C9D5B;
	}
</style>