活动报名界面动态

api/activity/activity.js

@@ -1,4 +1,4 @@
-import request from '../../utils/request'
+import request from "../../utils/request";
 
 // 活动相关API
 export default {
@@ -13,14 +13,14 @@ export default {
    */
   getActivityList(params = {}) {
     return request({
-      url: '/app/activitie/list',
+      url: "/app/activitie/list",
-      method: 'GET',
+      method: "GET",
       params: {
         pageNum: 1,
         pageSize: 20,
         ...params,
       },
-    })
+    });
   },
 
   /**
@@ -30,53 +30,33 @@ export default {
    */
   getActivityDetail(id) {
     return request({
-      url: '/app/activitie',
+      url: "/app/activitie",
-      method: 'GET',
+      method: "GET",
       params: {
         actId: id,
       },
-    })
+    });
+  },
+  // 获取活动插槽数据
+  getActivitySlots(activityId) {
+    return request({
+      url: "/app/slot",
+      method: "get",
+      params: {
+        activitield: activityId,
+      },
+    });
   },
 
-  /**
+  // 提交活动报名
-   * 报名活动
+  submitActivityApplication(data) {
-   * @param {Object} data - 报名数据
-   * @param {string} data.activityId - 活动ID
-   * @param {string} data.userId - 用户ID
-   * @param {string} data.userName - 用户姓名
-   * @param {string} data.phone - 联系电话
-   * @returns {Promise} 报名结果
-   */
-  registerActivity(data) {
     return request({
-      url: '/app/activitie/register',
+      url: "/app/subscribe",
-      method: 'POST',
+      method: "post",
-      data,
+      data: data,
-    })
+      header: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
   },
-
+};
-  /**
-   * 取消报名
-   * @param {string} id - 报名记录ID
-   * @returns {Promise} 取消结果
-   */
-  cancelRegistration(id) {
-    return request({
-      url: `/app/activitie/cancel/${id}`,
-      method: 'POST',
-    })
-  },
-
-  /**
-   * 获取我的活动报名记录
-   * @param {Object} params - 查询参数
-   * @returns {Promise} 报名记录列表
-   */
-  getMyRegistrations(params = {}) {
-    return request({
-      url: '/app/activitie/my-registrations',
-      method: 'GET',
-      params,
-    })
-  },
-}

pages/activity/application.vue

@@ -59,7 +59,8 @@
     </view>
     <view class="submit">
       <view class="submit-message"
-        >{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}
+        >{{ getSelectedDateLabel() }} {{ getSelectedTimeLabel() }}
+        {{ getSelectedNumberLabel() }}
       </view>
       <view class="submit-button" @click="submitApplication">提交报名</view>
     </view>
@@ -77,6 +78,7 @@
 import { CommonEnum } from "@/enum/common.js";
 import SearchBox from "../../components/search-box/search-box.vue";
 import CustomNumberModal from "../../components/custom-number-modal/custom-number-modal.vue";
+import activityApi from "@/api/activity/activity.js";
 
 export default {
   components: {
@@ -91,16 +93,15 @@ export default {
       CommonEnum,
       searchName: "",
 
+      // 活动ID
+      activityId: 3,
+
+      // 加载状态
+      loading: false,
+
       // 选择项数据
-      dateOptions: [
+      dateOptions: [],
-        { label: "06月27日", value: "06-27" },
+      timeOptions: [],
-        { label: "06月28日", value: "06-28" },
-        { label: "06月29日", value: "06-29" },
-      ],
-      timeOptions: [
-        { label: "08:00-12:00", value: "08-12" },
-        { label: "13:00-18:00", value: "13-18" },
-      ],
       numberOptions: [
         { label: "1人", value: "1" },
         { label: "2人", value: "2" },
@@ -108,9 +109,10 @@ export default {
       ],
 
       // 选中的值
-      selectedDate: "06-27",
+      selectedDate: "",
-      selectedTime: "08-12",
+      selectedTime: "",
       selectedNumber: "1",
+      selectedSlotId: "", // 保存选中的插槽ID
 
       // 表单数据
       formData: {
@@ -122,16 +124,87 @@ export default {
       showCustomNumberModal: false,
     };
   },
-  onLoad() {},
+  onLoad() {
+    this.fetchActivitySlots();
+  },
   methods: {
+    // 获取活动插槽数据
+    async fetchActivitySlots() {
+      this.loading = true;
+      try {
+        const res = await activityApi.getActivitySlots(this.activityId);
+        if (res.code === 200 && Array.isArray(res.data)) {
+          this.processSlotData(res.data);
+        } else {
+          uni.showToast({
+            title: res.msg || "获取活动数据失败",
+            icon: "none",
+          });
+        }
+      } catch (error) {
+        console.error("获取活动插槽数据失败:", error);
+        uni.showToast({
+          title: "网络错误",
+          icon: "none",
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 处理插槽数据
+    processSlotData(data) {
+      // 处理日期选项
+      this.dateOptions = data.map((item) => ({
+        label: this.formatDateLabel(item.label),
+        value: item.label,
+        children: item.children,
+      }));
+
+      // 默认选择第一个日期
+      if (this.dateOptions.length > 0) {
+        this.selectDate(this.dateOptions[0].value);
+      }
+    },
+
+    // 格式化日期标签
+    formatDateLabel(dateStr) {
+      const date = new Date(dateStr);
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+      return `${month}月${day}日`;
+    },
+
     // 选择日期
     selectDate(value) {
       this.selectedDate = value;
+      this.selectedTime = "";
+      this.selectedSlotId = "";
+
+      // 根据选中的日期更新时段选项
+      const selectedDateData = this.dateOptions.find(
+        (item) => item.value === value,
+      );
+      if (selectedDateData && selectedDateData.children) {
+        this.timeOptions = selectedDateData.children.map((item) => ({
+          label: item.label,
+          value: item.id,
+          slotId: item.id,
+        }));
+
+        // 默认选择第一个时段
+        if (this.timeOptions.length > 0) {
+          this.selectTime(this.timeOptions[0].value);
+        }
+      } else {
+        this.timeOptions = [];
+      }
     },
 
     // 选择时段
     selectTime(value) {
       this.selectedTime = value;
+      this.selectedSlotId = value; // 保存插槽ID
     },
 
     // 选择人数
@@ -144,7 +217,7 @@ export default {
     },
 
     // 提交报名
-    submitApplication() {
+    async submitApplication() {
       if (!this.formData.name.trim()) {
         uni.showToast({
           title: "请输入姓名",
@@ -161,18 +234,47 @@ export default {
         return;
       }
 
-      // 这里可以添加提交逻辑
+      if (!this.selectedSlotId) {
-      console.log("提交数据:", {
+        uni.showToast({
-        date: this.selectedDate,
+          title: "请选择活动时段",
-        time: this.selectedTime,
+          icon: "none",
-        number: this.selectedNumber,
+        });
-        ...this.formData,
+        return;
-      });
+      }
 
-      uni.showToast({
+      try {
-        title: "提交成功",
+        const submitData = {
-        icon: "success",
+          actId: this.activityId,
-      });
+          slotId: this.selectedSlotId,
+          number: this.selectedNumber,
+          userName: this.formData.name,
+          phone: this.formData.phone,
+        };
+
+        const res = await activityApi.submitActivityApplication(submitData);
+        if (res.code === 200) {
+          uni.showToast({
+            title: "报名成功",
+            icon: "success",
+          });
+
+          // 可以在这里添加跳转逻辑
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        } else {
+          uni.showToast({
+            title: res.msg || "报名失败",
+            icon: "none",
+          });
+        }
+      } catch (error) {
+        console.error("提交报名失败:", error);
+        uni.showToast({
+          title: "网络错误",
+          icon: "none",
+        });
+      }
     },
 
     // 获取选中的日期标签
@@ -183,6 +285,14 @@ export default {
       return selectedDate ? selectedDate.label : "";
     },
 
+    // 获取选中的时段标签
+    getSelectedTimeLabel() {
+      const selectedTime = this.timeOptions.find(
+        (time) => time.value === this.selectedTime,
+      );
+      return selectedTime ? selectedTime.label : "";
+    },
+
     // 获取选中的人数标签
     getSelectedNumberLabel() {
       if (