浏览代码

feat(health): 将刻度尺移入添加模态并优化交互

- 移除页面中的独立刻度尺组件
- 在添加模态中集成刻度尺控制
- 更新刻度尺事件处理逻辑
- 添加模态打开时初始化身高值
- 使用 v-model.number 确保输入为数字类型
- 调整刻度尺与输入框的联动行为
- 优化控制台日志输出内容
mcbaiyun 2 月之前
父节点
当前提交
4a9ef51b12
共有 1 个文件被更改,包括 18 次插入14 次删除
  1. 18 14
      src/pages/health/height.vue

+ 18 - 14
src/pages/health/height.vue

@@ -16,9 +16,7 @@
   <canvas ref="chartCanvas" id="chartCanvas" canvas-id="heightChart" class="chart-canvas" width="340" height="120"></canvas>
     </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="summary">共 {{ records.length }} 条记录,本月平均:{{ averageHeight }} cm</view>
@@ -37,7 +35,7 @@
       <view class="fab-inner">+</view>
     </view>
 
-    <!-- 添加模态 -->
+    <!-- 添加模态(包含刻度尺) -->
     <view class="modal" v-if="showAdd">
       <view class="modal-backdrop" @click="closeAdd"></view>
       <view class="modal-panel">
@@ -50,8 +48,15 @@
         </view>
         <view class="form-row">
           <text>身高 (cm)</text>
-          <input type="number" v-model="addHeight" class="input" placeholder="请输入身高" />
+          <input type="number" v-model.number="addHeight" class="input" placeholder="请输入身高" />
         </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">
           <button class="btn-primary" @click="confirmAdd">保存</button>
         </view>
@@ -460,22 +465,21 @@ const addDate = ref(formatPickerDate(new Date()))
 const addDateLabel = ref(formatDisplayDate(new Date()))
 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 在滚动过程中会频繁触发)
-  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
+  console.log('[ScaleRuler] add change ->', val)
 }
 
 function openAdd() {
   showAdd.value = true
+  // 打开添加模态时,初始化刻度尺/输入默认值(若之前无值则设为 170)
+  if (!addHeight.value) addHeight.value = 170
 }
 function closeAdd() {
   showAdd.value = false