活动报名界面动态
This commit is contained in:
WindowBird
parent
bcfe992bdb
commit
968507747d
|
|
@ -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',
|
||||
method: 'GET',
|
||||
url: "/app/activitie/list",
|
||||
method: "GET",
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
...params,
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -30,53 +30,33 @@ export default {
|
|||
*/
|
||||
getActivityDetail(id) {
|
||||
return request({
|
||||
url: '/app/activitie',
|
||||
method: 'GET',
|
||||
url: "/app/activitie",
|
||||
method: "GET",
|
||||
params: {
|
||||
actId: id,
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
// 获取活动插槽数据
|
||||
getActivitySlots(activityId) {
|
||||
return request({
|
||||
url: "/app/slot",
|
||||
method: "get",
|
||||
params: {
|
||||
activitield: activityId,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 报名活动
|
||||
* @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) {
|
||||
// 提交活动报名
|
||||
submitActivityApplication(data) {
|
||||
return request({
|
||||
url: '/app/activitie/register',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
url: "/app/subscribe",
|
||||
method: "post",
|
||||
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,
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{ label: "06月27日", value: "06-27" },
|
||||
{ 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" },
|
||||
],
|
||||
dateOptions: [],
|
||||
timeOptions: [],
|
||||
numberOptions: [
|
||||
{ label: "1人", value: "1" },
|
||||
{ label: "2人", value: "2" },
|
||||
|
|
@ -108,9 +109,10 @@ export default {
|
|||
],
|
||||
|
||||
// 选中的值
|
||||
selectedDate: "06-27",
|
||||
selectedTime: "08-12",
|
||||
selectedDate: "",
|
||||
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;
|
||||
}
|
||||
|
||||
// 这里可以添加提交逻辑
|
||||
console.log("提交数据:", {
|
||||
date: this.selectedDate,
|
||||
time: this.selectedTime,
|
||||
number: this.selectedNumber,
|
||||
...this.formData,
|
||||
});
|
||||
if (!this.selectedSlotId) {
|
||||
uni.showToast({
|
||||
title: "请选择活动时段",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: "提交成功",
|
||||
icon: "success",
|
||||
});
|
||||
try {
|
||||
const submitData = {
|
||||
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 (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user