1266 lines
33 KiB
Vue
1266 lines
33 KiB
Vue
<template>
|
|
<view class="home-page page-enter theme-transition" :style="{ background: themeConfig.bgColor }">
|
|
<view class="page-content">
|
|
<view class="top-bar">
|
|
<view class="greeting-area" @click="goToMine">
|
|
<view class="avatar-circle" :style="{ background: themeConfig.gradientSoft }">
|
|
<image v-if="userAvatar" class="avatar-image" :src="userAvatar" mode="aspectFill" />
|
|
<text v-else class="avatar-letter" :style="{ color: '#fff' }">{{ (userName || '记')[0] }}</text>
|
|
</view>
|
|
<view class="greeting-texts">
|
|
<text class="greeting-line" :style="{ color: themeConfig.textSecondary }">{{ greetingText }}</text>
|
|
<text class="user-name" :style="{ color: themeConfig.textPrimary }">{{ userName || '记录每一天' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="date-display" @click="toggleCalendar" :style="{ background: themeConfig.cardBgColor }">
|
|
<text class="date-big" :style="{ color: themeConfig.primaryColor }">{{ currentDay }}</text>
|
|
<view class="date-info">
|
|
<text class="date-month" :style="{ color: themeConfig.textPrimary }">{{ currentMonth }}月</text>
|
|
<text class="date-week" :style="{ color: themeConfig.textSecondary }">{{ isToday ? '今天' : currentWeekFull }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<InlineCalendar
|
|
v-if="showCalendar"
|
|
:value="currentDate"
|
|
:mark-dates="markedDates"
|
|
@change="onCalendarDateChange"
|
|
class="calendar-card"
|
|
/>
|
|
|
|
<view class="section-header">
|
|
<view class="section-title-row">
|
|
<view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
|
|
<text class="section-title" :style="{ color: themeConfig.textPrimary }">智能记录</text>
|
|
<text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">一句话自动归类</text>
|
|
</view>
|
|
</view>
|
|
|
|
<AppCard :padding="24" :radius="20" :margin-bottom="8" class="card-enter">
|
|
<view class="ai-textarea-wrap">
|
|
<textarea
|
|
class="ai-textarea"
|
|
v-model="aiContent"
|
|
placeholder="记录今日点滴..."
|
|
:placeholder-style="{ color: themeConfig.textDisabled }"
|
|
:maxlength="500"
|
|
auto-height
|
|
/>
|
|
<view class="ai-char-count" :style="{ color: themeConfig.textDisabled }">{{ aiContent.length }}/500</view>
|
|
</view>
|
|
<view class="ai-quick-tags">
|
|
<text class="quick-tag" v-for="(tag, idx) in quickTags" :key="idx"
|
|
:style="{ background: themeConfig.primaryColor + '12', color: themeConfig.primaryColor }"
|
|
@click="addQuickTag(tag)">{{ tag }}</text>
|
|
</view>
|
|
<view class="ai-actions">
|
|
<view class="ai-submit-btn btn btn--primary btn--pill" @click="submitAiContent">
|
|
<FaIcon icon="sparkles" :size="22" color="#fff" />
|
|
<text class="ai-submit-text">{{ aiSubmitting ? '分析中...' : '智能识别' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</AppCard>
|
|
|
|
<view class="section-header">
|
|
<view class="section-title-row">
|
|
<view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
|
|
<text class="section-title" :style="{ color: themeConfig.textPrimary }">快捷入口</text>
|
|
<text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">今日一览</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="entry-grid card-enter">
|
|
<view
|
|
class="entry-card"
|
|
v-for="(entry, idx) in entryCards"
|
|
:key="idx"
|
|
:style="{ background: themeConfig.cardBgColor, boxShadow: `0 6rpx 20rpx ${themeConfig.shadowLight}`, borderColor: themeConfig.borderLight }"
|
|
@click="entry.action"
|
|
>
|
|
<view class="entry-icon-wrap" :style="{ background: entry.bgColor }">
|
|
<FaIcon :icon="entry.icon" :size="22" :color="entry.color" />
|
|
</view>
|
|
<view class="entry-info">
|
|
<text class="entry-label" :style="{ color: themeConfig.textPrimary }">{{ entry.label }}</text>
|
|
<text class="entry-count" :style="{ color: themeConfig.textSecondary }">{{ entry.count }}</text>
|
|
</view>
|
|
<view class="entry-badge" v-if="entry.badge > 0" :style="{ background: themeConfig.primaryColor }">
|
|
<text class="badge-num">{{ entry.badge }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-header">
|
|
<view class="section-title-row">
|
|
<view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
|
|
<text class="section-title" :style="{ color: themeConfig.textPrimary }">今日概览</text>
|
|
<text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">完成进度</text>
|
|
</view>
|
|
</view>
|
|
|
|
<AppCard :padding="24" :radius="20" class="card-enter">
|
|
<SkeletonScreen v-if="loading && !firstLoadDone" type="dashboard" :count="2" />
|
|
|
|
<template v-else>
|
|
<view class="overview-header">
|
|
<view class="overview-ring" :style="{ background: `conic-gradient(${themeConfig.primaryColor} ${progressPercent * 3.6}deg, ${themeConfig.borderColor} 0deg)` }">
|
|
<view class="ring-inner" :style="{ background: themeConfig.cardBgColor }">
|
|
<text class="ring-text" :style="{ color: themeConfig.primaryColor }">{{ progressPercent }}%</text>
|
|
</view>
|
|
</view>
|
|
<view class="overview-stats">
|
|
<view class="stat-item">
|
|
<text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ doneCount }}</text>
|
|
<text class="stat-label" :style="{ color: themeConfig.textSecondary }">已完成</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ totalCount - doneCount }}</text>
|
|
<text class="stat-label" :style="{ color: themeConfig.textSecondary }">待完成</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ totalCount }}</text>
|
|
<text class="stat-label" :style="{ color: themeConfig.textSecondary }">总计</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="todo-list" v-if="todoList.length">
|
|
<view class="todo-row" v-for="(item, idx) in todoList.slice(0, 2)" :key="item.ID" :style="{ borderColor: themeConfig.borderColor + '40' }">
|
|
<view
|
|
class="check-box"
|
|
:class="{ done: item.done === 1 }"
|
|
:style="{
|
|
borderColor: item.done === 1 ? themeConfig.primaryColor : themeConfig.borderColor,
|
|
background: item.done === 1 ? themeConfig.gradientSoft : 'transparent'
|
|
}"
|
|
@click.stop="toggleTodo(item)"
|
|
>
|
|
<FaIcon v-if="item.done === 1" icon="check" :size="20" color="#fff" />
|
|
</view>
|
|
<view class="todo-body">
|
|
<text class="todo-text" :class="{ crossed: item.done === 1 }" :style="{ color: item.done === 1 ? themeConfig.textDisabled : themeConfig.textPrimary }">{{ item.title }}</text>
|
|
<view class="todo-tags" v-if="item.start_time || item.category">
|
|
<text class="todo-tag" v-if="item.start_time" :style="{ background: themeConfig.primaryColor + '12', color: themeConfig.primaryColor }">{{ item.start_time }}</text>
|
|
<text class="todo-tag" v-if="item.category" :style="{ background: themeConfig.secondaryColor + '15', color: themeConfig.secondaryColor }">{{ getTodoCateLabel(item.category) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="view-all-btn" @click="goToTodo" :style="{ color: themeConfig.primaryColor }">
|
|
<text>查看全部</text>
|
|
<FaIcon icon="chevron-right" :size="20" :color="themeConfig.primaryColor" />
|
|
</view>
|
|
</view>
|
|
|
|
<EmptyState
|
|
v-else
|
|
type="todo"
|
|
title="今日暂无待办"
|
|
desc="在上方输入，小记帮你记录"
|
|
/>
|
|
</template>
|
|
</AppCard>
|
|
</view>
|
|
|
|
<!-- AI 识别结果弹窗 -->
|
|
<CenterModal
|
|
:visible="showAiResultModal"
|
|
:title="''"
|
|
:show-cancel="false"
|
|
:show-confirm="false"
|
|
>
|
|
<template #header>
|
|
<view class="ai-modal-header">
|
|
<text class="ai-modal-title" :style="{ color: themeConfig.textPrimary }">识别结果</text>
|
|
<view class="ai-modal-close" @click="closeAiResultModal">
|
|
<FaIcon icon="xmark" :size="20" :color="themeConfig.textSecondary" :solid="true" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="ai-result-modal">
|
|
<view class="ai-result-icon-wrap" :style="{ background: themeConfig.primaryColor + '18' }">
|
|
<FaIcon icon="circle-check" :size="36" :color="themeConfig.primaryColor" :solid="true" />
|
|
</view>
|
|
<text class="ai-result-modal-msg" :style="{ color: themeConfig.textPrimary }">{{ aiResultMessage }}</text>
|
|
<view class="ai-result-list">
|
|
<view
|
|
class="ai-result-item"
|
|
v-for="(item, idx) in aiResults"
|
|
:key="idx"
|
|
:style="{ background: getItemBg(item.category) }"
|
|
>
|
|
<view class="ai-item-icon" :style="{ background: getItemColor(item.category) }">
|
|
<FaIcon :icon="getItemIcon(item.category)" :size="20" color="#fff" :solid="true" />
|
|
</view>
|
|
<view class="ai-item-info">
|
|
<text class="ai-item-label" :style="{ color: themeConfig.textPrimary }">{{ getItemLabel(item.category) }}</text>
|
|
<text class="ai-item-summary" :style="{ color: themeConfig.textSecondary }">{{ getItemSummary(item) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="ai-modal-btn btn btn--block btn--pill"
|
|
:style="{ background: themeConfig.gradientSoft, boxShadow: `0 6rpx 20rpx ${themeConfig.shadowColor || 'rgba(198,142,63,0.35)'}` }"
|
|
@click="closeAiResultModal"
|
|
>
|
|
<text class="ai-modal-btn-text">完成</text>
|
|
</view>
|
|
</view>
|
|
</CenterModal>
|
|
|
|
<GrowthModal
|
|
:visible="growthModalVisible"
|
|
:title="growthModalTitle"
|
|
:message="growthModalMessage"
|
|
:icon="growthModalIcon"
|
|
:confirm-text="growthModalConfirmText"
|
|
@close="growthModalVisible = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getTodoList,
|
|
getBillList,
|
|
getMoodByDate,
|
|
getUserInfo,
|
|
doneTodo,
|
|
aiClassify,
|
|
getDashboardDaily
|
|
} from '@/api'
|
|
import { TODO_BASE_CATE } from '@/utils/constants.js'
|
|
import GrowthModal from '@/components/GrowthModal.vue'
|
|
import CenterModal from '@/components/CenterModal.vue'
|
|
import FaIcon from '@/components/FaIcon.vue'
|
|
import PageHeader from '@/components/PageHeader.vue'
|
|
import AppCard from '@/components/AppCard.vue'
|
|
import InlineCalendar from '@/components/InlineCalendar.vue'
|
|
import EmptyState from '@/components/EmptyState.vue'
|
|
import SkeletonScreen from '@/components/SkeletonScreen.vue'
|
|
import growthModalMixin from '@/mixins/growthModalMixin.js'
|
|
import themeMixin from '@/mixins/themeMixin.js'
|
|
import { refreshNavBarTheme, forceApplyTabBarTheme } from '@/utils/themeGlobal'
|
|
import { isLogin } from '@/utils/auth'
|
|
|
|
const TYPE_MAP = {
|
|
todo: { label: '待办', icon: 'check', color: '#5B9E6E', bgColor: '#eaf5ef' },
|
|
bill: { label: '账单', icon: 'dollar-sign', color: '#C68E3F', bgColor: '#fdf3e7' },
|
|
mood: { label: '心情', icon: 'heart', color: '#8B6FB0', bgColor: '#f0ecf7' },
|
|
review: { label: '复盘', icon: 'chart-simple', color: '#5B8DB8', bgColor: '#e7f0f7' }
|
|
}
|
|
|
|
const CACHE_TTL = 30000
|
|
|
|
export default {
|
|
components: {
|
|
GrowthModal,
|
|
CenterModal,
|
|
FaIcon,
|
|
PageHeader,
|
|
AppCard,
|
|
InlineCalendar,
|
|
EmptyState,
|
|
SkeletonScreen
|
|
},
|
|
mixins: [growthModalMixin, themeMixin],
|
|
data() {
|
|
return {
|
|
currentDate: '',
|
|
currentWeekFull: '',
|
|
today: '',
|
|
showCalendar: false,
|
|
todoList: [],
|
|
doneCount: 0,
|
|
totalCount: 0,
|
|
progressPercent: 0,
|
|
billList: [],
|
|
expend: 0,
|
|
income: 0,
|
|
balance: 0,
|
|
todayMood: null,
|
|
reviewRecorded: false,
|
|
growthData: null,
|
|
userName: '',
|
|
userAvatar: '',
|
|
aiContent: '',
|
|
aiSubmitting: false,
|
|
aiResults: [],
|
|
showAiResultModal: false,
|
|
aiResultMessage: '',
|
|
quickTags: ['开会', '吃饭', '心情不好', '运动', '读书', '花钱'],
|
|
loading: false,
|
|
firstLoadDone: false,
|
|
dashboardCache: null,
|
|
dashboardCacheTime: 0,
|
|
markedDates: []
|
|
}
|
|
},
|
|
computed: {
|
|
isToday() {
|
|
return this.currentDate === this.today
|
|
},
|
|
greetingText() {
|
|
const hour = new Date().getHours()
|
|
if (hour >= 0 && hour < 6) return '夜深了 🌙'
|
|
if (hour >= 6 && hour < 9) return '早上好 ☀️'
|
|
if (hour >= 9 && hour < 12) return '上午好 ✨'
|
|
if (hour >= 12 && hour < 14) return '中午好 🍱'
|
|
if (hour >= 14 && hour < 18) return '下午好 ☕'
|
|
if (hour >= 18 && hour < 21) return '傍晚好 🌆'
|
|
return '晚上好 🌟'
|
|
},
|
|
currentDay() {
|
|
if (!this.currentDate) return ''
|
|
const parts = this.currentDate.split('-')
|
|
return parseInt(parts[2])
|
|
},
|
|
currentMonth() {
|
|
if (!this.currentDate) return ''
|
|
const parts = this.currentDate.split('-')
|
|
return parseInt(parts[1])
|
|
},
|
|
|
|
entryCards() {
|
|
const undone = this.totalCount - this.doneCount
|
|
return [
|
|
{
|
|
label: '待办',
|
|
icon: 'check',
|
|
color: '#5B9E6E',
|
|
bgColor: '#eaf5ef',
|
|
count: this.totalCount > 0 ? `${this.doneCount}/${this.totalCount}` : '暂无',
|
|
badge: undone > 0 ? undone : 0,
|
|
action: this.goToTodo
|
|
},
|
|
{
|
|
label: '账单',
|
|
icon: 'dollar-sign',
|
|
color: '#C68E3F',
|
|
bgColor: '#fdf3e7',
|
|
count: this.balance >= 0 ? `+${this.balance.toFixed(0)}` : `${this.balance.toFixed(0)}`,
|
|
badge: 0,
|
|
action: this.goToBill
|
|
},
|
|
{
|
|
label: '心情',
|
|
icon: 'heart',
|
|
color: '#8B6FB0',
|
|
bgColor: '#f0ecf7',
|
|
count: this.todayMood?.content ? '已记录' : '未记录',
|
|
badge: this.todayMood?.content ? 0 : 1,
|
|
action: this.goToMood
|
|
},
|
|
{
|
|
label: '复盘',
|
|
icon: 'chart-simple',
|
|
color: '#5B8DB8',
|
|
bgColor: '#e7f0f7',
|
|
count: this.reviewRecorded ? '已完成' : '待复盘',
|
|
badge: this.reviewRecorded ? 0 : 1,
|
|
action: this.goToReview
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (!isLogin()) {
|
|
uni.redirectTo({ url: '/pages/login/login' })
|
|
return
|
|
}
|
|
this.initDate()
|
|
this.loadAllData()
|
|
this.loadUserInfo()
|
|
},
|
|
onShow() {
|
|
if (!isLogin()) {
|
|
uni.redirectTo({ url: '/pages/login/login' })
|
|
return
|
|
}
|
|
refreshNavBarTheme()
|
|
const latestTheme = getApp()?.globalData?.themeConfig
|
|
|| (uni.getStorageSync('user_current_theme') ? JSON.parse(uni.getStorageSync('user_current_theme')) : null)
|
|
if (latestTheme) {
|
|
forceApplyTabBarTheme(latestTheme)
|
|
}
|
|
this.syncUserInfoFromCache()
|
|
this._onShowDebounce = Date.now()
|
|
const debounceId = this._onShowDebounce
|
|
setTimeout(() => {
|
|
if (this._onShowDebounce !== debounceId) return
|
|
this.initDate()
|
|
this.loadAllData()
|
|
}, 300)
|
|
},
|
|
onPullDownRefresh() {
|
|
this.clearCache()
|
|
this.initDate()
|
|
this.loadAllData().finally(() => { uni.stopPullDownRefresh() })
|
|
},
|
|
methods: {
|
|
clearCache() {
|
|
this.dashboardCache = null
|
|
this.dashboardCacheTime = 0
|
|
},
|
|
isCacheValid() {
|
|
if (!this.dashboardCache) return false
|
|
return Date.now() - this.dashboardCacheTime < CACHE_TTL
|
|
},
|
|
initDate() {
|
|
const now = new Date()
|
|
this.formatDate(now)
|
|
this.today = this.currentDate
|
|
},
|
|
formatDate(date) {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
this.currentDate = `${year}-${month}-${day}`
|
|
const weekArrFull = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
this.currentWeekFull = weekArrFull[date.getDay()]
|
|
},
|
|
toggleCalendar() {
|
|
this.showCalendar = !this.showCalendar
|
|
},
|
|
onCalendarDateChange(dateStr) {
|
|
const date = new Date(dateStr)
|
|
this.formatDate(date)
|
|
this.showCalendar = false
|
|
this.loadAllData()
|
|
},
|
|
addQuickTag(tag) {
|
|
if (this.aiContent.length > 0) {
|
|
this.aiContent += ' ' + tag
|
|
} else {
|
|
this.aiContent = tag
|
|
}
|
|
},
|
|
async submitAiContent() {
|
|
if (!this.aiContent.trim()) {
|
|
uni.showToast({ title: '请输入内容', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
this.aiSubmitting = true
|
|
this.aiResults = []
|
|
|
|
try {
|
|
const res = await aiClassify({
|
|
content: this.aiContent.trim()
|
|
})
|
|
|
|
if (res && res.items && res.items.length > 0) {
|
|
this.aiResults = res.items
|
|
this.aiResultMessage = res.message || `成功识别并创建 ${res.items.length} 条记录`
|
|
this.showAiResultModal = true
|
|
|
|
this.aiContent = ''
|
|
this.clearCache()
|
|
this.loadAllData()
|
|
}
|
|
} catch (err) {
|
|
console.error('分类失败:', err)
|
|
uni.showToast({
|
|
title: '分类失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.aiSubmitting = false
|
|
}
|
|
},
|
|
closeAiResultModal() {
|
|
this.showAiResultModal = false
|
|
this.aiResults = []
|
|
this.aiResultMessage = ''
|
|
},
|
|
getItemIcon(category) {
|
|
return TYPE_MAP[category]?.icon || 'circle-check'
|
|
},
|
|
getItemLabel(category) {
|
|
return TYPE_MAP[category]?.label || category
|
|
},
|
|
getItemColor(category) {
|
|
return TYPE_MAP[category]?.color || '#999'
|
|
},
|
|
getItemBg(category) {
|
|
return TYPE_MAP[category]?.bgColor || 'rgba(0,0,0,0.03)'
|
|
},
|
|
getItemSummary(item) {
|
|
const { category, data } = item
|
|
if (!data) return '新记录'
|
|
switch (category) {
|
|
case 'todo':
|
|
return data.title || data.content || '新待办'
|
|
case 'bill':
|
|
const cateLabel = data.cate || data.cate_name || ''
|
|
const moneyStr = data.money !== undefined ? `¥${Number(data.money).toFixed(2)}` : ''
|
|
return [cateLabel, moneyStr].filter(Boolean).join(' · ') || '新账单'
|
|
case 'mood':
|
|
return data.content || data.emoji || '新心情'
|
|
case 'review':
|
|
return data.content || data.method || '新复盘'
|
|
default:
|
|
return '新记录'
|
|
}
|
|
},
|
|
async toggleTodo(item) {
|
|
try {
|
|
const newDone = item.done === 1 ? 0 : 1
|
|
await doneTodo({ id: item.ID, status: newDone })
|
|
item.done = newDone
|
|
this.doneCount = this.todoList.filter(t => t.done === 1).length
|
|
this.progressPercent = this.totalCount > 0 ? Math.round((this.doneCount / this.totalCount) * 100) : 0
|
|
} catch (err) {
|
|
console.error('更新待办状态失败:', err)
|
|
}
|
|
},
|
|
async loadAllData() {
|
|
if (this.isCacheValid()) {
|
|
this.applyDashboardData(this.dashboardCache)
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
|
|
try {
|
|
const data = await getDashboardDaily({ date: this.currentDate })
|
|
this.dashboardCache = data
|
|
this.dashboardCacheTime = Date.now()
|
|
this.applyDashboardData(data)
|
|
} catch (err) {
|
|
console.warn('聚合接口失败，降级到并发请求:', err)
|
|
await this.loadAllDataFallback()
|
|
} finally {
|
|
this.loading = false
|
|
this.firstLoadDone = true
|
|
}
|
|
},
|
|
applyDashboardData(data) {
|
|
if (!data) return
|
|
|
|
const todo = data.todo || {}
|
|
if (todo.list) {
|
|
this.todoList = todo.list
|
|
}
|
|
if (typeof todo.done === 'number') {
|
|
this.doneCount = todo.done
|
|
} else if (this.todoList.length) {
|
|
this.doneCount = this.todoList.filter(t => t.done === 1).length
|
|
}
|
|
if (typeof todo.total === 'number') {
|
|
this.totalCount = todo.total
|
|
} else if (this.todoList.length) {
|
|
this.totalCount = this.todoList.length
|
|
}
|
|
if (this.totalCount > 0) {
|
|
this.progressPercent = Math.round((this.doneCount / this.totalCount) * 100)
|
|
} else {
|
|
this.progressPercent = 0
|
|
}
|
|
|
|
const bill = data.bill || {}
|
|
if (bill.list) {
|
|
this.billList = bill.list
|
|
}
|
|
if (typeof bill.balance === 'number') this.balance = bill.balance
|
|
if (typeof bill.expend === 'number') this.expend = bill.expend
|
|
if (typeof bill.income === 'number') this.income = bill.income
|
|
if (!this.billList.length && (bill.expend || bill.income)) {
|
|
this.balance = bill.income - bill.expend
|
|
}
|
|
|
|
const mood = data.mood
|
|
if (mood) {
|
|
this.todayMood = mood
|
|
}
|
|
|
|
const review = data.review
|
|
if (review && typeof review.recorded === 'boolean') {
|
|
this.reviewRecorded = review.recorded
|
|
}
|
|
|
|
const growth = data.growth
|
|
if (growth) {
|
|
this.growthData = growth
|
|
}
|
|
|
|
if (data.markedDates) this.markedDates = data.markedDates
|
|
},
|
|
recalcBillBalance() {
|
|
let expend = 0
|
|
let income = 0
|
|
this.billList.forEach(item => {
|
|
const money = Number(item.money) || 0
|
|
if (item.type === 1) {
|
|
expend += money
|
|
} else {
|
|
income += money
|
|
}
|
|
})
|
|
this.expend = expend
|
|
this.income = income
|
|
this.balance = income - expend
|
|
},
|
|
async loadAllDataFallback() {
|
|
try {
|
|
await Promise.all([
|
|
this.loadTodoData(),
|
|
this.loadBillData(),
|
|
this.loadMoodData()
|
|
])
|
|
} catch (err) {
|
|
console.error('数据加载失败:', err)
|
|
}
|
|
},
|
|
async loadTodoData() {
|
|
try {
|
|
const res = await getTodoList({
|
|
start_date: this.currentDate,
|
|
end_date: this.currentDate
|
|
})
|
|
this.todoList = res || []
|
|
this.totalCount = this.todoList.length
|
|
this.doneCount = this.todoList.filter(item => item.done === 1).length
|
|
this.progressPercent = this.totalCount > 0 ? Math.round((this.doneCount / this.totalCount) * 100) : 0
|
|
} catch (err) {
|
|
this.todoList = []
|
|
this.doneCount = 0
|
|
this.totalCount = 0
|
|
this.progressPercent = 0
|
|
}
|
|
},
|
|
async loadBillData() {
|
|
try {
|
|
const res = await getBillList({ date: this.currentDate })
|
|
this.billList = res || []
|
|
this.recalcBillBalance()
|
|
} catch (err) {
|
|
this.billList = []
|
|
this.expend = 0
|
|
this.income = 0
|
|
this.balance = 0
|
|
}
|
|
},
|
|
async loadMoodData() {
|
|
try {
|
|
const res = await getMoodByDate({ date: this.currentDate })
|
|
this.todayMood = res || null
|
|
} catch (err) {
|
|
this.todayMood = null
|
|
}
|
|
},
|
|
async loadUserInfo() {
|
|
try {
|
|
const res = await getUserInfo()
|
|
this.userName = res?.nickname || ''
|
|
this.userAvatar = res?.avatar || ''
|
|
} catch (err) {
|
|
this.userName = ''
|
|
this.userAvatar = ''
|
|
}
|
|
},
|
|
syncUserInfoFromCache() {
|
|
const cachedName = uni.getStorageSync('userName')
|
|
const cachedAvatar = uni.getStorageSync('userAvatar')
|
|
if (cachedName) this.userName = cachedName
|
|
if (cachedAvatar) this.userAvatar = cachedAvatar
|
|
},
|
|
getTodoCateLabel(cateValue) {
|
|
const cate = TODO_BASE_CATE.find(item => item.value === cateValue)
|
|
return cate ? cate.label : cateValue
|
|
},
|
|
goToTodo() {
|
|
uni.navigateTo({ url: '/pages/todo/todo?date=' + this.currentDate })
|
|
},
|
|
goToBill() {
|
|
uni.navigateTo({ url: '/pages/bill/bill?date=' + this.currentDate })
|
|
},
|
|
goToMood() {
|
|
uni.navigateTo({ url: '/pages/mood/mood?date=' + this.currentDate })
|
|
},
|
|
goToReview() {
|
|
uni.navigateTo({ url: '/pages/review/review?date=' + this.currentDate })
|
|
},
|
|
goToMine() {
|
|
uni.switchTab({ url: '/pages/mine/mine' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-page {
|
|
min-height: 100vh;
|
|
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.page-content {
|
|
padding: 0 32rpx;
|
|
padding-top: calc(20rpx + env(safe-area-inset-top));
|
|
}
|
|
|
|
.section-header {
|
|
padding: 24rpx 4rpx 16rpx;
|
|
}
|
|
|
|
.section-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.section-accent {
|
|
width: 8rpx;
|
|
height: 28rpx;
|
|
border-radius: 4rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12rpx 0 4rpx;
|
|
}
|
|
|
|
.greeting-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.avatar-circle {
|
|
width: 75rpx;
|
|
height: 75rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-letter {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.greeting-texts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.greeting-line {
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.date-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 10rpx 18rpx;
|
|
border-radius: 12rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.date-big {
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.date-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rpx;
|
|
}
|
|
|
|
.date-month {
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.date-week {
|
|
font-size: 18rpx;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.calendar-card {
|
|
margin: 12rpx 0 0;
|
|
}
|
|
|
|
.ai-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.ai-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.ai-badge-text {
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.ai-tip {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ai-textarea-wrap {
|
|
position: relative;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.ai-textarea {
|
|
width: 100%;
|
|
min-height: 183rpx;
|
|
max-height: 500rpx;
|
|
padding: 20rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.5;
|
|
border-radius: 12rpx;
|
|
background: rgba(0, 0, 0, 0.02);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ai-char-count {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 16rpx;
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.ai-quick-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.quick-tag {
|
|
font-size: 20rpx;
|
|
padding: 8rpx 18rpx;
|
|
border-radius: 8rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ai-actions {
|
|
display: flex;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.ai-submit-btn {
|
|
flex: 1;
|
|
gap: 10rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.ai-submit-text {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.ai-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 28rpx 28rpx 16rpx;
|
|
}
|
|
|
|
.ai-modal-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ai-modal-close {
|
|
/* CenterModal 已内置右上角 X 按钮，关闭此按钮避免重叠；保留类供未来自定义使用 */
|
|
display: none;
|
|
}
|
|
|
|
.ai-modal-close:active {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.ai-result-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 4rpx 0 8rpx;
|
|
}
|
|
|
|
.ai-result-icon-wrap {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.ai-result-modal-msg {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.ai-result-list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.ai-result-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18rpx;
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.ai-item-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ai-item-label {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.ai-item-summary {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ai-modal-btn {
|
|
width: 100%;
|
|
height: 84rpx;
|
|
}
|
|
|
|
.ai-modal-btn-text {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.entry-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.entry-card {
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 12rpx;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
|
|
.entry-icon-wrap {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.entry-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.entry-label {
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.entry-count {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.entry-badge {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
min-width: 32rpx;
|
|
height: 32rpx;
|
|
padding: 0 8rpx;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.badge-num {
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.skeleton-overview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
margin-bottom: 16rpx;
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.skeleton-ring {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-stats {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.skeleton-stat {
|
|
width: 80rpx;
|
|
height: 48rpx;
|
|
border-radius: 12rpx;
|
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes skeleton-pulse {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
@keyframes pageFadeIn {
|
|
0% { opacity: 0; transform: translateY(20rpx); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes cardEnter {
|
|
0% { opacity: 0; transform: translateY(16rpx); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.content-fade {
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
|
|
.theme-transition {
|
|
transition: background-color 0.3s ease,
|
|
color 0.3s ease,
|
|
border-color 0.3s ease,
|
|
box-shadow 0.3s ease,
|
|
opacity 0.25s ease,
|
|
transform 0.25s ease;
|
|
}
|
|
|
|
.overview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
margin-bottom: 16rpx;
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.overview-ring {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ring-inner {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
left: 12rpx;
|
|
right: 12rpx;
|
|
bottom: 12rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ring-text {
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.overview-stats {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.stat-val {
|
|
font-size: 32rpx;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 2rpx;
|
|
height: 48rpx;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.todo-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.todo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
padding: 16rpx 0;
|
|
border-bottom: 1rpx solid;
|
|
}
|
|
|
|
.todo-row:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.check-box {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 8rpx;
|
|
border: 3rpx solid;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.todo-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.todo-text {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
display: block;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.todo-text.crossed {
|
|
text-decoration: line-through;
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.todo-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.todo-tag {
|
|
font-size: 18rpx;
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 6rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.view-all-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6rpx;
|
|
padding: 16rpx 0 4rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
}
|
|
</style> |