FE_preschoolEdu_miniProgram/pages/login/login.vue

<template>
	<view class="page">
		<view class="wrap">
			<!-- <image class="logo" src="@/static/image/logo.png" mode="widthFix"></image> -->
			<view class="hello">幼教产业B2B产业平台登录</view>
			<template v-if="isLogin">
				<button class="btn phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
					<image src="@/static/image/phone.png" mode="widthFix"></image>
					{{ isReg ? '获取手机号' : '绑定手机'}}
				</button>
			</template>
			<template v-else>
				<view class="btn wechat" @click="login">
					快捷登录
				</view>
			</template>
			<view class="tips">如果没有账号会自动创建账号</view>
			
			<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>
		
		<!-- 选择角色 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="type-wrap">
				<view class="title-wrap">
					<view class="title">请选择注册类型</view>
					<!-- <uni-icons class="close" type="closeempty" size="20" color="#333"></uni-icons> -->
				</view>
				
				<view class="types">
					<view class="item" @click="toReg(5)">
						<view class="icon">
							<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon1.png" mode="widthFix" />
						</view>
						<view class="text">我是幼儿园</view>
					</view>
					<view class="item item2" @click="toReg(6)">
						<view class="icon">
							<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon2.png" mode="widthFix" />
						</view>
						<view class="text">我是供应商</view>
					</view>
					<view class="item item3" @click="toReg(7)">
						<view class="icon">
							<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon3.png" mode="widthFix" />
						</view>
						<view class="text">我是个人</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 上传头像 -->
		<uni-popup ref="uploadAvatarPop" background-color="#fff" type="bottom" :mask-click="false">
			<view class="avatar-wrap">
				<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				    <image class="avatar" :src="avatar ? avatar : Common.avatar" mode=""></image>
				</button>
				<view class="text">请选择头像</view>
				<view class="btn" @click="showPlatform">下一步</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { login, userBinding, getSessionKey, kindergartenWeChatApplication, saveCertification, loginWithPhoneNumber, updateAvatars } from '@/apis/modules/user.js'
	import WXBizDataCrypt from '@/libs/WXBizDataCrypt'
	import OSS from '@/libs/Oss/upload'
	import Common from '@/config/common'
	export default {
		data() {
			return {
				Common,
				agree: [],
				agreeData: [{
					text: '同意',
					value: 1
				}],
				isLogin: false, // 是否已登录
				isReg: false, // 是否是注册
				sessionKey: '',
				openid: '',
				unionid: '',
				code: '',
				phone: '',
				submiting: false,
				teamName: '',
				// avatar: Common.avatar,
				avatar: '',
			}
		},
		onShow() {
			// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNzA0Nzg1NDg5LCJleHAiOjE3MDU2NDk0ODksImFjY291bnRJZCI6IjQ5ODMiLCJzaG9wSWQiOjYsInBsYXRmb3JtSWQiOjV9.B0gXKl9gOEi9oSNZl8M_gGcqFXf9hAYbqtVHygDoYxM')
			// uni.setStorageSync('openId', 'o3hKk60jbhAuLm4K3weIgQGFmv2g')
			// 先授权用户信息，再授权手机号
			this.checkLogin()
		},
		methods: {
			// 检查登录状态
			checkLogin() {
				if (uni.getStorageSync('token')) {
					this.toIndex()
				} else {
					uni.clearStorageSync()
					this.isLogin = false
				}
			},
			// 授权用户信息
			login() {
				this.isReg = false
				if (this.agree.length) {
					if (this.submiting) return false
					const that = this
					uni.getUserProfile({
						lang: 'zh_CN',
						desc: '登录',
						success: ({ userInfo }) => {
							uni.setStorageSync('userName', userInfo.nickName)
							uni.setStorageSync('avatar', userInfo.avatarUrl)
							uni.login({
								success: ({ code }) => {
									if (code) {
										this.submiting = true
										login({
											code,
											avatarUrl: userInfo.avatarUrl,
										}).then(({ data }) => {
											const { sessionKey, state } = data
											this.submiting = false
											// 用户不存在，则让用户授权手机号，直接让用户选择角色注册
											if (state === 'bind') {
												this.submiting = false
												this.code = code
												this.openid = sessionKey.openid
												this.sessionKey = sessionKey.session_key
												this.isLogin = true
												this.isReg = true
											} else {
												const e = data.sessionKey
												uni.setStorageSync('token', data.token)
												uni.setStorageSync('platformId', data.platformId)
												uni.setStorageSync('openId', e.openid)
												this.handleTab(data.platformId)
												this.toIndex()
											}
										}).catch(e => {
											this.submiting = false
										})
									} else {
										this.submiting = false
										that.$util.errMsg('登录失败！')
									}
								}
							})			
						},
						fail(res) {
							that.$util.errMsg('登录授权失败！')
						}
					})
				} else {
					this.$util.errMsg('请先阅读勾选协议！')
				}
			},
			// 绑定手机号
			async onGetPhoneNumber(e){
				if (this.submiting) return false
				const { encryptedData, iv } = e.detail
				// 获取手机号有两种方法，1.前端使用js完成；2.使用接口完成
				// const WXBizDataCrypt = require('@/libs/WXBizDataCrypt')
				const accountInfo = uni.getAccountInfoSync() // 获取小程序appid
				const pc = new WXBizDataCrypt(accountInfo.miniProgram.appId , this.sessionKey)
				const data = pc.decryptData(encryptedData , iv)
				this.submiting = true
				const phone = data.phoneNumber
				this.phone = phone
				if (this.isReg) { // 注册
					// 传手机号获取该手机号是否绑定了用户
					const res = await loginWithPhoneNumber({
						code: this.code,
						openId: this.openid,
						phone
					})
					if (res.data && res.data.platformId) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('platformId', +res.data.platformId)
						uni.setStorageSync('openId', res.data.openId)
						// uni.setStorageSync('teamId', data.teamId)
					} else {
						this.$refs.uploadAvatarPop.open()
						this.submiting = false
					}
				} else { // 登录绑定手机号
					userBinding({
						openid: this.openid,
						phone,
						unionid: this.unionid,
						platformId: 4
					}).then(res => {
						const { token, status } = res
						if (status == 10014) {
							// 这里需要再调一次uni的login，因为code用过了一次，已经失效了
							uni.login({
								success: ({ code }) => {
									getSessionKey({
										code,
									}).then(({ sessionKey }) => {
										this.sessionKey = sessionKey.session_key
										this.openid = sessionKey.openid
										this.$util.to(`../reg/reg?openid=${this.openid}&phone=${phone}`)
									}).catch(e => {})
									this.isReg = true
								}
							})
						} else {
							this.submiting = false
							uni.setStorageSync('token', token)
							this.toIndex()
						}
					}).catch(e => {
						this.submiting = false
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					})
				}
			},
			// 注册申请授权
			async toReg(platformId) {
				if (this.submiting) return false
				this.submiting = true
				try {
					const { data } = await kindergartenWeChatApplication({
						code: this.code,
						openId: this.openid,
						platformId,
						phone: this.phone
					})
					this.teamName = data.teamName
					uni.setStorageSync('token', data.token)
					uni.setStorageSync('platformId', platformId)
					uni.setStorageSync('openId', data.openId)
					uni.setStorageSync('teamId', data.teamId)
					
					// 选择的是供应商或者幼儿园，则加一个未提交的审核状态
					if (platformId === 5 || platformId === 6) {
						await saveCertification({
							openId: data.openId,
							auditStatus: 0,
							platformSource: platformId,
							companyName: this.teamName
						})
					}
					this.handleTab(platformId)
					
					// 有上传头像则调上传头像接口
					if (this.avatar) {
						await updateAvatars({
							url: this.avatar,
							userName: '',
							openId: data.openId,
							platformId
						})
					}
					this.toIndex()
				} catch(e) {
					this.submiting = false
				}
			},
			toAgreement(id) {
				this.$util.openFile(id)
			},
			// 供应商需要隐藏tab里的供应商入口
			handleTab(platformId) {
				platformId == 6 && uni.setTabBarItem({
					index: 1,
					visible: false
				})
			},
			// 跳转到首页
			toIndex() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			// 上传头像回调
			onChooseAvatar(e) {
				OSS(e.detail.avatarUrl, async ({ url }) => {
					this.avatar = url
				})
			},
			// 弹出选择角色弹框
			showPlatform() {
				this.$refs.uploadAvatarPop.close()
				this.$refs.popup.open('bottom')
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	min-height: calc(100vh - 170rpx);
	padding-top: 170rpx;
	background: url(@/static/image/login1.png) 0 0/175rpx auto no-repeat,
		url(@/static/image/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: 393rpx;
	}
	.hello {
		margin: 36rpx 0;
		font-size: 28rpx;
		color: #333;
	}
	.tips {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #adadad;
		text-align: right;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		font-size: 32rpx;
		border-radius: 10rpx;
		image {
			width: 50rpx;
			margin-right: 15rpx;
		}
	}
	.wechat {
		margin-bottom: 38rpx;
		color: #fff;
		background-color: #007EFF;
	}
	.phone {
		color: #007EFF;
		border: 1px solid #007EFF;
		background-color: #fff;
		image {
			width: 40rpx;
		}
	}
	.reg {
		font-size: 28rpx;
		color: #e61717;
		text-align: right;
	}
	.agree {
		position: absolute;
		bottom: 28rpx;
		left: 0%;
		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;
		}
	}
}
.type-wrap {
	width: 100%;
	padding: 30rpx 30rpx 60rpx;
	background-color: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	box-sizing: border-box;
	.title-wrap {
		display: flex;
		justify-content: space-between;
	}
	.title {
		font-size: 28rpx;
		color: #333;
	}
	.types {
		width: 95%;
		margin: 0 auto;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
	}
	.item {
		display: flex;
		align-items: center;
		height: 150rpx;
		padding: 0 50rpx;
		margin-top: 30rpx;
		border-radius: 12px;
		background: url('http://124.71.79.122/images/miniProgram/role-bg1.png') 0 0/100% 100% no-repeat;
		box-sizing: border-box;
	}
	.icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		margin-right: 20rpx;
		background-color: #fff7f1;
		border-radius: 50%;
	}
	.img {
		width: 80rpx;
	}
	.text {
		font-size: 24rpx;
		color: #fff;
	}
	.item2 {
		background-image: url('http://124.71.79.122/images/miniProgram/role-bg2.png');
	}
	.item3 {
		background: #ffb150;
		.img {
			width: 70rpx;
		}
	}
}
.avatar-wrap {
	padding: 30rpx 0;
	.avatar-btn {
		padding: 0;
		line-height: 0;
		border: 0 !important;
		background-color: transparent;
		outline: none;
		border-radius: 50%;
		&:after {
			display: none;
		}
	}
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border: 0;
		border-radius: 50%;
	}
	.text {
		margin-top: 10rpx;
		font-size: 26rpx;
		text-align: center;
		color: #7d7d7d;
	}
	
	.btn {
		width: 300rpx;
		padding: 20rpx 0;
		margin: 30rpx auto 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		background-color: $uni-primary;
		border-radius: 20px;
	}
}
</style>