Vue/student-vol/src/views/ActDetails.vue

<template>
    <div class="container">
        <div class="head">
            <p class="title">{{ data.title }}</p>
            <div class="status">
                <van-tag
                    :color="getActStatusColor(data)"
                    round
                    style="margin-right: 10px"
                >
                    {{ data.canApply ? "进行中" : "已结束" }}
                </van-tag>
                <van-tag :color="getActApplyColor(data)" round>
                    {{ applyStatusMap[data.applyStatus] }}
                </van-tag>
            </div>
        </div>

        <div class="dataItem">
            <span class="label">活动时间</span>
            <p>
                {{ formatDate(data.startTime) }} -
                {{ formatDate(data.endTime) }}
            </p>
        </div>

        <div class="dataItem">
            <span class="label">活动地点</span>
            <p>{{ data.palce }}</p>
        </div>

        <div class="dataItem">
            <span class="label">活动简介</span>
            <p>{{ data.content }}</p>
        </div>

        <div class="dataItem">
            <span class="label">活动来源</span>
            <p>{{ data.publisher }}</p>
        </div>

        <div class="dataItem">
            <span class="label">服务时长</span>
            <p>{{ data.hour }}小时</p>
        </div>

        <div class="dataItem">
            <span class="label">招募人数</span>
            <p>{{ data.total }}人</p>
        </div>

        <button
            class="fBtn"
            v-if="[2, 3].indexOf(data.applyStatus) === -1"
            @click="applyClick"
        >
            {{ data.applyStatus === 1 ? "撤销申请" : "立即报名" }}
        </button>
    </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import { showSuccessToast, showFailToast } from "vant";

export default {
    data() {
        return {
            data: {},
            applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
        };
    },
    methods: {
        formatDate(value) {
            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
        },
        getActStatusColor(data) {
            return data.canApply ? "#07C160" : "#ff976a";
        },
        getActApplyColor(data) {
            const list = ["", "#1989fa", "#07c160", "#f6352c"];
            return list[data.applyStatus];
        },
        fetchDetails() {
            const that = this;
            const payload = { id: this.$route.query.id };
            axios
                .get("/api/actDetails/details", {
                    params: payload,
                })
                .then(function (response) {
                    const { error, data = {} } = response.data;
                    if (error === 0) {
                        that.data = data.details || {};
                    }
                });
        },
        applyClick() {
            const that = this;
            const payload = {
                isApplay: this.data.applyStatus !== 1,
                id: this.$route.query.id,
            };

            axios
                .post("/api/actDetails/apply", payload)
                .then(function (response) {
                    const { error, msg } = response.data;
                    if (error === 0) {
                        showSuccessToast("操作成功");
                        if (payload.isApplay === false) {
                            that.data.applyStatus = 0; // Simulate status change to 'not applied'
                        } else {
                            that.data.applyStatus = 1; // Simulate status change to 'under review'
                        }
                        that.fetchDetails();
                    } else {
                        showFailToast(msg || "网络错误，请稍后重试");
                    }
                });
        },
    },
    mounted() {
        this.fetchDetails();
    },
};
</script>

<style scoped>
.head {
    background: white;
    padding: 20px;
    margin-bottom: 10px;
    color: #333; /* ✅ 让 head 区域默认文字深色 */
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333; /* ✅ 标题深色（关键） */
}

.status {
    display: flex;
    gap: 10px;
}

.dataItem {
    background: white;
    padding: 15px 20px;
    margin-bottom: 1px;
}

.label {
    display: block;
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.dataItem p {
    color: #333;
    line-height: 1.6;
}

.fBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 15px;
    background: #ff5d23;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}
</style>