xwc/pages/register/register.vue

<template>
	<view class="register">
		<view class="welcome">
			欢迎您来到<br>香花畦商城
		</view>
		<view class="input-container">
			<view class="input-item flex">
				<view class="input-label flex normal">手机号</view>
				<u-input v-model="mobile" class="input" placeholder="请输入手机号码" />
			</view>
			<view class="input-item flex" v-if="appConfig.register_setting">
				<view class="input-label flex normal">短信验证码</view>
				<u-input v-model="smsCode" style="width: 300rpx" placeholder="请输入验证码" />
				<button class="bd-primary xs primary br60 flex row-center" hover-class="none" @click="sendSmsFun">
					<!-- 获取验证码 -->
					<u-verification-code unique-key="register" ref="uCode" @change="codeChange">
					</u-verification-code>
					<view class="xs">{{codeTips}}</view>
				</button>
			</view>
			<view class="input-item flex">
				<view class="input-label flex normal">设置密码</view>
				<u-input type="password" v-model="password" placeholder="6-20位数字+字母或符号组合" />
			</view>
			<view class="input-item flex">
				<view class="input-label flex normal">确认密码</view>
				<u-input type="password" v-model="passwordConfirm" placeholder="6-20位数字+字母或符号组合" />
			</view>
			<view class="input-item flex">
				<view class="input-label flex normal">邀请码</view>
				<u-input type="text" v-model="invitecode" placeholder="请输入邀请码" />
			</view>
		</view>
		<view class="btn white bg-primary br60 flex row-center" @click="registerFun">立即注册</view>
		<!-- #ifndef APP-PLUS -->
		<view class="btn btn-primary br60 flex row-center" @click="app_download">下载APP</view>
		<!-- #endif -->
		<view class="m-t-40 sm flex row-center">
			<u-checkbox v-model="isAgreement" shape="circle">
				<div class="flex">
					已阅读并同意
					<router-link to="/bundle/pages/server_explan/server_explan?type=0">
						<view class="primary">《服务协议》</view>
					</router-link>
					和
					<router-link to="/bundle/pages/server_explan/server_explan?type=1">
						<view class="primary">《隐私协议》</view>
					</router-link>
				</div>
			</u-checkbox>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		register,
		sendSms
	} from '@/api/app.js'
	import {
		ACCESS_TOKEN
	} from '@/config/app.js'
	import {
		SMSType
	} from '@/utils/type.js'
	import {
		mapMutations,
		mapGetters,
		mapActions,
	} from 'vuex'

	export default {
		name: 'register',
		created() {

		},
		data() {
			return {
				isAgreement: false,
				mobile: '',
				smsCode: '',
				password: '',
				passwordConfirm: "",
				canSendSms: true,
				codeTips: '',
				invitecode: ""
			}
		},
		onLoad(option) {
			console.log(option)
			if(option){
				this.invitecode = option.invite_code
			}
		},
		methods: {

			...mapMutations(['login']),
			...mapActions(['getUser']),
			codeChange(tip) {
				this.codeTips = tip
			},
			registerFun() {
				let {
					isAgreement,
					mobile,
					password,
					smsCode,
					passwordConfirm,
					invitecode
				} = this;
				if (!isAgreement) return this.$toast({
					title: '请先勾选\"已阅读并同意《服务协议》和《隐私协议》\"'
				})
				if (!mobile) {
					this.$toast({
						title: '请填写手机号'
					});
					return;
				}
				if (!password) {
					this.$toast({
						title: "请设置密码"
					})
					return;
				}
				if (password != passwordConfirm) {
					this.$toast({
						title: "两次密码输入不一致"
					})
					return;
				}

				let data = {
					mobile: mobile,
					password: password,
					code: smsCode,
					client: 2,
					invitecode: invitecode
				}
				register(data).then(res => {
					if (res.code == 1) {
						
						this.login(res.data)
						
						this.$toast({
							title: res.msg
						});
						 // 跳转到首页
						setTimeout(() => {
							this.$Router.pushTab('/pages/index/index')
							
						}, 1000)
					}else{
						this.$toast({
							title: res.msg
						});
					}
				})
			},

			countDownFinish() {
				this.canSendSms = true;
			},
			
	
			sendSmsFun() {
				if (!this.$refs.uCode.canGetCode) return
				if (!this.mobile) {
					this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}
				sendSms({
					mobile: this.mobile,
					key: SMSType.REGISTER
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: res.msg
						});
						this.$refs.uCode.start();
					}
				})
			},
			// app下载
			app_download(){
				location.href = "/app.html";
			}
		},
		computed: {
			...mapGetters(['appConfig']),
		}
	}
</script>

<style lang="scss">
	.btn-primary{
		border: 1px solid #FF2C3C;
		color: #FF2C3C;
	}
	page {
		background-color: white;
	}

	.register {
		padding: 460rpx 40rpx 0;
		min-height: 100vh;
		background: url('../../static/login/bg.jpg')no-repeat;
		background-size: 100%;
		position: relative;

		.welcome {
			position: absolute;
			left: 50rpx;
			top: 180rpx;
			color: #fff;
			font-size: 60rpx;
			text-align: left;
			font-weight: 500;
		}

		.input-container {
			.input-item {
				padding: 0 20rpx;
				height: 88rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #D7D7D7;

				.input-label {
					width: 180rpx;
					flex: none;
				}

				.bd-primary {
					height: 56rpx;
					width: 176rpx;
					flex: none;
					border: 1px solid $-color-primary;

					.seconds {
						color: $-color-primary;
					}
				}
			}
		}

		.btn {
			margin-top: 60rpx;
			padding: 20rpx 0;
		}
	}
</style>