feat: 增加记录模块
This commit is contained in:
@@ -173,22 +173,8 @@ const overviewItems = [
|
||||
|
||||
// 今日计划
|
||||
const plans = [
|
||||
{ icon: '🚶', label: '步行 8000 步', done: true },
|
||||
{ icon: '🥤', label: '喝水 2000ml', done: true },
|
||||
{ icon: '🏃', label: '运动30分钟', done: true },
|
||||
{ icon: '🛏️', label: '23:00 前入睡', done: false },
|
||||
{ icon: '💊', label: '服用维生素 D', done: false },
|
||||
]
|
||||
|
||||
// 快速记录
|
||||
const quickActions = [
|
||||
{ icon: '🩺', label: '血压', bg: 'bg-[#fef2f2]', border: 'border-[#fecaca]' },
|
||||
{ icon: '😴', label: '睡眠', bg: 'bg-[#e8f1ff]', border: 'border-[#bfdbfe]' },
|
||||
{ icon: '⚖️', label: '体重', bg: 'bg-[#fef3cd]', border: 'border-[#fde68a]' },
|
||||
{ icon: '💧', label: '喝水', bg: 'bg-[#e0f7fa]', border: 'border-[#a5f3fc]' },
|
||||
{ icon: '🍎', label: '饮食', bg: 'bg-[#f0fdf4]', border: 'border-[#bbf7d0]' },
|
||||
{ icon: '😊', label: '心情', bg: 'bg-[#fdf2f8]', border: 'border-[#fbcfe8]' },
|
||||
{ icon: '💊', label: '用药', bg: 'bg-[#f5f3ff]', border: 'border-[#ddd6fe]' },
|
||||
{ icon: '📝', label: '笔记', bg: 'bg-[#f8fafc]', border: 'border-[#cbd5e1]' },
|
||||
]
|
||||
|
||||
const recordTypes = [
|
||||
|
||||
@@ -1,13 +1,220 @@
|
||||
<template>
|
||||
<view class="mt-10 text-center text-green-500">
|
||||
记录
|
||||
<!-- 页面容器 -->
|
||||
<view class="min-h-screen bg-[#f2f4f3]">
|
||||
<!-- 顶部日期栏：左右箭头 + 日期居中 + 回到今天 -->
|
||||
<view class="sticky top-0 z-10 bg-white p-2 shadow-sm">
|
||||
<view class="flex items-center justify-evenly">
|
||||
<wd-button icon="caret-left" type="success" :round="true" size="small" @click="changeDay(-1)" />
|
||||
<view class="flex flex-col items-center" @click="openDatePicker">
|
||||
<text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text>
|
||||
</view>
|
||||
<wd-button icon="caret-right" type="success" :round="true" size="small" @click="changeDay(1)" />
|
||||
|
||||
<wd-button type="success" size="small" @click="goToday">
|
||||
回到今天
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间轴区域 -->
|
||||
<view class="px-5 py-6">
|
||||
<!-- 时间轴容器 -->
|
||||
<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
|
||||
v-for="(item, idx) in records"
|
||||
:key="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="item.color"
|
||||
/>
|
||||
|
||||
<!-- 卡片 -->
|
||||
<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.datetime }}</text>
|
||||
<wd-tag type="primary" round>
|
||||
{{ item.status }}
|
||||
</wd-tag>
|
||||
</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="item.color">
|
||||
<text>{{ item.icon }}</text>
|
||||
</view>
|
||||
<text class="text-sm text-gray-700 font-medium">{{ item.label }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 第三行：数值 -->
|
||||
<text class="mt-1.5 block text-xl text-gray-800 font-bold">{{ item.value }}</text>
|
||||
|
||||
<!-- 第四行：备注 -->
|
||||
<text v-if="item.note" class="mt-0.5 block text-xs text-gray-400 leading-relaxed">
|
||||
{{ item.note }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据 -->
|
||||
<view v-if="records.length === 0" class="py-16 text-center">
|
||||
<text class="text-4xl">📭</text>
|
||||
<text class="mt-3 block text-sm text-gray-400">这一天还没有记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI 分析模块（最底部） -->
|
||||
<view class="px-4 pb-8">
|
||||
<view class="rounded-2xl from-[#07c160] to-[#2baa5e] bg-gradient-to-br p-4 shadow-sm">
|
||||
<!-- 标题行 -->
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex items-center gap-2">
|
||||
<text class="text-base">🤖</text>
|
||||
<text class="text-sm text-white font-semibold">AI 健康分析</text>
|
||||
</view>
|
||||
<text class="text-[10px] text-white/70">{{ aiSummary.dateRange }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<text class="mt-2.5 block text-sm text-white/95 leading-relaxed">
|
||||
{{ aiSummary.text }}
|
||||
</text>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="mt-3 flex flex-wrap gap-1.5">
|
||||
<text
|
||||
v-for="(tag, tIdx) in aiSummary.tags"
|
||||
:key="tIdx"
|
||||
class="rounded-full bg-white/20 px-2.5 py-1 text-[10px] text-white"
|
||||
>
|
||||
{{ tag }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<wd-datetime-picker
|
||||
v-model="currentDate"
|
||||
v-model:visible="showDatePicker"
|
||||
type="date"
|
||||
:max-date="Date.now()"
|
||||
@confirm="onDateConfirm"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '记录',
|
||||
},
|
||||
})
|
||||
|
||||
// ===== 日期逻辑 =====
|
||||
const currentDate = ref(Date.now())
|
||||
const showDatePicker = ref(false)
|
||||
|
||||
const displayDate = computed(() => {
|
||||
const d = new Date(currentDate.value)
|
||||
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
|
||||
})
|
||||
|
||||
function changeDay(offset: number) {
|
||||
const d = new Date(currentDate.value)
|
||||
d.setDate(d.getDate() + offset)
|
||||
currentDate.value = d.getTime()
|
||||
}
|
||||
|
||||
function goToday() {
|
||||
currentDate.value = Date.now()
|
||||
}
|
||||
|
||||
function openDatePicker() {
|
||||
showDatePicker.value = true
|
||||
}
|
||||
|
||||
function onDateConfirm() {
|
||||
// picker 确认后 currentDate 已自动更新
|
||||
}
|
||||
|
||||
// ===== 时间轴数据 =====
|
||||
const records = ref([
|
||||
{
|
||||
icon: '😴',
|
||||
label: '睡眠',
|
||||
value: '7.5 h',
|
||||
datetime: '2026-08-20 07:30',
|
||||
note: '质量良好，深睡2.1h',
|
||||
color: 'bg-[#2E5B8C]',
|
||||
status: '良好',
|
||||
},
|
||||
{
|
||||
icon: '⚖️',
|
||||
label: '体重',
|
||||
value: '68.5 kg',
|
||||
datetime: '2026-08-20 08:30',
|
||||
note: '早起空腹，较昨日 -0.3kg',
|
||||
color: 'bg-[#E89E3A]',
|
||||
status: '正常',
|
||||
},
|
||||
{
|
||||
icon: '❤️',
|
||||
label: '血压',
|
||||
value: '118/76 mmHg',
|
||||
datetime: '2026-08-20 09:00',
|
||||
note: '服药后测量，静坐5分钟',
|
||||
color: 'bg-[#C04A3C]',
|
||||
status: '正常',
|
||||
},
|
||||
{
|
||||
icon: '📈',
|
||||
label: '血糖',
|
||||
value: '5.2 mmol/L',
|
||||
datetime: '2026-08-20 10:30',
|
||||
note: '早餐后2小时',
|
||||
color: 'bg-[#9C27B0]',
|
||||
status: '正常',
|
||||
},
|
||||
{
|
||||
icon: '🏃',
|
||||
label: '运动',
|
||||
value: '30 min',
|
||||
datetime: '2026-08-20 14:00',
|
||||
note: '快走，公园环道',
|
||||
color: 'bg-[#3A7C5B]',
|
||||
status: '达标',
|
||||
},
|
||||
{
|
||||
icon: '💓',
|
||||
label: '心率',
|
||||
value: '68 bpm',
|
||||
datetime: '2026-08-20 16:00',
|
||||
note: '静息心率',
|
||||
color: 'bg-[#D32F2F]',
|
||||
status: '正常',
|
||||
},
|
||||
])
|
||||
|
||||
const aiSummary = ref({
|
||||
dateRange: '基于今日数据',
|
||||
text: '今日整体健康状态良好。体重平稳，血压正常，建议增加有氧运动频率，保持当前作息规律。',
|
||||
tags: ['🟢 体重稳定', '❤️ 血压正常', '🏃 建议多运动', '😴 睡眠良好'],
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 这里可以接接口拉取当天的记录数据
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user