数字

hdApp/src/admin/member/detail.vue

@@ -86,10 +86,10 @@
             <text class="contact-value" v-if="Number(data.birthdayMonth)>0">
               {{ data.lunar==1?"农历 ":"" }}{{ data.birthdayMonth }}月{{ data.birthdayDate }}日
               <text v-if="data.lunar==1 && data.birthday!='0000-00-00'">（{{data.birthday}}）</text>
-              <text @click="modifyBirthday()" style="color:#007aff;margin-left:20upx;">修改</text>
+              <text @click="changeBirthday()" style="color:#007aff;margin-left:20upx;">修改</text>
             </text>
             <text class="contact-value" v-else>
-              <text style="color:#007aff;" @click="modifyBirthday()">设置</text>
+              <text style="color:#007aff;" @click="changeBirthday()">设置</text>
             </text>
           </view>
 
@@ -392,25 +392,33 @@
                </div>
              </div>
             
-                         <!-- 日期选择 (下拉选择) -->
+             <!-- 日期选择 (数字按钮形式) -->
              <div class="birthday-section">
                <div class="section-title">日期</div>
-               <div class="date-select-wrapper">
-                 <picker 
-                   mode="selector" 
-                   :value="dateIndex" 
-                   :range="dateArray" 
-                   @change="onDateChange" 
-                   class="date-picker"
-                 >
-                   <view class="picker-view">
-                     <text v-if="birthdayDate">{{ birthdayDate }}</text>
-                     <text v-else class="placeholder">请选择日期</text>
-                     <text class="picker-arrow">▼</text>
-                   </view>
-                 </picker>
+               <div class="date-buttons-container">
+                 <!-- 使用固定高度的容器和绝对定位的滚动视图 -->
+                 <view class="date-buttons-wrapper">
+                   <scroll-view 
+                     scroll-y="true" 
+                     class="date-buttons-scroll" 
+                     enhanced="true"
+                     show-scrollbar="true"
+                     always-bounce-vertical="true"
+                   >
+                     <div class="date-buttons">
+                       <button 
+                         v-for="(date, index) in dateArray" 
+                         :key="'date-'+date" 
+                         class="date-button" 
+                         :class="{ active: birthdayDate == date }"
+                         @click="birthdayDate = date"
+                       >{{ date }}</button>
+                     </div>
+                   </scroll-view>
+                 </view>
                </div>
              </div>
+
           </div>
         </div>
       </template>
@@ -877,8 +885,7 @@ export default {
         }
       }
     },
-    
-    modifyBirthday() {
+    changeBirthday() {
       // 初始化生日数据
       this.birthdayType = this.data.lunar || 0;
       this.birthdayMonth = this.data.birthdayMonth || '';
@@ -895,10 +902,7 @@ export default {
       this.birthdayModal = true;
     },
     
-    onDateChange(e) {
-      this.dateIndex = e.detail.value;
-      this.birthdayDate = this.dateArray[this.dateIndex];
-    },
+    // 不再需要onDateChange方法，因为我们现在使用按钮直接选择日期
     
     birthdayModalClick(e) {
       if (e.index === 0) {
@@ -1472,6 +1476,59 @@ export default {
        }
      }
      
+     .date-buttons-container {
+       width: 100%;
+     }
+     
+     .date-buttons-wrapper {
+       width: 100%;
+       height: 340upx; /* 固定高度，显示4行 */
+       background: #f8f9fa;
+       border: 2upx solid #e9ecef;
+       border-radius: 8upx;
+       position: relative;
+       overflow: hidden;
+     }
+     
+     .date-buttons-scroll {
+       width: 100%;
+       height: 100%;
+       padding: 10upx;
+       box-sizing: border-box;
+     }
+     
+     .date-buttons {
+       display: flex;
+       flex-wrap: wrap;
+       gap: 10upx;
+     }
+     
+     .date-button {
+       width: calc(25% - 8upx);
+       height: 80upx;
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       background: #ffffff;
+       border: 2upx solid #e9ecef;
+       border-radius: 8upx;
+       font-size: 30upx;
+       color: #333;
+       margin-bottom: 10upx;
+       box-sizing: border-box;
+       
+       &.active {
+         background: #e8f5ff;
+         border-color: #3385FF;
+         color: #3385FF;
+         font-weight: 500;
+       }
+       
+       &:active {
+         background: #e8f5ff;
+       }
+     }
+     
      .date-select-wrapper {
        width: 100%;
      }