feat: 增加删除记录功能

src/pages/record/index.vue

@@ -13,64 +13,57 @@
         </wd-button>
       </view>
 
-      <wd-segmented v-model:value="current" :options="list"/>
+      <wd-segmented
+          v-model:value="currentSegment"
+          :options="segmentList"
+          @change="handleChangeSegment"
+      >
+        <template #label="{ option }">
+          <view class="name">{{ option.payload }}</view>
+        </template>
+      </wd-segmented>
     </view>
 
     <!-- 时间轴区域 -->
     <view class="px-5 py-2">
       <wd-empty v-if="grouped.length === 0" icon="no-content" tip="暂无记录" />
 
-      <!-- 外层：每个日期分组 -->
       <view v-for="group in grouped" :key="group.date" class="mb-6">
-        <!-- 日期分类标题 -->
         <view class="mb-2 flex items-center gap-2 pl-1">
           <text class="text-sm text-gray-500 font-medium">{{ group.date }}</text>
-          <text class="text-xs text-gray-400">周{{ group.weekday }}</text>
+          <text class="text-sm text-gray-400">周{{ group.weekday }}</text>
           <view class="ml-2 h-[1px] flex-1 bg-gray-200" />
         </view>
 
-        <!-- 该日期下的时间轴 -->
-        <view class="relative pl-6">
-          <view
-            class="absolute bottom-1 top-1 w-[2px] from-[#07c160] via-[#2E5B8C] to-[#dde3e0] bg-gradient-to-b"
-            style="left: 0;"
-          />
-
-          <view
+        <view
             v-for="(item, idx) in group.items"
             :key="item.id || idx"
-            class="relative mb-5 last:mb-0"
-          >
-            <view
-              class="absolute border-[2.5px] border-white rounded-full shadow-sm"
-              style="width: 14px; height: 14px; left: -30px; top: 0; z-index: 2;"
-              :class="getRecordMeta(item.type).color"
-            />
+            class="mb-5 last:mb-0"
+        >
+          <!-- 卡片 -->
+          <view class="rounded-xl bg-white p-3.5 shadow-sm">
+            <view class="flex items-center justify-between">
+              <text class="text-sm text-gray-400 font-mono">{{ item.time }}</text>
+              <wd-tag :type="getRecordStatus(item).type" round>
+                {{ getRecordStatus(item).label }}
+              </wd-tag>
+            </view>
 
-            <!-- 卡片 -->
-            <view class="rounded-xl bg-white p-3.5 shadow-sm">
-              <view class="flex items-center justify-between">
-                <text class="text-xs text-gray-400 font-mono">{{ item.time }}</text>
-                <wd-tag :type="getRecordStatus(item).type" round>
-                  {{ getRecordStatus(item).label }}
-                </wd-tag>
-              </view>
+            <view class="mt-1.5 flex items-center gap-2">
+              <text>{{ getRecordMeta(item.type).icon }}</text>
+              <text class="text-gray-700 font-medium">{{ getRecordMeta(item.type).label }}</text>
+            </view>
 
-              <view class="mt-1.5 flex items-center gap-2">
-                <view
-                  class="h-7 w-7 flex items-center justify-center rounded-lg text-sm"
-                  :class="getRecordMeta(item.type).color"
-                >
-                  <text>{{ getRecordMeta(item.type).icon }}</text>
-                </view>
-                <text class="text-sm text-gray-700 font-medium">{{ getRecordMeta(item.type).label }}</text>
-              </view>
+            <view class="flex items-center justify-between">
+              <text class="mt-1.5 block text-l text-gray-800 font-bold">{{ getRecordValue(item) }}</text>
+              <wd-button v-if="!item.note" type="danger" icon="delete" size="mini" round
+                         @click="deleteClick(item)"></wd-button>
+            </view>
 
-              <text class="mt-1.5 block text-xl text-gray-800 font-bold">{{ getRecordValue(item) }}</text>
-
-              <text v-if="item.note" class="mt-0.5 block text-xs text-gray-400 leading-relaxed">
-                {{ item.note }}
-              </text>
+            <view class="flex items-center justify-between">
+              <text class="mt-0.5 block text-sm text-gray-400 leading-relaxed">{{ item.note }}</text>
+              <wd-button v-if="item.note" type="danger" icon="delete" size="mini" round
+                         @click="deleteClick(item)"></wd-button>
             </view>
           </view>
         </view>
@@ -91,6 +84,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import {
+  deleteRecordByDate,
   getMonthRecords,
   getMonthStr,
   getRecordMeta,
@@ -103,8 +97,21 @@ import type { IHealthRecord } from "@/type/record";
 
 const currentDate = ref(Date.now())
 const showDatePicker = ref(false)
-const list = ref<string[]>(['所有', '体重', '睡眠', '运动', '血压', '血糖', '心率'])
-const current = ref('所有')
+
+interface SegmentOption {
+  value: string
+  payload: string
+}
+const segmentList = ref<SegmentOption[]>([
+  { value: '', payload: '所有' },
+  { value: 'weight', payload: '体重' },
+  { value: 'sleep', payload: '睡眠' },
+  { value: 'sport', payload: '运动' },
+  { value: 'bloodPressure', payload: '血压' },
+  { value: 'bloodSugar', payload: '血糖' },
+  { value: 'temperature', payload: '心率' },
+])
+const currentSegment = ref('')
 
 const displayDate = computed(() => {
   const d = new Date(currentDate.value)
@@ -115,7 +122,7 @@ const records = ref<IHealthRecord[]>([])
 const grouped = ref<ReturnType<typeof groupByDate>>([])
 
 function loadRecords() {
-  const all = getMonthRecords(getMonthStr(currentDate.value))
+  const all = getMonthRecords(getMonthStr(currentDate.value), currentSegment.value)
   records.value = all
   grouped.value = groupByDate(all)
 }
@@ -144,6 +151,24 @@ function openDatePicker() {
 function onDateConfirm() {
   loadRecords()
 }
+
+function handleChangeSegment() {
+  loadRecords()
+}
+
+function deleteClick(item: IHealthRecord) {
+  console.log(item)
+  wx.showModal({
+    title: '提示',
+    content: '确定删除这条记录吗？',
+    success(res) {
+      if (res.confirm) {
+        deleteRecordByDate(item.date, item.id)
+        loadRecords()
+      }
+    },
+  })
+}
 </script>
 
 <style scoped lang="scss">