فهرست منبع

feat(medication): 添加时间点编辑和快捷预设功能,优化时间选择体验

mcbaiyun 5 روز پیش
والد
کامیت
b873c9797e
1فایلهای تغییر یافته به همراه162 افزوده شده و 15 حذف شده
  1. 162 15
      src/pages/patient/health/medication.vue

+ 162 - 15
src/pages/patient/health/medication.vue

@@ -99,13 +99,14 @@
                   class="time-item" 
                   v-for="(time, index) in addTimes" 
                   :key="index"
+                  @click="editTimePoint(index)"
                 >
                   <text class="time-text">{{ time }}</text>
-                  <view class="delete-time" @click="removeTime(index)">
+                  <view class="delete-time" @click.stop="removeTime(index)">
                     <uni-icons type="closeempty" size="16" color="#ff4757"></uni-icons>
                   </view>
                 </view>
-                <view class="add-time-btn" @click="showTimePicker = true">
+                <view class="add-time-btn" @click="openTimePicker">
                   <uni-icons type="plusempty" size="20" color="#3742fa"></uni-icons>
                   <text class="add-time-text">添加时间点</text>
                 </view>
@@ -159,21 +160,60 @@
       <view class="modal-panel time-picker-panel">
         <view class="drag-handle"></view>
         <view class="modal-header">
-          <text class="modal-title">选择时间</text>
+          <text class="modal-title">{{ editingTimeIndex !== null ? '修改时间' : '选择时间' }}</text>
         </view>
 
+        <!-- 快捷预设时间 -->
+        <view class="preset-section">
+          <view class="preset-column">
+            <text class="preset-label">上午</text>
+            <view class="preset-list">
+              <view 
+                class="preset-tag" 
+                v-for="t in morningPresets" 
+                :key="t"
+                @click="selectPresetTime(t)"
+              >{{ t }}</view>
+            </view>
+          </view>
+          <view class="preset-column">
+            <text class="preset-label">中午</text>
+            <view class="preset-list">
+              <view 
+                class="preset-tag" 
+                v-for="t in noonPresets" 
+                :key="t"
+                @click="selectPresetTime(t)"
+              >{{ t }}</view>
+            </view>
+          </view>
+          <view class="preset-column">
+            <text class="preset-label">晚上</text>
+            <view class="preset-list">
+              <view 
+                class="preset-tag" 
+                v-for="t in eveningPresets" 
+                :key="t"
+                @click="selectPresetTime(t)"
+              >{{ t }}</view>
+            </view>
+          </view>
+        </view>
+
+        <view class="divider-text">或自定义选择</view>
+
         <view class="time-picker-container">
           <view class="time-picker-row">
             <view class="time-unit">
               <text class="time-unit-label">时</text>
-              <picker mode="selector" :range="hoursRange" @change="onHourChange">
+              <picker mode="selector" :range="hoursRange" :value="hoursRange.indexOf(selectedHour)" @change="onHourChange">
                 <view class="time-value">{{ selectedHour }}</view>
               </picker>
             </view>
             
             <view class="time-unit">
               <text class="time-unit-label">分</text>
-              <picker mode="selector" :range="minutesRange" @change="onMinuteChange">
+              <picker mode="selector" :range="minutesRange" :value="minutesRange.indexOf(selectedMinute)" @change="onMinuteChange">
                 <view class="time-value">{{ selectedMinute }}</view>
               </picker>
             </view>
@@ -259,12 +299,18 @@ const presetTimes: Record<number, string[]> = {
   3: ['07:00', '15:00', '21:00']
 }
 
+// 快捷预设时间点(精简版,每列不超过5个,适合老年人点击)
+const morningPresets = ['07:00', '08:00', '09:00', '10:00']
+const noonPresets = ['11:00', '12:00', '13:00', '14:00', '15:00']
+const eveningPresets = ['17:00', '18:00', '19:00', '21:00', '23:00']
+
 // 时间选择器相关
 const showTimePicker = ref(false)
+const editingTimeIndex = ref<number | null>(null)
 const selectedHour = ref('08')
 const selectedMinute = ref('00')
 const hoursRange = Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0'))
-const minutesRange = ['00', '30']
+const minutesRange = ['00','10','20', '30', '40', '50']
 
 // 药品搜索
 const medicineSearch = ref('')
@@ -300,12 +346,25 @@ const openAdd = () => {
 
 // 打开时间选择器
 const openTimePicker = () => {
+  editingTimeIndex.value = null
+  selectedHour.value = '08'
+  selectedMinute.value = '00'
+  showTimePicker.value = true
+}
+
+// 修改现有时间点
+const editTimePoint = (index: number) => {
+  editingTimeIndex.value = index
+  const [hour, minute] = addTimes.value[index].split(':')
+  selectedHour.value = hour
+  selectedMinute.value = minute
   showTimePicker.value = true
 }
 
 // 关闭时间选择器
 const closeTimePicker = () => {
   showTimePicker.value = false
+  editingTimeIndex.value = null
 }
 
 // 小时改变
@@ -318,14 +377,30 @@ const onMinuteChange = (e: any) => {
   selectedMinute.value = minutesRange[e.detail.value]
 }
 
+// 选择快捷预设时间
+const selectPresetTime = (time: string) => {
+  const [hour, minute] = time.split(':')
+  selectedHour.value = hour
+  selectedMinute.value = minute
+  // 仅更新选择器数值,不直接确认,方便用户微调
+}
+
 // 确认选择时间
 const confirmTime = () => {
   const time = `${selectedHour.value}:${selectedMinute.value}`
-  // 检查是否已存在该时间点
-  if (!addTimes.value.includes(time)) {
-    addTimes.value.push(time)
-    // 按时间排序
+  
+  if (editingTimeIndex.value !== null) {
+    // 编辑模式:更新现有时间
+    addTimes.value[editingTimeIndex.value] = time
+    // 重新排序
     addTimes.value.sort()
+  } else {
+    // 添加模式:检查是否已存在该时间点
+    if (!addTimes.value.includes(time)) {
+      addTimes.value.push(time)
+      // 按时间排序
+      addTimes.value.sort()
+    }
   }
   closeTimePicker()
 }
@@ -1125,11 +1200,82 @@ onShow(() => {
 }
 
 .time-picker-panel {
-  height: 400rpx;
+  height: auto;
+  max-height: 90vh;
+}
+
+.preset-section {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 10rpx;
+  gap: 20rpx;
+}
+
+.preset-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.preset-label {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+  font-weight: bold;
+}
+
+.preset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  width: 100%;
+}
+
+.preset-tag {
+  background-color: #f0f5ff;
+  color: #3742fa;
+  font-size: 32rpx;
+  padding: 24rpx 0;
+  border-radius: 12rpx;
+  text-align: center;
+  width: 100%;
+  font-weight: bold;
+}
+
+.preset-tag:active {
+  background-color: #e0eaff;
+  opacity: 0.8;
+}
+
+.divider-text {
+  text-align: center;
+  font-size: 22rpx;
+  color: #ccc;
+  margin: 20rpx 0;
+  position: relative;
+}
+
+.divider-text::before,
+.divider-text::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 25%;
+  height: 1rpx;
+  background-color: #eee;
+}
+
+.divider-text::before {
+  left: 10%;
+}
+
+.divider-text::after {
+  right: 10%;
 }
 
 .time-picker-container {
-  padding: 40rpx 24rpx;
+  padding: 20rpx 24rpx;
 }
 
 .time-picker-row {
@@ -1153,10 +1299,11 @@ onShow(() => {
 }
 
 .time-value {
-  font-size: 48rpx;
+  font-size: 64rpx;
   color: #333;
-  padding: 10rpx 20rpx;
+  padding: 20rpx 30rpx;
   background-color: #f5f5f5;
-  border-radius: 10rpx;
+  border-radius: 12rpx;
+  font-weight: bold;
 }
 </style>