dingdong-master/pages/login/login.vue

<template>
	<view>
		<image class="bg-img-container" src="http://gqz.opsoul.com/sys/login-bg-business.jpg" mode="aspectFill"></image>
		<view class="bg-white login-container padding-lr-lg padding-tb-xl">
			<view v-if="operType === 0">
				<!-- 登录内容 -->
				<view class="margin-tb-xl">
					<view class="cu-form-group">
						<view class="text-xxl margin-right"><text class="cuIcon-people"></text></view>
						<input class="radius-input" type="number" name="phone" v-model="formData.phone"
							placeholder="请输入帐号(手机号)"></input>
					</view>
					<view class="cu-form-group margin-top-lg">
						<view class="text-xxl margin-right"><text class="cuIcon-unlock"></text></view>
						<input class="radius-input" password name="password" v-model="formData.password"
							placeholder="请输入密码"></input>
					</view>
				</view>
				<view class="margin-bottom-xl">
					<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="loginByPwd">登录
					</view>
					<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
						@click="changeOperType">前往注册</view>
				</view>
				<!-- <view class="margin-top-xl text-center text-lg">
					<text class="text-grey">手机验证码登录</text>
					<text class="text-grey margin-lr-sm">|</text>
					<text class="text-grey">忘记密码？</text>
				</view> -->
			</view>
			<view v-else-if="operType === 1">
				<!-- 注册内容 -->
				<view class="margin-tb-xl">
					<view class="cu-form-group">
						<view class="title">商家昵称</view>
						<input class="radius-input" name="name" v-model="formData.name" placeholder="请输入用户昵称"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">手机号码</view>
						<input class="radius-input" type="number" name="phone" v-model="formData.phone"
							placeholder="请输入号码(作为登录帐号)"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">设置密码</view>
						<input class="radius-input" password name="password" v-model="formData.password"
							placeholder="请设置至少6位数的登录密码"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">确认密码</view>
						<input class="radius-input" password name="passwordAgain" v-model="formData.passwordAgain"
							placeholder="请再次输入密码"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">验证码</view>
						<input class="radius-input" type="number" name="registerCode" v-model="formData.registerCode"
							placeholder="请输入验证码"></input>
						<view v-if="countDownNum === 0" class="cu-btn bg-blue round-btn margin-left-xs shadow-blur" @click="sendVertifyCode">发送验证码
						</view>
						<view v-else class="cu-btn bg-gray round-btn margin-left-sm shadow-blur">已发送({{countDownNum}})
						</view>
					</view>
				</view>
				<view class="margin-bottom-sm text-lg flex justify-center align-center">
					<checkbox style="transform:scale(0.8)" class="main-color" :checked="agreeContract"
						@click="changeAgreeContract">
					</checkbox>
					<text class="margin-left-xs">
						我同意
						<text class="text-main-color underline-text">用户注册协议</text>
					</text>
				</view>
				<view class="margin-bottom-xl">
					<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="registerByPhone">
						立即注册</view>
					<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
						@click="changeOperType">已有账户，前往登录</view>
				</view>
			</view>
		</view>

		<!-- 登录校验弹窗 -->
		<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
		<!-- 加入师傅团队提示 -->
		<!-- <invite-master ref="inviteMasterModal" :inviteMasterObj="inviter" @confirm="inviteMaster"></invite-master> -->
		<confirm-modal ref="inviteMasterModal" :content="'是否确认加入' + inviter.name + '的团队？'" @confirm="inviteMaster(inviter)"></confirm-modal>
	</view>
</template>

<script>
	// import inviteMaster from '../area-proxy/modal/invite-master.vue'
	// 18929577155 qq880920
	export default {
		components: {
			// inviteMaster
		},
		data() {
			return {
				pageContentTop: this.CustomBar,
				operType: 0, // 0为登录，1为注册
				countDownNum: 0,
				agreeContract: false,
				formData: {},
				inviter: {}
			}
		},
		onLoad(options) {
			this.$request.updateCache('userProfile', null);
			if (options) {
				if (options.operType) {
					this.operType = Number(options.operType)
				} else if (options.inviter) {
					this.inviter = JSON.parse(decodeURIComponent(options.inviter));
				}
			}
		},
		methods: {
			changeAgreeContract() {
				this.agreeContract = !this.agreeContract;
			},
			changeOperType() {
				this.reset();
				this.operType = this.operType === 0 ? 1 : 0;
				if (this.operType === 1) {
					this.authLogin();
				}
			},
			reset() {
				this.formData = {};
				this.agreeContract = false;
			},
			async authLogin() {
				// 获取微信用户信息
				let curUserInfo = await this.$request.getWxUserInfo();
				// 校验提示登录
				if (!curUserInfo || !curUserInfo.openId) {
					this.$refs.vertifyLogin.showModal();
					return false;
				} else {
					this.$refs.vertifyLogin.hideModal();
					this.$request.updateCache('userProfile', curUserInfo);
					if (this.inviter && this.inviter.workerId) {
						this.$refs.inviteMasterModal.showModal();
					}
				}
				return true;
			},
			validLoginData(type) {
				let errMsg = null;
				if (type === 'pwd') {
					if (!this.formData.phone) {
						errMsg = '请输入帐号';
					} else if (!this.formData.password) {
						errMsg = '请输入密码';
					}
				}
				if (errMsg) {
					uni.showToast({
						icon: 'none',
						title: errMsg
					})
					return false;
				}
				return true;
			},
			async loginByPwd() {
				if (!this.validLoginData('pwd')) {
					return;
				}

				let res = await this.$request.appLogin(this.formData);
				if (res && res.code === 0) {
					let cacheRes = await this.$request.qryUserInfo(null, this.formData.phone);
					uni.setStorageSync('userProfile', cacheRes.data);
					uni.showToast({
						icon: 'none',
						title: '登录成功'
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else if (res && res.msg) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '登录失败'
					})
				}
			},
			startCountDownNum() {
				this.countDownNum = 180;
				let t = setInterval(() => {
					this.countDownNum -= 1;
					if (this.countDownNum === 0) {
						clearInterval(t);
					}
				}, 1000);
			},
			async sendVertifyCode() {
				if (this.$validate.validContactNum(this.formData.phone)) {
					let res = await this.$request.sendVertifyCode({
						to: this.formData.phone
					});
					if (res && res.code === 0) {
						uni.showToast({
							icon: 'none',
							title: '验证码已发送'
						})
						this.startCountDownNum();
					} else if (res && res.msg) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '验证码发送失败'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请正确输入手机号码'
					})
				}
			},
			validRegisterData() {
				let errMsg = null;
				if (!this.formData.name) {
					errMsg = '请输入用户昵称';
				} else if (!this.$validate.validContactNum(this.formData.phone)) {
					errMsg = '请正确输入手机号码';
				} else if (!this.formData.password || this.formData.password.length < 6) {
					errMsg = '密码至少为6位数';
				} else if (!this.formData.passwordAgain || this.formData.password !== this.formData.passwordAgain) {
					errMsg = '两次输入密码不一致';
				} else if (!this.formData.registerCode) {
					errMsg = '请输入验证码'
				} else if (!this.agreeContract) {
					errMsg = '请先阅读并同意用户注册协议'
				}
				if (errMsg) {
					uni.showToast({
						icon: 'none',
						title: errMsg
					})
					return false;
				}
				return true;
			},
			async registerByPhone() {
				let curUserInfo = this.$request.getCurUserInfo();
				if (!curUserInfo || !curUserInfo.workerId) {
					uni.showToast({
						icon: 'none',
						title: '注册失败'
					})
					return;
				}

				if (!this.validRegisterData()) {
					return;
				}

				let res = await this.$request.realRegisterUser({
					...this.formData,
					workerId: curUserInfo.workerId
				});
				if (res && res.code === 0) {
					uni.showToast({
						icon: 'none',
						title: '注册成功'
					})
					this.changeOperType();
				} else if (res && res.msg) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '注册失败'
					})
				}
			},
			async inviteMaster(params) {
				let res = await this.$request.addTeam({
					leaderId: params.workerId,
					workerId: this.$request.getCurUserInfo().workerId,
				});
				if (res.code === 0) {
					uni.showToast({
						title: '预加入成功，请完成注册登录及信息完善以激活',
						icon: 'none',
						duration: 4000
					})
				} else if (res.msg) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '预加入失败',
						icon: 'error'
					})
				}
			}
		},
	}
</script>

<style scoped>
	.login-container {
		border-radius: 80rpx;
		/* min-height: 44vh; */
		width: 92vw;
		margin: 0 auto;
		filter: drop-shadow(1px 2px 8px hsl(220deg 38% 50%));
		margin-top: 20vh;
	}

	.login-avatar {
		width: 18vh;
		height: 18vh;
		top: 6vh;
	}

	.radius-input {
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		padding: 20rpx;
		box-sizing: content-box;
	}

	.cu-form-group+.cu-form-group {
		border-top: unset;
	}

	.main-btn {
		padding: 40rpx;
		border-radius: 40rpx;
	}

	.round-btn {
		border-radius: 40rpx;
	}

	.underline-text {
		text-decoration: underline;
	}

	.bg-img-container {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100%;
	}

	.cu-form-group .title {
		text-align: justify;
		padding-right: 15rpx;
		font-size: 30rpx;
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>