feat:student-vol

student-vol/src/views/ActDetails.vue

@@ -0,0 +1,165 @@
+<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("操作成功");
+          that.fetchDetails();
+        } else {
+          showFailToast(msg || "网络错误，请稍后重试");
+        }
+      });
+    },
+  },
+  mounted() {
+    this.fetchDetails();
+  },
+};
+</script>
+
+<style scoped>
+.head {
+  background: white;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.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>