lucky_shop/pages_tool/login/login.vue

<template>
	<view :style="themeColor">
		<scroll-view scroll-y="false" class="container">
			<view class="header-wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/member/head.png') + ')' }">
				<view class="t-b">
					<div v-html="$lang('common.list.welcome_text')"></div>
				</view>
			</view>
			<view class="body-wrap">
				<view class="form-wrap">
					<view class="input-wrap" v-show="loginMode == 'mobile'">
						<view class="content">
							<!-- 	<view class="area-code">+86</view> -->
							<input type="number" :placeholder="$lang('login.list.mobile_input_placeholder')"
								placeholder-class="input-placeholder" class="input" maxlength="11"
								v-model="formData.mobile" />
						</view>
					</view>
					<view class="input-wrap" v-show="loginMode == 'account'">
						<view class="content">
							<input type="text" :placeholder="$lang('member.list.account_input_placeholder')"
								placeholder-class="input-placeholder" class="input" v-model="formData.account" />
						</view>
					</view>
					<view class="input-wrap" v-show="loginMode == 'account'">
						<view class="content">
							<input type="password" :placeholder="$lang('login.list.password_input_placeholder')"
								placeholder-class="input-placeholder" class="input" v-model="formData.password" />
							<view class="align-right" v-show="loginMode == 'account'">
								<text @click="forgetPassword" @tap="forgetPassword">{{ $lang('login.list.forget_password_text') }}</text>
							</view>
						</view>
					</view>
					<view class="input-wrap" v-show="loginMode == 'mobile'">
						<view class="content">
							<input type="text" :placeholder="$lang('login.list.dynacode_input_placeholder')"
								placeholder-class="input-placeholder" class="input" v-model="formData.dynacode" />
							<view class="dynacode"
								:class="dynacodeData.seconds == 120 ? 'color-base-text' : 'color-tip'"
								@click="sendMobileCode" @tap="sendMobileCode">{{ dynacodeData.codeText }}</view>
						</view>
					</view>
				</view>

				<view class="btn_view">
					<button type="primary" @click="login" @tap="login" class="login-btn color-base-border color-base-bg"
						style="background: #2796f2 !important;border: none;">{{ $lang('login.list.login_button_text') }}</button>
				</view>
				<view class="regisiter-agreement"
					style="margin: 0 50rpx;padding-top: 40rpx;line-height: 1.5;display: flex;">
					<!-- #ifndef MP-HARMONY -->
					<view style="" class="iconfont"
						:class="isAgree ? 'icon-fuxuankuang1 color-base-text' : 'icon-fuxuankuang2'"
						@click="isAgree = !isAgree" @tap="isAgree = !isAgree"></view>
					<!-- #endif	-->
					<view style="text-align: left;margin-left: 10rpx;padding-top: 2rpx;">{{
						$lang('login.list.register_agreement_text') }} <text @click="tourl('/pages_tool/agreement/contenr?type=0')"
							@tap="tourl('/pages_tool/agreement/contenr?type=0')"
							style="color:#4395ff">{{ $lang('login.list.privacy_policy_text') }}</text> <text
							@click="tourl('/pages_tool/agreement/contenr?type=1')"
							@tap="tourl('/pages_tool/agreement/contenr?type=1')"
							style="color:#4395ff">{{ $lang('login.list.user_service_agreement_text') }}</text></view>
				</view>
			</view>
			<loading-cover ref="loadingCover"></loading-cover>
			<register-reward ref="registerReward"></register-reward>
		</scroll-view>
	</view>
</template>

<script>
import validate from 'common/js/validate.js';

export default {
	data() {
		return {
			isAgree: false,
			// loginMode: 'account',
			loginMode: 'mobile',
			formData: {
				mobile: '',
				account: '',
				password: '',
				vercode: '',
				dynacode: '',
				key: ''
			},
			captcha: {
				id: '',
				img: ''
			},
			isSub: false, // 提交防重复
			back: '', // 返回页
			redirect: 'redirectTo', // 跳转方式
			dynacodeData: {
				seconds: 120,
				timer: null,
				codeText: this.$lang('login.list.get_dynacode'),
				isSend: false
			},
			registerConfig: {
				register: 'mobile',
				login: ''
			},
			captchaConfig: 0,
			authInfo: null
		};
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		this.getRegisterConfig();
		// this.getCaptchaConfig();
		this.authInfo = uni.getStorageSync('authInfo');
	},
	onShow() { },
	onReady() {
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
	},
	methods: {
		/**
		 * 获取验证码配置
		 */
		getCaptchaConfig() {
			this.$api.sendRequest({
				url: '/api/config/getCaptchaConfig',
				success: res => {
					if (res.code >= 0) {
						this.captchaConfig = res.data.shop_reception_login;
						if (this.captchaConfig == 1) this.getCaptcha();
					}
				}
			});
		},
		/**
		 * 获取注册配置
		 */
		getRegisterConfig() {
			this.$api.sendRequest({
				url: '/api/register/config',
				success: res => {
					if (res.code >= 0) {
						// this.registerConfig = res.data.value;
						// if (this.registerConfig.login.indexOf('mobile') != -1) this.loginMode = 'mobile';
						// else this.loginMode = 'account';
					}
				}
			});
		},
		/**
		 * 切换登录方式
		 */
		switchLoginMode() {
			this.loginMode = this.loginMode == 'mobile' ? 'account' : 'mobile';
		},
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			if (this.captchaConfig == 0) return;
			this.$api.sendRequest({
				url: '/api/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
					}
				}
			});
		},
		/**
		 * 去注册
		 */
		toRegister() {
			if (this.back) this.$util.redirectTo('/pages_tool/login/register', {
				back: encodeURIComponent(this.back)
			});
			else this.$util.redirectTo('/pages_tool/login/register');
		},
		/**
		 * 忘记密码
		 */
		forgetPassword() {
			if (this.back) this.$util.redirectTo('/pages_tool/login/find', {
				back: encodeURIComponent(this.back)
			});
			else this.$util.redirectTo('/pages_tool/login/find');
		},
		tourl(url) {
			this.$util.redirectTo(url);
		},
		/**
		 * 登录
		 */
		login() {
			// #ifndef MP-HARMONY
			if (!this.isAgree) {
				this.$util.showToast({
					title: this.$lang('login.list.agree_agreement_tip')
				});
				return false;
			}
			// #endif
			if (this.loginMode == 'account') {
				var url = '/api/login/login';
				data = {
					username: this.formData.account,
					password: this.formData.password
				};
			} else {
				var url = '/api/login/mobile',
					data = {
						mobile: this.formData.mobile,
						key: this.formData.key,
						code: this.formData.dynacode
					};
			}
			if (this.captcha.id != '') {
				data.captcha_id = this.captcha.id;
				data.captcha_code = this.formData.vercode;
			}
			if (this.authInfo) Object.assign(data, this.authInfo);
			if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');

			if (this.verify(data)) {
				if (this.isSub) return;
				this.isSub = true;
				this.$api.sendRequest({
					url,
					data,
					success: res => {
						if (res.code >= 0) {
							var can_receive_registergift = res.data.can_receive_registergift;
							this.$store.commit('setToken', res.data.token);
							this.$store.dispatch('getCartNumber');
							this.getMemberInfo(() => {
								if (can_receive_registergift == 1) {
									this.$util.showToast({
										title: this.$lang('login.list.login_success_tip')
									});
									let back = this.back ? this.back : this.$util.MEMBER_PAGE_URL;
									if (this.$refs.registerReward) this.$refs.registerReward.open(back);
								} else {
									if (this.back != '') {
										this.$util.redirectTo(decodeURIComponent(this.back), {}, 'reLaunch');
									} else {
										this.$util.redirectTo(this.$util.MEMBER_PAGE_URL, {}, 'reLaunch');
									}
								}
							});
						} else {
							this.isSub = false;
							this.getCaptcha();
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.getCaptcha();
					}
				});
			}
		},
		/**
		 * 登录验证
		 * @param {Object} data
		 */
		verify(data) {
			let rule = [];
			// 手机号验证
			if (this.loginMode == 'mobile') {
				rule = [{
					name: 'mobile',
					checkType: 'required',
					errorMsg: this.$lang('login.list.enter_mobile_tip')
				}, {
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: this.$lang('login.list.enter_correct_mobile_tip')
				}];
				if (this.captchaConfig == 1) {
					if (this.captcha.id != '') rule.push({
						name: 'captcha_code',
						checkType: 'required',
						errorMsg: this.$lang('login.list.captcha_placeholder')
					});
				}
				rule.push({
					name: 'code',
					checkType: 'required',
					errorMsg: this.$lang('login.list.dynacode_placeholder')
				});
			}

			// 账号验证
			if (this.loginMode == 'account') {
				rule = [{
					name: 'username',
					checkType: 'required',
					errorMsg: this.$lang('member.list.account_placeholder')
				},
				{
					name: 'password',
					checkType: 'required',
					errorMsg: this.$lang('login.list.password_placeholder')
				}
				];
				if (this.captchaConfig == 1) {
					if (this.captcha.id != '') rule.push({
						name: 'captcha_code',
						checkType: 'required',
						errorMsg: this.$lang('login.list.captcha_placeholder')
					});
				}
			}

			var checkRes = validate.check(data, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({
					title: validate.error
				});
				return false;
			}
		},
		mobileAuthLogin(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				var data = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				};
				if (Object.keys(this.authInfo).length) {
					Object.assign(data, this.authInfo);
					if (this.authInfo.nickName) data.nickname = this.authInfo.nickName;
					if (this.authInfo.avatarUrl) data.headimg = this.authInfo.avatarUrl;
				}
				if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');

				if (this.isSub) return;
				this.isSub = true;

				this.$api.sendRequest({
					url: '/api/tripartite/mobileauth',
					data,
					success: res => {
						if (res.code >= 0) {
							var can_receive_registergift = res.data.can_receive_registergift;
							this.$store.commit('setToken', res.data.token);
							this.$store.dispatch('getCartNumber');
							this.getMemberInfo(() => {
								if (can_receive_registergift == 1) {
									let back = this.back ? this.back : this.$util.MEMBER_PAGE_URL;
									if (this.$refs.registerReward) this.$refs.registerReward.open(back);
								} else {
									if (this.back != '') {
										this.$util.redirectTo(decodeURIComponent(this.back), {}, this.redirect);
									} else {
										this.$util.redirectTo(this.$util.MEMBER_PAGE_URL, {}, this.redirect);
									}
								}
							})

						} else {
							this.isSub = false;
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.$util.showToast({
							title: this.$lang('common.list.request_fail_tip')
						});
					}
				});
			}
		},
		/**
		 * 发送手机动态码
		 */
		sendMobileCode() {
			if (this.dynacodeData.seconds != 120 || this.dynacodeData.isSend) return;
			var data = {
				mobile: this.formData.mobile,
				captcha_id: this.captcha.id,
				captcha_code: this.formData.vercode
			};
			var rule = [{
				name: 'mobile',
				checkType: 'required',
				errorMsg: $lang('common.ns-login.l16.t0')
			}, {
				name: 'mobile',
				checkType: 'phoneno',
				errorMsg: $lang('common.ns-login.l393.t0')
			}];
			if (this.captchaConfig == 1) {
				rule.push({
					name: 'captcha_code',
					checkType: 'required',
					errorMsg: this.$lang('login.list.enter_captcha_tip')
				});
			}
			var checkRes = validate.check(data, rule);
			if (!checkRes) {
				this.$util.showToast({
					title: validate.error
				});
				return;
			}
			this.dynacodeData.isSend = true;
			this.dynacodeData.timer = setInterval(() => {
				this.dynacodeData.seconds--;
				this.dynacodeData.codeText = this.dynacodeData.seconds + $lang('common.ns-login.l414.t0');
			}, 1000);

			this.$api.sendRequest({
				url: '/api/login/mobileCode',
				data: data,
				success: res => {
					if (res.code >= 0) {
						this.formData.key = res.data.key;
					} else {
						this.refreshDynacodeData();
						this.$util.showToast({
							title: res.message
						});
					}
				},
				fail: () => {
					this.$util.showToast({
						title: 'request:fail'
					});
					this.refreshDynacodeData();
				}
			});
		},
		refreshDynacodeData() {
			this.getCaptcha();
			clearInterval(this.dynacodeData.timer);
			this.dynacodeData = {
				seconds: 120,
				timer: null,
				codeText: $lang('common.ns-login.l169.t0'),
				isSend: false
			};
		},
		getMemberInfo(callback) {
			this.$api.sendRequest({
				url: '/api/member/info',
				success: (res) => {
					if (res.code >= 0) {
						// 登录成功，存储会员信息
						this.$store.commit('setMemberInfo', res.data);
						if (callback) callback();
					}
				}
			});
		}
	},
	watch: {
		'dynacodeData.seconds': {
			handler(newValue, oldValue) {
				if (newValue == 0) {
					this.refreshDynacodeData();
				}
			},
			immediate: true,
			deep: true
		}
	}
};
</script>

<style lang="scss">
@import './public/css/common.scss';

.color-base-text {
	color: #2796f2 !important
}
</style>

<style lang="scss" scoped>
::v-deep .reward-popup .uni-popup__wrapper-box {
	background: none !important;
	max-width: unset !important;
	max-height: unset !important;
	overflow: unset !important;
}

::v-deep uni-toast .uni-simple-toast__text {
	background: red !important;
}
</style>