feiniao-farm-h5/src/components/popup/farmCalendarPopup.vue

<template>
    <popup
        v-model:show="showValue"
        round
        teleport="body"
        class="farm-calendar-popup"
        :z-index="20000"
        :close-on-click-overlay="false"
    >
        <div class="farm-calendar-popup__title">{{ t("agriFile.completeFarmInfo") }}</div>
        <div class="farm-calendar-popup__subtitle">
            {{ t("agriFile.getImmediately") }}
            <span>{{ t("workExecute.exclusiveFarmCalendar") }}</span>
        </div>
        <div class="farm-calendar-popup__days">
            <div
                v-for="(day, index) in weekDays"
                :key="day"
                class="farm-calendar-popup__day"
                :class="{ 'is-active': activeDay === index }"
                @click="activeDay = index"
            >
                {{ t(day) }}
            </div>
        </div>
        <div class="farm-calendar-popup__image">
            <img v-if="currentImage" :src="currentImage" alt="" />
            <slot v-else name="image" :day="activeDay"></slot>
        </div>
        <div class="farm-calendar-popup__btn" @click="handleOpen">{{ t("agriFile.goEnable") }}</div>
    </popup>
</template>

<script setup>
import { computed, ref } from "vue";
import { Popup } from "vant";
import { useI18n } from "@/i18n";

const { t } = useI18n();

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    images: {
        type: Array,
        default: () => [],
    },
});

const emit = defineEmits(["update:show", "confirm"]);

const showValue = computed({
    get: () => props.show,
    set: (val) => emit("update:show", val),
});

const weekDays = ["week.1", "week.2", "week.3", "week.4", "week.5"];
const activeDay = ref(1);

const currentImage = computed(() => props.images[activeDay.value] || "");

const handleOpen = () => {
    emit("confirm");
    showValue.value = false;
};
</script>

<style scoped lang="scss">
.farm-calendar-popup {
    width: 82%;
    padding: 20px 10px;
    text-align: center;
    background: linear-gradient(360deg, #FFFFFF 1.28%, #D7EEFF 55.76%, #FFFFFF 98.67%);

    &__title,
    &__subtitle {
        font-size: 24px;
        font-family: "pangmenzhengdao";
        line-height: 28px;
    }

    &__subtitle {
        span {
            color: #2199f8;
        }
    }

    &__days {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
    }

    &__day {
        position: relative;
        flex: 1;
        border-radius: 4px 4px 0 0;
        background: #fff;
        padding: 4px 0;

        &.is-active {
            background: linear-gradient(149.44deg, #9FD5FF 2.43%, #2199F8 91.84%);
            color: #fff;
            border-radius: 4px;

            &::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -5px;
                transform: translateX(-50%);
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid #2199f8;
            }
        }
    }

    &__image {
        width: 100%;
        height: 142px;
        margin: 12px 0 14px;
        border-radius: 5px;
        background: #f2f4f7;

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    &__btn {
        width: 162px;
        margin: auto;
        padding: 8px 0;
        border-radius: 25px;
        background: #2199f8;
        color: #fff;
        font-size: 16px;
    }
}
</style>