修改生日

hdApp/src/admin/member/detail.vue

@@ -49,7 +49,7 @@
 
     <view class="module-com user-contact-info">
         <view class="contact-header">
-          <text class="contact-title">地址信息</text>
+          <text class="contact-title">信息</text>
           <view class="action-buttons">
             <i @click.stop="pageTo({ url: '/admin/member/modify?id='+data.id+'&name='+data.name })" class="iconfont iconbianji edit-btn"></i>
             <i @click="callMobile" class="iconfont icondianhua1 call-btn"></i>
@@ -61,7 +61,7 @@
             <text class="contact-label">姓名</text>
             <text class="contact-value">{{data.name}}</text>
           </view>
-          
+
           <view class="contact-row">
             <text class="contact-label">电话</text>
             <text class="contact-value phone-number" @click="callMobile">
@@ -71,15 +71,26 @@
           </view>
           
           <view class="contact-row address-row">
-             <text class="contact-label">地址</text>
-             <view class="contact-value address-text">
-               <text class="address-main">
-                 <text v-if="!$util.isEmpty(data.city)" class="city-name">{{data.city}} </text>
-                 {{data.dist}}{{data.address}}{{data.floor}}
-               </text>
-               <text v-if="data.showAddress && !$util.isEmpty(data.showAddress)" class="show-address">{{data.showAddress}}</text>
-             </view>
-           </view>
+            <text class="contact-label">地址</text>
+            <view class="contact-value address-text">
+              <text class="address-main">
+                <text v-if="!$util.isEmpty(data.city)" class="city-name">{{data.city}} </text>
+                {{data.dist}}{{data.address}}{{data.floor}}
+              </text>
+              <text v-if="data.showAddress && !$util.isEmpty(data.showAddress)" class="show-address">{{data.showAddress}}</text>
+            </view>
+          </view>
+
+          <view class="contact-row">
+            <text class="contact-label">生日</text>
+            <text class="contact-value" v-if="Number(data.birthdayMonth)>0">
+              {{ data.lunar==1?"农历 ":"" }}{{ data.birthdayMonth }}月{{ data.birthdayDate }}日 <text @click="modifyBirthday()" style="color:#007aff;margin-left:10upx;">修改</text>
+            </text>
+            <text class="contact-value" v-else>
+              <text style="color:#007aff;" @click="modifyBirthday()">填写</text>
+            </text>
+          </view>
+
         </view>
     </view>
 
@@ -344,6 +355,65 @@
 
     <modal-module :show="promptRemarkModal" @click="promptModalClick" :content="promptModalText" color="#333" :size="32" padding="30rpx 30rpx" ></modal-module>
 
+    <modal-module :show="birthdayModal" @click="birthdayModalClick" :maskClosable="false" title="生日" padding="30rpx 30rpx" >
+      <template v-slot:content>
+        <div class="app-modal-input-wrap">
+          <div class="birthday-container">
+            <!-- 类型选择 -->
+            <div class="birthday-section">
+              <div class="section-title">类型</div>
+              <div class="type-buttons">
+                <button 
+                  class="admin-button-com middle" 
+                  :class="[birthdayType == 0 ? 'blue' : 'default']" 
+                  @click="birthdayType = 0"
+                >阳历</button>
+                <button 
+                  class="admin-button-com middle" 
+                  :class="[birthdayType == 1 ? 'blue' : 'default']" 
+                  @click="birthdayType = 1"
+                >农历</button>
+              </div>
+            </div>
+            
+                         <!-- 月份选择 -->
+             <div class="birthday-section">
+               <div class="section-title">月份</div>
+               <div class="month-buttons">
+                 <button 
+                   v-for="month in 12" 
+                   :key="'month-'+month" 
+                   class="month-button" 
+                   :class="{ active: birthdayMonth == month }"
+                   @click="birthdayMonth = month"
+                 >{{ month }}</button>
+               </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>
+             </div>
+          </div>
+        </div>
+      </template>
+    </modal-module>
+
 		<modal-module :show="changeShow" @click="confirmChange" :maskClosable="true" title="修改名称" padding="30rpx 30rpx" >
 		<template v-slot:content>
 			<div class="app-modal-input-wrap">
@@ -459,6 +529,14 @@ export default {
       passwordModal: false,
       upgradeModal: false,
       remarkModal: false,
+      birthdayModal: false,
+      birthdayType: 0, // 0阳历 1农历
+      birthdayMonth: '', // 选择的月份
+      birthdayDate: '', // 选择的日期
+      monthArray: Array.from({length: 12}, (_, i) => i + 1), // 1-12的数组
+      monthIndex: 0, // 月份选择器的索引
+      dateArray: Array.from({length: 31}, (_, i) => i + 1), // 1-31的数组
+      dateIndex: 0, // 日期选择器的索引
       tabsData: [
         {
           name: "升降级",
@@ -798,6 +876,72 @@ export default {
           this._resetPassword();
         }
       }
+    },
+    
+         modifyBirthday() {
+      // 初始化生日数据
+      this.birthdayType = this.data.lunar || 0;
+      this.birthdayMonth = this.data.birthdayMonth || '';
+      this.birthdayDate = this.data.birthdayDate || '';
+      
+      // 设置月份选择器的索引
+      if (this.birthdayMonth) {
+        this.monthIndex = this.monthArray.findIndex(m => m == this.birthdayMonth);
+        if (this.monthIndex < 0) this.monthIndex = 0;
+      } else {
+        this.monthIndex = 0;
+      }
+      
+      // 设置日期选择器的索引
+      if (this.birthdayDate) {
+        this.dateIndex = this.dateArray.findIndex(d => d == this.birthdayDate);
+        if (this.dateIndex < 0) this.dateIndex = 0;
+      } else {
+        this.dateIndex = 0;
+      }
+      
+      this.birthdayModal = true;
+    },
+    
+    onMonthChange(e) {
+      this.monthIndex = e.detail.value;
+      this.birthdayMonth = this.monthArray[this.monthIndex];
+    },
+    
+    onDateChange(e) {
+      this.dateIndex = e.detail.value;
+      this.birthdayDate = this.dateArray[this.dateIndex];
+    },
+    
+    birthdayModalClick(e) {
+      if (e.index === 0) {
+        // 取消按钮
+        this.birthdayModal = false;
+      } else {
+        // 确认按钮
+        if (!this.birthdayMonth || !this.birthdayDate) {
+          this.$msg('请选择月份和日期');
+          return;
+        }
+        
+        // 保存生日信息
+        const params = {
+          id: this.data.id,
+          lunar: this.birthdayType,
+          birthdayMonth: this.birthdayMonth,
+          birthdayDate: this.birthdayDate
+        };
+        
+        // 这里应该调用API保存生日信息
+        // 示例：saveBirthday(params).then(res => {...})
+        
+        // 模拟保存成功
+        this.data.lunar = this.birthdayType;
+        this.data.birthdayMonth = this.birthdayMonth;
+        this.data.birthdayDate = this.birthdayDate;
+        this.$msg('生日设置成功');
+        this.birthdayModal = false;
+      }
     }
   }
 };
@@ -1285,4 +1429,95 @@ export default {
     font-weight: 500;
     line-height: 1.5;
   }
+  
+  /* 生日弹框样式 */
+  .birthday-container {
+    width: 100%;
+  }
+  
+  .birthday-section {
+    margin-bottom: 30upx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .section-title {
+      font-size: 32upx;
+      color: #333;
+      margin-bottom: 20upx;
+      font-weight: 500;
+    }
+    
+    .type-buttons {
+      display: flex;
+      gap: 20upx;
+      
+      button {
+        flex: 1;
+      }
+    }
+    
+         .month-buttons {
+       display: flex;
+       flex-wrap: wrap;
+       gap: 10upx;
+     }
+     
+     .month-button {
+       width: calc(25% - 10upx);
+       height: 80upx;
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       background: #f8f9fa;
+       border: 2upx solid #e9ecef;
+       border-radius: 8upx;
+       font-size: 30upx;
+       color: #333;
+       margin-bottom: 10upx;
+       
+       &.active {
+         background: #e8f5ff;
+         border-color: #3385FF;
+         color: #3385FF;
+         font-weight: 500;
+       }
+       
+       &:active {
+         background: #e8f5ff;
+       }
+     }
+     
+     .date-select-wrapper {
+       width: 100%;
+     }
+     
+     .date-picker {
+       width: 100%;
+     }
+     
+     .picker-view {
+       width: 100%;
+       height: 80upx;
+       display: flex;
+       align-items: center;
+       justify-content: space-between;
+       background: #f8f9fa;
+       border: 2upx solid #e9ecef;
+       border-radius: 8upx;
+       padding: 0 30upx;
+       font-size: 30upx;
+       color: #333;
+       
+       .placeholder {
+         color: #999;
+       }
+       
+       .picker-arrow {
+         font-size: 24upx;
+         color: #999;
+       }
+     }
+  }
 </style>