orderSystemJp/raising-large-screen/pages/login/phone-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 class="cu-btn margin-tb-sm lg bg-blue" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">手机号授权登录
						</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 class="cu-modal" :class="modalShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">微信授权</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-gray"></text>
					</view>
				</view>
				<view class="bg-white flex justify-start text-left p-t-20 p-l-35 p-r-35 p-b-40">
					<view class="m-b-15">本系统需要获得以下权限</view>
					<u-line></u-line>
					<view class="cuIcon-title text-gray m-t-15">申请获取您微信的用户信息，以便于更好的为您服务</view>
				</view>
				<u-line></u-line>
				<view class="cu-bar bg-white justify-end p-t-26 p-b-26">
					<view class="action">
						<button class="cu-btn line-gray text-black" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" v-if="canIUseGetUserProfile"
							@click="getUserProfile">确认授权</button>
						<button class="cu-btn bg-blue margin-left" v-else open-type="getUserInfo"
							@getuserinfo="agreeGetUser" lang="zh_CN">确认授权</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'; // 配置文件

	const wxPhoneInfoKey = 'wx_phone_info';

	export default {
		name: 'UserPhone',
		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) {
			if (options.reUrl) {
				this.reUrl = decodeURIComponent(options.reUrl)
			}
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			this.wxSession = uni.getStorageSync(__config.loginWxSessionKey)
		},

		onShow() {},

		methods: {
			/**
			 * 返回来源页面
			 */
			backToPage() {
				uni.reLaunch({
					url: this.reUrl
				})
			},
			//获取微信手机号
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					let params = Object.assign(e.detail, this.wxSession)
					console.log('getPhoneNumber', e.detail)
					api.doPost('/openapi/ma/phone_user/decryptPhoneNumber', params).then(res => {
						if (res.code == 200) {
							let phoneInfoData = res.data;
							uni.setStorageSync(wxPhoneInfoKey, phoneInfoData);
							this.modalShow = true
						} else {
							uni.showToast({
								title: res.msg,
							})
						}
					});
				}
			},

			agreeGetUser(e) {
				if (e.detail.errMsg == 'getUserInfo:ok') {
					let phoneInfoData = uni.getStorageSync(wxPhoneInfoKey)
					let params = Object.assign(e.detail, this.wxSession, {
						wxMaPhoneNumberInfo: phoneInfoData
					})
					console.log('agreeGetUser', e.detail)
					api.doPost('/openapi/ma/phone_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(wxPhoneInfoKey)
									uni.removeStorageSync(__config.loginWxSessionKey)
								}
							})
						}
					});
				}
			},

			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (detail) => {
						let phoneInfoData = uni.getStorageSync(wxPhoneInfoKey)
						let params = Object.assign(detail, this.wxSession, {
							wxMaPhoneNumberInfo: phoneInfoData
						})
						console.log('getUserProfile', detail)
						api.doPost('/openapi/ma/phone_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(wxPhoneInfoKey)
										uni.removeStorageSync(__config.loginWxSessionKey)
									}
								})
							}
						});
					}
				})
			},

			/**
			 * 隐藏弹出层
			 */
			hideModal() {
				this.modalShow = false
			},

		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

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