自定义选择人数模块封装-自定义button样式不渲染修正

components/custom-number-modal/custom-number-modal.vue

@@ -0,0 +1,225 @@
+<template>
+  <view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
+    <view class="modal-content" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">{{ title }}</text>
+        <view class="modal-close" @click="handleClose">×</view>
+      </view>
+      <view class="modal-body">
+        <view class="input-group">
+          <text class="input-label">{{ label }}</text>
+          <input 
+            v-model="inputValue" 
+            type="number" 
+            :placeholder="placeholder"
+            class="custom-input"
+            @input="handleInput"
+          />
+        </view>
+      </view>
+      <view class="modal-footer">
+        <view class="modal-btn cancel-btn" @click="handleClose">{{ cancelText }}</view>
+        <view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomNumberModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '自定义人数'
+    },
+    label: {
+      type: String,
+      default: '请输入人数：'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入人数'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    maxValue: {
+      type: Number,
+      default: 99
+    }
+  },
+  data() {
+    return {
+      inputValue: ''
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.inputValue = ''
+      }
+    }
+  },
+  methods: {
+    handleInput(e) {
+      const value = e.detail.value
+      // 只允许输入数字，且小于maxValue
+      const numValue = value.replace(/[^\d]/g, "")
+      if (numValue === "" || parseInt(numValue) < this.maxValue) {
+        this.inputValue = numValue
+      }
+    },
+    
+    handleConfirm() {
+      if (this.inputValue === "") {
+        uni.showToast({
+          title: "请输入人数",
+          icon: "none",
+        })
+        return
+      }
+      
+      const numValue = parseInt(this.inputValue)
+      if (numValue >= this.maxValue) {
+        uni.showToast({
+          title: `人数不能大于等于${this.maxValue}`,
+          icon: "none",
+        })
+        return
+      }
+      
+      this.$emit('confirm', this.inputValue)
+      this.handleClose()
+    },
+    
+    handleClose() {
+      this.$emit('close')
+    },
+    
+    handleOverlayClick() {
+      this.handleClose()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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> 

pages/activity/ReservationSuccess.vue

@@ -1,13 +1,62 @@
 <template>
-	<view class="">
+  <view class="page">
-		
+    <custom-navbar ref="customNavbar" title="基础页面" />
-	</view>
+    <tile-grid />
+    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
+      <!-- 状态展示 -->
+      <status-display v-if="loading" loading-text="加载中..." type="loading" />
+      <!-- 页面内容将在这里添加 -->
+    </view>
+  </view>
 </template>
 
-<script setup>
+<script>
-	
+import CommonEnum from "../../enum/common";
+
+export default {
+  components: {},
+  data() {
+    return {
+      CommonEnum,
+      loading: false,
+    };
+  },
+  onLoad() {
+    // 页面加载时获取数据
+    this.loadPageData();
+  },
+  methods: {
+    // 加载页面数据
+    async loadPageData() {
+      this.loading = true;
+      try {
+        // TODO: 调用页面数据API
+        // const response = await getPageData()
+        // 模拟加载
+        setTimeout(() => {
+          this.loading = false;
+        }, 1000);
+      } catch (error) {
+        console.error("获取页面数据失败:", error);
+        this.loading = false;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	       
+.page {
+  background: #f5f0e7;
+}
+
+.header {
+  width: 100%;
+  //min-height: 100vh;//可能导致页面留白
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 0 15rpx;
+  padding-bottom: 40rpx;
+}
 </style>

pages/activity/application.vue

@@ -34,7 +34,12 @@
         <view
           v-for="(number, index) in numberOptions"
           :key="index"
-          :class="{ selected: selectedNumber === number.value }"
+          :class="{
+            selected:
+              selectedNumber === number.value ||
+              (number.value === 'custom' &&
+                !['1', '2'].includes(selectedNumber)),
+          }"
           class="scroll-view-item_number"
           @click="selectNumber(number.value)"
         >
@@ -54,49 +59,29 @@
     </view>
     <view class="submit">
       <view class="submit-message"
-        >{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}</view
+        >{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}
-      >
+      </view>
       <view class="submit-button" @click="submitApplication">提交报名</view>
     </view>
-    
+
     <!-- 自定义人数弹窗 -->
-    <view v-if="showCustomNumberModal" class="modal-overlay" @click="closeCustomModal">
+    <custom-number-modal
-      <view class="modal-content" @click.stop>
+      :visible="showCustomNumberModal"
-        <view class="modal-header">
+      @close="closeCustomModal"
-          <text class="modal-title">自定义人数</text>
+      @confirm="handleCustomNumberConfirm"
-          <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";
+import CustomNumberModal from "../../components/custom-number-modal/custom-number-modal.vue";
 
 export default {
   components: {
     MonkSearchBox: SearchBox,
+    CustomNumberModal,
   },
   data() {
     return {
@@ -104,8 +89,6 @@ export default {
         backgroundColor: "#F5F0E7",
       },
       CommonEnum,
-      MonkEnum,
-      monkList: [],
       searchName: "",
 
       // 选择项数据
@@ -137,12 +120,9 @@ export default {
 
       // 自定义人数弹窗相关
       showCustomNumberModal: false,
-      customNumber: "",
     };
   },
-  onLoad() {
+  onLoad() {},
-    this.fetchMonkList();
-  },
   methods: {
     // 选择日期
     selectDate(value) {
@@ -205,7 +185,10 @@ export default {
 
     // 获取选中的人数标签
     getSelectedNumberLabel() {
-      if (this.selectedNumber === "custom" || (this.selectedNumber !== "1" && this.selectedNumber !== "2")) {
+      if (
+        this.selectedNumber === "custom" ||
+        (this.selectedNumber !== "1" && this.selectedNumber !== "2")
+      ) {
         return this.selectedNumber + "人";
       }
       const selectedNumber = this.numberOptions.find(
@@ -214,25 +197,6 @@ export default {
       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 ""; // 处理空值
@@ -241,7 +205,6 @@ export default {
 
     // 自定义人数弹窗相关方法
     openCustomNumberModal() {
-      this.customNumber = ""; // 清空输入框
       this.showCustomNumberModal = true;
     },
 
@@ -249,35 +212,8 @@ export default {
       this.showCustomNumberModal = false;
     },
 
-    onCustomNumberInput(e) {
+    handleCustomNumberConfirm(value) {
-      const value = e.detail.value;
+      this.selectedNumber = value;
-      // 只允许输入数字，且小于99
-      const numValue = value.replace(/[^\d]/g, "");
-      if (numValue === "" || parseInt(numValue) < 99) {
-        this.customNumber = numValue;
-      }
-    },
-
-    confirmCustomNumber() {
-      if (this.customNumber === "") {
-        uni.showToast({
-          title: "请输入人数",
-          icon: "none",
-        });
-        return;
-      }
-      
-      const numValue = parseInt(this.customNumber);
-      if (numValue >= 99) {
-        uni.showToast({
-          title: "人数不能大于等于99",
-          icon: "none",
-        });
-        return;
-      }
-      
-      this.selectedNumber = this.customNumber;
-      this.showCustomNumberModal = false;
     },
   },
 };
@@ -446,114 +382,4 @@ 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>

pages/activity/appointmentSuccess.vue

@@ -1,13 +1,62 @@
 <template>
-	<view class="">
+  <view class="page">
-		
+    <custom-navbar ref="customNavbar" title="基础页面" />
-	</view>
+    <tile-grid />
+    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
+      <!-- 状态展示 -->
+      <status-display v-if="loading" loading-text="加载中..." type="loading" />
+      <!-- 页面内容将在这里添加 -->
+    </view>
+  </view>
 </template>
 
-<script setup>
+<script>
-	
+import CommonEnum from "../../enum/common";
+
+export default {
+  components: {},
+  data() {
+    return {
+      CommonEnum,
+      loading: false,
+    };
+  },
+  onLoad() {
+    // 页面加载时获取数据
+    this.loadPageData();
+  },
+  methods: {
+    // 加载页面数据
+    async loadPageData() {
+      this.loading = true;
+      try {
+        // TODO: 调用页面数据API
+        // const response = await getPageData()
+        // 模拟加载
+        setTimeout(() => {
+          this.loading = false;
+        }, 1000);
+      } catch (error) {
+        console.error("获取页面数据失败:", error);
+        this.loading = false;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	       
+.page {
+  background: #f5f0e7;
+}
+
+.header {
+  width: 100%;
+  //min-height: 100vh;//可能导致页面留白
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 0 15rpx;
+  padding-bottom: 40rpx;
+}
 </style>