feiniao-youwei-uniapp/components/checkinPopup/checkinPopup.vue

<template>
	<up-popup class="check-popup" :show="showPopup" mode="center" @close="closeCheckPopup" bgColor="transparent" overlayOpacity="0.8">
		<view class="title">
			<image class="left-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
			<text>恭喜你，登录成功</text>
			<image class="right-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
		</view>
		<view class="check-wrap">
			<!-- First row with 3 items -->
			<view class="check-row">
				<view v-for="(item, index) in firstRowItems" :key="index"
					:class="['check-day', { active: runningDays == index + 1 },{gary:runningDays > index + 1}]">
					<view class="leaf-wrap">
						<image class="leaf"
							:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 1 ? 'white-leaf' : runningDays > index + 1 ?'gary-leaf':'leaf-icon'}.png`"
							alt="leaf icon" />
						<text>x{{ item.energy }}</text>
					</view>
					<view v-if="runningDays > index + 1"><text>已领取</text></view>
					<view v-else><text v-if="runningDays == index + 1">累计</text>{{ item.days }}天</view>
				</view>
			</view>

			<!-- Second row with 4 items -->
			<view class="check-row">
				<view v-for="(item, index) in secondRowItems" :key="index"
					:class="['check-day', { active: runningDays == index + 4 },{gary:runningDays > index + 4}]">
					<view class="leaf-wrap">
						<image class="leaf"
							:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 4 ? 'white-leaf' : runningDays > index + 4 ?'gary-leaf':'leaf-icon'}.png`"
							alt="leaf icon" />
						<text>x{{ item.energy }}</text>
					</view>
					<view v-if="runningDays > index + 4"><text>已领取</text></view>
					<view v-else><text v-if="runningDays == index + 4">累计</text>{{ item.days }}天</view>
				</view>
			</view>
		</view>
		<view class="button" @click="showPopup = false">开心收下</view>
		<view class="close">
			<up-icon name="close-circle-fill" size="30" @click="showPopup = false"
				color="rgba(255, 255, 255, 0.7)"></up-icon>
		</view>
	</up-popup>
</template>

<script setup>
	import config from "@/api/config.js"
	import TREE from '@/api/tree.js'
	import {
		onMounted,
		ref,
	} from "vue";

	const firstRowItems = ref([]);
	const secondRowItems = ref([]);
	const showPopup = ref(false);

	const getRules = () => {
		TREE.ruleList().then((res) => {
			firstRowItems.value = res.data.slice(0, 3);
			secondRowItems.value = res.data.slice(3);
		});
	};

	const runningDays = ref(0)
	const checkIn = () => {
		TREE.sign().then((res) => {
			if (res.code === 0) {
				runningDays.value = res.data.runningDays
				getRules();
				showPopup.value = true;
			} else {
				closeCheckPopup()
			}
		});
	};

	onMounted(() => {
		checkIn();
	});

	function closeCheckPopup() {
		emit('closedCheckPopup');
	}

	const emit = defineEmits(['closedCheckPopup']);
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.check-popup {
		width: 100%;
		background: transparent;
		text-align: center;

		.title {
			font-size: 56rpx;
			letter-spacing: 2rpx;
			font-family: "PangMenZhengDao";
			background: linear-gradient(to bottom, #FFFFFF, #FFD23C);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			position: relative;

			.image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
			}

			.left-image {
				top: 0;
				left: -14rpx;
			}

			.right-image {
				right: -16rpx;
				bottom: 0;
			}

			&::before {
				content: '';
				position: absolute;
				width: 600rpx;
				height: 104rpx;
				bottom: -44rpx;
				left: -16rpx;
				@include ossBg("treePage/check-title-bg.png");
			}
		}

		.check-wrap {
			margin: 60rpx 0 100rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: 322rpx;

			.check-row {
				margin-top: 14rpx;
				display: flex;

				.check-day {
					width: 124rpx;
					box-sizing: border-box;
					padding: 28rpx 0;
					font-size: 24rpx;
					color: #f3b242;
					background: rgba(255, 255, 255, 0.32);
					border-radius: 10rpx;
					text-align: center;

					&.active {
						background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
						color: #fff;
						border: 2rpx solid #fff;
					}

					&.gary {
						color: rgba(255, 255, 255, 0.6);
					}

					.leaf-wrap {
						display: flex;
						justify-content: center;
						font-size: 28rpx;
						align-items: baseline;

						.leaf {
							width: 50rpx;
							height: 46rpx;
							margin-bottom: 12rpx;
							margin-right: 6rpx;
						}
					}
				}

				.check-day+.check-day {
					margin-left: 10rpx;
				}
			}
		}

		.button {
			margin: auto;
			width: 312rpx;
			font-size: 44rpx;
			padding: 20rpx 0;
			border-radius: 50rpx;
			font-family: "PangMenZhengDao";
			color: #954600;
			background: linear-gradient(120deg, #ffe6b2, #ffc339);
			text-align: center;
		}
		.close {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>