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>{{ runningDays }}</text>/7 天</view>
            <view class="tips">
                <text>再连续签到{{ 7 - runningDays }}天，额外获得</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.map((item,index) =>{
			return {
				...item,
				check:runningDays.value>=(index + 1)?true:false
			}
		});
    });
};

const runningDays = ref(0)
const getSignInfo = () => {
    TREE.getSignInfo().then((res) => {
        runningDays.value = res.data.runningDays;
		getRules();
    });
};

onLoad(() => {
	getSignInfo()
});

const checkDay = ref([]);

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>