lirenGO_uniapp/components/signPopup/signPopup.vue

<template>
	<uni-popup ref="signPopupRef">
		<view class="popup-content">
			<image class="signBG" src="/static/signBG.png" mode="aspectFill"></image>
			<view class="popup-main">
				<view class="main1">
					<view class="titleBox">
						<text>已连续签到0天</text>
						<button class="signBtn" @click="goSign">{{isSigned?'签到成功':'立即签到'}}</button>
					</view>
					<view class="tipsText">
						<text>签到立即获得10积分</text>
						<text>连续签到三天奖励翻倍</text>
					</view>
				</view>
				<view class="main2">
					<view class="signList">
						<view class="item">
							<view class="iconBox">
								<image class="coin" src="/static/coin.png" mode="aspectFill"></image>
								<!-- <uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons> -->
							</view>
							<text>第一天</text>
						</view>
						<view class="item">
							<view class="iconBox">
								<uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons>
							</view>
							<text>第二天</text>
						</view>
						<view class="item">
							<view class="iconBox">
								<uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons>
							</view>
							<text>第三天</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>

</template>

<script setup>
	import {ref,watch} from 'vue'
	defineOptions({
		name: "signPopup"
	})
	const props = defineProps({
		isOpen: {
			type: Boolean,
			default: false
		}
	})
	const signPopupRef = ref(null)

	watch(() => props.isOpen, (newVal, oldVal) => {
		if (!signPopupRef.value) { // 确保组件实例已存在（避免null错误）
			console.warn('弹窗组件尚未初始化完成');
			return;
		}
		if (newVal) { // 根据新值控制弹窗
			signPopupRef.value.open(); // 显示弹窗
		} else {
			signPopupRef.value.close(); // 隐藏弹窗
		}
	}, // 3. 初始化时立即执行一次（处理初始isOpen值）
	{
		immediate: true
	})
	
	const isSigned = ref(false)	
	const goSign = ()=>{
		isSigned.value = true
	}	
		
		
</script>

	
<style lang="scss" scoped>
	.popup-content {
		width: 100vw;
		height: 822rpx;
		position: relative;
		.signBG {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 822rpx;
		}
	}
	.popup-main{
		position: relative;
		z-index: 10;
		width: 68%;
		margin: 0 auto;
		padding-top: 220rpx;
		.main1{
			width: 100%;
			.titleBox{
				@include flexBox(between,center);
				@include fontStyle(34rpx,#FFFFFF,center,500,46rpx);
				.signBtn{
					min-width: 180rpx;
					height: 62rpx;
					background: #FFFFFF;
					border-radius: 45rpx 45rpx 45rpx 45rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #1059FF;
					@include flexBox();
					margin: 0;
				}
			}
			.tipsText{
				@include fontStyle(28rpx,#FFFFFF,left,500,46rpx);
				text{
					display: block;
				}
			}
		}
		.main2{
			width: 100%;
			height: 260rpx;
			@include flexBox();
			.signList{
				width: 100%;
				@include flexBox(around,center);
				.item{
					@include fontStyle(28rpx,#FFFFFF,center,500,46rpx);
					.iconBox{
						width: 94rpx;
						height: 94rpx;
						border-radius: 50%;
						box-sizing: border-box;
						border: 2rpx dashed #FFFFFF;
						@include flexBox();
						margin-bottom: 10rpx;
						position: relative;
						.coin{
							width: 94rpx;
							height: 94rpx;
							border-radius: 50%;
						}
					}
					// 给每个iconBox（除最后一个）添加右侧连接线
					&:not(:last-child) .iconBox::after {
						content: '';
						position: absolute;
						top: 50%; // 垂直居中
						left: 100%; // 从当前iconBox的右侧开始（关键）
						transform: translateY(-50%); // 精确垂直居中
						height: 2rpx; // 线条粗细
						background-color: #FFFFFF; // 白色实线
						width: 80rpx;
					}
					
				}
				
			}
		}
	}
</style>