修改生日

hdPad/src/pages/home/components/birthdayEdit.vue

@@ -5,13 +5,13 @@
             <div class="section-title">类型</div>
             <div class="type-buttons">
                 <button 
-                    class="admin-button-com middle" 
-                    :class="[birthdayType == 0 ? 'blue' : 'default']" 
+                    class="birthday-type-btn" 
+                    :class="{active: birthdayType == 0}" 
                     @click="birthdayType = 0"
                 >公历</button>
                 <button 
-                    class="admin-button-com middle" 
-                    :class="[birthdayType == 1 ? 'blue' : 'default']" 
+                    class="birthday-type-btn" 
+                    :class="{active: birthdayType == 1}" 
                     @click="birthdayType = 1"
                 >农历</button>
             </div>
@@ -35,7 +35,6 @@
         <div class="birthday-section">
             <div class="section-title">日期</div>
             <div class="date-buttons-container">
-                <!-- 使用固定高度的容器和绝对定位的滚动视图 -->
                 <view class="date-buttons-wrapper">
                     <scroll-view 
                         scroll-y="true" 
@@ -43,11 +42,11 @@
                         enhanced="true"
                         show-scrollbar="true"
                         always-bounce-vertical="true"
-                        :style="{ height: '300upx' }"
+                        :style="{ height: '120px' }"
                     >
                         <div class="date-buttons">
                             <button 
-                                v-for="(date, index) in dateArray" 
+                                v-for="date in 31" 
                                 :key="'date-'+date" 
                                 class="date-button" 
                                 :class="{ active: birthdayDate == date }"
@@ -61,8 +60,8 @@
         
         <!-- 操作按钮 -->
         <div class="birthday-actions">
-            <button class="admin-button-com blue" @click="saveBirthday">保存</button>
-            <button class="admin-button-com default" @click="cancelBirthday">取消</button>
+            <button class="birthday-action-btn save-btn" @click="saveBirthday">保存</button>
+            <button class="birthday-action-btn cancel-btn" @click="cancelBirthday">取消</button>
         </div>
     </div>
 </template>
@@ -87,9 +86,6 @@ export default {
         }
     },
     watch: {
-        birthdayMonth() {
-            this.updateDateArray()
-        },
         customId: {
             immediate: true,
             handler(val) {
@@ -99,6 +95,10 @@ export default {
             }
         }
     },
+    created() {
+        // 初始化日期数组为1-31
+        this.updateDateArray()
+    },
     methods: {
         // 获取客户生日信息
         getCustomBirthday() {
@@ -135,17 +135,8 @@ export default {
         },
         // 更新日期数组
         updateDateArray() {
-            const daysInMonth = this.getDaysInMonth(this.birthdayMonth)
-            this.dateArray = Array.from({length: daysInMonth}, (_, i) => i + 1)
-        },
-        // 获取月份天数
-        getDaysInMonth(month) {
-            // 简单处理，不考虑闰年
-            const daysMap = {
-                1: 31, 2: 28, 3: 31, 4: 30, 5: 31, 6: 30,
-                7: 31, 8: 31, 9: 30, 10: 31, 11: 30, 12: 31
-            }
-            return daysMap[month] || 30
+            // 直接使用1到31的固定数组，不根据月份变化
+            this.dateArray = Array.from({length: 31}, (_, i) => i + 1)
         },
         // 保存生日信息
         saveBirthday() {
@@ -203,40 +194,48 @@ export default {
     background-color: #fff;
     width: 100%;
     height: 100%;
-    padding: 20upx;
+    padding: 10px;
     box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
 .birthday-section {
-    margin-bottom: 30upx;
+    margin-bottom: 15px;
 }
 
 .section-title {
-    font-size:20upx;
+    font-size: 8px;
     font-weight: bold;
-    margin-bottom: 15upx;
+    margin-bottom: 6px;
     color: #333;
 }
 
 .type-buttons {
     display: flex;
-    gap: 15upx;
+    gap: 8px;
     
-    button {
-        min-width: 120upx;
-        height: 70upx;
-        font-size: 28upx;
+    .birthday-type-btn {
+        min-width: 50px;
+        height: 30px;
+        font-size: 12px;
+        border-radius: 4px;
+        border: 1px solid #dddddd;
+        background-color: #F5F5F5;
+        color: #333;
+        text-align: center;
+        line-height: 1;
+        padding: 10px;
+        margin: 0;
         
-        &.blue {
+        &.active {
             background-color: #0076FF;
             color: white;
+            border-color: #0076FF;
         }
         
-        &.default {
-            background-color: #F5F5F5;
-            color: #333;
+        &:active {
+            opacity: 0.8;
         }
     }
 }
@@ -244,19 +243,19 @@ export default {
 .month-buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 10upx;
+    gap: 3px;
 }
 
 .month-button {
-    width: 80upx;
-    height: 80upx;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
-    border: 2upx solid #ddd;
+    border: 1px solid #ddd;
     background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28upx;
+    font-size: 12px;
     
     &.active {
         background-color: #0076FF;
@@ -270,7 +269,7 @@ export default {
 }
 
 .date-buttons-wrapper {
-    height: 300upx;
+    height: 120px;
     position: relative;
     overflow: visible;
 }
@@ -284,20 +283,20 @@ export default {
 .date-buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 10upx;
-    padding: 5upx;
+    gap: 3px;
+    padding: 2px;
 }
 
 .date-button {
-    width: 80upx;
-    height: 80upx;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
-    border: 2upx solid #ddd;
+    border: 1px solid #ddd;
     background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28upx;
+    font-size: 12px;
     
     &.active {
         background-color: #0076FF;
@@ -309,22 +308,38 @@ export default {
 .birthday-actions {
     display: flex;
     justify-content: center;
-    gap: 20upx;
-    margin-top: 30upx;
+    gap: 8px;
+    margin-top: 10px;
     
-    button {
-        min-width: 140upx;
-        height: 70upx;
-        font-size: 28upx;
+    .birthday-action-btn {
+        min-width: 60px;
+        height: 28px;
+        font-size: 12px;
+        border-radius: 4px;
+        text-align: center;
+        line-height: 1;
+        padding: 8px;
+        margin: 0;
+        border: 1px solid;
         
-        &.blue {
+        &.save-btn {
             background-color: #0076FF;
             color: white;
+            border-color: #0076FF;
+            
+            &:active {
+                background-color: #0065d9;
+            }
         }
         
-        &.default {
+        &.cancel-btn {
             background-color: #F5F5F5;
             color: #333;
+            border-color: #dddddd;
+            
+            &:active {
+                background-color: #e5e5e5;
+            }
         }
     }
 }