guangan-mp/pages/user/login.vue

<template>
	<view class="login">

		<view class="login-body flex-column">

			<view class="flex-center">
				<text class="login-body-name">微信授权登录</text>
			</view>

			<view style="margin-top:80rpx;" class="flex-center">
				<button type="success" size="large" @click="doLogin" customStyle="width:600rpx;height:100rpx">登
					录</button>
			</view>

		</view>
		<view class="login-foot">
			<view class='login-foot-agent flex-center'>
				<checkbox label="1" :value="agent.value">同意协议</checkbox>
				<text @click="showAgreement">《用户隐私协议》</text>
			</view>
		</view>

	</view>
</template>

<script>
	import { TaAjax } from '@/common/ajax';
	import { TaCache } from '@/common/cache';
	import { TaToast } from '@/common/toast';
	export default {
		data() {
			return {
				// 用户协议
				agent: {
					show: false,
					value: true,
				},
			}
		},
		created() {
			const userInfo = TaCache.get('auth.user')
			if (userInfo && userInfo.id) {
				uni.navigateBack()
			}
			this.doLogin()
		},
		methods: {
			showAgreement() {
				wx.openPrivacyContract()
			},
			// 执行注册登录
			doLogin() {
				if (!this.agent.value) {
					TaToast.toast("请先同意协议")
					return
				}
				TaToast.loading("登录中")
				this.login().then((data) => {
					TaCache.set('auth.user', data)
				}).finally(() => {
					TaToast.loadhide()
				})
			},
			login() {
				return new Promise((resolve, reject) => uni.login({
					provider: 'weixin',
					success(loginRes) {
						// 换取会话密钥
						let data = {
							code: loginRes.code,
							iv: '',
							encrypted: ''
						}
						TaAjax.post('/plugin-account/api.wxapp/session', data).then((ret) => {
							console.log('SessionDone: ', ret)
							TaCache.set('auth.token', ret.data.token)
							// 获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: (infoRes) => {
									console.log('UserInfo: ', infoRes)
									data.iv = infoRes.iv, data.encrypted = infoRes
										.encryptedData
									TaAjax.post('/plugin-account/api.wxapp/decode', data)
										.then((ret) => {
											console.log('UserDone: ', ret.data)
											resolve(ret.data)
										}).catch((ret) => {
											console.log('UserFail: ', ret.data)
											reject(ret)
										})
								}
							})
						}).catch((ret) => {
							console.log('SessionFail: ', ret)
							reject(ret);
						})
					}
				}))
			}
		},
	}
</script>
<style>
	.login {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.login-body {
		width: 100%;
		height: 100%;
	}

	.login-body-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}

	.login-foot {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.login-foot-agent {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 24rpx;
		color: #999999;
	}
	
	.login-foot-agent checkbox {
		margin-right: 10rpx;
	}
	
</style>