FE_nakadai_miniProgram/pages/login/login.vue

<template>
	<view class="page">
		<view class="wrap">
			<image class="logo" src="@/static/image/logo.png" mode=""></image>
			<view class="hello">Hi，欢迎使用或然科技产业平台运营版，请登录</view>
			<button v-if="isLogin && !getPhone" class="btn phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				<image src="@/static/image/phone.png" mode="widthFix"></image>
				绑定手机
			</button>
			<template v-else>
				<view class="btn wechat" @click="login">
					<image src="@/static/image/wechat.png" mode="widthFix"></image>
					微信授权登录
				</view>
			</template>
			
			<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 { login, userBinding } from '@/apis/modules/user.js'
	import WXBizDataCrypt from '@/libs/WXBizDataCrypt'
	export default {
		data() {
			return {
				agree: [],
				agreeData: [{
					text: '同意',
					value: 1
				}],
				isLogin: false, // 是否已登录
				getPhone: false ,// 是否已授权手机号
				sessionKey: '',
				openId: '',
				unionid: '',
				submiting: false
			}
		},
		onShow() {
			// 先授权用户信息，再授权手机号
			this.checkLogin()
		},
		methods: {
			// 检查登录状态
			checkLogin() {
				if (uni.getStorageSync('token')) {
					this.toIndex()
				} else {
					uni.clearStorageSync()
					this.isLogin = false
					this.getPhone = false
				}
			},
			// 授权用户信息
			login() {
				if (this.agree.length) {
					if (this.submiting) return false
					const that = this
					uni.getUserProfile({
						lang: 'zh_CN',
						desc: '登录',
						success: ({ userInfo }) => {
							console.log(22, 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 e = data.sessionKey
											this.sessionKey = e.session_key
											this.openId = e.openid
											uni.setStorageSync('openid', e.openid)
											this.unionid = e.unionid
											uni.setStorageSync('sessionKey', e.session_key)
											this.submiting = false
											// 如果没有绑定手机号，则显示绑定按钮，引导用户绑定，否则，直接跳到首页
											if (data.state === 'login') {
												this.toIndex()
												uni.setStorageSync('token', data.token)
												uni.setStorageSync('accountId', data.accountId)
											} else {
												this.isLogin = true
											}
										}).catch(e => {
											this.submiting = false
										})
									} else {
										this.submiting = false
										that.$util.errMsg('登录失败！')
									}
								}
							})			
						},
						fail(res) {
							that.$util.errMsg('登录授权失败！')
						}
					})
				} else {
					this.$util.errMsg('请先阅读勾选协议！')
				}
			},
			// 绑定手机号
			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
				// 绑定手机号
				userBinding({
					openId: this.openId,
					phone: data.phoneNumber,
					unionid: this.unionid,
					platformId: 3
				}).then(({ token }) => {
					this.submiting = false
					uni.setStorageSync('token', token)
					this.toIndex()
				}).catch(e => {
					this.submiting = false
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				})
			},
			toAgreement(id) {
				this.$util.openFile(id)
			},
			// 跳转到首页
			toIndex() {
				uni.reLaunch({
					url: '../index/index'
				})
			}
		}
	}
</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 60rpx 28rpx;
	margin: 0 61rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 20rpx;
	.logo {
		width: 393rpx;
		height: 93rpx;
	}
	.hello {
		margin: 36rpx 0;
		font-size: 24rpx;
		line-height: 1.6;
		color: #333;
	}
	.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;
		}
	}
	.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;
		}
	}
}
</style>