odd_job_applet/pages/login/login.vue

<template>
	<view class="login-page">
		<!-- #ifdef MP-WEIXIN -->
		<view class="loginBox">
			<view class="loginBg">
				<image class="tilteBg" :src="$getImageUrl('static/images/applet/other/title.png')"></image>
				<image class="iconBg" :src="$getImageUrl('static/images/applet/other/loginBg.png')"></image>
			</view>
			<view class="padding flex flex-direction" v-if="formName=='wxLoginForm'">
				<button class="cu-btn round bg-themeBtn margin-tb-sm lg" style="width: 512rpx;"
					@click="wxLogin">授权登录</button>
				<button class="cu-btn round bg-gray margin-tb-sm lg" style="width: 512rpx;margin-top: 30rpx;"
					@tap="toPage">返回</button>
			</view>
            
            <view class="padding flex flex-direction" v-if="formName=='wxCheckMobileForm'">
            	<button class="cu-btn round bg-themeBtn margin-tb-sm lg" open-type="getPhoneNumber"
            		@getphonenumber="wxMobile">手机号快捷登录</button>
            	<button class="cu-btn round margin-tb-sm lg" @tap="checkMobile" data-formname="editMobileModal">其他手机号绑定</button>
            	<button class="cu-btn round margin-tb-sm lg" @tap="toPage">取消注册登录操作</button>
            </view>
            <view class="padding flex flex-direction" v-if="formName=='editMobileModal'">
            	<form>
            		<view class="cu-form-group">
            			<view class="title">手机号码</view>
            			<input type="number" placeholder="请输入手机号..." @input="wxInput" data-val="editmobile"
            				:value="weixinInfo.editmobile"></input>
            		</view>
            		<view class="cu-form-group margin-bottom solids-bottom">
            			<view class="title">验证码</view>
            			<input type="number" placeholder="请输入验证码..." @input="wxInput" data-val="editcode"
            				:value="weixinInfo.editcode"></input>
            			<button class='cu-btn round bg-themeBtn shadow'
            				@click="getSmsCode(weixinInfo.editmobile)">{{smsinfo.text}}</button>
            		</view>
            	</form>
            	<button class="cu-btn round bg-themeBtn margin-tb-sm lg" open-type="getUserInfo"
            		@getuserinfo="editMobile">手机号快捷登录</button>
            	<button class="cu-btn round margin-tb-sm lg" @tap="checkMobile" data-formname="wxCheckMobileForm">返回</button>
            </view>

		</view>

		<!-- #endif -->

		<view class="padding">
			<checkbox-group @change="handelChange" style="display: flex;justify-content: center;align-items: center;">
				<label :class="isChecked?'option_active checkCss':'option_default checkCss'">
					<view class="checkboxHidden">
						<checkbox value="1" style="transform:scale(0.7)" :checked="isChecked" />
					</view>
					
				</label>
				<view class="checkCircle"></view>
				<view class="checkTxt">我已阅读并同意</view>
				<view class="text-themeRed" @click="goPage('/pages/login/agreement')">《晋江人力用户服务协议》</view>
			</checkbox-group>
		</view>

		<!-- <view style="width: 100%; height: 80rpx;"></view>
		<view class="padding">
			<checkbox-group @change="handelChange" style="display: flex;justify-content: center;">
				<label class="text-center">
					<checkbox value="1" style="transform:scale(0.7)" :checked="isChecked" />
					我已阅读并同意
				</label>
				<text class="text-themeRed" @click="goPage('/pages/login/agreement')">《晋江人力用户服务协议》</text>
			</checkbox-group>
		</view> -->

		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="padding flex flex-direction" v-if="formName=='wxLoginForm'">
			<button class="cu-btn bg-green margin-tb-sm lg" @click="wxLogin">授权登录</button>
			<button class="cu-btn margin-tb-sm lg" @tap="toPage">返回</button>
		</view>
		<view class="padding flex flex-direction" v-if="formName=='wxCheckMobileForm'">
			<button class="cu-btn bg-green margin-tb-sm lg" open-type="getPhoneNumber"
				@getphonenumber="wxMobile">手机号快捷登录</button>
			<button class="cu-btn margin-tb-sm lg" @tap="checkMobile" data-formname="editMobileModal">其他手机号绑定</button>
			<button class="cu-btn margin-tb-sm lg" @tap="toPage">取消注册登录操作</button>
		</view>
		<view class="padding flex flex-direction" v-if="formName=='editMobileModal'">
			<form>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input type="number" placeholder="请输入手机号..." @input="wxInput" data-val="editmobile"
						:value="weixinInfo.editmobile"></input>
				</view>
				<view class="cu-form-group margin-bottom solids-bottom">
					<view class="title">验证码</view>
					<input type="number" placeholder="请输入验证码..." @input="wxInput" data-val="editcode"
						:value="weixinInfo.editcode"></input>
					<button class='cu-btn bg-green shadow'
						@click="getSmsCode(weixinInfo.editmobile)">{{smsinfo.text}}</button>
				</view>
			</form>
			<button class="cu-btn bg-green margin-tb-sm lg" open-type="getUserInfo"
				@getuserinfo="editMobile">手机号快捷登录</button>
			<button class="cu-btn margin-tb-sm lg" @tap="checkMobile" data-formname="wxCheckMobileForm">返回</button>
		</view> -->
		<!-- #endif -->

		<!-- #ifdef APP-PLUS -->
		<view class="padding flex flex-direction">
			<form>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input type="number" placeholder="请输入手机号..." @input="appInput" data-val="editmobile"
						:value="mobileInfo.editmobile"></input>
				</view>
				<view class="cu-form-group margin-bottom solids-bottom">
					<view class="title">验证码</view>
					<input type="number" placeholder="请输入验证码..." @input="appInput" data-val="editcode"
						:value="mobileInfo.editcode"></input>
					<button class='cu-btn bg-green shadow'
						@click="getSmsMCode(mobileInfo.editmobile)">{{smsinfo.text}}</button>
				</view>
			</form>
			<button class="cu-btn bg-green margin-tb-sm lg" @tap="regMobile">立即登录</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				isChecked: false,
				isRotate: false,
				backpage: "/pages/index/index",
				formName: "editMobileModal",
				weixinInfo: {
					parentid: 0,
					openid: "",
					nickname: "",
					avatar: "",
					editmobile: "",
					editcode: ""
				},

				mobileInfo: {
					parentid: 0,
					editmobile: "",
					editcode: ""
				},

				timerId: null,
				smsinfo: {
					text: '获取验证码',
					status: false,
					codeTime: 60,
					smscodepass: ""
				}
			};
		},
		onLoad: function(option) {
			_this = this;
			var backpage = option.backpage || "/pages/index/index";
			_this.backpage = decodeURIComponent(backpage);
			_this.isLogin();
			_this.weixinInfo.parentid = uni.getStorageSync('parentid') || 0;
			_this.mobileInfo.parentid = uni.getStorageSync('parentid') || 0;
			_this.formName = "wxLoginForm";
		},
		onHide: function() {
			clearInterval(_this.timerId);
		},
		onUnload: function() {
			clearInterval(_this.timerId);
		},
		methods: {

			// 判断是否已登录
			isLogin: function() {
				try {
					const userinfo = uni.getStorageSync('userinfo') || null;
					if (userinfo) {
						_this.checkuserinfoall(userinfo);
						_this.toPage();
					}
				} catch (e) {
					console.log("e: " + JSON.stringify(e));
				}
			},
			handelChange: function(e) {
				_this.isChecked = (e.detail.value.length > 0);
			},
			showAgreement: function() {

			},
			checkuserinfoall: function(userinfo) {
				_this.$req.ajax({
					path: "my/getuser",
					title: "正在获取用户信息",
					data: {
						userid: userinfo.id,
					}
				}).then((data) => {
					//判断用户资料是否完善
					// if(data.user.education=="" || data.user.address=="" || data.user.workexperience=="" || data.user.eduexperience==""){								
					// 	uni.navigateTo({
					// 		url: "/pages/my/myinfo"
					// 	});
					// 	return false;
					// }
					//判断用户是否已实名认证
					_this.toPage();
					if (data.user.authstatus == 1) {
						uni.navigateTo({
							url: "/pages/my/myauth"
						});
						return false;
					}
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			// 页面跳转
			toPage: function() {
				uni.reLaunch({
					url: _this.backpage,
					fail: function() {
						uni.switchTab({
							url: _this.backpage
						});
					}
				});
			},
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},


			// S 微信端登录注册
			// 自填手机号
			editMobile: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "login/seteditmobile",
					title: "正在授权登录",
					data: {
						parentid: _this.weixinInfo.parentid,
						openid: _this.weixinInfo.openid,
						nickname: _this.weixinInfo.nickname,
						avatar: _this.weixinInfo.avatar,
						editmobile: _this.weixinInfo.editmobile,
						editcode: _this.weixinInfo.editcode,
						smscodepass: _this.smsinfo.smscodepass
					}
				}).then((data) => {
					uni.setStorageSync('userinfo', data.userinfo);
					_this.toPage();
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},

			// 微信手机号
			wxMobile: function(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showModal({
						title: '警告',
						content: '您点击了拒绝授权，将无法正常注册登录，点击确定重新获取授权。',
						showCancel: false
					});
				} else {
					if (_this.isRotate) {
						return false;
					}
					_this.isRotate = true;
					_this.$req.ajax({
						path: "login/setwxmobile",
						title: "正在授权登录",
						data: {
							parentid: _this.weixinInfo.parentid,
							openid: _this.weixinInfo.openid,
							unionid: _this.weixinInfo.unionid,
							session_key: _this.weixinInfo.session_key,
							nickname: _this.weixinInfo.nickname,
							avatar: _this.weixinInfo.avatar,
							iv: e.detail.iv,
							encryptedData: encodeURIComponent(e.detail.encryptedData)
						}
					}).then((data) => {
						uni.setStorageSync('userinfo', data.userinfo);
						_this.checkuserinfoall(data.userinfo);
						_this.toPage();
						_this.isRotate = false;
					}).catch((err) => {
						uni.showModal({
							title: '信息提示',
							content: err,
							showCancel: false
						});
						_this.isRotate = false;
					});
				}
			},

			// 获取OpenId
			wxLogin: function() {
				if (!_this.isChecked) {
					uni.showModal({
						title: '警告',
						content: '请先查看并勾选协助。',
						showCancel: false
					});
					return false;
				}
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						if (_this.isRotate) {
							return false;
						}
						_this.isRotate = true;
						_this.$req.ajax({
							path: "login/getwxopenid",
							title: "正在授权登录",
							data: {
								code: loginRes.code
							}
						}).then((data) => {
							if (data.userinfo == null) {
								uni.showModal({
									title: '温馨提示',
									content: '亲，授权微信登录后才能正常使用小程序功能',
									success(res) {
										//如果用户点击了确定按钮
										if (res.confirm) {
											uni.getUserProfile({
												desc: '获取你的昵称、头像、地区及性别',
												success: infoRes => {
													_this.weixinInfo.openid = data.openid;
													_this.weixinInfo.unionid = data.unionid;
													_this.weixinInfo.session_key = data.session_key;
													_this.weixinInfo.nickname = infoRes.userInfo.nickName;
													_this.weixinInfo.avatar = infoRes.userInfo.avatarUrl;
													_this.formName = "wxCheckMobileForm";
												},
												fail: res => {
													uni.showModal({
														title: '警告',
														content: '您点击了拒绝授权，将无法正常注册登录，点击确定重新获取授权。',
														showCancel: false,
														success: function(res) {
															if (res.confirm) {
																uni.openSetting();
															}
														}
													});
												}
											});
										} else if (res.cancel) {
											//如果用户点击了取消按钮
											uni.showToast({
												title: '警告',
												content: '您点击了拒绝授权，将无法正常注册登录，点击确定重新获取授权。',
												icon: 'error',
												duration: 2000
											});
											return;
										}
									}
								});
								// uni.getUserProfile({
								// 	desc:"获取个人信息",
								// 	provider: 'weixin',
								// 	withCredentials: true,
								// 	success: function(infoRes) {
								// 		console.log(infoRes);
								// 		return false;
								// 		_this.weixinInfo.openid = data.openid;
								// 		_this.weixinInfo.session_key = data.session_key;
								// 		_this.weixinInfo.nickname = infoRes.userInfo.nickName;
								// 		_this.weixinInfo.avatar = infoRes.userInfo.avatarUrl;
								// 		_this.formName = "wxCheckMobileForm";
								// 	},
								// 	fail: function(res) {
								// 		console.log(res);
								// 		uni.showModal({
								// 			title: '警告',
								// 			content: '您点击了拒绝授权，将无法正常注册登录，点击确定重新获取授权。',
								// 			showCancel: false,
								// 			success: function(res) {
								// 				if (res.confirm) {
								// 					uni.openSetting();
								// 				}
								// 			}
								// 		});
								// 	}
								// });
							} else {
								uni.setStorageSync('userinfo', data.userinfo);
								_this.checkuserinfoall(data.userinfo);
								_this.toPage();
							}
							_this.isRotate = false;
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
							_this.isRotate = false;
						});
					}
				});
			},

			checkMobile: function(e) {
				_this.formName = e.currentTarget.dataset.formname;
			},

			// 获取短信验证码
			getSmsCode: function(mobile) {
				if (_this.smsinfo.status) {
					return false;
				}
				_this.smsinfo.status = true;
				_this.$req.ajax({
					path: "login/smsregister",
					data: {
						identifier: mobile
					}
				}).then((data) => {
					_this.smsinfo.smscodepass = data.smscodepass;
					_this.timerId = setInterval(() => {
						var codeTime = _this.smsinfo.codeTime;
						codeTime--;
						_this.smsinfo.codeTime = codeTime;
						_this.smsinfo.text = codeTime + "s 后重新发送";
						if (codeTime < 1) {
							clearInterval(_this.timerId);
							_this.smsinfo.text = "重新获取";
							_this.smsinfo.codeTime = 60;
							_this.smsinfo.status = false;
						}
					}, 1000);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.smsinfo.status = false;
				});
			},

			wxInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.weixinInfo[dataval] = e.detail.value;
			},
			// E 微信端登录注册

			// S APP端登录注册
			appInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.mobileInfo[dataval] = e.detail.value;
			},
			// 获取短信验证码
			getSmsMCode: function(mobile) {
				if (_this.smsinfo.status) {
					return false;
				}
				_this.smsinfo.status = true;
				_this.$req.ajax({
					path: "login/smsmobilelogin",
					data: {
						identifier: mobile
					}
				}).then((data) => {
					_this.smsinfo.smscodepass = data.smscodepass;
					_this.timerId = setInterval(() => {
						var codeTime = _this.smsinfo.codeTime;
						codeTime--;
						_this.smsinfo.codeTime = codeTime;
						_this.smsinfo.text = codeTime + "s 后重新发送";
						if (codeTime < 1) {
							clearInterval(_this.timerId);
							_this.smsinfo.text = "重新获取";
							_this.smsinfo.codeTime = 60;
							_this.smsinfo.status = false;
						}
					}, 1000);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.smsinfo.status = false;
				});
			},
			regMobile: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "login/mobilelogin",
					title: "正在登录",
					data: {
						parentid: _this.mobileInfo.parentid,
						editmobile: _this.mobileInfo.editmobile,
						editcode: _this.mobileInfo.editcode,
						smscodepass: _this.smsinfo.smscodepass
					}
				}).then((data) => {
					uni.setStorageSync('userinfo', data.userinfo);
					_this.toPage();
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			}
			// E APP端登录注册
		},

		onShareAppMessage: function(res) {
			return {
				title: "登录注册",
				path: "/pages/login/login"
			}
		}
	}
</script>

<style lang="scss">
	.login-page {
		width: 100%;
		height: 100vh;
		// background-color: #FFFFFF;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.loginBox {
		margin: 30rpx 30rpx 0;
		padding-bottom: 30rpx;
		border-radius: 22rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.loginBg {
			display: flex;
			flex-direction: column;
			align-items: center;

			.tilteBg {
				margin: 70rpx 0 52rpx;
				width: 552rpx;
				height: 192rpx;
			}

			.iconBg {
				margin-bottom: 100rpx;
				width: 277rpx;
				height: 205rpx;
			}
		}
	}

	.checkCss {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-top: 1rpx solid #E6E6E6;
		font-size: 28rpx;
	}

	// 选中的颜色
	.option_active {
		color: orange;
		position: relative;
	}

	.option_active::after {
		content: '';
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #CA151C;
	}

	.option_active::before {
		content: '';
		position: absolute;
		left: 35rpx;
		top: 42%;
		transform: translateY(-50%);
		width: 18rpx;
		height: 10rpx;
		border-left: 2rpx solid #ffffff;
		border-bottom: 2rpx solid #ffffff;
		transform: rotate(-45deg);
		z-index: 4;
	}

	// 默认颜色
	.option_default {
		color: #000000;
		position: relative;
	}

	.option_default::after {
		content: '';
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #484848;
		box-sizing: border-box;
	}

	.checkboxHidden {
		display: none;
	}

	.checkTxt {
		margin-left: 80rpx;
	}
</style>