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
101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
const storage = require('../../utils/storage')
|
|
const planMod = require('../../utils/plan')
|
|
const util = require('../../utils/util')
|
|
const themeMod = require('../../utils/theme')
|
|
|
|
Page({
|
|
data: {
|
|
theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
|
|
themeStyle: '',
|
|
todayTarget: 0,
|
|
todayDone: false,
|
|
todayDuration: 0,
|
|
todayTargetText: '',
|
|
streakCount: 0,
|
|
planName: '',
|
|
planDay: 1,
|
|
planTotal: 7,
|
|
planProgress: 0,
|
|
showPicker: false,
|
|
presets: [30, 60, 90, 120, 180, 300],
|
|
customDuration: 60,
|
|
customInput: ''
|
|
},
|
|
|
|
onLoad() {
|
|
themeMod.applyThemeToPage(this)
|
|
this.refresh()
|
|
},
|
|
|
|
onShow() {
|
|
themeMod.applyThemeToPage(this)
|
|
try {
|
|
const tb = this.getTabBar()
|
|
if (tb) tb.setData({ selected: 0 })
|
|
} catch (e) {}
|
|
this.refresh()
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
this.refresh()
|
|
wx.stopPullDownRefresh()
|
|
},
|
|
|
|
refresh() {
|
|
const settings = storage.getSettings()
|
|
const streak = storage.getStreak()
|
|
const todayRecord = storage.getTodayRecord()
|
|
|
|
const allRecords = Object.values(storage.getRecords()).flat()
|
|
const plan = planMod.getPlan(settings.planId)
|
|
const planDay = planMod.getPlanDay(settings.planId, allRecords)
|
|
const target = planMod.getTodayTarget(settings.planId, Math.min(planDay, plan.totalDays))
|
|
|
|
this.setData({
|
|
todayTarget: target,
|
|
todayDone: todayRecord && todayRecord.duration >= target,
|
|
todayDuration: todayRecord ? todayRecord.duration : 0,
|
|
todayTargetText: util.formatTime(target),
|
|
streakCount: streak.count,
|
|
planName: plan.name,
|
|
planDay: Math.min(planDay, plan.totalDays),
|
|
planTotal: plan.totalDays,
|
|
planProgress: Math.round((Math.min(planDay, plan.totalDays) / plan.totalDays) * 100)
|
|
})
|
|
},
|
|
|
|
onStartTrain() {
|
|
wx.navigateTo({ url: '/pages/timer/timer' })
|
|
},
|
|
|
|
onFreeTrain() {
|
|
this.setData({ showPicker: true, customInput: '', customDuration: 60 })
|
|
},
|
|
|
|
onClosePicker() {
|
|
this.setData({ showPicker: false })
|
|
},
|
|
|
|
onSelectPreset(e) {
|
|
const val = e.currentTarget.dataset.value
|
|
this.setData({ customDuration: val, customInput: '' })
|
|
},
|
|
|
|
onCustomInput(e) {
|
|
const val = parseInt(e.detail.value) || 0
|
|
this.setData({ customInput: e.detail.value, customDuration: val })
|
|
},
|
|
|
|
onConfirmFree() {
|
|
const dur = this.data.customDuration
|
|
if (!dur || dur <= 0) {
|
|
wx.showToast({ title: '请输入有效时长', icon: 'none' })
|
|
return
|
|
}
|
|
this.setData({ showPicker: false })
|
|
wx.navigateTo({ url: `/pages/timer/timer?free=${dur}` })
|
|
},
|
|
|
|
noop() {}
|
|
})
|