Vue/student-vol/src/components/Home/ActItem.vue

<template>
    <div class="actItem" @click="detailsClick(data.id)">
        <div class="actItem-pic">
            <img :src="data.actPic" />
            <span class="actItemStatus" :style="getTagStyle(data)">
                {{ getTagTxt(data) }}
            </span>
        </div>
        <div class="actItem-body">
            <p class="actItem-title">{{ data.title }}</p>
            <p>
                {{ formatDate(data.startTime) }} 至
                {{ formatDate(data.endTime) }}
            </p>
            <p class="actItem-tag">
                {{ data.isYourSchool ? "本人所在学校活动" : data.palce }}
            </p>
        </div>
    </div>
</template>

<script>
import moment from "moment";

export default {
    props: ["data", "isMyApply"],
    data() {
        return {
            applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
            bgColorMap: ["", "#1989fa", "#07c160", "#f6352c"],
        };
    },
    methods: {
        getTagStyle(data) {
            if (this.isMyApply && data.applyStatus !== undefined) {
                return { backgroundColor: this.bgColorMap[data.applyStatus] };
            }
            return { backgroundColor: data.canApply ? "#07c160" : "#999" };
        },
        formatDate(value) {
            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "";
        },
        detailsClick(id) {
            this.$emit("goDetails", id);
        },
        getTagTxt(data) {
            if (this.isMyApply && data.applyStatus !== undefined) {
                return this.applyStatusMap[data.applyStatus];
            }
            return data.canApply ? "进行中" : "已结束";
        },
    },
};
</script>

<style scoped>
.actItem {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: white;
    margin-bottom: 10px;
    cursor: pointer;
}

.actItem-pic {
    position: relative;
    width: 100px;
    height: 100px;
}

.actItem-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.actItemStatus {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px 8px;
    color: white;
    font-size: 12px;
    border-radius: 4px;
}

.actItem-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #333;
}

.actItem-title {
    font-weight: bold;
    font-size: 16px;
}

.actItem-tag {
    color: #666;
    font-size: 14px;
}
</style>