514 lines
13 KiB
Vue
514 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<!-- 使用自定义导航栏组件 -->
|
||
<custom-navbar ref="customNavbar" title="活动报名" />
|
||
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
||
<!-- 页面内容将在这里添加 -->
|
||
<text>选择活动日期</text>
|
||
<scroll-view class="scroll-view" scroll-x="true">
|
||
<view
|
||
v-for="(date, index) in dateOptions"
|
||
:key="index"
|
||
:class="{ selected: selectedDate === date.value }"
|
||
class="scroll-view-item_date"
|
||
@click="selectDate(date.value)"
|
||
>
|
||
{{ date.label }}
|
||
</view>
|
||
</scroll-view>
|
||
<text>选择活动时段</text>
|
||
<scroll-view class="scroll-view" scroll-x="true">
|
||
<view
|
||
v-for="(time, index) in timeOptions"
|
||
:key="index"
|
||
:class="{ selected: selectedTime === time.value }"
|
||
class="scroll-view-item_time"
|
||
@click="selectTime(time.value)"
|
||
>
|
||
{{ time.label }}
|
||
</view>
|
||
</scroll-view>
|
||
<text>参与活动人数</text>
|
||
<!-- <scroll-view class="scroll-view" scroll-x="true">-->
|
||
<scroll-view class="scroll-view">
|
||
<view
|
||
v-for="(number, index) in numberOptions"
|
||
:key="index"
|
||
:class="{
|
||
selected:
|
||
selectedNumber === number.value ||
|
||
(number.value === 'custom' &&
|
||
!['1', '2'].includes(selectedNumber)),
|
||
}"
|
||
class="scroll-view-item_number"
|
||
@click="selectNumber(number.value)"
|
||
>
|
||
{{ number.label }}
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="contact">
|
||
<view class="contact-item">
|
||
<view class="info">姓名</view>
|
||
<input v-model="formData.name" placeholder="请输入姓名" type="text" />
|
||
</view>
|
||
<view class="contact-item">
|
||
<view class="info">联系号码</view>
|
||
<input v-model="formData.phone" placeholder="填写手机号" type="text" />
|
||
</view>
|
||
</view>
|
||
<view class="submit">
|
||
<view class="submit-message"
|
||
>{{ getSelectedDateLabel() }}
|
||
|
||
{{ getSelectedNumberLabel() }}
|
||
</view>
|
||
<view class="submit-button" @click="submitApplication">提交报名</view>
|
||
</view>
|
||
|
||
<!-- 自定义人数弹窗 -->
|
||
<custom-number-modal
|
||
:visible="showCustomNumberModal"
|
||
@close="closeCustomModal"
|
||
@confirm="handleCustomNumberConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
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: {
|
||
MonkSearchBox: SearchBox,
|
||
CustomNumberModal,
|
||
},
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F5F0E7",
|
||
},
|
||
CommonEnum,
|
||
searchName: "",
|
||
|
||
// 活动ID
|
||
activityId: "",
|
||
|
||
// 加载状态
|
||
loading: false,
|
||
|
||
// 选择项数据
|
||
dateOptions: [],
|
||
timeOptions: [],
|
||
numberOptions: [
|
||
{ label: "1人", value: "1" },
|
||
{ label: "2人", value: "2" },
|
||
{ label: "自定义", value: "custom" },
|
||
],
|
||
|
||
// 选中的值
|
||
selectedDate: "",
|
||
selectedTime: "",
|
||
selectedNumber: "1",
|
||
selectedSlotId: "", // 保存选中的插槽ID
|
||
|
||
// 表单数据
|
||
formData: {
|
||
name: "",
|
||
phone: "",
|
||
},
|
||
|
||
// 自定义人数弹窗相关
|
||
showCustomNumberModal: false,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// 如果从其他页面传递了活动ID，使用传递的ID
|
||
if (options.actId) {
|
||
this.activityId = parseInt(options.actId);
|
||
}
|
||
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
|
||
},
|
||
|
||
// 选择人数
|
||
selectNumber(value) {
|
||
if (value === "custom") {
|
||
this.openCustomNumberModal();
|
||
return;
|
||
}
|
||
this.selectedNumber = value;
|
||
},
|
||
|
||
// 提交报名
|
||
async submitApplication() {
|
||
if (!this.formData.name.trim()) {
|
||
uni.showToast({
|
||
title: "请输入姓名",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.formData.phone.trim()) {
|
||
uni.showToast({
|
||
title: "请输入手机号",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.selectedSlotId) {
|
||
uni.showToast({
|
||
title: "请选择活动时段",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
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(() => {
|
||
const params = {
|
||
date: this.getSelectedDateLabel(),
|
||
time: this.getSelectedTimeLabel(),
|
||
number: this.getSelectedNumberLabel(),
|
||
};
|
||
const queryString = Object.keys(params)
|
||
.map((key) => `${key}=${encodeURIComponent(params[key])}`)
|
||
.join("&");
|
||
uni.navigateTo({
|
||
url: `/pages/activity/appointmentSuccess?${queryString}`,
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || "报名失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("提交报名失败:", error);
|
||
uni.showToast({
|
||
title: "网络错误",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 获取选中的日期标签
|
||
getSelectedDateLabel() {
|
||
const selectedDate = this.dateOptions.find(
|
||
(date) => date.value === this.selectedDate,
|
||
);
|
||
|
||
return selectedDate ? selectedDate.label : "";
|
||
},
|
||
|
||
// 获取选中的时段标签
|
||
getSelectedTimeLabel() {
|
||
const selectedTime = this.timeOptions.find(
|
||
(time) => time.value === this.selectedTime,
|
||
);
|
||
return selectedTime ? selectedTime.label : "";
|
||
},
|
||
|
||
// 获取选中的人数标签
|
||
getSelectedNumberLabel() {
|
||
if (
|
||
this.selectedNumber === "custom" ||
|
||
(this.selectedNumber !== "1" && this.selectedNumber !== "2")
|
||
) {
|
||
return this.selectedNumber + "人";
|
||
}
|
||
const selectedNumber = this.numberOptions.find(
|
||
(number) => number.value === this.selectedNumber,
|
||
);
|
||
return selectedNumber ? selectedNumber.label : "";
|
||
},
|
||
|
||
// 去除 HTML 标签，返回纯文本
|
||
stripHtmlTags(html) {
|
||
if (!html) return ""; // 处理空值
|
||
return html.replace(/<[^>]+>/g, ""); // 正则替换所有 HTML 标签
|
||
},
|
||
|
||
// 自定义人数弹窗相关方法
|
||
openCustomNumberModal() {
|
||
this.showCustomNumberModal = true;
|
||
},
|
||
|
||
closeCustomModal() {
|
||
this.showCustomNumberModal = false;
|
||
},
|
||
|
||
handleCustomNumberConfirm(value) {
|
||
this.selectedNumber = value;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.header {
|
||
width: 650rpx;
|
||
margin-top: 24rpx;
|
||
height: 726rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: 38rpx 50rpx 50rpx 50rpx;
|
||
background: #fffbf5;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
margin-bottom: 40rpx;
|
||
|
||
.scroll-view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
margin-bottom: 62rpx;
|
||
|
||
.scroll-view-item_date {
|
||
text-align: center;
|
||
line-height: 120rpx;
|
||
display: inline-block;
|
||
width: 162rpx;
|
||
height: 120rpx;
|
||
background: #fff1dd;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
margin-right: 32rpx;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
color: #c7a26d;
|
||
transition: all 0.3s ease;
|
||
|
||
&.selected {
|
||
background: #a24242;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.scroll-view-item_time {
|
||
text-align: center;
|
||
line-height: 120rpx;
|
||
display: inline-block;
|
||
width: 258rpx;
|
||
height: 120rpx;
|
||
background: #fff1dd;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
margin-right: 34rpx;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
color: #c7a26d;
|
||
transition: all 0.3s ease;
|
||
|
||
&.selected {
|
||
background: #a24242;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.scroll-view-item_number {
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
display: inline-block;
|
||
width: 170rpx;
|
||
height: 64rpx;
|
||
background: #fffbf5;
|
||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
margin-right: 18rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #c7a26d;
|
||
transition: all 0.3s ease;
|
||
|
||
&.selected {
|
||
background-color: #fff1dd;
|
||
color: #695347;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact {
|
||
width: 650rpx;
|
||
height: 232rpx;
|
||
background: #fffbf5;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
padding: 0 50rpx 0 54rpx;
|
||
margin-bottom: 292rpx;
|
||
|
||
.contact-item {
|
||
width: 100%;
|
||
height: 116rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #d8d8d8;
|
||
|
||
.info {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #695347;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit {
|
||
width: 650rpx;
|
||
height: 92rpx;
|
||
background: #fffbf5;
|
||
border-radius: 57rpx 57rpx 57rpx 57rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.submit-message {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #695347;
|
||
line-height: 38rpx;
|
||
margin-left: 62rpx;
|
||
}
|
||
|
||
.submit-button {
|
||
width: 224rpx;
|
||
height: 72rpx;
|
||
background: #a24242;
|
||
border-radius: 57rpx 57rpx 57rpx 57rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
margin-right: 10rpx;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
background: #8a3636;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #695347;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
</style>
|