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

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

<script>
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {

			};
		},
		methods: {
			getPhoneNumber(e) {
				$http.post('/api/v1/mp/user/wxauth/mobile', {
					code: e.detail.code,
					identity: 2
				}).then(res => {
				
				}).catch(() => {
				
				})
			},
			getInfo() {
				uni.getUserProfile({
					desc: '用于填充用户默认信息',
					success(info) {
						uni.login({
							success(res) {
								$http.post('/api/v1/mp/user/wxauth', {
									...{
										code: res.code
									},
									...info.userInfo
								}).then(res => {

								}).catch(() => {

								})
							}
						})
					},
					fail() {

					}
				})
			},
		}
	}
</script>

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

	.login {
		&-image {
			.image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
				margin-bottom: 14rpx;
				background-color: $uni-bg-color;
			}
		}

		&-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: 570rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				background-color: rgba(235, 112, 9, 100);
				color: rgba(255, 255, 255, 100);
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
</style>