活动报名静态界面3.0

pages/activity/application.vue

@@ -58,6 +58,32 @@
       >
       <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>
 
@@ -109,8 +135,9 @@ export default {
         phone: "",
       },
 
-      // 价格计算
-      price: 100,
+      // 自定义人数弹窗相关
+      showCustomNumberModal: false,
+      customNumber: "",
     };
   },
   onLoad() {
@@ -129,6 +156,10 @@ export default {
 
     // 选择人数
     selectNumber(value) {
+      if (value === "custom") {
+        this.openCustomNumberModal();
+        return;
+      }
       this.selectedNumber = value;
       // 根据人数计算价格
       if (value === "1") {
@@ -182,6 +213,9 @@ export default {
 
     // 获取选中的人数标签
     getSelectedNumberLabel() {
+      if (this.selectedNumber === "custom" || (this.selectedNumber !== "1" && this.selectedNumber !== "2")) {
+        return this.selectedNumber + "人";
+      }
       const selectedNumber = this.numberOptions.find(
         (number) => number.value === this.selectedNumber,
       );
@@ -212,6 +246,34 @@ export default {
       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>
@@ -379,4 +441,114 @@ text {
   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>