yueche_app/components/AuthorizePopup.vue

<template>
	<wd-popup v-model="localShow" position="bottom" closable safe-area-inset-bottom custom-class="popup-wrapper-auth" @close="emits('close', false)">
		<view class="content">
			<view class="title">
				<view>欢迎使用</view>
				<view class="font-bold">墨轩校团</view>
			</view>

			<image class="img" src="https://school.meiyishuo.cn/20250822/1/09/1958704126647894017_logo.png" mode="aspectFill"></image>

			<view class="btns">
				<view class="btn_box">手机号快速验证</view>
				<button class="auth_box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" />
			</view>
		</view>
	</wd-popup>
</template>

<script setup>
import { ref, watch } from 'vue'
import { myRequest } from '@/utils/api.ts'

defineOptions({
	options: {
		styleIsolation: 'shared'
	}
})

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['update:show', 'close'])

const localShow = ref(props.show)

const info = ref({
	nickname: '微信用户',
	code1: '',
	code2: ''
})

watch(
	() => props.show,
	(val) => {
		localShow.value = val
	}
)

watch(localShow, (val) => {
	if (val !== props.show) {
		emits('update:show', val)
	}
})

const isRead = ref(false)

function getPhoneNumber(e) {
	// console.log(e)
	if (e.detail.code) {
		info.value.code2 = e.detail.code
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				// console.log(loginRes)
				if (loginRes.code) {
					info.value.code1 = loginRes.code
					// console.log(info.value)
					authorize()
				}
			}
		})
	}
}

// 授权接口
const authorize = async () => {
	const res = await myRequest({
		url: '/tAppgetOpenid.action',
		data: info.value
	})
	// console.log(res)
	if (res.code == 200) {
		uni.setStorageSync('carUserInfo', res.data)
		emits('close', true)
	}
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32rpx;
	height: 500rpx;
	background: #fff;

	.title {
	}

	.img {
		margin-top: 96rpx;
		margin-bottom: 48rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.btns {
		position: relative;
		height: 72rpx;
		width: 100%;

		.btn_box {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 20rpx;
			background-color: #ff8205;
		}

		.auth_box {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
		}
	}
}

// .auth-box {
// 	position: absolute;
// 	top: 0;
// 	left: 0;
// 	bottom: 0;
// 	height: 72rpx;
// 	width: 100%;
// 	// background-color: salmon;
// 	// @apply absolute top-0 left-0 h-full w-full rounded-full opacity-0;
// }

// .auth-checkbox-wrapper {
// 	display: flex !important;
// 	align-items: baseline;

// 	/* stylelint-disable-next-line selector-class-pattern */
// 	:deep(.wd-checkbox__shape) {
// 		// @apply shrink-0;
// 	}
// }
</style>