386 lines
9.2 KiB
Vue
386 lines
9.2 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">
|
|
<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";
|
|
|
|
export default {
|
|
components: {
|
|
MonkSearchBox: SearchBox,
|
|
CustomNumberModal,
|
|
},
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#F5F0E7",
|
|
},
|
|
CommonEnum,
|
|
searchName: "",
|
|
|
|
// 选择项数据
|
|
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" },
|
|
],
|
|
numberOptions: [
|
|
{ label: "1人", value: "1" },
|
|
{ label: "2人", value: "2" },
|
|
{ label: "自定义", value: "custom" },
|
|
],
|
|
|
|
// 选中的值
|
|
selectedDate: "06-27",
|
|
selectedTime: "08-12",
|
|
selectedNumber: "1",
|
|
|
|
// 表单数据
|
|
formData: {
|
|
name: "",
|
|
phone: "",
|
|
},
|
|
|
|
// 自定义人数弹窗相关
|
|
showCustomNumberModal: false,
|
|
};
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
// 选择日期
|
|
selectDate(value) {
|
|
this.selectedDate = value;
|
|
},
|
|
|
|
// 选择时段
|
|
selectTime(value) {
|
|
this.selectedTime = value;
|
|
},
|
|
|
|
// 选择人数
|
|
selectNumber(value) {
|
|
if (value === "custom") {
|
|
this.openCustomNumberModal();
|
|
return;
|
|
}
|
|
this.selectedNumber = value;
|
|
},
|
|
|
|
// 提交报名
|
|
submitApplication() {
|
|
if (!this.formData.name.trim()) {
|
|
uni.showToast({
|
|
title: "请输入姓名",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!this.formData.phone.trim()) {
|
|
uni.showToast({
|
|
title: "请输入手机号",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 这里可以添加提交逻辑
|
|
console.log("提交数据:", {
|
|
date: this.selectedDate,
|
|
time: this.selectedTime,
|
|
number: this.selectedNumber,
|
|
...this.formData,
|
|
});
|
|
|
|
uni.showToast({
|
|
title: "提交成功",
|
|
icon: "success",
|
|
});
|
|
},
|
|
|
|
// 获取选中的日期标签
|
|
getSelectedDateLabel() {
|
|
const selectedDate = this.dateOptions.find(
|
|
(date) => date.value === this.selectedDate,
|
|
);
|
|
return selectedDate ? selectedDate.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: #fff1dd;
|
|
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 {
|
|
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>
|