feat:student-vol

student-vol/src/views/ServiceDetail.vue

@@ -0,0 +1,152 @@
+<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;
+}
+
+.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>