lirenGO_uniapp/components/customizedPopup/customizedPopup.vue

<template>
	<uni-popup ref="popupRef">
		<view class="popup-content">
			<uni-icons class="closeIcon" @click.stop="close" type="close" color="#86ACFE" size="36"></uni-icons>
			<image class="systemBG" src="/static/systemBG.png" mode="aspectFill"></image>  
			<button class="detailBtn">查看详情</button>
		</view>
	</uni-popup>
  
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
defineOptions({ name: "customizedPopup" })
const props = defineProps({
	isOpen: {
		type: Boolean,
		default: false
	}
})
const popupRef = ref(null)
watch(() => props.isOpen, (newVal, oldVal) => {
	if (!popupRef.value) { // 确保组件实例已存在（避免null错误）
		console.warn('弹窗组件尚未初始化完成');
		return;
	}
	if (newVal) { // 根据新值控制弹窗
		popupRef.value.open(); // 显示弹窗
	} else {
		popupRef.value.close(); // 隐藏弹窗
	}
},{immediate: true})

onMounted(()=>{
	
})
const close = ()=>{
	popupRef.value.close();
}
</script>

<style lang="scss" scoped>
.popup-content{
	width: 640rpx;
	height: 844rpx;
	position: relative;
}	
.systemBG{
	width: 640rpx;
	height: 844rpx;
}	
.closeIcon{
	position: absolute;
	top: 26rpx;
	right: 26rpx;
}
	
.detailBtn{
	position: absolute;
	bottom: 46rpx;
	left: 50%;
	transform: translate(-50%,0);
	width: 207rpx;
	height: 77rpx;
	background: #3A71FF;
	border-radius: 45rpx 45rpx 45rpx 45rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	@include flexBox();
}
</style>