cardbuddy 0.6.0

package/dist/vendored/components/DatePickerOverlay.vue

@@ -0,0 +1,345 @@
+<!--
+  showDatePicker 模拟展现层：底部弹出日期选择器（Vant 风格滚轮）。
+  相对固定视口 phone-viewport 定位（absolute inset:0），层级同 DeviceOverlay（z-index 1100）。
+  对齐 docs/动态卡片方案详细说明.md「showDatePicker - 时间选择器」：
+  - type='year_month_day' 三列（年-月-日）；type='year_month' 两列（年-月）；type='month_day' 两列（月-日）。
+  - 列生成受 startDate/endDate 约束；year_month_day 下「月」切换联动「日」可选天数（2 月按闰年）。
+  - 点「确定」回传 { error:'0', currentDate, data:{ year, month, day, value } }，点「取消」不回传。
+  - 交互：桌面端 mousedown 抓住任意一列拖动滚轮（mousemove/mouseup）并吸附到最近项；
+    支持鼠标滚轮滚动、点击某一项直接选中；移动端 touch 事件（同一套 pointerY 逻辑）。
+  - 实现采用 scrollTop（而非 transform），避免 Chrome 对大幅 translateY 的渲染裁剪问题，
+    同时保留 .pk-col__list 的原生 overflow-y:auto + padding 结构，使滚动更自然。
+  - 复用 showPicker 的 .pk-* 弹层样式，通过 .pk-cols--wheel 隐藏滚动条。
+-->
+<template>
+  <div class="device-ui">
+    <transition name="picker-fade">
+      <div v-if="datePicker" class="pk-mask" @click.self="onCancel">
+        <div class="pk-sheet">
+          <div class="pk-bar">
+            <button type="button" class="pk-bar__btn pk-bar__btn--cancel" @click="onCancel">取消</button>
+            <div v-if="datePicker.title" class="pk-bar__title">{{ datePicker.title }}</div>
+            <button type="button" class="pk-bar__btn pk-bar__btn--ok" @click="onConfirm">确定</button>
+          </div>
+          <div
+            ref="cols"
+            class="pk-cols pk-cols--wheel"
+            :class="['pk-cols--' + columns.length, { 'is-dragging': dragging }]"
+          >
+            <div
+              v-for="(col, ci) in columns"
+              :key="col.key"
+              class="pk-col"
+              @mousedown.prevent="onDragStart(ci, $event)"
+              @touchstart.prevent="onDragStart(ci, $event)"
+              @wheel="onWheel(ci, $event)"
+            >
+              <div class="pk-col__band"></div>
+              <div class="pk-col__list" @scroll="onScroll(ci, $event)">
+                <div
+                  v-for="(item, ii) in col.items"
+                  :key="col.key + '-' + item.text"
+                  class="pk-item"
+                  :class="{ 'pk-item--on': sel[ci] === ii }"
+                  @click="onItemClick(ci, ii)"
+                >{{ item.text }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { deviceUI, dismissDatePicker } from '@/runtime/jsapi-mock.js'
+
+// 与 .pk-cols(230) / .pk-item(40) 的 CSS 尺寸一致：中间选中带落在容器中线。
+// 上下各留 95px 空白，使首项/末项也能滚到中线。
+const ITEM_H = 40
+const PAD = (230 - ITEM_H) / 2 // 95
+
+function pad(n) {
+  return String(n).padStart(2, '0')
+}
+function range(a, b) {
+  const out = []
+  for (let i = a; i <= b; i++) out.push(i)
+  return out
+}
+function daysInMonth(y, m) {
+  const leap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
+  const dim = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return dim[(m - 1 + 12) % 12]
+}
+// 容错解析日期：'1970-1-1' / '2026-05-16' / '05-16' 均可
+function parseDate(s) {
+  if (!s) return null
+  const nums = String(s).split('-').map((x) => parseInt(x, 10))
+  if (nums.some((n) => Number.isNaN(n))) return null
+  if (nums.length === 3) return { y: nums[0], m: nums[1], d: nums[2] }
+  if (nums.length === 2) return { m: nums[0], d: nums[1] }
+  return null
+}
+
+export default {
+  name: 'DatePickerOverlay',
+  data() {
+    return {
+      sel: [], // 各列选中索引（列数由 type 决定）
+      dragging: false,
+      drag: null, // { ci, startY, startScrollTop, moved }
+      suppressClick: false, // 拖动结束后抑制误触发的 click
+      scrollTimers: [], // 各列滚轮停止后吸附定时器
+    }
+  },
+  computed: {
+    datePicker() {
+      return deviceUI.datePicker
+    },
+    // 起止年份范围（供年列生成与选中值反算）
+    yearRange() {
+      const dp = this.datePicker
+      const lo = parseDate(dp && dp.startDate) || { y: 1970 }
+      const hi = parseDate(dp && dp.endDate) || { y: 2100 }
+      const minY = lo.y || 1970
+      const maxY = hi.y || 2100
+      return { minY, maxY }
+    },
+    columns() {
+      const dp = this.datePicker
+      if (!dp) return []
+      const { minY } = this.yearRange
+      if (dp.type === 'month_day') {
+        return [
+          { key: 'month', items: range(1, 12).map((m) => ({ text: pad(m) })) },
+          { key: 'day', items: range(1, 31).map((d) => ({ text: pad(d) })) },
+        ]
+      }
+      if (dp.type === 'year_month') {
+        return [
+          { key: 'year', items: range(minY, this.yearRange.maxY).map((y) => ({ text: String(y) })) },
+          { key: 'month', items: range(1, 12).map((m) => ({ text: pad(m) })) },
+        ]
+      }
+      // year_month_day：日列随选中年月联动天数
+      const y = minY + (this.sel[0] || 0)
+      const m = (this.sel[1] || 0) + 1
+      const dim = daysInMonth(y, m)
+      return [
+        { key: 'year', items: range(minY, this.yearRange.maxY).map((yy) => ({ text: String(yy) })) },
+        { key: 'month', items: range(1, 12).map((mm) => ({ text: pad(mm) })) },
+        { key: 'day', items: range(1, dim).map((d) => ({ text: pad(d) })) },
+      ]
+    },
+  },
+  watch: {
+    // datePicker 切换（含入参变化）时按 selectDate 初始化选中项
+    datePicker: {
+      immediate: true,
+      handler(dp) {
+        if (!dp) {
+          this.sel = []
+          this.scrollTimers = []
+          return
+        }
+        const parsed = parseDate(dp.selectDate) || this.todayConstrained(dp)
+        const { minY } = this.yearRange
+        if (dp.type === 'month_day') {
+          this.sel = [parsed.m - 1, parsed.d - 1]
+        } else if (dp.type === 'year_month') {
+          this.sel = [parsed.y - minY, parsed.m - 1]
+        } else {
+          const dim = daysInMonth(parsed.y, parsed.m)
+          this.sel = [parsed.y - minY, parsed.m - 1, Math.min(parsed.d, dim) - 1]
+        }
+        this.$nextTick(() => this.syncScrollTops())
+      },
+    },
+    // 年/月切换后联动「日」可选范围并刷新各列 scrollTop
+    sel: {
+      deep: true,
+      handler() {
+        const dp = this.datePicker
+        if (!dp) return
+        const s = this.sel.slice()
+        if (dp.type === 'year_month_day') {
+          const y = this.yearRange.minY + (s[0] || 0)
+          const m = (s[1] || 0) + 1
+          const dim = daysInMonth(y, m)
+          if (s[2] > dim - 1) {
+            s[2] = dim - 1
+            this.sel = s
+            return
+          }
+        }
+        this.$nextTick(() => this.syncScrollTops())
+      },
+    },
+  },
+  methods: {
+    getList(ci) {
+      const cols = this.$refs.cols
+      if (!cols) return null
+      return cols.querySelectorAll('.pk-col__list')[ci] || null
+    },
+    scrollForIndex(i) {
+      return (i || 0) * ITEM_H
+    },
+    // 用当前 sel 重建各列 scrollTop
+    syncScrollTops() {
+      const cols = this.columns
+      cols.forEach((_, ci) => {
+        const list = this.getList(ci)
+        if (!list) return
+        list.scrollTop = this.scrollForIndex(this.sel[ci] || 0)
+      })
+    },
+    pointerY(e) {
+      return e.touches && e.touches.length ? e.touches[0].clientY : e.clientY
+    },
+    onDragStart(ci, e) {
+      this.suppressClick = false
+      const list = this.getList(ci)
+      this.drag = {
+        ci,
+        startY: this.pointerY(e),
+        startScrollTop: list ? list.scrollTop : 0,
+        moved: false,
+      }
+      this.dragging = true
+      // 拖动中停止吸附
+      clearTimeout(this.scrollTimers[ci])
+      window.addEventListener('mousemove', this.onDragMove)
+      window.addEventListener('mouseup', this.onDragEnd)
+      window.addEventListener('touchmove', this.onDragMove, { passive: false })
+      window.addEventListener('touchend', this.onDragEnd)
+    },
+    onDragMove(e) {
+      if (!this.drag) return
+      if (e.cancelable) e.preventDefault()
+      const y = this.pointerY(e)
+      const delta = y - this.drag.startY
+      if (Math.abs(delta) > 3) this.drag.moved = true
+      const list = this.getList(this.drag.ci)
+      if (list) list.scrollTop = this.drag.startScrollTop - delta
+    },
+    onDragEnd() {
+      if (!this.drag) return
+      const ci = this.drag.ci
+      const list = this.getList(ci)
+      const wasMoved = this.drag.moved
+      this.drag = null
+      this.dragging = false
+      window.removeEventListener('mousemove', this.onDragMove)
+      window.removeEventListener('mouseup', this.onDragEnd)
+      window.removeEventListener('touchmove', this.onDragMove)
+      window.removeEventListener('touchend', this.onDragEnd)
+      if (list) {
+        const max = this.columns[ci].items.length - 1
+        let idx = Math.round(list.scrollTop / ITEM_H)
+        idx = Math.max(0, Math.min(max, idx))
+        // 先吸附再改 sel，避免 watch 冲突
+        list.scrollTop = this.scrollForIndex(idx)
+        if (this.sel[ci] !== idx) {
+          const next = this.sel.slice()
+          next[ci] = idx
+          this.sel = next
+        }
+      }
+      if (wasMoved) {
+        this.suppressClick = true
+        this.$nextTick(() => {
+          this.suppressClick = false
+        })
+      }
+    },
+    onWheel(ci, e) {
+      // 让原生滚轮滚动，停止后由 onScroll 吸附
+      clearTimeout(this.scrollTimers[ci])
+      this.scrollTimers[ci] = setTimeout(() => this.snapToNearest(ci), 120)
+    },
+    onScroll(ci, e) {
+      if (this.dragging) return
+      clearTimeout(this.scrollTimers[ci])
+      this.scrollTimers[ci] = setTimeout(() => this.snapToNearest(ci), 120)
+    },
+    snapToNearest(ci) {
+      const list = this.getList(ci)
+      if (!list) return
+      const max = (this.columns[ci] && this.columns[ci].items.length - 1) || 0
+      let idx = Math.round(list.scrollTop / ITEM_H)
+      idx = Math.max(0, Math.min(max, idx))
+      list.scrollTop = this.scrollForIndex(idx)
+      if (this.sel[ci] !== idx) {
+        const next = this.sel.slice()
+        next[ci] = idx
+        this.sel = next
+      }
+    },
+    onItemClick(ci, ii) {
+      if (this.suppressClick) return
+      const list = this.getList(ci)
+      if (list) list.scrollTop = this.scrollForIndex(ii)
+      const next = this.sel.slice()
+      next[ci] = ii
+      this.sel = next
+    },
+    todayConstrained(dp) {
+      const t = new Date()
+      const { minY, maxY } = this.yearRange
+      let y = t.getFullYear()
+      y = Math.max(minY, Math.min(maxY, y))
+      let m = t.getMonth() + 1
+      const dim = daysInMonth(y, m)
+      let d = Math.min(t.getDate(), dim)
+      return { y, m, d }
+    },
+    buildResult() {
+      const dp = this.datePicker
+      if (!dp) return null
+      const { minY } = this.yearRange
+      let y = ''
+      let m = 0
+      let d = 0
+      if (dp.type === 'month_day') {
+        m = (this.sel[0] || 0) + 1
+        d = (this.sel[1] || 0) + 1
+      } else if (dp.type === 'year_month') {
+        y = minY + (this.sel[0] || 0)
+        m = (this.sel[1] || 0) + 1
+      } else {
+        y = minY + (this.sel[0] || 0)
+        m = (this.sel[1] || 0) + 1
+        d = (this.sel[2] || 0) + 1
+      }
+      const mm = pad(m)
+      const dd = pad(d)
+      let value
+      if (dp.type === 'year_month_day') value = `${y}-${mm}-${dd}`
+      else if (dp.type === 'year_month') value = `${y}-${mm}`
+      else value = `${mm}-${dd}`
+      return {
+        year: dp.type === 'month_day' ? '' : String(y),
+        month: mm,
+        day: dp.type === 'year_month' ? '' : dd,
+        value,
+      }
+    },
+    onConfirm() {
+      dismissDatePicker(true, this.buildResult())
+    },
+    onCancel() {
+      dismissDatePicker(false)
+    },
+  },
+  beforeUnmount() {
+    window.removeEventListener('mousemove', this.onDragMove)
+    window.removeEventListener('mouseup', this.onDragEnd)
+    window.removeEventListener('touchmove', this.onDragMove)
+    window.removeEventListener('touchend', this.onDragEnd)
+    this.scrollTimers.forEach((t) => clearTimeout(t))
+  },
+}
+</script>