purchase-let/components/bindPhone.vue

<template>
	<up-popup :show="show" round="10" @close="close" mode="center" :safeAreaInsetBottom="false">
		<view class="m-modal-popup">
			<view class="head-title-modal">绑定手机号</view>
			<view class="content-modal">系统检测到您未绑定手机号, 为方便您继续使用, 请绑定手机号码</view>
			<view class="btn-box-modal">
				<view style="width: 130rpx;"><up-button @click="close" plain color="#999">取消绑定</up-button></view>
				<view style="width: 350rpx;"><up-button @getphonenumber="change" open-type="getPhoneNumber"
						color="#20B128">立即绑定</up-button></view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['close', 'change']);
	const close = () => {
		emit('close');
	}

	const change = (e) => {
		emit('change', e);
	}
</script>

<style scoped lang="scss">
	.m-modal-popup {
		width: 500rpx;
		padding: 40rpx;

		.head-title-modal {
			font-size: 32rpx;
			text-align: center;
		}

		.content-modal {
			font-size: 26rpx;
			color: #999;
			text-align: center;
			padding: 40rpx 0;
		}

		.btn-box-modal {
			display: flex;
			justify-content: space-between;
		}
	}
</style>