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.setStorageSync('accredit', true)
			uni.reLaunch({
				url: '/pages/index/index'
			})
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	}
}
</script>

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

	.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>