|
@@ -99,13 +99,14 @@
|
|
|
class="time-item"
|
|
class="time-item"
|
|
|
v-for="(time, index) in addTimes"
|
|
v-for="(time, index) in addTimes"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
|
|
+ @click="editTimePoint(index)"
|
|
|
>
|
|
>
|
|
|
<text class="time-text">{{ time }}</text>
|
|
<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>
|
|
<uni-icons type="closeempty" size="16" color="#ff4757"></uni-icons>
|
|
|
</view>
|
|
</view>
|
|
|
</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>
|
|
<uni-icons type="plusempty" size="20" color="#3742fa"></uni-icons>
|
|
|
<text class="add-time-text">添加时间点</text>
|
|
<text class="add-time-text">添加时间点</text>
|
|
|
</view>
|
|
</view>
|
|
@@ -159,21 +160,60 @@
|
|
|
<view class="modal-panel time-picker-panel">
|
|
<view class="modal-panel time-picker-panel">
|
|
|
<view class="drag-handle"></view>
|
|
<view class="drag-handle"></view>
|
|
|
<view class="modal-header">
|
|
<view class="modal-header">
|
|
|
- <text class="modal-title">选择时间</text>
|
|
|
|
|
|
|
+ <text class="modal-title">{{ editingTimeIndex !== null ? '修改时间' : '选择时间' }}</text>
|
|
|
</view>
|
|
</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-container">
|
|
|
<view class="time-picker-row">
|
|
<view class="time-picker-row">
|
|
|
<view class="time-unit">
|
|
<view class="time-unit">
|
|
|
<text class="time-unit-label">时</text>
|
|
<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>
|
|
<view class="time-value">{{ selectedHour }}</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="time-unit">
|
|
<view class="time-unit">
|
|
|
<text class="time-unit-label">分</text>
|
|
<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>
|
|
<view class="time-value">{{ selectedMinute }}</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
@@ -259,12 +299,18 @@ const presetTimes: Record<number, string[]> = {
|
|
|
3: ['07:00', '15:00', '21:00']
|
|
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 showTimePicker = ref(false)
|
|
|
|
|
+const editingTimeIndex = ref<number | null>(null)
|
|
|
const selectedHour = ref('08')
|
|
const selectedHour = ref('08')
|
|
|
const selectedMinute = ref('00')
|
|
const selectedMinute = ref('00')
|
|
|
const hoursRange = Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0'))
|
|
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('')
|
|
const medicineSearch = ref('')
|
|
@@ -300,12 +346,25 @@ const openAdd = () => {
|
|
|
|
|
|
|
|
// 打开时间选择器
|
|
// 打开时间选择器
|
|
|
const openTimePicker = () => {
|
|
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
|
|
showTimePicker.value = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 关闭时间选择器
|
|
// 关闭时间选择器
|
|
|
const closeTimePicker = () => {
|
|
const closeTimePicker = () => {
|
|
|
showTimePicker.value = false
|
|
showTimePicker.value = false
|
|
|
|
|
+ editingTimeIndex.value = null
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 小时改变
|
|
// 小时改变
|
|
@@ -318,14 +377,30 @@ const onMinuteChange = (e: any) => {
|
|
|
selectedMinute.value = minutesRange[e.detail.value]
|
|
selectedMinute.value = minutesRange[e.detail.value]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 选择快捷预设时间
|
|
|
|
|
+const selectPresetTime = (time: string) => {
|
|
|
|
|
+ const [hour, minute] = time.split(':')
|
|
|
|
|
+ selectedHour.value = hour
|
|
|
|
|
+ selectedMinute.value = minute
|
|
|
|
|
+ // 仅更新选择器数值,不直接确认,方便用户微调
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 确认选择时间
|
|
// 确认选择时间
|
|
|
const confirmTime = () => {
|
|
const confirmTime = () => {
|
|
|
const time = `${selectedHour.value}:${selectedMinute.value}`
|
|
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()
|
|
addTimes.value.sort()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 添加模式:检查是否已存在该时间点
|
|
|
|
|
+ if (!addTimes.value.includes(time)) {
|
|
|
|
|
+ addTimes.value.push(time)
|
|
|
|
|
+ // 按时间排序
|
|
|
|
|
+ addTimes.value.sort()
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
closeTimePicker()
|
|
closeTimePicker()
|
|
|
}
|
|
}
|
|
@@ -1125,11 +1200,82 @@ onShow(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.time-picker-panel {
|
|
.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 {
|
|
.time-picker-container {
|
|
|
- padding: 40rpx 24rpx;
|
|
|
|
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.time-picker-row {
|
|
.time-picker-row {
|
|
@@ -1153,10 +1299,11 @@ onShow(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.time-value {
|
|
.time-value {
|
|
|
- font-size: 48rpx;
|
|
|
|
|
|
|
+ font-size: 64rpx;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
|
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
background-color: #f5f5f5;
|
|
background-color: #f5f5f5;
|
|
|
- border-radius: 10rpx;
|
|
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|