nepiedg
564 lines
11 KiB
Vue
564 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 筛选标签 -->
|
|
<view class="tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
class="tab"
|
|
:class="{ 'tab-active': currentTab === tab.value }"
|
|
@tap="currentTab = tab.value"
|
|
>
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 记录列表 -->
|
|
<scroll-view
|
|
class="scroll-container"
|
|
scroll-y
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="logsStore.refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="onLoadMore"
|
|
>
|
|
<!-- 骨架屏 -->
|
|
<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
|
|
<view v-for="i in 3" :key="i" class="skeleton-item">
|
|
<view class="skeleton-dot"></view>
|
|
<view class="skeleton-card">
|
|
<view class="skeleton-line skeleton-line-title"></view>
|
|
<view class="skeleton-line skeleton-line-text"></view>
|
|
<view class="skeleton-line skeleton-line-text short"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间轴 -->
|
|
<view v-else-if="filteredLogs.length > 0" class="timeline">
|
|
<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group">
|
|
<view class="timeline-date">
|
|
<text class="timeline-date-badge">{{ formatDate(date) }}</text>
|
|
</view>
|
|
|
|
<view class="timeline-items">
|
|
<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item">
|
|
<view class="timeline-line" v-if="logIndex < group.length - 1"></view>
|
|
<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'">
|
|
<text v-if="log.type === 'resisted'">💪</text>
|
|
<text v-else>🚬</text>
|
|
</view>
|
|
|
|
<!-- 记录卡片 -->
|
|
<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'">
|
|
<view class="log-header">
|
|
<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text>
|
|
<view class="log-actions">
|
|
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
|
|
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="log-time-row">
|
|
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
|
|
<text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
|
|
</view>
|
|
|
|
<view v-if="log.type === 'smoke'" class="log-meta">
|
|
<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text>
|
|
<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text>
|
|
</view>
|
|
|
|
<view v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0" class="log-remark">
|
|
<text class="remark-text">{{ log.remark.trim() }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-else class="empty-state">
|
|
<text class="empty-icon">📝</text>
|
|
<text class="empty-text">暂无记录</text>
|
|
<text class="empty-hint">点击右下角按钮开始记录</text>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<view v-if="!logsStore.hasMore && logsStore.logs.length > 0" class="no-more">
|
|
<text class="no-more-text">没有更多了</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 浮动按钮 -->
|
|
<view class="fab" @tap="addLog">
|
|
<text class="fab-icon">+</text>
|
|
</view>
|
|
|
|
<!-- 编辑弹框 -->
|
|
<smoke-record-dialog
|
|
v-model:show="showEditDialog"
|
|
:type="editType"
|
|
:initial-data="editData"
|
|
@submit="handleUpdate"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useLogsStore } from '@/stores/logs'
|
|
import { useLogin } from '@/hooks/useLogin'
|
|
|
|
const { waitForLogin } = useLogin()
|
|
const logsStore = useLogsStore()
|
|
|
|
const tabs = [
|
|
{ label: '全部', value: 'all' },
|
|
{ label: '已抽烟', value: 'smoke' },
|
|
{ label: '已忍住', value: 'resisted' }
|
|
]
|
|
|
|
const currentTab = ref('all')
|
|
const showEditDialog = ref(false)
|
|
const editType = ref('smoke')
|
|
const editData = ref(null)
|
|
const editingLogId = ref(null)
|
|
|
|
// 筛选后的记录
|
|
const filteredLogs = computed(() => {
|
|
const logs = logsStore.formattedLogs
|
|
if (currentTab.value === 'all') {
|
|
return logs
|
|
}
|
|
return logs.filter(log => log.type === currentTab.value)
|
|
})
|
|
|
|
// 按日期分组
|
|
const groupedLogs = computed(() => {
|
|
return filteredLogs.value.reduce((groups, log) => {
|
|
const date = log.displayDate
|
|
if (!groups[date]) {
|
|
groups[date] = []
|
|
}
|
|
groups[date].push(log)
|
|
return groups
|
|
}, {})
|
|
})
|
|
|
|
// 格式化日期显示
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
|
|
const date = new Date(dateStr)
|
|
const today = new Date()
|
|
const yesterday = new Date(today)
|
|
yesterday.setDate(yesterday.getDate() - 1)
|
|
|
|
const todayStr = today.toISOString().split('T')[0]
|
|
const yesterdayStr = yesterday.toISOString().split('T')[0]
|
|
|
|
if (dateStr === todayStr) {
|
|
return `今天 ${date.getMonth() + 1}月${date.getDate()}日`
|
|
}
|
|
if (dateStr === yesterdayStr) {
|
|
return `昨天 ${date.getMonth() + 1}月${date.getDate()}日`
|
|
}
|
|
return `${date.getMonth() + 1}月${date.getDate()}日`
|
|
}
|
|
|
|
// 下拉刷新
|
|
async function onRefresh() {
|
|
await logsStore.fetchLogs(true)
|
|
}
|
|
|
|
// 上拉加载
|
|
async function onLoadMore() {
|
|
await logsStore.loadMore()
|
|
}
|
|
|
|
// 新增记录
|
|
function addLog() {
|
|
uni.switchTab({ url: '/pages/index/index' })
|
|
}
|
|
|
|
// 编辑记录
|
|
function handleEdit(log) {
|
|
editingLogId.value = log.id
|
|
editType.value = log.type
|
|
editData.value = {
|
|
smoke_time: log.smoke_time?.split('T')[0] || '',
|
|
smoke_time_only: log.displayTime,
|
|
smoke_at: log.smoke_at,
|
|
remark: log.remark || '',
|
|
level: log.level || 2,
|
|
num: log.num || 1
|
|
}
|
|
showEditDialog.value = true
|
|
}
|
|
|
|
// 更新记录
|
|
async function handleUpdate(data) {
|
|
if (!editingLogId.value) return
|
|
|
|
const success = await logsStore.updateLog(editingLogId.value, data)
|
|
if (success) {
|
|
showEditDialog.value = false
|
|
editingLogId.value = null
|
|
editData.value = null
|
|
}
|
|
}
|
|
|
|
// 删除记录
|
|
function handleDelete(log) {
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: `确定要删除这条${log.type === 'resisted' ? '忍住' : '抽烟'}记录吗？`,
|
|
confirmColor: '#EF4444',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
await logsStore.deleteLog(log.id)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 初始化页面
|
|
async function initPage() {
|
|
try {
|
|
await waitForLogin()
|
|
await logsStore.fetchLogs(true)
|
|
} catch (e) {
|
|
console.error('initPage error:', e)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
initPage()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
padding: 32rpx 32rpx 0;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.tab {
|
|
padding: 16rpx 32rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #6B7280;
|
|
background-color: #FFFFFF;
|
|
border: 2rpx solid #E5E7EB;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.tab-active {
|
|
background-color: #10B981;
|
|
color: #FFFFFF;
|
|
border-color: #10B981;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.scroll-container {
|
|
height: calc(100vh - 140rpx);
|
|
padding: 0 32rpx 200rpx;
|
|
}
|
|
|
|
/* 骨架屏 */
|
|
.skeleton {
|
|
padding-top: 24rpx;
|
|
}
|
|
|
|
.skeleton-item {
|
|
position: relative;
|
|
padding-left: 80rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.skeleton-dot {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 16rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 24rpx;
|
|
background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.skeleton-line-title {
|
|
width: 60%;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.skeleton-line-text {
|
|
width: 80%;
|
|
}
|
|
|
|
.skeleton-line-text.short {
|
|
width: 40%;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* 时间轴 */
|
|
.timeline-group {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.timeline-date {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.timeline-date-badge {
|
|
font-size: 24rpx;
|
|
color: #059669;
|
|
background-color: #D1FAE5;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.timeline-items {
|
|
position: relative;
|
|
padding-left: 80rpx;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: -44rpx;
|
|
top: 56rpx;
|
|
bottom: -24rpx;
|
|
width: 4rpx;
|
|
background-color: #E5E7EB;
|
|
}
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -60rpx;
|
|
top: 16rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
z-index: 1;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dot-green {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.dot-smoke {
|
|
background-color: #EF4444;
|
|
}
|
|
|
|
.timeline-content {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
border-left: 4rpx solid;
|
|
transition: all 0.3s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-green {
|
|
border-left-color: #10B981;
|
|
}
|
|
|
|
.content-red {
|
|
border-left-color: #EF4444;
|
|
}
|
|
|
|
.log-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.log-type {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1F2937;
|
|
}
|
|
|
|
.log-actions {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.edit-btn {
|
|
background-color: #EFF6FF;
|
|
color: #3B82F6;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #FEE2E2;
|
|
color: #EF4444;
|
|
}
|
|
|
|
.log-time-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.log-time {
|
|
font-size: 28rpx;
|
|
color: #1F2937;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.log-interval {
|
|
font-size: 24rpx;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.log-meta {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
margin-bottom: 12rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-item {
|
|
font-size: 24rpx;
|
|
color: #6B7280;
|
|
background-color: #F9FAFB;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log-remark {
|
|
background-color: #F9FAFB;
|
|
padding: 12rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 0;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.remark-text {
|
|
font-size: 26rpx;
|
|
color: #374151;
|
|
line-height: 1.6;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 32rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #6B7280;
|
|
font-weight: 500;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.empty-hint {
|
|
font-size: 26rpx;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading-more, .no-more {
|
|
text-align: center;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.loading-text, .no-more-text {
|
|
font-size: 24rpx;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
/* 浮动按钮 */
|
|
.fab {
|
|
position: fixed;
|
|
right: 32rpx;
|
|
bottom: 140rpx;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
background-color: #10B981;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
|
|
transition: all 0.3s;
|
|
z-index: 100;
|
|
}
|
|
|
|
.fab:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.fab-icon {
|
|
font-size: 48rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 300;
|
|
}
|
|
</style>
|