mp_exhibitor_miniprog/pages/user/login.vue

<template>
	<view class="user-login">
		<nav-bar :transparent="true" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
				<view class="user-login-box">
					<view class="user-login-logo">
						<image src="/static/img/logo.jpg" mode="aspectFill" />
					</view>
					<view class="user-login-button">
						<van-button type="primary" size="large" :open-type="protocolChecked?'getPhoneNumber': ''" @getphonenumber="onPhoneLogin" @click="onPhoneLoginClick">手机号快捷登录</van-button>
						<van-button type="default" size="large" @click="onPhoneLoginOther">其它手机号登录</van-button>
					</view>
					<view class="user-login-protocol" :class="{ 'protocol-shake': protocolShake }">
						<van-checkbox :value="protocolChecked" shape="square" @change="onCheckChange">
							<view class="user-login-protocol-text">
								<text>我已仔细阅读主办方的</text>
								<text class="link-text" @click="navigateTo('https://www.productronicachina.com.cn/%E9%9A%90%E7%A7%81%E6%9D%A1%E6%AC%BE')">《隐私政策》</text>
								<text>和</text>
								<text class="link-text" @click="navigateTo('https://www.productronicachina.com.cn/%E6%B3%95%E5%BE%8B%E4%BF%A1%E6%81%AF')">《法律条款》</text>
								<text>的全部内容并同意尊守</text>
							</view>
						</van-checkbox>
					</view>
				</view>
			</view>
			<van-overlay :show="showPhoneLogin" @click="onClickPhoneLoginOverlay">
			  <view class="user-phone-login-wrapper">
					<view class="user-phone-login" @click.stop>
					  <view>获取手机号</view>
						<view class="input-phone-number">
							 <input v-model="phoneNumber" placeholder="请输入手机号" type="number" />
							 <view v-if="phoneNumber" class="clear" @click="onClearPhoneNumber" ><van-icon name="clear" /></view>
						</view>
						<view class="input-check-code">
							 <input v-model="validCode" placeholder="请输入短信验证码" type="number" maxlength="6"/>
							 <view v-if="validCode" class="clear" @click="onClearCheckCode" ><van-icon name="clear" /></view>
							 <van-button type="primary" :loading="validCodeLoading" :disabled="countDown > 0" @click="onSendValidCode">
								<template v-if="countDown === 0">
									发送验证码
								</template>
								<template v-else>
									重新发送（{{ countDown }}s）
								</template>
							 </van-button>
						</view>
						<view class="user-phone-login-protocol" :class="{ 'protocol-shake': protocolShake }">
							<van-checkbox :value="protocolChecked" shape="square" @change="onCheckChange">	
								<view class="user-login-protocol-text">
									<text>我已仔细阅读主办方的</text>
									<text class="link-text" @click="navigateTo('https://www.productronicachina.com.cn/%E9%9A%90%E7%A7%81%E6%9D%A1%E6%AC%BE')">《隐私政策》</text>
									<text>和</text>
									<text class="link-text" @click="navigateTo('https://www.productronicachina.com.cn/%E6%B3%95%E5%BE%8B%E4%BF%A1%E6%81%AF')">《法律条款》</text>
									<text>的全部内容并同意尊守</text>
								</view>
							</van-checkbox>
						</view>
						<view class="submit">
							<van-button type="primary" :loading="loginLoading" size="large" @click="onPhoneSubmit">提交</van-button>
						</view>
					</view>
				</view>
			</van-overlay>
			<van-dialog 
				:show.sync="showGetProfile" 
				title="登录成功"
				message="设置您的的头像和呢称？" 
				show-cancel-button
				confirm-button-open-type="chooseAvatar"
				@chooseavatar="onConfirmGetProfile" 
				@cancel="onCancelGetProfile"
			>
			</van-dialog>
		</u-scroll-view>
	</view>
</template>

<script>
	import { login, wechatLogin, getInfo, updateInfo, phoneLogin, getSmsCode } from '@/api/user'
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import VanCheckbox from '@/wxcomponents/vant/checkbox/index'
	import VanOverlay from '@/wxcomponents/vant/overlay/index'
	import VanDialog from '@/wxcomponents/vant/dialog/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			VanCheckbox,
			VanOverlay,
			UScrollView,
			VanDialog
		},
		data() {
			return {
				showGetProfile: false,
				protocolChecked: false,
				protocolShake: false,
				showPhoneLogin: false,
				phoneNumber: '',
				validCode: '',
				validCodeLoading: false,
				redirectUrl: '',
				uesrId: 0,
				countDown: 0,
				countDownTimer: null,
				loginLoading: false
			}
		},
		onLoad(options) {
			if (options.redirect) {
				this.redirectUrl = decodeURIComponent(options.redirect)
			} else {
				this.redirectUrl = ''
			}
		},
		created() {
			const openId = uni.getStorageSync('openId')
			uni.login({
				provider: 'weixin',
				success: res => {
					wechatLogin({
						code: res.code
					}).then(res => {
						uni.setStorageSync('openId', res.data)
					})
				}
			})
		},
		methods: {
			onSendValidCode() {
				this.phoneNumber = this.phoneNumber.trim()
				if (!this.checkProtocol()) {
					return
				}
				if (!this.phoneNumber) {
					this.showToast('请填写手机号')
					return
				}
				this.validCodeLoading = true
				getSmsCode({
					phone: this.phoneNumber
				}).then(res => {
					this.validCodeLoading = false
					this.showToast('短信已发送')
					this.countDown = 60
					this.countDownTimer = setInterval(() => {
						this.countDown--
						if (this.countDown === 0) {
							clearInterval(this.countDownTimer)
							this.countDownTimer = null
						}
					}, 1000)
				})
			},
			checkProtocol() {
				if (!this.protocolChecked) {
					this.showToast('请查看协议并同意')
					this.protocolShake = true
					setTimeout(() => {
						this.protocolShake = false
					}, 500)
				}
				return this.protocolChecked
			},
			onCancelGetProfile() {
				this.redirectTo(this.redirectUrl || '/pages/user/index')
			},
			onConfirmGetProfile(e) {
				let pagePath = '/pages/user/info-edit?avatar=' + encodeURIComponent(e.avatarUrl)
				if (this.redirectUrl) {
					pagePath += '&redirect=' + encodeURIComponent(this.redirectUrl)
				}
				this.redirectTo(pagePath)
			},
			onCheckChange(checked) {
				this.protocolChecked = checked
			},
			onClickPhoneLoginOverlay() {
				this.showPhoneLogin = false
			},
			onClearPhoneNumber() {
				this.phoneNumber = ''
			},
			onClearCheckCode() {
				this.checkCode = ''
			},
			onPhoneLoginClick() {
				this.checkProtocol()
			},
			onPhoneLogin(e) {
				const openId = uni.getStorageSync('openId')
				if (e.detail.code) {
					login({
						open_id: openId,
						code: e.detail.code,
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						if (res.data) {
							this.$store.commit('SET_TOKEN', res.data)
							this.$store.dispatch('getInfo').then(res => {
								const user = res.data
								if (!user.nick_name || !user.avatar) {
									this.showGetProfile = true
								} else {
									this.redirectTo(this.redirectUrl || '/pages/user/index')
								}
							})
						} else {
							this.showToast('微信服务器忙线中，稍候再试')
						}
					})
				}
			},
			onPhoneLoginOther() {
				this.showPhoneLogin = true
			},
			onPhoneSubmit() {
				const openId = uni.getStorageSync('openId')
				if (!this.checkProtocol()) {
					return
				}
				this.phoneNumber = this.phoneNumber.trim()
				this.validCode = this.validCode.trim()
				if (!this.phoneNumber) {
					this.showToast('请填写手机号')
					return
				}
				if (!this.validCode) {
					this.showToast('请填写验证码')
					return
				}
				this.loginLoading = true
				phoneLogin({
					phone: this.phoneNumber,
					valid_code: this.validCode,
					open_id: openId
				}).then(res => {
					console.log("手机验证码登录：", res)
					this.loginLoading = false
					if (res.data) {
						this.$store.commit('SET_TOKEN', res.data)
						this.$store.dispatch('getInfo').then(res => {
							const user = res.data
							if (!user.nick_name || !user.avatar) {
								this.showGetProfile = true
							} else {
								this.redirectTo(this.redirectUrl || '/pages/user/index')
							}
						})
						this.showPhoneLogin = false
					} else {
						this.showToast('微信服务器忙线中，稍候再试')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.user-login{
	.main-container{
		@include display-flex-center;
		flex-direction: column;
		height: 100%;
	}
	.user-login-box{
		width: 565rpx;
	}
	.user-login-logo{
		width: 377rpx;
		height: 93rpx;
		margin: 0 auto;
	}
	.user-login-button{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 22rpx;
		margin-top: 254rpx;
	}
	.user-login-protocol-text{
		margin-top: 39rpx;
		font-size: $fontSize2;
		color: #555555;
		line-height: 30rpx;
	}
	.user-phone-login-wrapper{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.user-phone-login{
		width: 670rpx;
		padding: 51rpx 59rpx 96rpx 59rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		&>view:first-child{
			font-size: $fontSize3;
			color: #333333;
			text-align: center;
		}
		.input-phone-number{
			margin-top: 54rpx;
			border-bottom: 1rpx solid #D9D9D9;
			padding-bottom: 31rpx;
			height: 60rpx;
		}
		.input-phone-number,.input-check-code{
			position: relative;
			font-size: $fontSize3;
			.clear{
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 1;
			}
			.van-icon {
				color: #555555;
			}
		}
		.input-check-code{
			display: flex;
			align-items: center;
			margin-top: 44rpx;
			.van-button{
				width: 205rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
			.clear{
				top: 26rpx;
				right: 250rpx;
			}
			input{
				flex: 1;
			}
			padding-bottom: 0;
		}
		.submit{
			margin-top: 50rpx;
		}
	}
	/* 定义振动动画 */
	@keyframes shake {
	  0% {
	    transform: translateX(0);
	  }
	  25% {
	    transform: translateX(-10rpx);
	  }
	  50% {
	    transform: translateX(10rpx);
	  }
	  75% {
	    transform: translateX(-10rpx);
	  }
	  100% {
	    transform: translateX(0);
	  }
	}
	.protocol-shake {
	  display: inline-block; 
	  animation: shake 0.3s ease-in-out infinite;
	}
}
</style>