WenWuGuanJia/answer_pages/user/login.vue

<template>
	<view class="wrap">
		<view class="logo">
			<image :src="topImage || '/static/imgs/login_top_loading.jpg'" mode="widthFix"></image>
		</view>
		<view class="main">
			<template v-if="loginMethod === 'name_code'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-account"></view>
							<input type="text" :value="form.name" @input="onInputName" placeholder="请输入成员姓名" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.code" @input="onInputCode" placeholder="请输入登录码" />
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByNameCode">立即登录</view>
			</template>
			<template v-else-if="loginMethod === 'number_code'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-card"></view>
							<input type="text" :value="form.number" @input="onInputNumber" placeholder="请输入成员编号" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.code" @input="onInputCode" placeholder="请输入登录码" />
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByNumberCode">立即登录</view>
			</template>
			<template v-else-if="loginMethod === 'phone_captcha'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-account"></view>
							<input type="text" :value="form.phone" @input="onInputPhone" placeholder="请输入手机号" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.captcha" @input="onInputCaptcha" placeholder="请输入验证码" />
							<view class="s-captcha" :class="{ disable: captcha.second > 0 }" @click="onPhoneCaptcha">
								<text v-if="!captcha.retry && !captcha.second">获取验证码</text>
								<text v-else-if="captcha.second > 0">重新获取 {{ captcha.second }}秒</text>
								<text v-else-if="captcha.retry">重新获取</text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByPhoneCaptcha">立即登录</view>
			</template>
			<!-- #ifdef  MP-WEIXIN -->
			<button
				class="submit f-wechat open-data-btn"
				open-type="getPhoneNumber"
				@getphonenumber="onGetPhoneNumber"
				v-if="loginMethods.length === 1 && loginMethod === 'wechat_phone'"
			>
				微信快捷登录
			</button>
			<!-- #endif -->
			<view class="other" v-if="loginMethods.length >= 3 || (loginMethods.length === 2 && loginMethods.indexOf('wechat_phone') === -1)">
				<view class="split">
					<view class="s-line"></view>
					<view class="s-text">其他登录方式</view>
					<view class="s-line"></view>
				</view>
				<view class="login-method">
					<view class="b-method f-name" v-if="loginMethods.indexOf('name_code') !== -1 && loginMethod !== 'name_code'" @click="onChangeMethod('name_code')">
						<view class="iconfont icon-key"></view>
						<view class="s-text">姓名登录码</view>
					</view>
					<view class="b-method f-number" v-if="loginMethods.indexOf('number_code') !== -1 && loginMethod !== 'number_code'" @click="onChangeMethod('number_code')">
						<view class="iconfont icon-key"></view>
						<view class="s-text">编号登录码</view>
					</view>
					<view class="b-method f-phone" v-if="loginMethods.indexOf('phone_captcha') !== -1 && loginMethod !== 'phone_captcha'" @click="onChangeMethod('phone_captcha')">
						<view class="iconfont icon-phone"></view>
						<view class="s-text">手机验证码</view>
					</view>
					<!-- #ifdef  MP-WEIXIN -->
					<button
						class="b-method f-wechat open-data-btn"
						open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber"
						v-if="loginMethods.indexOf('wechat_phone') !== -1"
					>
						<view class="iconfont icon-wechat"></view>
						<view class="s-text">微信快捷登录</view>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<view class="tips">{{ loginNote }}</view>
		</view>
		<view class="select-activity" v-if="selectActivity" @click="onJumpActivity">
			<view class="iconfont icon-dashboard"></view>
		</view>
	</view>
</template>

<script>
import { loginByNameCode, loginByNumberCode, loginByPhoneCaptcha, loginByWechatPhone, sendPhoneCaptcha } from '@/service/api/user.js';
import { smartLogin } from '@/service/request/main.js';
import mixinsCommon from '@/mixins/common.js';
import { decodeRedirectUrl } from '../../common/util';
export default {
	mixins: [mixinsCommon],
	data() {
		return {
			form: {
				name: '',
				number: '',
				code: '',
				phone: '',
				captcha: ''
			},
			loginMethod: '',
			disable: {
				captcha: false,
				submit: false
			},
			captcha: {
				retry: false,
				second: 0
			}
		};
	},
	onLoad(options) {
		this.returnPage = options.from ? decodeRedirectUrl(options.from) : 'pages/home/index';
		console.log('login returnPage', this.returnPage);
		smartLogin('', true); // 判断是否扫码或进入活动列表页，因为当前页没有接口请求和权限校验
	},
	computed: {
		selectActivity() {
			return this.$store.getters.globalConfig.select_activity;
		},
		topImage() {
			return this.$store.getters.globalConfig.login_top_img;
		},
		loginNote() {
			return this.$store.getters.globalConfig.login_note || '欢迎参加答题竞赛活动。';
		},
		loginMethods() {
			// ['name_code','number_code',phone_captcha','wechat_phone']
			let loginMethods = this.$store.getters.globalConfig.login_methods || [];
			if (loginMethods.length > 0) {
				this.loginMethod = loginMethods[0];
				console.log('this.loginMethod');
			}

			return loginMethods;
		}
	},
	methods: {
		onInputName(e) {
			// console.log('onInputName', e)
			this.form.name = e.detail.value;
		},
		onInputNumber(e) {
			// console.log('onInputName', e)
			this.form.number = e.detail.value;
		},
		onInputCode(e) {
			// console.log('onInputCode', e)
			this.form.code = e.detail.value;
		},
		onInputPhone(e) {
			// console.log('onInputPhone', e)
			this.form.phone = e.detail.value;
		},
		onInputCaptcha(e) {
			// console.log('onInputCaptcha', e)
			this.form.captcha = e.detail.value;
		},
		onChangeMethod(method) {
			this.loginMethod = method;
		},
		onPhoneCaptcha() {
			if (this.disable.captcha) {
				return;
			}
			this.disable.captcha = true;
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				sendPhoneCaptcha(this.form.phone, res ? res.code : '', true).then(([err, res]) => {
					console.log('sendPhoneCaptcha', err, res);
					if (!err) {
						uni.showToast({
							title: '发送成功'
						});

						// 验证码倒计时
						this.captcha.second = 60;
						var interval = setInterval(() => {
							this.captcha.second--;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.captcha.retry = true;
							this.captcha.second = 0;
							this.disable.captcha = false;
						}, this.captcha.second * 1000);
					} else {
						this.disable.captcha = false;
					}
				});
			});
		},
		onLoginByNameCode() {
			if (this.disable.submit) {
				return;
			}
			if (!this.form.name) {
				return this.$logic.showToast('成员姓名不能为空');
			}
			if (!this.form.code) {
				return this.$logic.showToast('登录码不能为空');
			}
			this.disable.submit = true;
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				loginByNameCode(this.form.name, this.form.code, res ? res.code : '').then(([err, res]) => {
					console.log('loginByNameCode', err, res);
					this.disable.submit = false;
					if (!err) {
						this.$store.commit('setAccessToken', res.token);
						this.$store.commit('setActivityId', res.activity_id);
						this.$logic.showToast('登录成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/' + this.returnPage
							});
						});
					}
				});
			});
		},
		onLoginByNumberCode() {
			if (this.disable.submit) {
				return;
			}
			if (!this.form.number) {
				return this.$logic.showToast('成员编号不能为空');
			}
			if (!this.form.code) {
				return this.$logic.showToast('登录码不能为空');
			}
			this.disable.submit = true;
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				loginByNumberCode(this.form.number, this.form.code, res ? res.code : '').then(([err, res]) => {
					console.log('loginByNumberCode', err, res);
					this.disable.submit = false;
					if (!err) {
						this.$store.commit('setAccessToken', res.token);
						this.$store.commit('setActivityId', res.activity_id);
						this.$logic.showToast('登录成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/' + this.returnPage
							});
						});
					}
				});
			});
		},
		onLoginByPhoneCaptcha() {
			if (this.disable.submit) {
				return;
			}
			if (!this.form.phone) {
				return this.$logic.showToast('手机号不能为空');
			}
			if (!this.form.captcha) {
				return this.$logic.showToast('验证码不能为空');
			}
			this.disable.submit = true;
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				loginByPhoneCaptcha(this.form.phone, this.form.captcha, res ? res.code : '').then(([err, res]) => {
					console.log('loginByPhoneCaptcha', err, res);
					this.disable.submit = false;
					if (!err) {
						this.$store.commit('setAccessToken', res.token);
						this.$store.commit('setActivityId', res.activity_id);
						this.$logic.showToast('登录成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/' + this.returnPage
							});
						});
					}
				});
			});
		},
		onGetPhoneNumber(e) {
			console.log('onGetPhoneNumber', e);
			if (e.detail.errMsg.indexOf(':ok') === -1) {
				// fail user deny
				this.$logic.showToast(e.detail.errMsg.replace('getPhoneNumber:', ''));
				return;
			}
			uni.showLoading({
				title: '尝试登录中'
			});
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);

				loginByWechatPhone(e.detail.encryptedData, e.detail.iv, e.detail.code || '', res[1].code).then(([err, res]) => {
					console.log('loginByWechatPhone', err, res);
					uni.hideLoading();
					if (!err) {
						this.$store.commit('setAccessToken', res.token);
						this.$store.commit('setActivityId', res.activity_id);
						this.$logic.showToast('登录成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/' + this.returnPage
							});
						});
					}
				});
			});
		},
		onJumpActivity() {
			uni.redirectTo({
				url: '/answer_pages/home/dashboard'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: env(safe-area-inset-bottom);
	background: #ffffff;
}

.wrap {
}

.logo {
	image {
		width: 100%;
		height: 460upx;
	}
}

.main {
	padding: 50upx;
}

.form {
	.b-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
		border-bottom: 1upx solid #e5e5e5;
	}

	.b-input {
		flex: 1;
		padding: 0 20upx;
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;

		.s-icon {
			color: #ccc;
			font-size: 40upx;
		}

		input {
			margin-left: 30upx;
			flex: 1;
			color: #333;
			font-size: 28upx;
		}

		.s-captcha {
			padding: 0 30upx;
			background: #fff;
			border: 2upx #ccc solid;
			height: 64upx;
			line-height: 64upx;
			border-radius: 32upx;
			color: #808080;
			font-size: 24upx;

			&.disable {
				color: #999;
			}
		}
	}
}

.submit {
	margin-top: 80upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	background: #da5650;
	border-radius: 50upx;
	letter-spacing: 10upx;

	&.f-wechat {
		background: #35c773;
	}

	&.disable {
		background: rgba($color: #da5650, $alpha: 0.2);
	}
}

.split {
	margin-top: 50upx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.s-line {
		width: 200upx;
		height: 1upx;
		background: #eee;
	}

	.s-text {
		font-size: 28upx;
		color: #808080;
	}
}

.login-method {
	margin-top: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	.b-method {
		margin: 0 20upx 20upx 20upx;
		width: 250upx;
		// padding: 0 20upx;
		height: 80upx;
		border-radius: 10upx;
		background: #808080;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;

		&.f-name {
			background: #64a2fa;
		}

		&.f-number {
			background: #ee6c77;
		}

		&.f-phone {
			background: #ff9c45;
		}

		&.f-wechat {
			background: #35c773;
		}

		.iconfont {
			margin-right: 10upx;
			font-size: 40upx;
		}

		.s-text {
			font-size: 26upx;
		}
	}
}

.tips {
	margin-top: 50upx;
	width: 100%;
	color: #383838;
	font-size: 24upx;
}

.select-activity {
	position: absolute;
	bottom: 50upx;
	right: 50upx;
	background: #fff;
	border: 2upx solid #ddd;
	width: 100upx;
	height: 100upx;
	border-radius: 50upx;
	display: flex;
	align-items: center;
	justify-content: center;

	.iconfont {
		font-size: 50upx;
		color: #da5650;
	}
}
</style>