wl-design-mobile 0.6.8 → 0.7.0

package/card-item/lambo-card-head.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @click="handleClick">
     <table width="100%" class="title-tb" border="0">
       <tr>
         <td class="card-title0">{{ title }}</td>
@@ -30,12 +30,14 @@ export default {
     return {
 
     }
-  },
-  methods: {
-
   },
   created() {
     console.log("head item:", this.item)
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', this.item);
+    }
   }
 }
 </script>

package/edit/select/lambo-edit-date.vue

@@ -52,11 +52,11 @@ export default {
     },
     minDate: {
       type: Date,
-      default: () => new Date((new Date()).getFullYear() - 3, (new Date()).getMonth(), (new Date()).getDate())
+      default: () => moment().subtract(3, 'years').toDate(),
     },
     maxDate: {
       type: Date,
-      default: () => new Date((new Date()).getFullYear() + 3, (new Date()).getMonth(), (new Date()).getDate())
+      default: () => moment().add(3, 'years').toDate(),
     },
     allowSameDay: {
       type: Boolean,

package/list/lambo-list.vue

@@ -96,16 +96,16 @@ export default {
         setTimeout(() => {
           console.log('this.searchParams',this.searchParams)
           let arr = [
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-            {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
           ]
           this.list.push(...arr)
           this.finished = false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "",
   "main": "index.js",
   "author": "finch",

package/search/lambo-week-select.vue

@@ -0,0 +1,326 @@
+<template>
+  <div
+      class="week-date-picker"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+      @mouseleave="handleMouseLeave"
+  >
+    <div class="week-days">
+      <div
+          v-for="day in weekDays"
+          :key="day.date.getTime()"
+          class="day-item"
+          :class="{
+          'today': day.isToday,
+          'active': day.isSelected,
+        }"
+          @click="selectDay(day)"
+      >
+        <div class="day-week">{{ day.weekDay }}</div>
+        <div class="day-month">{{ day.month }}月</div>
+        <div class="day-date">{{ day.date.getDate() }}</div>
+        <div v-if="day.isToday" class="today-dot"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+
+export default {
+  name: "LamboWeekSelect",
+
+  data() {
+    return {
+      selectedDate: new Date(),
+      weekStart: null,
+      startX: 0,
+      endX: 0,
+      isDragging: false,
+      swipeThreshold: 50,
+      clickDisabled: false
+    }
+  },
+  props: {
+    weekDate: {
+      type: String,
+      default: null
+    },
+  },
+
+  created() {
+    if (this.weekDate) {
+      this.initWithWeekDate(this.weekDate);
+    } else {
+      const today = new Date();
+      const todayStr = this.formatDateToYYYYMMDD(today);
+      this.initWithWeekDate(todayStr);
+    }
+  },
+
+  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();
+        return {
+          date,
+          month: date.getMonth() + 1,
+          weekDay: WEEK_DAYS[date.getDay()],
+          isToday: this.isSameDay(date, today),
+          isSelected: this.isSameDay(date, this.selectedDate)
+        };
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 根据YYYYMMDD格式的字符串初始化组件
+     * @param {string} dateFormat- 格式如："20251205"
+     */
+    initWithWeekDate(dateFormat) {
+      // 解析YYYYMMDD格式字符串为Date对象
+      const date = this.parseYYYYMMDD(dateFormat);
+
+      if (date) {
+        console.log("根据传入日期初始化:", dateFormat);
+        this.setWeekStart(date);
+        this.selectedDate = new Date(date);
+      } else {
+        console.log("日期解析失败，使用今天");
+        const today = new Date();
+        this.setWeekStart(today);
+        this.selectedDate = new Date(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;
+      }
+    },
+
+    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;
+    },
+
+    isSameDay(d1, d2) {
+      if (!d1 || !d2) return false;
+      return d1.toDateString() === d2.toDateString();
+    },
+
+    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}`;
+    },
+
+    selectDay(day) {
+      if (this.clickDisabled) {
+        this.clickDisabled = false;
+        return;
+      }
+      this.selectedDate = new Date(day.date);
+      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate);
+      console.log('选中的日期:', clickDate);
+      // 触发自定义事件，传递YYYYMMDD格式的日期
+      this.$emit('click', clickDate);
+    },
+
+    goPrevWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() - 7);
+      this.setWeekStart(newWeekStart);
+    },
+
+    goNextWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() + 7);
+      this.setWeekStart(newWeekStart);
+    },
+
+    handleTouchStart(e) {
+      this.startX = e.touches[0].clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    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;
+    },
+
+    handleMouseDown(e) {
+      this.startX = e.clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    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;
+    },
+
+    handleSwipe(deltaX) {
+      if (Math.abs(deltaX) > this.swipeThreshold) {
+        this.clickDisabled = true;
+        if (deltaX > 0) {
+          this.goPrevWeek();
+        } else {
+          this.goNextWeek();
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.week-date-picker {
+  width: 100%;
+  background: white;
+  padding: 16px 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:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-2px);
+}
+
+.day-item.active {
+  background-color: #1677ff;
+  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: 20px;
+  font-weight: 500;
+  color: #333;
+}
+
+.today-dot {
+  position: absolute;
+  bottom: -4px;
+  width: 4px;
+  height: 4px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.day-item.active .today-dot {
+  background-color: white;
+}
+</style>