huasan-app/pages/authorization/authorization.vue

<template>
	<view class="content">
		<view class="logo">
			<img class="img" src="../../static/logo.png">
		</view>

		<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<img class="img" src="../../static/weixin.svg">
			<span>微信一键授权</span>
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		myRequest
	} from '../../util/api.js'

	const code = ref('')

	const getPhoneNumber = async (e) => {
		code.value = e.detail.code
		if (code.value) {
			const res = await myRequest({
				url: "/wx/getPhone",
				data: {
					code: code.value
				}
			})
			// console.log(res);
			if (res.success && res.code == 1) {
				uni.setStorageSync('wxPhone', res.data)
				uni.redirectTo({
					url:"/pages/index/index"
				})
			} else {
				uni.showToast({
					title: res.message,
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.logo {
			margin: 300rpx auto 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

			.img {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.button {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 150rpx auto 0;
			width: 600rpx;
			height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 50rpx;
			background-color: #1E7DFB;

			.img {
				margin-right: 20rpx;
				width: 50rpx;
				height: 50rpx;
				color: #fff;
			}
		}
	}
</style>