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

<template>
    <div class="container">
        <div class="dataItem">
            <span class="label">服务时间</span>
            <span>{{ formatDay(data.actTime) }}</span>
        </div>

        <div class="dataItem">
            <span class="label">服务地点</span>
            <span>{{ data.place }}</span>
        </div>

        <div class="dataItem">
            <span class="label">服务内容</span>
            <span>{{ data.content }}</span>
        </div>

        <div class="dataItem">
            <span class="label">服务照片</span>
            <div>
                <img
                    class="serviceImg"
                    v-for="url in data.imgList"
                    :src="url"
                    :key="url"
                />
            </div>
        </div>

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

        <div class="dataItem">
            <span class="label">纪实时间</span>
            <span>{{ formatDate(data.uploadTime) }}</span>
        </div>

        <div class="dataItem">
            <span class="label">审核状态</span>
            <span>
                <span
                    class="status"
                    :style="{ backgroundColor: bgColorMap[data.status] }"
                >
                    {{ statusMap[data.status] }}
                </span>
            </span>
        </div>

        <div class="footer">
            <p class="title">{{ titleMap[data.status] }}</p>
            <p class="score" v-if="data.status === 1">4分</p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
    data() {
        return {
            data: {},
            statusMap: ["审核中", "审核通过", "审核驳回"],
            bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
            titleMap: [
                "正在审核中，请耐心等待",
                "感谢您的服务，请收下服务积分",
                "审核被驳回了哟",
            ],
        };
    },
    methods: {
        formatDate(value) {
            return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
        },
        formatDay(value) {
            return value ? moment(value).format("YYYY-MM-DD") : "--";
        },
        fetchDetails() {
            const that = this;
            const payload = { id: this.$route.query.id };
            axios
                .get("/api/service/details", {
                    params: payload,
                })
                .then(function (response) {
                    const { error, data = {} } = response.data;
                    if (error === 0) {
                        that.data = data.details || {};
                    }
                });
        },
    },
    mounted() {
        this.fetchDetails();
    },
};
</script>

<style scoped>
.dataItem {
    background: white;
    padding: 15px 20px;
    margin-bottom: 1px;
    color: #333; /* ✅ 关键：让值的文字变深色 */
}

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

.serviceImg {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 10px;
    margin-top: 10px;
}

.status {
    padding: 4px 12px;
    color: white;
    font-size: 12px;
    border-radius: 12px;
}

.footer {
    background: white;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}

.title {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.score {
    font-size: 32px;
    color: #ff5d23;
    font-weight: bold;
}
</style>