qjd-user-uniapp/pages/index/login.vue

<template>
	<view class="container">
		<image class="authorize-bg" src="../../static/images/loginBg.png"></image>
		<image class="logo" src="../../static/images/loginLogo.png"></image>
		<view class="authorize-box">
			<button class="authorize-button" open-type="getUserInfo" @click="appLoginWx()">
				<view class="button-text">获取角色信息</view>
				<view class="iconfont iconshangchuan1"></view>
			</button>
			<view class="authorize-info">{{userNmae}}</view>
			<!-- <button class="authorize-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<view class="button-text">获取手机号</view>
				<view class="iconfont iconshangchuan1"></view>
			</button>
			<view class="authorize-info">{{wxPhoneData? '****************' : ''}}</view> -->
			<view class="authorize-login" @click="getUserInfo">登录</view>
			<view class="authorize-tip">点击登录默认同意<text style="text-decoration: underline;">平台服务协议</text></view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				wxLoginData: null,
				wxPhoneData: null,
				userNmae: '',
				tip: '点击登录默认同意平台服务协议',
			}
		},
		onReady() {
			this.appLoginWx()
		},
		methods: {
			getPhoneNumber(e) {
				if (this.wxLoginData) {
					let _that = this
					uni.setStorage({
						key: 'wxPhoneData',
						data: {
							encryptedData2: e.detail.encryptedData,
							iv2: e.detail.iv,
						}
					})
					this.wxPhoneData = uni.getStorageSync("wxPhoneData")
				} else {
					this.$refs.uTips.show({
						title: '请先等待角色信息获取完成',
						type: 'warning',
					})
				}
			},
			//  获取个人数据
			getUserInfo() {
				NET.request(API.WxLogin, {
					...this.wxLoginData,
					// ...this.wxPhoneData,
				}, 'POST').then(res => {
					uni.setStorage({
						key: 'token',
						data: res.data.token
					})
					uni.setStorage({
						key: 'userData',
						data: {
							headImage: JSON.parse(this.wxLoginData.rawData).avatarUrl,
							userName: res.data.name,
							userId: res.data.userId,
						}
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: '微信登录授权失败',
						type: 'warning',
					})
				})
			},
			//  获取登录权限
			appLoginWx() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											uni.setStorage({
												key: 'wxLoginData',
												data: {
													code: res2.code,
													encryptedData: info.encryptedData,
													iv: info.iv,
													rawData: info.rawData,
													signature: info.signature,
												}
											})
											this.wxLoginData = uni.getStorageSync("wxLoginData")
											this.userNmae = JSON.parse(this.wxLoginData.rawData).nickName
											this.$refs.uTips.show({
												title: '获取角色信息成功',
												type: 'success',
											})
										},
										fail: (error) => {
											this.$refs.uTips.show({
												title: '微信登录授权失败',
												type: 'warning',
											})
										}
									})
								},
								fail: () => {
									this.$refs.uTips.show({
										title: '微信登录授权失败',
										type: 'warning',
									})
								}
							})
						} else {
							this.$refs.uTips.show({
								title: '请先安装微信或升级版本',
								type: 'warning',
							})
						}
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		position: absolute;

		.authorize-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.logo {
			width: 90px;
			height: 90px;
			float: left;
			position: absolute;
			left: 50%;
			top: 40px;
			transform: translateX(-50%);
		}

		.authorize-box {
			width: 230px;
			float: left;
			position: absolute;
			left: 50%;
			top: 170px;
			transform: translateX(-50%);

			.authorize-button {
				width: 230px;
				height: 30px;
				float: left;
				padding: 0px;
				background-color: transparent;
				border: none;
				box-shadow: none;

				.button-text {
					height: 30px;
					float: left;
					line-height: 30px;
					font-size: 15px;
					font-family: PingFang SC;
					color: #FEFEFE;
					margin-right: 4px;
				}

				.iconfont {
					float: left;
					color: #FEFEFE;
					font-size: 28px;
					line-height: 30px;
				}
			}

			.authorize-button:after {
				border: none;
			}

			.authorize-info {
				width: 230px;
				height: 36px;
				float: left;
				margin-bottom: 30px;
				border-bottom: 1px solid #FFFFFF;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FEFEFE;
				line-height: 36px;
			}

			.authorize-login {
				width: 220px;
				height: 36px;
				float: left;
				margin: 10px 5px;
				background: #FFFFFF;
				border-radius: 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #56a83a;
				line-height: 36px;
				text-align: center;
			}
			.authorize-tip {
				width: 220px;
				height: 20px;
				float: left;
				margin: 10px 5px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 20px;
				text-align: center;
			}
		}
	}
</style>