WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动报名静态界面2.0

Browse Source
This commit is contained in:
WindowBird 2025-08-14 17:28:33 +08:00
parent eb56c0fb2f
commit 269472ce68
1 changed files with 157 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
pages/activity/application.vue
View File

@ -7,36 +7,56 @@
<!-- 页面内容将在这里添加 -->
<text>选择活动日期</text>
<scroll-view class="scroll-view" scroll-x="true">
<view class="scroll-view-item_date">A</view>
<view class="scroll-view-item_date">B</view>
<view class="scroll-view-item_date">C</view>
<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 class="scroll-view-item_time">A</view>
<view class="scroll-view-item_time">B</view>
<view class="scroll-view-item_time">C</view>
<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 class="scroll-view-item_number">1人</view>
<view class="scroll-view-item_number">2人</view>
<view class="scroll-view-item_number">自定义</view>
<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 placeholder="请输入姓名" type="text" />
<input v-model="formData.name" placeholder="请输入姓名" type="text" />
</view>
<view class="contact-item">
<view class="info">联系号码</view>
<input placeholder="填写手机号" type="text" />
<input v-model="formData.phone" placeholder="填写手机号" type="text" />
</view>
</view>
<view class="submit">
<view class="submit-message">100</view>
<view class="submit-button">提交报名</view>
<view class="submit-message"
>{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}</view
>
<view class="submit-button" @click="submitApplication">提交报名</view>
</view>
</view>
</template>
@ -61,12 +81,113 @@ export default {
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: "",
},
// 价格计算
price: 100,
};
},
onLoad() {
this.fetchMonkList();
},
methods: {
// 选择日期
selectDate(value) {
this.selectedDate = value;
},
// 选择时段
selectTime(value) {
this.selectedTime = value;
},
// 选择人数
selectNumber(value) {
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() {
const selectedNumber = this.numberOptions.find(
(number) => number.value === this.selectedNumber,
);
return selectedNumber ? selectedNumber.label : "";
},
async fetchMonkList() {
try {
const res = await getMonkList({ name: this.searchName });
@ -134,6 +255,12 @@ export default {
font-weight: 700;
font-size: 28rpx;
color: #c7a26d;
transition: all 0.3s ease;
&.selected {
background: #a24242;
color: #ffffff;
}
}
.scroll-view-item_time {
@ -148,11 +275,16 @@ export default {
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;
@ -164,6 +296,11 @@ export default {
font-weight: 400;
font-size: 32rpx;
color: #c7a26d;
transition: all 0.3s ease;
&.selected {
color: #695347;
}
}
}
}
@ -224,6 +361,12 @@ export default {
line-height: 72rpx;
text-align: center;
margin-right: 10rpx;
transition: all 0.3s ease;
&:active {
background: #8a3636;
transform: scale(0.98);
}
}
}
}