orderSystemJp/raising-large-screen/pages/login/only-user.vue

<template>
	<view class="wx-login-page" :style="{backgroundImage: bgImg}">
		<cu-custom :isBack="false">
			<block slot="content">登录</block>
		</cu-custom>

		<view class="flex justify-center m-t-40">
			<u--image class="logo-image" :width="300+'rpx'" :height="235+'rpx'" :showLoading="true" :src="logoImg"
				:fade="true" duration="100" mode="aspectFit"></u--image>
		</view>

		<view class="cu-card case" style="margin-top: 20rpx;">

			<view class="cu-item shadow" style="min-height: 800rpx;">
				<view class="cu-list m-t-100">
					<view class="cu-title font-45 m-l-30">
						Hello!
					</view>
					<view class="cu-title font-40 m-t-20 m-l-30">
						{{loginAppName}}
					</view>
					<view class="cuIcon-title text-gray m-t-30 p-l-30 p-r-30">本系统申请获取您的微信用户信息</view>
					<view class="flex flex-direction m-t-70 p-l-50 p-r-50">
						<button style="width: 100%;" class="cu-btn margin-tb-sm lg bg-blue" v-if="canIUseGetUserProfile"
							@click="getUserProfile">微信授权登录</button>
						<button style="width: 100%;" class="cu-btn margin-tb-sm lg bg-blue" v-else
							open-type="getUserInfo" @getuserinfo="agreeGetUser" lang="zh_CN">微信授权登录</button>
					</view>

					<view class="flex flex-direction p-l-50 p-r-50">
						<button class="cu-btn margin-tb-sm lg " @click="backToPage">暂不登录</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from 'utils/util'
	import validate from 'utils/validate'
	import __config from '@/config/env'; // 配置文件

	export default {
		name: 'OnlyUser',
		data() {
			return {
				loginAppName: __config.loginAppName,
				theme: app.globalData.theme, //全局颜色变量
				CustomBar: this.CustomBar,
				bgImg: util.spliceBgImgUrl('/login-head-bg.png'),
				logoImg: util.spliceAssetsUrl('/login-logo.png'),
				wxSession: {},
				canIUseGetUserProfile: false,
				modalShow: false,
				reUrl: '/pages/home/index',
			};
		},

		components: {},

		onLoad(options) {
			console.info('onle-user: options => ', JSON.stringify(options))
			if (options.reUrl) {
				this.reUrl = decodeURIComponent(options.reUrl)
			}
			console.info('onle-user: this.reUrl => ', this.reUrl)

			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			this.wxSession = uni.getStorageSync(__config.loginWxSessionKey)
		},

		onShow() {},

		methods: {
			/**
			 * 返回来源页面
			 */
			backToPage() {
				uni.reLaunch({
					url: this.reUrl
				})
			},
			agreeGetUser(e) {
				if (e.detail.errMsg == 'getUserInfo:ok') {
					let params = Object.assign(e.detail, this.wxSession)
					api.doPost('/openapi/ma/only_user/decryptUserInfo', params).then(res => {
						let loginData = res.data;
						if (loginData.isLogin) {
							uni.setStorageSync(__config.tokenNameKey, loginData.tokenName);
							uni.setStorageSync(__config.tokenValueKey, loginData.tokenValue);

							/**
							 * 缓存用户信息
							 */
							let wxMemberInfo = util.parseUser(loginData.userInfo)
							uni.setStorageSync(__config.loginWxUserInfoKey, wxMemberInfo)

							uni.reLaunch({
								url: this.reUrl,
								success: () => {
									uni.removeStorageSync(__config.loginWxSessionKey)
								}
							})
						}
					});
				}
			},

			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (detail) => {
						let params = Object.assign(detail, this.wxSession)
						console.log('getUserProfile', detail)
						api.doPost('/openapi/ma/only_user/decryptUserInfo', params).then(res => {
							let loginData = res.data;
							if (loginData.isLogin) {
								uni.setStorageSync(__config.tokenNameKey, loginData.tokenName);
								uni.setStorageSync(__config.tokenValueKey, loginData.tokenValue);

								/**
								 * 缓存用户信息
								 */
								let wxMemberInfo = util.parseUser(loginData.userInfo)
								uni.setStorageSync(__config.loginWxUserInfoKey, wxMemberInfo)

								uni.reLaunch({
									url: this.reUrl,
									success: () => {
										uni.removeStorageSync(__config.loginWxSessionKey)
									}
								})
							}
						});
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.wx-login-page {
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>