FE_occupationlab_miniProgram/pages/login/login.vue

<template>
	<view class="page">
		<view class="wrap">
			<image class="logo" src="https://eduvessel.com/images/occupationlab/hjyz-logo.png" mode="widthFix"></image>
			<button v-if="isBind" class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">快捷登录</button>
			<button v-else class="btn" @click="toAccounts">快捷登录</button>
			
			<view class="agree">
				<uni-data-checkbox class="check" multiple v-model="agree" :localdata="agreeData"></uni-data-checkbox>
				<text @click="toAgreement(0)">《用户服务协议》</text>
				<text @click="toAgreement(1)">《用户隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { studentWeChatAppletCallback, studentBinding, weChatToken } from '@/apis/modules/user.js'
	import WXBizDataCrypt from '@/libs/WXBizDataCrypt'
	export default {
		data() {
			return {
				agree: [],
				agreeData: [{
					text: '同意',
					value: 1
				}],
				sessionKey: '',
				openid: '',
				unionid: '',
				submiting: false,
				isBind: false,
				accounts: [],
			}
		},
		onShow() {
						// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjM5NTc2LCJyblN0ciI6IjZXZUtCNTdOMU9ubGhBSG53RmJwMWN0c3VuVWlyR2l5IiwiYWNjb3VudElkIjozOTU3NiwidXNlcklkIjozOTU3NSwic2Nob29sSWQiOjI4NDYsInVzZXJOYW1lIjoiYWMiLCJwbGF0Zm9ybUlkIjoiMSJ9.hYkjwTUdMMYQLXJVRmqnw3tqRvGndNAzUiVh1ClyCec')
			this.checkLogin()
		},
		methods: {
			// 检查登录状态
			checkLogin() {
				if (uni.getStorageSync('token')) {
					this.toIndex()
				} else {
					uni.clearStorageSync()
					this.submiting = false
					this.autoLogin()
				}
			},
			// 获取openid等
			autoLogin() {
				uni.login({
					success: async ({ code }) => {
						if (code) {
							this.submiting = true
							
							// 微信小程序登录
							try {
								const res = await studentWeChatAppletCallback({
									code,
									avatarUrl: ''
								})
								const { data } = res
								this.submiting = false
								const e = data.sessionKey
								this.sessionKey = e.session_key
								this.openid = e.openid
								uni.setStorageSync('sessionKey', e.session_key)
								uni.setStorageSync('openid', e.openid)
								// 如果没有绑定手机号，则显示绑定按钮，引导用户绑定，否则，直接跳到首页
								if (data.state === 'login') {
									uni.setStorageSync('token', data.token)
									this.toIndex()
								} else if (data.state === 'bind') {
									// 注册
									this.isBind = true
								} else if (data.data.userAccounts) {
									// 多个账号
									this.accounts = JSON.stringify(data.data.userAccounts)
								}
							} catch (e) {
								this.submiting = false
							}
						} else {
							this.submiting = false
							that.$util.errMsg('登录失败！')
						}
					}
				})
			},
			async toAccounts() {
				uni.setStorageSync('accounts', this.accounts)
				this.$util.to(`/user/selectAccount/selectAccount?openid=${this.openid}`)
			},
			// 绑定手机号
			async onGetPhoneNumber(e){
				if (this.submiting) return false
				const { encryptedData, iv } = e.detail
				const appId = uni.getAccountInfoSync().miniProgram.appId
				const pc = new WXBizDataCrypt(appId , this.sessionKey)
				const decData = pc.decryptData(encryptedData , iv)
				this.submiting = true
				const phone = decData.phoneNumber
				uni.setStorageSync('phone', phone)
				const { data } = await studentBinding({
					openid: this.openid,
					phone,
					platformId: 1
				})
				if (data) {
					const accounts = data.userAccounts
					if (accounts) {
						// 多个账号则前往选择账号
						uni.setStorageSync('accounts', JSON.stringify(accounts))
						this.$util.to(`/user/selectAccount/selectAccount?openid=${this.openid}&phone=${phone}`)
					} else {
						uni.setStorageSync('token', data.token)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					// 新用户则前往绑定账号
					this.$util.to(`/user/reg/reg?openid=${this.openid}&phone=${phone}`)
				}
			},
			toAgreement(id) {
				this.$util.to(id ? `/course/privacyAgreement/privacyAgreement` : `/course/serviceAgreement/serviceAgreement`)
			},
			// 跳转到首页
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	min-height: calc(100vh - 170rpx);
	padding-top: 170rpx;
	background: url(https://eduvessel.com/images/occupationlab/login1.png) 0 0/175rpx auto no-repeat,
		url(https://eduvessel.com/images/occupationlab/login2.png) bottom right/123rpx auto no-repeat;
	overflow: hidden;
}
.wrap {
	position: relative;
	height: 60vh;
	padding: 214rpx 74rpx 28rpx;
	margin: 0 61rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 20rpx;
	.logo {
		width: 500rpx;
		margin-bottom: 80rpx;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		margin-bottom: 50rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #007EFF;
		border-radius: 10rpx;
	}
	.agree {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #ccc;
		text {
			color: #007EFF;
		}
	}
	/deep/.check {
		.checklist-box {
			margin: 0;
		}
		.checkbox__inner {
			width: 40rpx !important;
			height: 40rpx !important;
			border-radius: 50% !important;
		}
		.checkbox__inner-icon {
			top: 8rpx !important;
			left: 14rpx !important;
		}
	}
}
</style>