555 lines
13 KiB
Vue
555 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">
|
||
<view
|
||
v-for="(number, index) in numberOptions"
|
||
:key="index"
|
||
:class="{ selected: selectedNumber === number.value }"
|
||
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>
|
||
|
||
<!-- 自定义人数弹窗 -->
|
||
<view v-if="showCustomNumberModal" class="modal-overlay" @click="closeCustomModal">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">自定义人数</text>
|
||
<view class="modal-close" @click="closeCustomModal">×</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<view class="input-group">
|
||
<text class="input-label">请输入人数：</text>
|
||
<input
|
||
v-model="customNumber"
|
||
type="number"
|
||
placeholder="请输入人数"
|
||
class="custom-input"
|
||
@input="onCustomNumberInput"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<view class="modal-btn cancel-btn" @click="closeCustomModal">取消</view>
|
||
<view class="modal-btn confirm-btn" @click="confirmCustomNumber">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { CommonEnum } from "@/enum/common.js";
|
||
import { MonkEnum } from "@/enum/monk.js";
|
||
import { getMonkList } from "@/api/monk/monk.js";
|
||
|
||
import SearchBox from "../../components/search-box/search-box.vue";
|
||
|
||
export default {
|
||
components: {
|
||
MonkSearchBox: SearchBox,
|
||
},
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F5F0E7",
|
||
},
|
||
CommonEnum,
|
||
MonkEnum,
|
||
monkList: [],
|
||
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,
|
||
customNumber: "",
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.fetchMonkList();
|
||
},
|
||
methods: {
|
||
// 选择日期
|
||
selectDate(value) {
|
||
this.selectedDate = value;
|
||
},
|
||
|
||
// 选择时段
|
||
selectTime(value) {
|
||
this.selectedTime = value;
|
||
},
|
||
|
||
// 选择人数
|
||
selectNumber(value) {
|
||
if (value === "custom") {
|
||
this.openCustomNumberModal();
|
||
return;
|
||
}
|
||
this.selectedNumber = value;
|
||
// 根据人数计算价格
|
||
if (value === "1") {
|
||
this.price = 100;
|
||
} else if (value === "2") {
|
||
this.price = 180;
|
||
} else {
|
||
this.price = 100; // 自定义价格，可以根据需要调整
|
||
}
|
||
},
|
||
|
||
// 提交报名
|
||
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 : "";
|
||
},
|
||
|
||
async fetchMonkList() {
|
||
try {
|
||
const res = await getMonkList({ name: this.searchName });
|
||
if (res.code === 200 && Array.isArray(res.rows)) {
|
||
this.monkList = res.rows;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || "获取失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({
|
||
title: "网络错误",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 去除 HTML 标签，返回纯文本
|
||
stripHtmlTags(html) {
|
||
if (!html) return ""; // 处理空值
|
||
return html.replace(/<[^>]+>/g, ""); // 正则替换所有 HTML 标签
|
||
},
|
||
|
||
// 自定义人数弹窗相关方法
|
||
openCustomNumberModal() {
|
||
this.customNumber = ""; // 清空输入框
|
||
this.showCustomNumberModal = true;
|
||
},
|
||
|
||
closeCustomModal() {
|
||
this.showCustomNumberModal = false;
|
||
},
|
||
|
||
onCustomNumberInput(e) {
|
||
const value = e.detail.value;
|
||
// 只允许输入数字
|
||
this.customNumber = value.replace(/[^\d]/g, "");
|
||
},
|
||
|
||
confirmCustomNumber() {
|
||
if (this.customNumber === "") {
|
||
uni.showToast({
|
||
title: "请输入人数",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
this.selectedNumber = this.customNumber;
|
||
this.showCustomNumberModal = false;
|
||
},
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
|
||
/* 自定义人数弹窗样式 */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 600rpx;
|
||
background: #fffbf5;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 40rpx 50rpx 20rpx 50rpx;
|
||
border-bottom: 1rpx solid #e0e0e0;
|
||
}
|
||
|
||
.modal-title {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #695347;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 40rpx 50rpx;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.input-label {
|
||
font-size: 32rpx;
|
||
color: #695347;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.custom-input {
|
||
width: 460rpx;
|
||
height: 80rpx;
|
||
border: 2rpx solid #c7a26d;
|
||
border-radius: 10rpx;
|
||
padding-left:30rpx;
|
||
font-size: 32rpx;
|
||
color: #695347;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
border-top: 1rpx solid #e0e0e0;
|
||
}
|
||
|
||
.modal-btn {
|
||
flex: 1;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
border-right: 1rpx solid #e0e0e0;
|
||
}
|
||
|
||
.cancel-btn:active {
|
||
background: #e0e0e0;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background: #a24242;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.confirm-btn:active {
|
||
background: #8a3636;
|
||
}
|
||
</style>
|