wl-design-mobile 0.8.13 → 0.8.15

package/search/lambo-week-date-select.vue

@@ -1,522 +1,522 @@
-<template>
-  <div class="week-date-picker" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
-    @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseLeave">
-    <div class="week-days">
-      <van-icon name="arrow-left" @click="goPrevWeek" />
-      <div v-for="day in weekDays" :key="day.date.getTime()" class="day-item"
-        :class="{ 
-          'today': day.isToday, 
-          'active': day.isSelected,
-          'has-data': day.hasData
-        }" 
-        @click="selectDay(day)">
-        <div class="day-week">{{ day.weekDay }}</div>
-        <div class="day-month">{{ day.year }}-{{ day.month }}</div>
-        <div class="day-date">{{ day.date.getDate() }}</div>
-        <!-- 数据点显示 -->
-        <div v-if="day.hasData" class="data-dot"></div>
-      </div>
-      <van-icon name="arrow" @click="goNextWeek" />
-    </div>
-  </div>
-</template>
-
-<script>
-const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-
-export default {
-  name: "LamboWeekDateSelect",
-
-  data() {
-    return {
-      selectedDate_: new Date(), // 当前选中的日期（Date对象），用于判断选中状态
-      weekStart: null, // 当前周的开始日期（周一）
-      startX: 0, // 触摸/鼠标起始X坐标
-      endX: 0, // 触摸/鼠标结束X坐标
-      isDragging: false, // 是否正在拖动
-      swipeThreshold: 50, // 滑动阈值（像素），超过这个值才触发切换周
-      clickDisabled: false, // 是否禁用点击（滑动后禁用点击，避免触发日期选择）
-      dataDates: new Set() // 有数据的日期集合（用于显示红点）
-    }
-  },
-  props: {
-    // 选中的日期（格式：yyyyMMDD），为空时使用今天
-    selectedDate: {
-      type: String,
-      default: ""
-    },
-    // 有数据的日期列表
-    dataDatesList: {
-      type: Array,
-      default: () => []
-    }
-  },
-
-  created() {
-    // 初始化数据日期
-    this.initDataDates();
-    
-    if (this.selectedDate) {
-      this.initWithWeekDate(this.selectedDate);
-    } else {
-      const today = new Date();
-      const todayStr = this.formatDateToYYYYMMDD(today);
-      this.initWithWeekDate(todayStr);
-    }
-  },
-
-  watch: {
-    // 监听数据日期列表变化
-    dataDatesList: {
-      handler(newList) {
-        this.initDataDates(newList);
-        // 重新计算weekDays以更新数据点显示
-        this.$forceUpdate();
-      },
-      deep: true
-    },
-    // 监听选中日期变化
-    selectedDate: {
-      handler(newDate) {
-        if (newDate) {
-          this.initWithWeekDate(newDate);
-          this.$forceUpdate();
-        }
-      }
-    }
-  },
-
-  computed: {
-    weekDays() {
-      if (!this.weekStart) return [];
-      return Array.from({ length: 7 }, (_, i) => {
-        const date = new Date(this.weekStart);
-        date.setDate(this.weekStart.getDate() + i);
-        const today = new Date();
-        const dateStr = this.formatDateToYYYYMMDD(date);
-        
-        return {
-          date,
-          year: date.getFullYear(),
-          month: date.getMonth() + 1,
-          weekDay: WEEK_DAYS[date.getDay()],
-          isToday: this.isSameDay(date, today),
-          isSelected: this.isSameDay(date, this.selectedDate_),
-          hasData: this.dataDates.has(dateStr)
-        };
-      });
-    }
-  },
-
-  methods: {
-    /**
-     * 获取当前周的开始和结束日期
-     * @returns {Object} 包含 weekStart 和 weekEnd 的对象
-     */
-    getWeekRange() {
-      const weekStartDate = this.formatDateToYYYYMMDD(this.weekStart);
-      const weekEndDateObj = new Date(this.weekStart);
-      weekEndDateObj.setDate(this.weekStart.getDate() + 6);
-      const weekEndDate = this.formatDateToYYYYMMDD(weekEndDateObj);
-      
-      return {
-        weekStart: weekStartDate,
-        weekEnd: weekEndDate
-      };
-    },
-
-    /**
-     * 初始化数据日期集合
-     * @param {Array} dateList - 日期字符串数组，格式：["20241205", "20241206"]
-     */
-    initDataDates(dateList = null) {
-      const dates = dateList || this.dataDatesList;
-      this.dataDates = new Set();
-      
-      dates.forEach(dateStr => {
-        if (dateStr && typeof dateStr === 'string' && dateStr.length === 8) {
-          this.dataDates.add(dateStr);
-        }
-      })
-    },
-
-    /**
-     * 根据YYYYMMDD格式的字符串初始化组件
-     * @param {string} dateFormat- 格式如："20251205"
-     */
-    initWithWeekDate(dateFormat) {
-      // 解析YYYYMMDD格式字符串为Date对象
-      const date = this.parseYYYYMMDD(dateFormat);
-
-      if (date) {
-        this.setWeekStart(date);
-        this.selectedDate_ = date;
-      } else {
-        const today = new Date();
-        this.setWeekStart(today);
-        this.selectedDate_ = today;
-      }
-    },
-
-    /**
-     * 解析YYYYMMDD格式字符串为Date对象
-     * @param {string} yyyymmdd - 格式如："20251205"
-     * @returns {Date|null} Date对象或null
-     */
-    parseYYYYMMDD(dateFormat) {
-      if (!dateFormat || typeof dateFormat !== 'string' || dateFormat.length !== 8) {
-        return null;
-      }
-
-      try {
-        const year = parseInt(dateFormat.substring(0, 4));
-        const month = parseInt(dateFormat.substring(4, 6)) - 1;
-        const day = parseInt(dateFormat.substring(6, 8));
-
-        const date = new Date(year, month, day);
-
-        // 验证日期是否有效
-        if (isNaN(date.getTime()) ||
-          date.getFullYear() !== year ||
-          date.getMonth() !== month ||
-          date.getDate() !== day) {
-          return null;
-        }
-
-        return date;
-      } catch (error) {
-        console.error("日期解析错误:", error);
-        return null;
-      }
-    },
-
-    /**
-     * 设置周起始日期（周一）
-     * @param {Date} date - 任意日期
-     */
-    setWeekStart(date) {
-      const d = new Date(date);
-      const day = d.getDay();
-      const diff = d.getDate() - (day === 0 ? 6 : day - 1);
-      d.setDate(diff);
-      d.setHours(0, 0, 0, 0);
-      this.weekStart = d;
-    },
-
-    /**
-     * 判断两个日期是否是同一天
-     * @param {Date} d1 - 日期1
-     * @param {Date} d2 - 日期2
-     * @returns {boolean} 是否是同一天
-     */
-    isSameDay(d1, d2) {
-      if (!d1 || !d2) return false;
-      return d1.toDateString() === d2.toDateString();
-    },
-
-    /**
-     * 格式化日期为 YYYYMMDD 字符串
-     * @param {Date} date - 日期对象
-     * @returns {string} 格式化后的日期字符串
-     */
-    formatDateToYYYYMMDD(date) {
-      const year = date.getFullYear();
-      const month = (date.getMonth() + 1).toString().padStart(2, '0');
-      const day = date.getDate().toString().padStart(2, '0');
-      return `${year}${month}${day}`;
-    },
-
-    /**
-     * 选择日期
-     * @param {Object} day - 日期对象（包含 date 属性）
-     */
-    selectDay(day) {
-      if (this.clickDisabled) {
-        this.clickDisabled = false;
-        return;
-      }
-      this.selectedDate_ = new Date(day.date);
-      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate_);
-      this.$emit('click', clickDate);
-    },
-
-    /**
-     * 切换到上一周
-     */
-    goPrevWeek() {
-      const newWeekStart = new Date(this.weekStart);
-      newWeekStart.setDate(this.weekStart.getDate() - 7);
-      this.setWeekStart(newWeekStart);
-      this.emitWeekChange();
-    },
-
-    /**
-     * 切换到下一周
-     */
-    goNextWeek() {
-      const newWeekStart = new Date(this.weekStart);
-      newWeekStart.setDate(this.weekStart.getDate() + 7);
-      this.setWeekStart(newWeekStart);
-      this.emitWeekChange();
-    },
-    
-    /**
-     * 触发周变化事件
-     */
-    emitWeekChange() {
-      const weekRange = this.getWeekRange();
-      this.$emit('on-week-change', weekRange);
-    },
-
-    /**
-     * 触摸开始事件
-     * @param {TouchEvent} e - 触摸事件
-     */
-    handleTouchStart(e) {
-      this.startX = e.touches[0].clientX;
-      this.endX = this.startX;
-      this.isDragging = true;
-      this.clickDisabled = false;
-    },
-
-    /**
-     * 触摸移动事件
-     * @param {TouchEvent} e - 触摸事件
-     */
-    handleTouchMove(e) {
-      if (!this.isDragging) return;
-      this.endX = e.touches[0].clientX;
-    },
-
-    /**
-     * 触摸结束事件
-     */
-    handleTouchEnd() {
-      if (!this.isDragging) return;
-
-      const deltaX = this.endX - this.startX;
-      this.handleSwipe(deltaX);
-
-      this.isDragging = false;
-    },
-
-    /**
-     * 鼠标按下事件
-     * @param {MouseEvent} e - 鼠标事件
-     */
-    handleMouseDown(e) {
-      this.startX = e.clientX;
-      this.endX = this.startX;
-      this.isDragging = true;
-      this.clickDisabled = false;
-    },
-
-    /**
-     * 鼠标移动事件
-     * @param {MouseEvent} e - 鼠标事件
-     */
-    handleMouseMove(e) {
-      if (!this.isDragging) return;
-      this.endX = e.clientX;
-    },
-
-    /**
-     * 鼠标松开事件
-     */
-    handleMouseUp() {
-      if (!this.isDragging) return;
-
-      const deltaX = this.endX - this.startX;
-      this.handleSwipe(deltaX);
-
-      this.isDragging = false;
-    },
-
-    /**
-     * 鼠标离开事件
-     */
-    handleMouseLeave() {
-      this.isDragging = false;
-    },
-
-    /**
-     * 处理滑动操作
-     * @param {number} deltaX - 滑动距离（正值向左滑，负值向右滑）
-     */
-    handleSwipe(deltaX) {
-      if (Math.abs(deltaX) > this.swipeThreshold) {
-        this.clickDisabled = true;
-        if (deltaX > 0) {
-          this.goPrevWeek();
-        } else {
-          this.goNextWeek();
-        }
-      }
-    },
-    
-    /**
-     * 手动添加/移除数据日期（供外部调用）
-     * @param {string} dateStr - YYYYMMDD格式的日期字符串
-     * @param {boolean} hasData - 是否有数据
-     */
-    setDateHasData(dateStr, hasData = true) {
-      if (hasData) {
-        this.dataDates.add(dateStr);
-      } else {
-        this.dataDates.delete(dateStr);
-      }
-      this.$forceUpdate();
-    }
-  }
-}
-</script>
-
-<style scoped>
-.week-date-picker {
-  width: 100%;
-  background: white;
-  padding: 10px 0;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  user-select: none;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: grab;
-}
-
-.week-date-picker:active {
-  cursor: grabbing;
-}
-
-.week-days {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 0 8px;
-}
-
-.day-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 64px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  flex-shrink: 0;
-}
-
-/* 今天日期的浅蓝色背景 */
-.day-item.today {
-  background-color: #e6efff;
-}
-
-.day-item:hover {
-  background-color: #f5f5f5;
-  transform: translateY(-2px);
-}
-
-.day-item.today:hover {
-  background-color: #b0d2f9;
-}
-
-.day-item.active {
-  background-color: #0070D2;
-  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
-  transform: translateY(-2px);
-}
-
-.day-item.active .day-week,
-.day-item.active .day-month,
-.day-item.active .day-date {
-  color: white;
-}
-
-.day-week {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.day-month {
-  font-size: 10px;
-  color: #999;
-  margin-bottom: 2px;
-}
-
-.day-date {
-  font-size: 17px;
-  font-weight: 500;
-  color: #333;
-}
-
-/* 今天日期的文字颜色 */
-.day-item.today .day-week,
-.day-item.today .day-month,
-.day-item.today .day-date {
-  color: #2c3e50;
-  font-weight: 500;
-}
-
-/* 数据点样式 - 统一大小和颜色 */
-.data-dot {
-  position: absolute;
-  bottom: -4px;
-  width: 5px;
-  height: 5px;
-  background-color: #129456;
-  border-radius: 50%;
-  animation: fadeIn 0.3s ease;
-}
-
-/* 选中状态下的数据点 - 统一为白色 */
-.day-item.active .data-dot {
-  background-color: white;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-}
-
-/* 淡入动画 */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* 今天且有数据时的特殊样式 */
-.day-item.today.has-data {
-  border: 1px solid #CBE2FB;
-}
-
-/* 移动端优化 */
-@media (max-width: 375px) {
-  .day-item {
-    width: 40px;
-    height: 60px;
-  }
-  
-  .day-date {
-    font-size: 16px;
-  }
-  
-  .day-week {
-    font-size: 11px;
-  }
-  
-  .day-month {
-    font-size: 9px;
-  }
-  
-  .data-dot {
-    width: 4px;
-    height: 4px;
-    bottom: -3px;
-  }
-}
+<template>
+  <div class="week-date-picker" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
+    @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseLeave">
+    <div class="week-days">
+      <van-icon name="arrow-left" @click="goPrevWeek" />
+      <div v-for="day in weekDays" :key="day.date.getTime()" class="day-item"
+        :class="{ 
+          'today': day.isToday, 
+          'active': day.isSelected,
+          'has-data': day.hasData
+        }" 
+        @click="selectDay(day)">
+        <div class="day-week">{{ day.weekDay }}</div>
+        <div class="day-month">{{ day.year }}-{{ day.month }}</div>
+        <div class="day-date">{{ day.date.getDate() }}</div>
+        <!-- 数据点显示 -->
+        <div v-if="day.hasData" class="data-dot"></div>
+      </div>
+      <van-icon name="arrow" @click="goNextWeek" />
+    </div>
+  </div>
+</template>
+
+<script>
+const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+export default {
+  name: "LamboWeekDateSelect",
+
+  data() {
+    return {
+      selectedDate_: new Date(), // 当前选中的日期（Date对象），用于判断选中状态
+      weekStart: null, // 当前周的开始日期（周一）
+      startX: 0, // 触摸/鼠标起始X坐标
+      endX: 0, // 触摸/鼠标结束X坐标
+      isDragging: false, // 是否正在拖动
+      swipeThreshold: 50, // 滑动阈值（像素），超过这个值才触发切换周
+      clickDisabled: false, // 是否禁用点击（滑动后禁用点击，避免触发日期选择）
+      dataDates: new Set() // 有数据的日期集合（用于显示红点）
+    }
+  },
+  props: {
+    // 选中的日期（格式：yyyyMMDD），为空时使用今天
+    selectedDate: {
+      type: String,
+      default: ""
+    },
+    // 有数据的日期列表
+    dataDatesList: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  created() {
+    // 初始化数据日期
+    this.initDataDates();
+    
+    if (this.selectedDate) {
+      this.initWithWeekDate(this.selectedDate);
+    } else {
+      const today = new Date();
+      const todayStr = this.formatDateToYYYYMMDD(today);
+      this.initWithWeekDate(todayStr);
+    }
+  },
+
+  watch: {
+    // 监听数据日期列表变化
+    dataDatesList: {
+      handler(newList) {
+        this.initDataDates(newList);
+        // 重新计算weekDays以更新数据点显示
+        this.$forceUpdate();
+      },
+      deep: true
+    },
+    // 监听选中日期变化
+    selectedDate: {
+      handler(newDate) {
+        if (newDate) {
+          this.initWithWeekDate(newDate);
+          this.$forceUpdate();
+        }
+      }
+    }
+  },
+
+  computed: {
+    weekDays() {
+      if (!this.weekStart) return [];
+      return Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(this.weekStart);
+        date.setDate(this.weekStart.getDate() + i);
+        const today = new Date();
+        const dateStr = this.formatDateToYYYYMMDD(date);
+        
+        return {
+          date,
+          year: date.getFullYear(),
+          month: date.getMonth() + 1,
+          weekDay: WEEK_DAYS[date.getDay()],
+          isToday: this.isSameDay(date, today),
+          isSelected: this.isSameDay(date, this.selectedDate_),
+          hasData: this.dataDates.has(dateStr)
+        };
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 获取当前周的开始和结束日期
+     * @returns {Object} 包含 weekStart 和 weekEnd 的对象
+     */
+    getWeekRange() {
+      const weekStartDate = this.formatDateToYYYYMMDD(this.weekStart);
+      const weekEndDateObj = new Date(this.weekStart);
+      weekEndDateObj.setDate(this.weekStart.getDate() + 6);
+      const weekEndDate = this.formatDateToYYYYMMDD(weekEndDateObj);
+      
+      return {
+        weekStart: weekStartDate,
+        weekEnd: weekEndDate
+      };
+    },
+
+    /**
+     * 初始化数据日期集合
+     * @param {Array} dateList - 日期字符串数组，格式：["20241205", "20241206"]
+     */
+    initDataDates(dateList = null) {
+      const dates = dateList || this.dataDatesList;
+      this.dataDates = new Set();
+      
+      dates.forEach(dateStr => {
+        if (dateStr && typeof dateStr === 'string' && dateStr.length === 8) {
+          this.dataDates.add(dateStr);
+        }
+      })
+    },
+
+    /**
+     * 根据YYYYMMDD格式的字符串初始化组件
+     * @param {string} dateFormat- 格式如："20251205"
+     */
+    initWithWeekDate(dateFormat) {
+      // 解析YYYYMMDD格式字符串为Date对象
+      const date = this.parseYYYYMMDD(dateFormat);
+
+      if (date) {
+        this.setWeekStart(date);
+        this.selectedDate_ = date;
+      } else {
+        const today = new Date();
+        this.setWeekStart(today);
+        this.selectedDate_ = today;
+      }
+    },
+
+    /**
+     * 解析YYYYMMDD格式字符串为Date对象
+     * @param {string} yyyymmdd - 格式如："20251205"
+     * @returns {Date|null} Date对象或null
+     */
+    parseYYYYMMDD(dateFormat) {
+      if (!dateFormat || typeof dateFormat !== 'string' || dateFormat.length !== 8) {
+        return null;
+      }
+
+      try {
+        const year = parseInt(dateFormat.substring(0, 4));
+        const month = parseInt(dateFormat.substring(4, 6)) - 1;
+        const day = parseInt(dateFormat.substring(6, 8));
+
+        const date = new Date(year, month, day);
+
+        // 验证日期是否有效
+        if (isNaN(date.getTime()) ||
+          date.getFullYear() !== year ||
+          date.getMonth() !== month ||
+          date.getDate() !== day) {
+          return null;
+        }
+
+        return date;
+      } catch (error) {
+        console.error("日期解析错误:", error);
+        return null;
+      }
+    },
+
+    /**
+     * 设置周起始日期（周一）
+     * @param {Date} date - 任意日期
+     */
+    setWeekStart(date) {
+      const d = new Date(date);
+      const day = d.getDay();
+      const diff = d.getDate() - (day === 0 ? 6 : day - 1);
+      d.setDate(diff);
+      d.setHours(0, 0, 0, 0);
+      this.weekStart = d;
+    },
+
+    /**
+     * 判断两个日期是否是同一天
+     * @param {Date} d1 - 日期1
+     * @param {Date} d2 - 日期2
+     * @returns {boolean} 是否是同一天
+     */
+    isSameDay(d1, d2) {
+      if (!d1 || !d2) return false;
+      return d1.toDateString() === d2.toDateString();
+    },
+
+    /**
+     * 格式化日期为 YYYYMMDD 字符串
+     * @param {Date} date - 日期对象
+     * @returns {string} 格式化后的日期字符串
+     */
+    formatDateToYYYYMMDD(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${year}${month}${day}`;
+    },
+
+    /**
+     * 选择日期
+     * @param {Object} day - 日期对象（包含 date 属性）
+     */
+    selectDay(day) {
+      if (this.clickDisabled) {
+        this.clickDisabled = false;
+        return;
+      }
+      this.selectedDate_ = new Date(day.date);
+      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate_);
+      this.$emit('click', clickDate);
+    },
+
+    /**
+     * 切换到上一周
+     */
+    goPrevWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() - 7);
+      this.setWeekStart(newWeekStart);
+      this.emitWeekChange();
+    },
+
+    /**
+     * 切换到下一周
+     */
+    goNextWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() + 7);
+      this.setWeekStart(newWeekStart);
+      this.emitWeekChange();
+    },
+    
+    /**
+     * 触发周变化事件
+     */
+    emitWeekChange() {
+      const weekRange = this.getWeekRange();
+      this.$emit('on-week-change', weekRange);
+    },
+
+    /**
+     * 触摸开始事件
+     * @param {TouchEvent} e - 触摸事件
+     */
+    handleTouchStart(e) {
+      this.startX = e.touches[0].clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    /**
+     * 触摸移动事件
+     * @param {TouchEvent} e - 触摸事件
+     */
+    handleTouchMove(e) {
+      if (!this.isDragging) return;
+      this.endX = e.touches[0].clientX;
+    },
+
+    /**
+     * 触摸结束事件
+     */
+    handleTouchEnd() {
+      if (!this.isDragging) return;
+
+      const deltaX = this.endX - this.startX;
+      this.handleSwipe(deltaX);
+
+      this.isDragging = false;
+    },
+
+    /**
+     * 鼠标按下事件
+     * @param {MouseEvent} e - 鼠标事件
+     */
+    handleMouseDown(e) {
+      this.startX = e.clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    /**
+     * 鼠标移动事件
+     * @param {MouseEvent} e - 鼠标事件
+     */
+    handleMouseMove(e) {
+      if (!this.isDragging) return;
+      this.endX = e.clientX;
+    },
+
+    /**
+     * 鼠标松开事件
+     */
+    handleMouseUp() {
+      if (!this.isDragging) return;
+
+      const deltaX = this.endX - this.startX;
+      this.handleSwipe(deltaX);
+
+      this.isDragging = false;
+    },
+
+    /**
+     * 鼠标离开事件
+     */
+    handleMouseLeave() {
+      this.isDragging = false;
+    },
+
+    /**
+     * 处理滑动操作
+     * @param {number} deltaX - 滑动距离（正值向左滑，负值向右滑）
+     */
+    handleSwipe(deltaX) {
+      if (Math.abs(deltaX) > this.swipeThreshold) {
+        this.clickDisabled = true;
+        if (deltaX > 0) {
+          this.goPrevWeek();
+        } else {
+          this.goNextWeek();
+        }
+      }
+    },
+    
+    /**
+     * 手动添加/移除数据日期（供外部调用）
+     * @param {string} dateStr - YYYYMMDD格式的日期字符串
+     * @param {boolean} hasData - 是否有数据
+     */
+    setDateHasData(dateStr, hasData = true) {
+      if (hasData) {
+        this.dataDates.add(dateStr);
+      } else {
+        this.dataDates.delete(dateStr);
+      }
+      this.$forceUpdate();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.week-date-picker {
+  width: 100%;
+  background: white;
+  padding: 10px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  user-select: none;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: grab;
+}
+
+.week-date-picker:active {
+  cursor: grabbing;
+}
+
+.week-days {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.day-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 64px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* 今天日期的浅蓝色背景 */
+.day-item.today {
+  background-color: #e6efff;
+}
+
+.day-item:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-2px);
+}
+
+.day-item.today:hover {
+  background-color: #b0d2f9;
+}
+
+.day-item.active {
+  background-color: #0070D2;
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.day-item.active .day-week,
+.day-item.active .day-month,
+.day-item.active .day-date {
+  color: white;
+}
+
+.day-week {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.day-month {
+  font-size: 10px;
+  color: #999;
+  margin-bottom: 2px;
+}
+
+.day-date {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
+/* 今天日期的文字颜色 */
+.day-item.today .day-week,
+.day-item.today .day-month,
+.day-item.today .day-date {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+/* 数据点样式 - 统一大小和颜色 */
+.data-dot {
+  position: absolute;
+  bottom: -4px;
+  width: 5px;
+  height: 5px;
+  background-color: #129456;
+  border-radius: 50%;
+  animation: fadeIn 0.3s ease;
+}
+
+/* 选中状态下的数据点 - 统一为白色 */
+.day-item.active .data-dot {
+  background-color: white;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 今天且有数据时的特殊样式 */
+.day-item.today.has-data {
+  border: 1px solid #CBE2FB;
+}
+
+/* 移动端优化 */
+@media (max-width: 375px) {
+  .day-item {
+    width: 40px;
+    height: 60px;
+  }
+  
+  .day-date {
+    font-size: 16px;
+  }
+  
+  .day-week {
+    font-size: 11px;
+  }
+  
+  .day-month {
+    font-size: 9px;
+  }
+  
+  .data-dot {
+    width: 4px;
+    height: 4px;
+    bottom: -3px;
+  }
+}
 </style>