vela-tomato-clock/src/pages/5/timer/timer.ux

<template>
  <swiper class="timer-swiper" vertical="true" indicator="false" loop="false">
    <div class="timer-page">
      <text class="page-title">{{isResting ? "休息中" : "专注中"}}</text>
      <text class="clock-label">{{ time }}</text>
      <text class="countdown">{{ countdown }}</text>
      <text class="focus-label">{{isResting ? "休息中" : "专注中"}}</text>

      <div class="stop-button" onclick="stopTimer">
        <image class="button-background" src="/common/icons/button_grey.png"></image>
        <image class="stop-icon" src="/common/icons/stop.png"></image>
      </div>
      <div class="pause-button" onclick="togglePause">
        <image class="button-background" src="{{isResting ? '/common/icons/button_yellow.png' : '/common/icons/button2.png'}}"></image>
        <image class="pause-icon" src="{{paused ? '/common/icons/MdiPlay.png' : '/common/icons/pause.png'}}"></image>
      </div>
    </div>

    <div class="stats-page">
      <text class="page-title">专注统计</text>
      <text class="clock-label">{{ time }}</text>
      <text class="stats-title focus-title">累计专注</text>
      <text class="stats-value focus-value">{{ focusTotalText }}</text>
      <text class="stats-title rest-title">累计休息</text>
      <text class="stats-value rest-value">{{ restTotalText }}</text>
    </div>
  </swiper>
</template>

<script>
import router from "@system.router"
import file from "@system.file"
import vibrator from "@system.vibrator"

export default {
  protected: { duration: "m:20" },
  private: {
    time: "00:00",
    countdown: "20:00",
    clockTimer: null,
    countdownTimer: null,
    remaining: 1200,
    paused: false,
    isResting: false,
    focusDurationSeconds: 1200,
    focusTotalSeconds: 0,
    restTotalSeconds: 0,
    focusTotalText: "00:00:00",
    restTotalText: "00:00:00"
  },

  onInit() {
    this.loadStats()
    this.startCountdown(this.durationSeconds(this.duration))
    this.updateTime()
    this.clockTimer = setInterval(() => this.updateTime(), 1000)
  },

  onDestroy() {
    clearInterval(this.clockTimer)
    clearInterval(this.countdownTimer)
  },

  startCountdown(seconds) {
    clearInterval(this.countdownTimer)
    this.focusDurationSeconds = seconds > 0 ? seconds : 1200
    this.remaining = this.focusDurationSeconds
    this.isResting = false
    this.paused = false
    this.updateCountdown()
    this.countdownTimer = setInterval(() => this.tick(), 1000)
  },

  startRest() {
    this.remaining = 300
    this.isResting = true
    this.paused = true
    this.updateCountdown()
  },

  updateTime() {
    const now = new Date()
    const pad = (value) => (value < 10 ? `0${value}` : `${value}`)
    this.time = `${pad(now.getHours())}:${pad(now.getMinutes())}`
  },

  tick() {
    if (this.paused || this.remaining <= 0) return
    this.remaining -= 1
    if (this.isResting) this.restTotalSeconds += 1
    else this.focusTotalSeconds += 1
    this.updateStats()
    this.persistStats()
    this.updateCountdown()
    if (this.remaining === 0) {
      if (this.isResting) {
        vibrator.vibrate({ mode: "short" })
        this.startCountdown(this.focusDurationSeconds)
      } else {
        vibrator.vibrate({ mode: "long" })
        this.startRest()
      }
    }
  },

  durationSeconds(config) {
    if (config && config.indexOf("s:") === 0) return parseInt(config.substring(2), 10) || 5
    if (config && config.indexOf("m:") === 0) return (parseInt(config.substring(2), 10) || 20) * 60
    return (parseInt(config, 10) || 20) * 60
  },

  updateCountdown() {
    const minutes = Math.floor(this.remaining / 60)
    const seconds = this.remaining % 60
    const pad = (value) => (value < 10 ? `0${value}` : `${value}`)
    this.countdown = `${pad(minutes)}:${pad(seconds)}`
  },

  updateStats() {
    this.focusTotalText = this.formatDuration(this.focusTotalSeconds)
    this.restTotalText = this.formatDuration(this.restTotalSeconds)
  },

  formatDuration(totalSeconds) {
    const hours = Math.floor(totalSeconds / 3600)
    const minutes = Math.floor((totalSeconds % 3600) / 60)
    const seconds = totalSeconds % 60
    const pad = (value) => (value < 10 ? `0${value}` : `${value}`)
    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
  },

  loadStats() {
    file.readText({
      uri: "internal://files/focus-stats.json",
      success: (data) => {
        try {
          const stats = JSON.parse(data.text)
          if (stats.date === this.today()) {
            this.focusTotalSeconds = parseInt(stats.focus, 10) || 0
            this.restTotalSeconds = parseInt(stats.rest, 10) || 0
          }
        } catch (error) {}
        this.updateStats()
      },
      fail: () => this.updateStats()
    })
  },

  persistStats() {
    file.writeText({
      uri: "internal://files/focus-stats.json",
      text: JSON.stringify({
        date: this.today(),
        focus: this.focusTotalSeconds,
        rest: this.restTotalSeconds
      })
    })
  },

  today() {
    const now = new Date()
    const pad = (value) => (value < 10 ? `0${value}` : `${value}`)
    return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
  },

  togglePause() {
    this.paused = !this.paused
  },

  stopTimer() {
    router.back()
  }
}
</script>

<style>
.timer-swiper,
.timer-page,
.stats-page {
  width: 432px;
  height: 514px;
  background-color: #000000;
}

.timer-page,
.stats-page {
  position: relative;
}

.page-title {
  position: absolute;
  left: 33px;
  top: 19px;
  width: 255px;
  height: 45px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 500;
  line-height: 44.8px;
  text-align: left;
}

.clock-label {
  position: absolute;
  left: 276px;
  top: 19px;
  width: 130px;
  height: 45px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 30px;
  font-weight: 500;
  line-height: 33.6px;
  text-align: right;
}

.countdown {
  position: absolute;
  left: 66px;
  top: 189px;
  width: 300px;
  height: 97px;
  color: #ffffff;
  font-size: 64px;
  font-weight: 500;
  line-height: 84.86px;
  text-align: center;
}

.focus-label {
  position: absolute;
  left: 66px;
  top: 287px;
  width: 300px;
  height: 38px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 32px;
  font-weight: 500;
  line-height: 42.43px;
  text-align: center;
}

.stop-button,
.pause-button {
  position: absolute;
  top: 435px;
  width: 140px;
  height: 69px;
}

.stop-button { left: 66px; }
.pause-button { left: 226px; }

.button-background {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 140px;
  height: 69px;
}

.stop-icon {
  position: absolute;
  left: 59px;
  top: 23px;
  width: 22px;
  height: 24px;
}

.pause-icon {
  position: absolute;
  left: 53px;
  top: 16px;
  width: 35px;
  height: 38px;
}

.stats-title,
.stats-value {
  position: absolute;
  left: 66px;
  width: 300px;
  text-align: center;
}

.stats-title {
  height: 43px;
  font-size: 32px;
  font-weight: 500;
  line-height: 42.43px;
}

.stats-value {
  height: 50px;
  color: #ffffff;
  font-size: 40px;
  font-weight: 500;
  line-height: 53.04px;
}

.focus-title { top: 161px; color: rgba(112, 119, 255, 1); }
.focus-value { top: 204px; }
.rest-title { top: 260px; color: rgba(149, 168, 0, 1); }
.rest-value { top: 303px; }
</style>