mp-ui-user/pages/login/index.vue

<template>
	<view class="container">
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="微信授权"></u-navbar>
		<view class="flex login">
			<view class="flex login-image">
				<image src="../../static/logo.png" mode=""></image>
				<view class="login-image-txt">盲票</view>
			</view>
			<view class="login-txt">盲票将为您提供</view>
			<view class="login-title">商品兑换、盲票购买等服务 请先完成授权登录</view>
			<view class="login-btn">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>
			</view>
		</view>

		<auth :auth-show="authShow" :auth-token="token" @close="authClose" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import Auth from '../../components/auth/auth.vue'
	export default {
		components: {
			Auth
		},
		data() {
			return {
				authShow: false,
				token: '',
			};
		},
		methods: {
			getPhoneNumber(e) {
				uni.showLoading({
					title: '登录中'
				});
				$http.post('/api/v1/mp/user/wxauth/mobile', {
					code: e.detail.code,
					identity: 1
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('token', res.token)
						this.getBaseInfo()
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			// 关闭授权
			authClose() {
				this.authShow = false
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 500)
			},

			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data)
						if (res.data.openId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						} else {
							this.authShow = true
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;
	}

	.login {
		flex-direction: column;
		
		&-image {
			flex-direction: column;
			padding: 100rpx 0 200rpx;

			image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
				margin-bottom: 14rpx;
			}

			&-txt {
				text-align: center;
				line-height: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				font-size: 36rpx;
			}

		}

		&-txt {
			text-align: center;
			line-height: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		&-title {
			text-align: center;
			font-size: 24rpx;
			font-weight: normal;
			margin-bottom: 50rpx;
		}

		&-btn {
			button {
				width: 600rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-color: rgba(235, 112, 9, 100);
				color: rgba(255, 255, 255, 100);
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
</style>