活动报名静态界面2.0

pages/activity/application.vue

@@ -7,36 +7,56 @@
       <!-- 页面内容将在这里添加 -->
       <text>选择活动日期</text>
       <scroll-view class="scroll-view" scroll-x="true">
-        <view class="scroll-view-item_date">A</view>
+        <view
-        <view class="scroll-view-item_date">B</view>
+          v-for="(date, index) in dateOptions"
-        <view class="scroll-view-item_date">C</view>
+          :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
-        <view class="scroll-view-item_time">B</view>
+          v-for="(time, index) in timeOptions"
-        <view class="scroll-view-item_time">C</view>
+          :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
-        <view class="scroll-view-item_number">2人</view>
+          v-for="(number, index) in numberOptions"
-        <view class="scroll-view-item_number">自定义</view>
+          :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-message"
-      <view class="submit-button">提交报名</view>
+        >{{ 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);
+      }
     }
   }
 }