feiniao-youwei-uniapp/pages/tabBar/tree/subPages/gift.vue

<template>
	<view class="sub-base-container">
		<view class="gift-title">
			<view class="name">
				<view class="txt">守护等级规则</view>
				<text>积累能量升等级 获大礼</text>
			</view>
			<image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/energy-icon.png`"></image>
		</view>
		<view class="gift-card energy-card">
			<view class="gift-name">已打卡 <text>2</text>/7 天</view>
			<view class="tips">
				<text>再连续签到5天，获得</text>
				<image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/leaf-icon.png`" alt=""></image>
				<view class="score"><up-icon name="plus" size="10" color="#D9AB14"></up-icon>30</view>
			</view>
			<view class="check-wrap">
				<view :class="['check-day',{active:item.check}]" v-for="(item, index) in checkDay" :key="index">
					<view class="leaf">
						<image class="icon"
							:src="`${config.BASIC_IMG}img/subTreePage/${item.check?'gray-leaf':'leaf-icon'}.png`" alt="">
						</image>
						<text>x{{item.energy}}</text>
					</view>
					<view v-if="item.check">已领取</view>
					<view v-else>第{{item.days}}天</view>
				</view>
			</view>
		</view>
		<view class="gift-card">
			<view class="card-title">守护等级划分</view>
			<view class="card-desc">守护等级共有5个等级，您的守护等级会根据您累计的能量值决定的，当您的能量值达到相应的要求即可升级并获得相对应礼物，不同等级的用户获得礼物不同。</view>
			<view class="card-table">
				<view class="table-item" v-for="(item,index) in tableList" :key="index">
					<view class="levle">{{item.level}}等级</view>
					<view>{{item.text}}</view>
					<view class="gift">{{item.gift}}</view>
				</view>
			</view>
		</view>
		<view class="gift-card">
			<view class="card-title">积累能量规则</view>
			<view class="card-desc">每日登录会积累相应的能量，连续登录天数越高能量值越高，每天可以通过做任务增加能量值，每日阳光可以获得 10 能量，分享转发可以获得 10 能量，送ta祝福可以获得 10
				能量，水果订购一次，可以获得 100 能量，但是需要扫描箱内溯源卡的二维码领取。</view>
		</view>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import TREE from '@/api/tree.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	const getRules = () => {
		TREE.ruleList().then((res) => {
			checkDay.value = res.data
			// firstRowItems.value = res.data.slice(0, 3);
			// secondRowItems.value = res.data.slice(3);
		});
	};
	
	onLoad(()=>{
		getRules()
	})

	const checkDay = ref([{
			day: 1,
			check: true
		},
		{
			day: 2,
			check: true
		},
		{
			day: 3,
			check: false
		},
		{
			day: 4,
			check: false
		},
		{
			day: 5,
			check: false
		},
		{
			day: 6,
			check: false
		},
		{
			day: 7,
			check: false
		}
	])

	const tableList = [{
			level: '平民',
			text: '无要求',
			gift: '无礼品'
		},
		{
			level: '青铜',
			text: '达到200能量',
			gift: '一份曲奇'
		},
		{
			level: '白银',
			text: '达到1200能量',
			gift: '一份精美水果'
		},
		{
			level: '赤金',
			text: '达到5500能量',
			gift: '一份荔枝'
		},
		{
			level: '星勋',
			text: '达到9800能量',
			gift: '一份荔枝'
		}
	]
</script>

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

	.sub-base-container {
		@include ossBg("subTreePage/gift-bg.png");
		padding: 12rpx 20rpx 20rpx;

		.gift-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 14rpx;

			.name {
				color: rgba(0, 0, 0, 0.5);
				font-size: 28rpx;

				.txt {
					font-size: 60rpx;
					font-family: 'PangMenZhengDao';
					color: #000;
				}
			}

			.icon {
				width: 212rpx;
				height: 222rpx;
			}
		}

		.energy-card {
			margin-top: -10rpx;
			position: relative;
			z-index: 2;

			.gift-name {
				font-weight: 500;

				text {
					color: #F3B242;
				}
			}

			.tips {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
				.icon{
					width: 24rpx;
					height: 22rpx;
					margin: 0 8rpx;
				}

				.score {
					display: flex;
					align-items: center;
					color: #D9AB14;
				}
			}

			.check-wrap {
				margin: 28rpx 0 20rpx 0;
				display: flex;

				.check-day {
					flex: 1;
					padding: 20rpx 0;
					font-size: 20rpx;
					color: #F3B242;
					background: rgba(185, 185, 185, 0.1);
					border-radius: 10rpx;
					text-align: center;

					&.active {
						color: #BCBCBA;
					}

					.leaf {
						font-size: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.icon{
							width: 28rpx;
							height: 28rpx;
							margin-right: 4rpx;
							margin-bottom: 10rpx;
						}
					}
				}

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

		.gift-card {
			border-radius: 16rpx;
			background: #fff;
			padding: 20rpx;

			.card-title {
				font-weight: 500;
			}

			.card-desc {
				margin-top: 10rpx;
				line-height: 36rpx;
				font-size: 24rpx;
			}

			.card-table {
				margin-top: 20rpx;

				.table-item {
					display: flex;
					background: rgba(243, 193, 29, 0.07);

					.levle {
						background: rgba(243, 193, 29, 0.12);
					}

					.gift {
						color: #CC9D00;
					}

					view {
						flex: 1;
						padding: 30rpx 0;
						text-align: center;
						font-size: 28rpx;
					}
				}

				.table-item+.table-item {
					border-top: 2rpx solid rgba(0, 0, 0, 0.06);
				}
			}
		}

		.gift-card+.gift-card {
			margin-top: 20rpx;
		}
	}
</style>