|
|
@@ -4,12 +4,11 @@
|
|
|
<view class="header">
|
|
|
<view class="month-selector">
|
|
|
<button class="btn" @click="prevMonth">‹</button>
|
|
|
- <view class="month-label">{{ displayYear }}年 {{ displayMonth }}月</view>
|
|
|
+ <picker mode="multiSelector" :value="pickerValue" :range="pickerRange" @change="onPickerChange">
|
|
|
+ <view class="month-label">{{ displayYear }}年 {{ displayMonth }}月</view>
|
|
|
+ </picker>
|
|
|
<button class="btn" @click="nextMonth">›</button>
|
|
|
</view>
|
|
|
- <picker mode="date" :value="pickerValue" @change="onPickerChange">
|
|
|
- <view class="picker-display">切换月份</view>
|
|
|
- </picker>
|
|
|
</view>
|
|
|
|
|
|
<!-- 趋势图 - 简化canvas设置 -->
|
|
|
@@ -87,7 +86,13 @@ type RecordItem = { id: string; date: string; height: number }
|
|
|
|
|
|
// 当前展示年月
|
|
|
const current = ref(new Date())
|
|
|
-const pickerValue = ref(formatPickerDate(current.value))
|
|
|
+const pickerValue = ref([current.value.getFullYear() - 2000, current.value.getMonth()]) // 年从2000年开始,月0-11
|
|
|
+
|
|
|
+// 年月选择器的选项范围
|
|
|
+const pickerRange = ref([
|
|
|
+ Array.from({ length: 50 }, (_, i) => `${2000 + i}年`), // 2000-2049年
|
|
|
+ Array.from({ length: 12 }, (_, i) => `${i + 1}月`) // 1-12月
|
|
|
+])
|
|
|
|
|
|
// 明确的canvas尺寸(将由 getCanvasSize 初始化以匹配设备宽度)
|
|
|
const canvasWidth = ref(700) // 初始值,会在 mounted 时覆盖
|
|
|
@@ -602,7 +607,7 @@ async function prevMonth() {
|
|
|
const d = new Date(current.value)
|
|
|
d.setMonth(d.getMonth() - 1)
|
|
|
current.value = d
|
|
|
- pickerValue.value = formatPickerDate(d)
|
|
|
+ pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
|
|
|
records.value = generateMockRecords(d)
|
|
|
await rebuildChart()
|
|
|
}
|
|
|
@@ -611,20 +616,19 @@ async function nextMonth() {
|
|
|
const d = new Date(current.value)
|
|
|
d.setMonth(d.getMonth() + 1)
|
|
|
current.value = d
|
|
|
- pickerValue.value = formatPickerDate(d)
|
|
|
+ pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
|
|
|
records.value = generateMockRecords(d)
|
|
|
await rebuildChart()
|
|
|
}
|
|
|
|
|
|
async function onPickerChange(e: any) {
|
|
|
const val = e?.detail?.value || e
|
|
|
- const parts = (val as string).split('-')
|
|
|
- if (parts.length >= 2) {
|
|
|
- const y = parseInt(parts[0], 10)
|
|
|
- const m = parseInt(parts[1], 10) - 1
|
|
|
+ if (Array.isArray(val) && val.length >= 2) {
|
|
|
+ const y = 2000 + val[0]
|
|
|
+ const m = val[1]
|
|
|
const d = new Date(y, m, 1)
|
|
|
current.value = d
|
|
|
- pickerValue.value = formatPickerDate(d)
|
|
|
+ pickerValue.value = [val[0], val[1]]
|
|
|
records.value = generateMockRecords(d)
|
|
|
await rebuildChart()
|
|
|
}
|