666666

components/BabyFeedSwitchPopup.vue

@@ -265,4 +265,5 @@ const closePopup = () => {
         opacity: 0.7;
     }
 }
-</style>
\ No newline at end of file
+</style>
+

components/DatePickerPopup.vue

+<template>
+    <view v-if="visible" class="popup-overlay">
+        <view class="popup-content" @click.stop>
+            <!-- 标题栏 -->
+            <view class="header">
+                <text class="title">本次测评日期</text>
+                <view class="close-btn" @click="closePopup">
+                    <image class="close-icon" src="/static/shengzhangTool/changeBaby/closeBtn.png" mode="aspectFit"></image>
+                </view>
+            </view>
+
+            <!-- 日期选择器区域 -->
+            <view class="date-picker-section">
+                <view class="date-picker-container">
+                    <!-- 日期选择器 -->
+                    <picker-view
+                        class="date-picker"
+                        :value="datePickerValue"
+                        @change="onDateChange"
+                        :indicator-style="indicatorStyle"
+                    >
+                        <!-- 年份选择 -->
+                        <picker-view-column>
+                            <view v-for="(year, index) in yearRange" :key="index" class="picker-item">
+                                <text class="picker-text">{{ year }}</text>
+                                <text v-if="index === datePickerValue[0]" class="picker-label">年</text>
+                            </view>
+                        </picker-view-column>
+                        
+                        <!-- 月份选择 -->
+                        <picker-view-column>
+                            <view v-for="(month, index) in monthRange" :key="index" class="picker-item">
+                                <text class="picker-text">{{ month }}</text>
+                                <text v-if="index === datePickerValue[1]" class="picker-label">月</text>
+                            </view>
+                        </picker-view-column>
+                        
+                        <!-- 日期选择 -->
+                        <picker-view-column>
+                            <view v-for="(day, index) in dayRange" :key="index" class="picker-item">
+                                <text class="picker-text">{{ day }}</text>
+                                <text v-if="index === datePickerValue[2]" class="picker-label">日</text>
+                            </view>
+                        </picker-view-column>
+                    </picker-view>
+                </view>
+            </view>
+
+            <!-- 底部按钮 -->
+            <view class="bottom-buttons">
+                <image 
+                    class="cancel-btn"
+                    :class="{'cancel-btn-active': isCancelPressed}"
+                    src="/static/shengzhangTool/changeFeed/cancelBtn.png"
+                    @touchstart="handleCancelTouchStart"
+                    @touchend="handleCancelTouchEnd"
+                    mode="aspectFit"
+                />
+                
+                <image 
+                    class="ok-btn"
+                    :class="{'ok-btn-active': isOkPressed}"
+                    src="/static/shengzhangTool/changeFeed/okBtn.png"
+                    @touchstart="handleOkTouchStart"
+                    @touchend="handleOkTouchEnd"
+                    mode="aspectFit"
+                />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps, watch, computed } from 'vue'
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    selectedDate: {
+        type: String,
+        default: '2025-06-06'
+    }
+})
+
+const emit = defineEmits(['update:visible', 'update:selectedDate', 'change'])
+
+// 按钮状态
+const isCancelPressed = ref(false)
+const isOkPressed = ref(false)
+
+// 日期选择器样式
+const indicatorStyle = `height: 40px; border: none;`
+
+// 当前选择的日期
+const currentDate = ref(new Date(props.selectedDate))
+
+// 生成年份范围 (2024-2030)
+const yearRange = ref([])
+for (let i = 2024; i <= 2030; i++) {
+    yearRange.value.push(i)
+}
+
+// 生成月份范围 (1-12)
+const monthRange = ref([])
+for (let i = 1; i <= 12; i++) {
+    monthRange.value.push(i)
+}
+
+// 计算当前月份的天数
+const dayRange = computed(() => {
+    const year = currentDate.value.getFullYear()
+    const month = currentDate.value.getMonth() + 1
+    const daysInMonth = new Date(year, month, 0).getDate()
+    const days = []
+    for (let i = 1; i <= daysInMonth; i++) {
+        days.push(i)
+    }
+    return days
+})
+
+// 日期选择器的值
+const datePickerValue = computed(() => {
+    const year = currentDate.value.getFullYear()
+    const month = currentDate.value.getMonth() + 1
+    const day = currentDate.value.getDate()
+    
+    const yearIndex = yearRange.value.indexOf(year)
+    const monthIndex = monthRange.value.indexOf(month)
+    const dayIndex = dayRange.value.indexOf(day)
+    
+    return [yearIndex, monthIndex, dayIndex]
+})
+
+// 监听 props.selectedDate 的变化
+watch(() => props.selectedDate, (newVal) => {
+    currentDate.value = new Date(newVal)
+}, { immediate: true })
+
+// 日期选择变化处理
+const onDateChange = (e) => {
+    const [yearIndex, monthIndex, dayIndex] = e.detail.value
+    
+    const year = yearRange.value[yearIndex]
+    const month = monthRange.value[monthIndex]
+    const day = dayRange.value[dayIndex]
+    
+    // 创建新日期
+    const newDate = new Date(year, month - 1, day)
+    
+    // 检查是否早于2024年1月1日
+    const minDate = new Date(2024, 0, 1)
+    if (newDate < minDate) {
+        return
+    }
+    
+    currentDate.value = newDate
+}
+
+// 取消按钮事件
+const handleCancelTouchStart = () => {
+    isCancelPressed.value = true
+}
+
+const handleCancelTouchEnd = () => {
+    isCancelPressed.value = false
+    closePopup()
+}
+
+// 确认按钮事件
+const handleOkTouchStart = () => {
+    isOkPressed.value = true
+}
+
+const handleOkTouchEnd = () => {
+    isOkPressed.value = false
+    
+    // 格式化日期为 YYYY-MM-DD
+    const year = currentDate.value.getFullYear()
+    const month = String(currentDate.value.getMonth() + 1).padStart(2, '0')
+    const day = String(currentDate.value.getDate()).padStart(2, '0')
+    const formattedDate = `${year}-${month}-${day}`
+    
+    // 发送事件通知主页面
+    emit('change', formattedDate)
+    emit('update:selectedDate', formattedDate)
+    closePopup()
+}
+
+const closePopup = () => {
+    emit('update:visible', false)
+}
+</script>
+
+<style lang="less" scoped>
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+
+    .popup-content {
+        position: absolute;
+        width: 750rpx;
+        height: 897rpx;
+        background-color: #f6f8fa;
+        overflow: hidden;
+        border-top-left-radius: 32rpx;
+        border-top-right-radius: 32rpx;
+        bottom: 0rpx;
+        padding-top: 50rpx;
+        display: flex;
+        flex-direction: column;
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 30rpx;
+            border-bottom: 1rpx solid #e0e0e0;
+
+            .title {
+                font-size: 36rpx;
+                font-weight: bold;
+                color: #1d1e26;
+            }
+
+            .close-btn {
+                width: 60rpx;
+                height: 60rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .close-icon {
+                width: 40rpx;
+                height: 40rpx;
+            }
+        }
+
+        .date-picker-section {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20rpx 30rpx;
+            
+            .date-picker-container {
+                position: relative;
+                width: 100%;
+                height: 500rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                
+                .date-picker {
+                    position: relative;
+                    z-index: 2;
+                    width: 600rpx;
+                    height: 300rpx;
+                    background-color: #f6f8fa;
+                    
+                    .picker-column{
+                        background-color: #f6f8fa;
+                    }
+                    .picker-item {
+                        background-color: #f6f8fa;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        height: 40rpx;
+                        line-height: 40rpx;
+                        
+                        .picker-text {
+                            font-size: 32rpx;
+                            color: #1d1e26;
+                            font-weight: bold;
+                        }
+                        
+                        .picker-label {
+                            font-size: 28rpx;
+                            color: #1d1e26;
+                            font-weight: bold;
+                            margin-left: 8rpx;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bottom-buttons {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-top: 20rpx;
+            padding-left: 30rpx;
+            padding-right: 30rpx;
+            
+            .cancel-btn {
+                width: 334rpx;
+                height: 97rpx;
+                transition: transform 0.1s ease-out;
+                
+                &.cancel-btn-active {
+                    transform: scale(0.95);
+                }
+            }
+            
+            .ok-btn {
+                width: 334rpx;
+                height: 97rpx;
+                transition: transform 0.1s ease-out;
+                
+                &.ok-btn-active {
+                    transform: scale(0.95);
+                }
+            }
+        }
+    }
+}
+</style> 
\ No newline at end of file

pages/shengzhangTools/shengzhangTools.vue

@@ -52,13 +52,13 @@
 
     <!-- 测评信息区域 -->
     <view class="test-info-section">
-        <view class="test-date-row">
-            <text class="label">本次测评日期</text>
-            <view class="date-container" @click="showDatePicker">
-                <text class="date-value">2025-06-06</text>
-                <image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image>
+                    <view class="test-date-row">
+                <text class="label">本次测评日期</text>
+                <view class="date-container" @click="showDatePicker">
+                    <text class="date-value">{{ selectedDate }}</text>
+                    <image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image>
+                </view>
             </view>
-        </view>
 		<!-- 分割线 -->
 		<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
         
@@ -189,12 +189,20 @@
         v-model:selectedIndex="currentFeedIndex"
         @change="onFeedChange"
     />
+    
+    <!-- 日期选择弹窗 -->
+    <DatePickerPopup 
+        v-model:visible="showDatePickerPopup"
+        v-model:selectedDate="selectedDate"
+        @change="onDateChange"
+    />
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
 import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue'
+import DatePickerPopup from '@/components/DatePickerPopup.vue'
 
 const swiperData = ref([{bannerImg: '/static/shengzhangTool/banner1.png'}, {bannerImg: '/static/shengzhangTool/banner2.png'}, {bannerImg: '/static/shengzhangTool/banner3.png'}]);
 
@@ -254,8 +262,19 @@ const generateRange = (min, max, step = 0.1) => {
     return range
 }
 
+// 日期选择器相关状态
+const showDatePickerPopup = ref(false)
+const selectedDate = ref('2025-06-06')
+
 const showDatePicker = () => {
 	console.log('显示日期选择器')
+	showDatePickerPopup.value = true
+}
+
+// 处理日期选择变化
+const onDateChange = (date) => {
+	console.log('选择了日期:', date)
+	selectedDate.value = date
 }
 
 const showFeedingPopup = () => {