|
@@ -16,9 +16,7 @@
|
|
|
<canvas ref="chartCanvas" id="chartCanvas" canvas-id="heightChart" class="chart-canvas" width="340" height="120"></canvas>
|
|
<canvas ref="chartCanvas" id="chartCanvas" canvas-id="heightChart" class="chart-canvas" width="340" height="120"></canvas>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 刻度尺控制(示例) -->
|
|
|
|
|
- <view class="ruler-status">当前身高:{{ rulerValue }} cm</view>
|
|
|
|
|
- <ScaleRuler :min="120" :max="220" :step="1" :gutter="8" :initialValue="170" @change="onRulerChange" @update:value="onRulerUpdate" />
|
|
|
|
|
|
|
+ <!-- 刻度尺控制(已移入添加模态) -->
|
|
|
|
|
|
|
|
<view class="content">
|
|
<view class="content">
|
|
|
<view class="summary">共 {{ records.length }} 条记录,本月平均:{{ averageHeight }} cm</view>
|
|
<view class="summary">共 {{ records.length }} 条记录,本月平均:{{ averageHeight }} cm</view>
|
|
@@ -37,7 +35,7 @@
|
|
|
<view class="fab-inner">+</view>
|
|
<view class="fab-inner">+</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 添加模态 -->
|
|
|
|
|
|
|
+ <!-- 添加模态(包含刻度尺) -->
|
|
|
<view class="modal" v-if="showAdd">
|
|
<view class="modal" v-if="showAdd">
|
|
|
<view class="modal-backdrop" @click="closeAdd"></view>
|
|
<view class="modal-backdrop" @click="closeAdd"></view>
|
|
|
<view class="modal-panel">
|
|
<view class="modal-panel">
|
|
@@ -50,8 +48,15 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="form-row">
|
|
<view class="form-row">
|
|
|
<text>身高 (cm)</text>
|
|
<text>身高 (cm)</text>
|
|
|
- <input type="number" v-model="addHeight" class="input" placeholder="请输入身高" />
|
|
|
|
|
|
|
+ <input type="number" v-model.number="addHeight" class="input" placeholder="请输入身高" />
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 刻度尺:用于在添加时调整身高 -->
|
|
|
|
|
+ <view style="margin:12rpx 0">
|
|
|
|
|
+ <view class="ruler-status">当前身高:{{ addHeight ?? '--' }} cm</view>
|
|
|
|
|
+ <ScaleRuler v-if="showAdd" :min="120" :max="220" :step="1" :gutter="8" :initialValue="addHeight ?? 170" @change="onAddRulerChange" @update:value="onAddRulerUpdate" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
<view class="modal-actions">
|
|
<view class="modal-actions">
|
|
|
<button class="btn-primary" @click="confirmAdd">保存</button>
|
|
<button class="btn-primary" @click="confirmAdd">保存</button>
|
|
|
</view>
|
|
</view>
|
|
@@ -460,22 +465,21 @@ const addDate = ref(formatPickerDate(new Date()))
|
|
|
const addDateLabel = ref(formatDisplayDate(new Date()))
|
|
const addDateLabel = ref(formatDisplayDate(new Date()))
|
|
|
const addHeight = ref<number | null>(null)
|
|
const addHeight = ref<number | null>(null)
|
|
|
|
|
|
|
|
-// 刻度尺联动值
|
|
|
|
|
-const rulerValue = ref<number>(170)
|
|
|
|
|
-function onRulerUpdate(val: number) {
|
|
|
|
|
- rulerValue.value = val
|
|
|
|
|
|
|
+// 刻度尺(添加模态使用)的联动处理
|
|
|
|
|
+function onAddRulerUpdate(val: number) {
|
|
|
|
|
+ addHeight.value = val
|
|
|
// 实时打印用户滑动时的刻度(update 在滚动过程中会频繁触发)
|
|
// 实时打印用户滑动时的刻度(update 在滚动过程中会频繁触发)
|
|
|
- console.log('[ScaleRuler] update:value ->', val)
|
|
|
|
|
|
|
+ console.log('[ScaleRuler] add update:value ->', val)
|
|
|
}
|
|
}
|
|
|
-function onRulerChange(val: number) {
|
|
|
|
|
- rulerValue.value = val
|
|
|
|
|
- console.log('[ScaleRuler] change ->', val)
|
|
|
|
|
- // 额外行为可在此扩展,例如把值填入添加输入框
|
|
|
|
|
|
|
+function onAddRulerChange(val: number) {
|
|
|
addHeight.value = val
|
|
addHeight.value = val
|
|
|
|
|
+ console.log('[ScaleRuler] add change ->', val)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function openAdd() {
|
|
function openAdd() {
|
|
|
showAdd.value = true
|
|
showAdd.value = true
|
|
|
|
|
+ // 打开添加模态时,初始化刻度尺/输入默认值(若之前无值则设为 170)
|
|
|
|
|
+ if (!addHeight.value) addHeight.value = 170
|
|
|
}
|
|
}
|
|
|
function closeAdd() {
|
|
function closeAdd() {
|
|
|
showAdd.value = false
|
|
showAdd.value = false
|