ekshopApplets/pages/login/applet.vue

<template>
	<view class="login-container" :style="'height: '+phoneHeight+'px;'">
		<!-- 取到code后登录 -->
		<view class="p-30-75" v-if="is_login==1">
			<view class="login_topbpx">
				<view class="login_tit">登录</view>
			</view>
			<view class="group-bd">
				<view class="form-level d-s-c">
					<view class="val flex-1 input_botom"><input type="text" style="font-size: 18px" v-model="newUser_no" placeholder="请填写会员号" />
					</view>
				</view>
				<view class="form-level d-s-c" v-if="!is_code">
					<view class="val flex-1 input_botom"><input type="text" style="font-size: 18px" password="true" v-model="newPassWord"
							placeholder="请输入密码" /></view>
				</view>
			</view>
		</view>
		<view class="p-30-75" v-if="is_login==0">
			<view class="login_topbpx">
				<view class="login_tit">重置密码</view>
				<view class="login_top"><text class="red" @click="is_login=1">立即登录</text></view>
			</view>
			<view class="group-bd">
				<view class="form-level d-s-c">
					<view class="val flex-1 input_botom"><input type="text" style="font-size: 18px" v-model="resetpassword.mobile"
							placeholder="请填写手机号/会员号" :disabled="is_send" /></view>
				</view>
				<view class="form-level d-s-c">
					<view class="val flex-1 input_botom"><input type="text" style="font-size: 18px" password="true"
							v-model="resetpassword.password" placeholder="请输入密码" /></view>
				</view>
				<view class="form-level d-s-c">
					<view class="val flex-1 input_botom"><input type="text" style="font-size: 18px" password="true"
							v-model="resetpassword.repassword" placeholder="请确认密码" /></view>
				</view>
				<view class="form-level d-s-c">
					<view class="val flex-1 d-b-c input_botom">
						<input class="flex-1" type="number" style="font-size: 18px" v-model="resetpassword.code" placeholder="请填写验证码" />
						<button class="get-code-btn" type="default" @click="sendCode"
							:disabled="is_send">{{ send_btn_txt }}</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="is_login==1" style="font-size: 14px;color:#C0C0C0;" class="gray6 p-0-75" :class="is_code?'d-e-c':'d-b-c'">
			<view v-if="!is_code" @click="is_login=0">忘记密码?</view>
			<!-- <view @click="isCode()">{{is_code?'使用密码登录':'使用验证码登录'}}</view> -->
		</view>
		<view style="padding-top: 80rpx;" class="btns p-30-75" v-if="is_login==1"><button @click="formSubmit"
				:disabled="!isRead">登录</button></view>
		<view style="padding-top: 80rpx;" class="btns p-30-75" v-if="is_login==0"><button
				@click="resetpasswordSub">重置密码</button></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*表单数据对象*/
				formData: {
					/*手机号*/
					mobile: '',
					/*验证码*/
					code: '',
				},
				loging_password: '',
				register: {
					mobile: '',
					password: '',
					repassword: '',
					code: '',
					user_no: ''

				},
				resetpassword: {
					mobile: '',
					password: '',
					repassword: '',
					code: ''
				},
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: '获取验证码',
				/*当前秒数*/
				second: 60,
				ip: '',
				isShow: true,
				is_login: 1,
				is_code: true,
				phoneHeight: 0,
				isRead: true,
				nickName: '',
				avatarUrl: '',
				gender: '',
				province: '',
				country: '',
				city: '',
				openid: '',
				referee_id: '',
				newOpenId: '',
				newUser_no: '',
				newPassWord: '',
			};
		},
		onLoad(e) {
			console.log('co', e)
			this.newOpenId = e.openid
			this.getData();
			this.is_code = false
			this.nickName = this.getQueryStringArgs().nickName
			this.avatarUrl = this.getQueryStringArgs().avatarUrl
			this.gender = this.getQueryStringArgs().gender
			this.province = this.getQueryStringArgs().province
			this.country = this.getQueryStringArgs().country
			this.city = this.getQueryStringArgs().city
			this.openid = this.getQueryStringArgs().openid
			this.referee_id = this.getQueryStringArgs().referee_id
			// 	console.log(this.getQueryStringArgs().nickName, 'nickName')
			// console.log(this.getQueryStringArgs().avatarUrl, 'avatarUrl')
			// console.log(this.getQueryStringArgs().gender, 'gender')
			// console.log(this.getQueryStringArgs().province, 'province')
			// console.log(this.getQueryStringArgs().country, 'country')
			// console.log(this.getQueryStringArgs().openid, 'openid')
			// console.log(this.getQueryStringArgs().referee_id, 'referee_id')
			// console.log(this.getQueryStringArgs().city, 'city')
			// console.log(window.location.href)

		},
		onShow() {
			this.init()
		},
		methods: {
			getQueryStringArgs() {
				var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
					args = {},
					items = qs.length ? qs.split("&") : [],
					item = null,
					name = null,
					value = null,
					i = 0,
					len = items.length;
				for (i = 0; i < len; i++) {
					item = items[i].split("=");
					name = decodeURIComponent(item[0]);
					value = decodeURIComponent(item[1]);
					if (name.length) {
						args[name] = value;
					}
				}
				return args;
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
					}
				});
			},
			getData() {
				let self = this;
				self._get('user.userapple/policy', {}, function(res) {
					self.service = res.data.service;
					self.privacy = res.data.privacy;
				});
			},
			/*提交*/
			formSubmit() {
				let self = this;
				if (!self.nickName) {

					self.nickName = ''
				}

				if (!self.avatarUrl) {
					self.avatarUrl = ''
				}
				if (!self.gender) {
					self.gender = ''
				}
				if (!self.province) {
					self.province = ''
				}

				if (!self.country) {
					self.country = ''
				}
				if (!self.city) {
					self.city = ''
				}
				if (!self.openid) {
					self.openid = ''
				}

				if (!self.referee_id) {
					self.referee_id = ''
				}
				let formdata = {
					mobile: self.formData.mobile,
					nickName: self.nickName,
					avatarUrl: self.avatarUrl,
					gender: self.gender,
					province: self.province,
					country: self.country,
					city: self.city,
					openid: self.openid,
					referee_id: self.referee_id,
				}
				let url = ''
				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.mobile)) {
				// 	console.log(self.formData.mobile)
				// 	uni.showToast({
				// 		title: '手机有误,请重填！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				if (!self.newUser_no) {
					uni.showToast({
						title: '会员号不能为空',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.newPassWord == '') {
					uni.showToast({
						title: '密码不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				if (!self.isRead) {
					uni.showToast({
						title: '请同意并勾选协议内容',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '正在提交'
				});
				self._post('user.userweb/accountlogin', {
						openid: self.newOpenId,
						user_no: self.newUser_no,
						password: self.newPassWord
					},
					result => {
						// 记录token user_id
						uni.setStorageSync('token', result.data.token);
						uni.setStorageSync('user_id', result.data.user_id);
						// 获取登录前页面
						let url = '/' + uni.getStorageSync('currentPage');
						let pageOptions = uni.getStorageSync('currentPageOptions');
						if (Object.keys(pageOptions).length > 0) {
							url += '?';
							for (let i in pageOptions) {
								url += i + '=' + pageOptions[i] + '&';
							}
							url = url.substring(0, url.length - 1);
						}

						// 执行回调函数
						self.gotoPage(url);
					},
					false,
					() => {
						uni.hideLoading();
					}
				);
			},
			/*注册*/
			registerSub() {
				let self = this;
				if (!self.nickName) {

					self.nickName = ''
				}

				if (!self.avatarUrl) {
					self.avatarUrl = ''
				}
				if (!self.gender) {
					self.gender = ''
				}
				if (!self.province) {
					self.province = ''
				}

				if (!self.country) {
					self.country = ''
				}
				if (!self.city) {
					self.city = ''
				}
				if (!self.openid) {
					self.openid = ''
				}

				if (!self.referee_id) {
					self.referee_id = ''
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.register.mobile)) {
					console.log(self.register.mobile)
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.register.code == '') {
					uni.showToast({
						title: '验证码不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.register.user_no == '') {
					uni.showToast({
						title: '会员号不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.register.password.length < 6) {
					uni.showToast({
						title: '密码至少6位数！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.register.password !== self.register.repassword) {
					uni.showToast({
						title: '两次密码输入不一致！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				if (!self.isRead) {
					uni.showToast({
						title: '请同意并勾选协议内容',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				self.register.invitation_id = uni.getStorageSync('invitation_id') ? uni.getStorageSync('invitation_id') :
					0;
				self.register.reg_source = 'h5';
				// self.register.referee_id = uni.getStorageSync('referee_id');
				self.register.nickName = self.nickName;
				self.register.avatarUrl = self.avatarUrl;
				self.register.gender = self.gender;
				self.register.province = self.province;
				self.register.country = self.country;
				self.register.city = self.city;
				self.register.openid = self.openid;
				self.register.referee_id = self.referee_id;
				uni.showLoading({
					title: '正在提交'
				});
				self._post(
					'user.useropen/register',
					self.register,
					result => {
						uni.showToast({
							title: '注册成功',
							duration: 3000
						})
						self.formData.mobile = self.register.mobile;
						self.register = {
							mobile: '',
							password: '',
							repassword: '',
							code: ''
						};
						self.second = 0;
						self.changeMsg();
						self.is_login = 1;
					},
					false,
					() => {
						uni.hideLoading();
					}
				);
			},
			resetpasswordSub() {
				let self = this;
				if (!self.nickName) {
					self.nickName = ''
				}
				if (!self.avatarUrl) {
					self.avatarUrl = ''
				}
				if (!self.gender) {
					self.gender = ''
				}
				if (!self.province) {
					self.province = ''
				}

				if (!self.country) {
					self.country = ''
				}
				if (!self.city) {
					self.city = ''
				}
				if (!self.openid) {
					self.openid = ''
				}

				if (!self.referee_id) {
					self.referee_id = ''
				}
				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.resetpassword.mobile)) {
				// 	uni.showToast({
				// 		title: '手机有误,请重填！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				if (!self.resetpassword.mobile) {
					uni.showToast({
						title: '手机号/会员号不能为空',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.resetpassword.code == '') {
					uni.showToast({
						title: '验证码不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.resetpassword.password.length < 6) {
					uni.showToast({
						title: '密码至少6位数！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.resetpassword.password !== self.resetpassword.repassword) {
					uni.showToast({
						title: '两次密码输入不一致！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				self.resetpassword.nickName = self.nickName;
				self.resetpassword.avatarUrl = self.avatarUrl;
				self.resetpassword.gender = self.gender;
				self.resetpassword.province = self.province;
				self.resetpassword.country = self.country;
				self.resetpassword.city = self.city;
				self.resetpassword.openid = self.openid;
				self.resetpassword.referee_id = self.referee_id;
				uni.showLoading({
					title: '正在提交'
				});
				self._post(
					'user.useropen/resetpassword',
					self.resetpassword,
					result => {
						uni.showToast({
							title: '重置成功',
							duration: 3000
						})
						self.formData.mobile = self.resetpassword.mobile;
						self.resetpassword = {
							mobile: '',
							password: '',
							repassword: '',
							code: ''
						};
						self.second = 0;
						self.changeMsg();
						self.is_login = 1;
					},
					false,
					() => {
						uni.hideLoading();
					}
				);
			},
			isCode() {
				if (this.is_code) {
					this.$set(this, 'is_code', false)
				} else {
					this.$set(this, 'is_code', true)
				}

				console.log(this.is_code)
			},
			/*发送短信*/
			sendCode() {
				let self = this;
				if (self.is_login == 1) {
					// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.mobile)) {
					// 	uni.showToast({
					// 		title: '手机有误,请重填！',
					// 		duration: 2000,
					// 		icon: 'none'
					// 	});
					// 	return;
					// }
					if (!self.formData.mobile) {
						uni.showToast({
							title: '手机号/会员号不能为空',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
				} else if (self.is_login == 2) {
					if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.register.mobile)) {
						uni.showToast({
							title: '手机有误,请重填！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
				} else if (self.is_login == 0) {
					// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.resetpassword.mobile)) {
					// 	uni.showToast({
					// 		title: '手机有误,请重填！',
					// 		duration: 2000,
					// 		icon: 'none'
					// 	});
					// 	return;
					// }
					if (!self.resetpassword.mobile) {
						uni.showToast({
							title: '手机号/会员号不能为空',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
				}

				let type = 'register'
				let mobile = self.register.mobile
				if (self.is_login == 1) {
					type = 'login';
					mobile = self.formData.mobile;
				} else if (self.is_login == 0) {
					type = 'login';
					mobile = self.resetpassword.mobile;
				}
				self._post(
					'user.useropen/sendCode', {
						mobile: mobile,
						type: type
					},
					result => {
						if (result.code == 1) {
							uni.showToast({
								title: '发送成功'
							});
							self.is_send = true;
							self.changeMsg();
						}
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
			xieyi(type) {
				let url = '';
				if (type == 'service') {
					url = this.service;
				} else {
					url = this.privacy;
				}
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				});
			}
		}
	};
</script>

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

	.p-30-75 {
		padding: 30rpx 75rpx;
	}

	.p-0-75 {
		padding: 0 75rpx;
	}

	.t-r {
		text-align: right;
	}

	.login-container {
		position: relative;
		background: #ffffff;
	}

	.login-container input {
		height: 88rpx;
		line-height: 88rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;
	}

	.login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #04be01;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.no-login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #dfdfdf;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.get-code-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 76rpx;
		padding: 0rpx 30rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		background-color: #FFFFFF;
		color: $dominant-color;
		font-size: 30rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		background-color: #FFFFFF;
	}

	.btns button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		border-radius: 45rpx;
		background-color: $dominant-color;
		color: #ffffff;
	}

	.login_topbpx {
		padding: 181rpx 0;
		padding-bottom: 110rpx;
	}

	.login_tit {
		font-size: 52rpx;
		font-weight: 600;
		margin-bottom: 33rpx;
	}

	.login_top {
		font-size: 24rpx;
		color: #adafb3;
	}

	.input_botom {
		border-bottom: 1px solid #f4f4f4;
	}

	.bottom_nav {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
	}

	.bottom-box {
		width: 70%;
		margin: 0 auto;
	}

	.other_tit {
		height: 1rpx;
		background-color: #CACACA;
		width: 100%;
		line-height: 1rpx;
		text-align: center;
	}

	.weixin_box {
		background-color: #04BE01;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.weixin_box .icon-weixin {
		font-size: 40rpx;
		color: #FFFFFF;
	}

	// .btns .bg-green{
	// 	background-color: #04BE01;
	// }
	.agreement {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #EE1413;
		background: #fff;
		position: relative;
		margin-right: 10rpx;
		box-sizing: border-box;
	}

	.agreement.active::after {
		content: '';
		width: 16rpx;
		height: 16rpx;
		background-color: #EE1413;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.skip {
		position: absolute;
		top: 80rpx;
		right: 30rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>