lc
8079242daf
Root cause: themeStyle was on .container only, but modals (picker, day-detail) were siblings of .container in the WXML tree. CSS custom properties set via inline style on .container don't cascade to sibling elements — those elements fall back to app.wxss page-level defaults (always orange). Users saw modal buttons in orange and concluded the whole page didn't follow theme. Fixes: - index.wxml: Move picker modal inside .container so it inherits themeStyle CSS variables (position:fixed is viewport-relative, so nesting doesn't affect modal positioning) - index.js, records.js: Add applyThemeToPage in onLoad alongside onShow, preventing a flash of default orange before onShow fires - timer.js: Add onShow with applyThemeToPage as lifecycle safety net; extract _init from onLoad for clean separation
126 lines
3.2 KiB
JavaScript
126 lines
3.2 KiB
JavaScript
const storage = require('../../utils/storage')
|
|
const util = require('../../utils/util')
|
|
const themeMod = require('../../utils/theme')
|
|
|
|
Page({
|
|
data: {
|
|
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
|
themeStyle: '',
|
|
totalDuration: 0,
|
|
totalDurationText: '',
|
|
totalSessions: 0,
|
|
maxDuration: 0,
|
|
maxDurationText: '',
|
|
currentYear: new Date().getFullYear(),
|
|
currentMonth: new Date().getMonth() + 1,
|
|
monthRecords: [],
|
|
historyList: [],
|
|
showDayDetail: false,
|
|
dayDetail: {}
|
|
},
|
|
|
|
onLoad() {
|
|
themeMod.applyThemeToPage(this)
|
|
this.refresh()
|
|
},
|
|
|
|
onShow() {
|
|
themeMod.applyThemeToPage(this)
|
|
try {
|
|
const tb = this.getTabBar()
|
|
if (tb) tb.setData({ selected: 1 })
|
|
} catch (e) {}
|
|
this.refresh()
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
this.refresh()
|
|
wx.stopPullDownRefresh()
|
|
},
|
|
|
|
refresh() {
|
|
const stats = storage.getTotalStats()
|
|
const monthKey = `${this.data.currentYear}-${String(this.data.currentMonth).padStart(2, '0')}`
|
|
const records = storage.getRecordsByMonth(monthKey)
|
|
|
|
const allRecords = Object.values(storage.getRecords()).flat()
|
|
allRecords.sort((a, b) => b.date.localeCompare(a.date))
|
|
|
|
this.setData({
|
|
totalDuration: stats.totalDuration,
|
|
totalDurationText: util.formatDuration(stats.totalDuration),
|
|
totalSessions: stats.totalSessions,
|
|
maxDuration: stats.maxDuration,
|
|
maxDurationText: util.formatDuration(stats.maxDuration),
|
|
monthRecords: records,
|
|
historyList: allRecords.slice(0, 30)
|
|
})
|
|
},
|
|
|
|
onPrevMonth() {
|
|
let { currentYear, currentMonth } = this.data
|
|
if (currentMonth === 1) {
|
|
currentYear--
|
|
currentMonth = 12
|
|
} else {
|
|
currentMonth--
|
|
}
|
|
this.setData({ currentYear, currentMonth })
|
|
this.refresh()
|
|
},
|
|
|
|
onNextMonth() {
|
|
let { currentYear, currentMonth } = this.data
|
|
if (currentMonth === 12) {
|
|
currentYear++
|
|
currentMonth = 1
|
|
} else {
|
|
currentMonth++
|
|
}
|
|
this.setData({ currentYear, currentMonth })
|
|
this.refresh()
|
|
},
|
|
|
|
onDayTap(e) {
|
|
const { year, month, day } = e.detail
|
|
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
|
|
|
const allRecords = Object.values(storage.getRecords()).flat()
|
|
const sessions = allRecords.filter(r => r.date === dateStr)
|
|
const totalDur = sessions.reduce((sum, r) => sum + r.duration, 0)
|
|
const calories = Math.round(totalDur * 0.068)
|
|
|
|
this.setData({
|
|
showDayDetail: true,
|
|
dayDetail: {
|
|
date: dateStr,
|
|
sessions: sessions.length,
|
|
duration: totalDur,
|
|
durationText: util.formatDuration(totalDur),
|
|
calories
|
|
}
|
|
})
|
|
},
|
|
|
|
onCloseDayDetail() {
|
|
this.setData({ showDayDetail: false })
|
|
},
|
|
|
|
noop() {},
|
|
|
|
onDeleteRecord(e) {
|
|
const id = e.currentTarget.dataset.id
|
|
wx.showModal({
|
|
title: '删除记录',
|
|
content: '确定要删除这条训练记录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
storage.deleteRecord(id)
|
|
this.refresh()
|
|
wx.showToast({ title: '已删除', icon: 'none', duration: 1200 })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|