foster-pc-vue/src/views/home/components/treeDetail.vue

<template>
    <div class="detail-page">
        <chart-box :name="t('treeDetail.title')" arrow="">
            <template v-slot:title-right>
                <div class="back" @click="backToHome">{{ t('treeDetail.back') }}</div>
            </template>
            <div class="detail-content">
                <div class="detail-main">
                    <div class="bubble-box">
                        <div class="bubble old">
                            <span>{{ t('treeDetail.treeAgeValue') }}</span>
                            <div>{{ t('treeDetail.treeAge') }}</div>
                        </div>
                        <div class="bubble pz">
                            <span>{{ t('gardenIntroduce.cropType') }}</span>
                            <div>{{ t('treeDetail.variety') }}</div>
                        </div>
                        <div class="bubble code">
                            <span>A1158</span>
                            <div>{{ t('treeDetail.uniqueCode') }}</div>
                        </div>
                        <div class="bubble cl big">
                            <span>{{ t('treeDetail.highYieldValue') }}</span>
                            <div>{{ t('treeDetail.highYield') }}</div>
                        </div>
                        <div class="bubble date big">
                            <span>2025.06.08</span>
                            <div>{{ t('treeDetail.marketDate') }}</div>
                        </div>
                        <div class="bubble zb big">
                            <span>92{{ locale === 'zh' ? '分' : ' pts' }}</span>
                            <div>{{ t('treeDetail.ecologyIndex') }}</div>
                        </div>

                        <div class="progress-wrap" v-show="ROLE == 2 && isProgress === 1">
                            <div class="progress-text"><span class="over">150</span>/215</div>
                            <el-progress class="progress-val" :percentage="60" color="#FFD887"></el-progress>
                        </div>
                        <div class="progress-wrap done-progress" v-show="ROLE == 2 && isProgress === 0">
                            <div class="progress-text">{{ t('treeDetail.progressEnded') }}</div>
                        </div>
                    </div>
                    <img class="tree" src="@/assets/images/foster-home/tree.png" alt="" />
                    <div class="photo-box">
                        <div class="photo-title">
                            <span>{{ t('treeDetail.tracePhotos') }}</span>
                            <span class="more" @click="handleMore">{{ t('treeDetail.more') }}</span>
                        </div>
                        <div class="photo-list">
                            <div class="photo-item" v-for="(item, index) in photoList" :key="index">
                                <photo-provider>
                                    <photo-consumer
                                        :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)"
                                    >
                                        <img
                                            class="img"
                                            :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)"
                                            alt=""
                                        />
                                    </photo-consumer>
                                </photo-provider>
                                <div class="date">{{ item.date }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="source-wrap">
                    <div class="source-title">
                        <sub-title :name="t('gardenIntroduce.farmRecord')">
                            <template v-slot:title-right>
                                <div class="title-right">
                                    {{ t('gardenIntroduce.more') }}
                                    <el-icon class="sub-icon"><ArrowRight /></el-icon>
                                </div>
                            </template>
                        </sub-title>
                    </div>
                    <div class="tabs">
                        <div
                            class="tabs-item"
                            :class="{ active: active === index }"
                            v-for="(item, index) in tabsList"
                            :key="index"
                            @click="handleActive(index)"
                        >
                            {{ item }}
                        </div>
                    </div>
                    <div class="list-item" v-for="(ele, idx) in displaySourceList" :key="idx">
                        <div class="item-flex">
                            <div class="photo">
                                <img src="@/assets/images/foster-home/tree/source.png" alt="" />
                                <div class="date">{{ ele.date }}</div>
                            </div>
                            <div class="item-text">
                                <div class="item-title">{{ ele.name }}</div>
                                <div class="name">
                                    {{ t('treeDetail.farmEffect') }}<span class="val">{{ ele.effect }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center-btn" @click="toCustomPage">{{ t('treeDetail.customBtn') }}</div>
            </div>
        </chart-box>
    </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import chartBox from "@/components/chartBox.vue";
import subTitle from "@/components/subTitle.vue";
import { useI18n } from "@/i18n";

const { t, locale } = useI18n();
const router = useRouter();
const store = useStore();

const ROLE = store.state.home.userRole;
const isProgress = ref(1);

const active = ref(0);
const tabsList = computed(() => [
    t("treeDetail.tabs.all"),
    t("treeDetail.tabs.standard"),
    t("treeDetail.tabs.weather"),
]);

const emit = defineEmits(["backHome"]);

function translateRecord(record) {
    return {
        name: t(`treeDetail.records.${record.id}.name`),
        effect: t(`treeDetail.records.${record.id}.effect`),
        date: record.date,
    };
}

const MAIN_RECORDS = [
    { id: "fruitNutrition", date: "2025.04.04" },
    { id: "shakeFlower", date: "2025.03.28" },
    { id: "killSmallLeaf", date: "2025.02.09" },
    { id: "strongFlowerNutrition", date: "2025.02.03" },
    { id: "wakeNutrition", date: "2025.01.03" },
    { id: "shootKill", date: "2024.12.27" },
    { id: "clearGarden", date: "2024.12.15" },
    { id: "baseFertilizer", date: "2024.12.15" },
    { id: "shootControl", date: "2024.12.03" },
    { id: "shootPestControl", date: "2024.08.15" },
    { id: "shootNutrition", date: "2024.08.01" },
];

const ALT_RECORDS = [
    { id: "shootRootFertilizer", date: "2024.07.14" },
    { id: "fruitRootFertilizer", date: "2024.05.07" },
    { id: "strongFlowerTopDress", date: "2024.03.07" },
    { id: "shootHeatDrought", date: "2024.10.26" },
    { id: "fruitRainShade", date: "2024.05.24" },
    { id: "flowerRain", date: "2024.04.01" },
];

const currentRecords = ref([...MAIN_RECORDS]);

const displaySourceList = computed(() => currentRecords.value.map(translateRecord));

const handleActive = (index) => {
    active.value = index;
    handleItem(index);
};

function backToHome() {
    emit("backHome");
}

function toCustomPage() {
    router.push("/customTree");
}

const photoList = ref([
    { date: "2026.04.10" },
    { date: "2026.04.03" },
    { date: "2026.03.26" },
    { date: "2026.03.15" },
    { date: "2026.03.08" },
]);

const handleItem = (index) => {
    if (index === 0) {
        currentRecords.value = [...ALT_RECORDS];
    } else if (index === 1) {
        currentRecords.value = ALT_RECORDS.slice(0, 3);
    } else if (index === 2) {
        currentRecords.value = ALT_RECORDS.slice(3);
    }
};

const handleMore = () => {
    // router.push("/photo");
};
</script>

<style lang="scss" scoped>
.detail-page {
    position: relative;
    width: 100%;
    height: 100%;
    .back {
        background: #4f4f4f;
        border-radius: 4px;
        padding: 6px 22px;
        font-size: 12px;
        cursor: pointer;
    }

    .center-btn {
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        color: #000000;
        border-radius: 20px;
        font-size: 14px;
        padding: 7px 10px;
        cursor: pointer;
        border: 1px solid #fff;
        background: linear-gradient(180deg, #ffd887, #ed9e1e);
        width: 194px;
        box-sizing: border-box;
        text-align: center;
    }
    .detail-content {
        height: 100%;
        overflow: auto;
        .detail-main {
            width: 100%;
            height: 466px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            .bubble-box {
                position: relative;
                width: 100%;
                .bubble {
                    font-size: 10px;
                    text-align: center;
                    width: 60px;
                    height: 60px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: rgba(255, 255, 255, 0.55);
                    background: url("@/assets/images/foster-home/tree/bubble-bg.png") no-repeat center center / 100%
                        100%;
                    span {
                        font-size: 14px;
                        font-weight: 500;
                        color: #fff;
                    }
                    &.big {
                        width: 76px;
                        height: 76px;
                    }
                    &.pz {
                        position: absolute;
                        bottom: -96px;
                        left: 0;
                    }
                    &.old {
                        position: absolute;
                        right: 8px;
                        bottom: -100px;
                    }
                    &.code {
                        position: absolute;
                        right: 84px;
                        bottom: -12px;
                    }
                    &.cl {
                        position: absolute;
                        right: 4px;
                        bottom: -38px;
                    }
                    &.date {
                        position: absolute;
                        left: 40px;
                        bottom: -26px;
                        span {
                            font-size: 12px;
                        }
                    }
                    &.zb {
                        position: absolute;
                        left: 128px;
                        bottom: -4px;
                    }
                }
            }

            .progress-wrap {
                position: absolute;
                top: 40px;
                left: 50%;
                transform: translateX(-50%);
                width: 110px;
                &.done-progress {
                    top: 50px;
                    .progress-text {
                        color: #CFCFCF;
                    }
                }
                .progress-text {
                    font-size: 12px;
                    color: #999999;
                    background: rgba(0, 0, 0, 0.6);
                    padding: 2px 8px 3px 8px;
                    border-radius: 20px;
                    width: max-content;
                    margin: 0 auto;
                    margin-bottom: 5px;
                    .over {
                        font-size: 14px;
                        color: #ffd489;
                    }
                }
                ::v-deep {
                    .el-progress-bar__outer {
                        width: 108px;
                        background: rgba(0, 0, 0, 0.8);
                    }
                    .progress-val {
                        .el-progress__text {
                            display: none;
                        }
                    }
                }
            }
            .tree {
                width: 258px;
                height: 258px;
            }
            .photo-box {
                width: 100%;
                box-sizing: border-box;
                margin-top: 2px;
                margin-bottom: 22px;
                padding: 12px 8px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                .photo-title {
                    display: flex;
                    justify-content: space-between;
                    color: #ffffff;
                    font-size: 12px;
                    margin-bottom: 6px;
                    .more {
                        color: #bbbbbb;
                    }
                }
                .photo-list {
                    display: flex;
                    .photo-item {
                        position: relative;
                        .img {
                            width: 58px;
                            height: 58px;
                            border: 1px solid rgba(255, 255, 255, 0.6);
                            border-radius: 10px;
                            object-fit: cover;
                        }
                        .date {
                            position: absolute;
                            color: #dddddd;
                            font-size: 10px;
                            bottom: 1px;
                            left: 1px;
                            background: rgba(0, 0, 0, 0.6);
                            width: calc(100% - 2px);
                            padding: 2px 4px;
                            box-sizing: border-box;
                            border-radius: 0 0 10px 10px;
                        }
                    }
                    .photo-item + .photo-item {
                        margin-left: 8px;
                    }
                }
            }
        }
        .source-wrap {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 10px 10px 0 0;
            .source-title {
                padding: 10px 10px 0 10px;

                .title-right {
                    background: rgba(255, 212, 137, 0.1);
                    border-radius: 20px;
                    font-size: 12px;
                    color: #ffd489;
                    padding: 2px 8px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    .sub-edit {
                        width: 12px;
                        padding-right: 4px;
                    }
                    .sub-icon {
                        padding-left: 2px;
                    }
                }
            }
            .tabs {
                background: transparent;
                border-radius: 10px 10px 0 0;
                display: flex;
                padding: 12px 11px 12px 11px;
                .tabs-item {
                    padding: 6px;
                    border-radius: 20px;
                    color: #ffffff;
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    background: rgba(255, 255, 255, 0.08);
                    &.active {
                        background: linear-gradient(180deg, #ffd887, #ed9e1e);
                        color: #1d1d1d;
                    }
                }
                .tabs-item + .tabs-item {
                    margin-left: 8px;
                }
            }
            .item-flex {
                background: rgba(255, 255, 255, 0.04);
                padding: 12px;
                border-radius: 5px;
                .item-title {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
            .list-item {
                margin-top: 12px;
            }
        }

        .item-flex {
            display: flex;
            align-items: center;
        }
        .photo {
            width: 76px;
            height: 65px;
            margin-right: 12px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }
            .date {
                position: absolute;
                bottom: 0;
                color: #fff;
                font-size: 10px;
                padding: 2px 13px;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 0 0 8px 8px;
                backdrop-filter: blur(2px);
            }
        }
        .item-text {
            color: #999999;
            font-size: 12px;
            line-height: 1.6;
            flex: 1;
            .name {
                color: #6c6c6c;
                font-size: 12px;
                .val {
                    flex: 1;
                    color: rgba(255, 255, 255, 0.8);
                }
            }
            .van-ellipsis {
                width: 200px;
            }
            .txt {
                span {
                    color: #000;
                }
            }
            .time {
                display: flex;
                align-items: center;
                .icon {
                    margin-right: 4px;
                }
                span {
                    color: #f87321;
                }
            }
        }
    }
}
</style>