save
This commit is contained in:
expdsn
parent
38c07cb9ce
commit
dc90fdd621
|
|
@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
|
|||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
large
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { computed, defineComponent, ref } from 'vue'
|
||||
import useTomatoStore from '../useTomatoStore'
|
||||
import NoDataImg from "~/public/icons/work/noData.png"
|
||||
import StopImg from "~/public/icons/work/tomotoIconEnd.png"
|
||||
import clsx from 'clsx'
|
||||
import dayjs from 'dayjs'
|
||||
import PlayImg from "~/public/icons/work/work_page-play.png"
|
||||
|
|
@ -88,18 +89,36 @@ export default defineComponent(() => {
|
|||
<span class={" tracking-wide"}>你今日已完成 <span class={"text-[#5b47ff]"}>{store.state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length}</span>个番茄时</span>
|
||||
<span class={"text-[#ff8686]"}>不积跬步无以至千里、千里之行始于足下。</span>
|
||||
</div>
|
||||
<button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1 font-bold flex items-center justify-center"} style={{
|
||||
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
||||
boxShadow: '0 2px 4px #0003'
|
||||
}}
|
||||
onClick={() => {
|
||||
store.openFullscreen = true
|
||||
}}
|
||||
>
|
||||
{
|
||||
store.state.isStart ?
|
||||
<button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1 font-bold flex items-center justify-center"} style={{
|
||||
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
||||
boxShadow: '0 2px 4px #0003'
|
||||
}}
|
||||
onClick={() => {
|
||||
store.stopTomatoTime()
|
||||
}}
|
||||
>
|
||||
|
||||
<img src={StopImg} alt="play img " class={"w-[13px]"} />
|
||||
停止计时
|
||||
</button> :
|
||||
<button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1 font-bold flex items-center hover:opacity-90 justify-center"} style={{
|
||||
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
||||
boxShadow: '0 2px 4px #0003'
|
||||
}}
|
||||
onClick={() => {
|
||||
store.openFullscreen = true
|
||||
store.beginTomatoTime()
|
||||
}}
|
||||
>
|
||||
|
||||
<img src={PlayImg} alt="play img " class={"w-[13px]"} />
|
||||
开始计时
|
||||
</button>
|
||||
|
||||
}
|
||||
|
||||
<img src={PlayImg} alt="play img " class={"w-[13px]"} />
|
||||
开始计时
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,119 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import useTimeStore from "@/utils/useTimeStore";
|
||||
import dayjs from "dayjs";
|
||||
import { defineStore } from "pinia";
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
|
||||
|
||||
const TOTAL_TIME = 60 * 60 * 15
|
||||
export type TomatoTarget = {
|
||||
id: string
|
||||
finishTime: number
|
||||
remindTime: number | null
|
||||
title: string
|
||||
isCompleted: boolean
|
||||
id: string;
|
||||
finishTime: number;
|
||||
remindTime: number | null;
|
||||
title: string;
|
||||
isCompleted: boolean;
|
||||
|
||||
}
|
||||
export type TomatoTime = {
|
||||
date: number
|
||||
finishTime: number
|
||||
date: number;
|
||||
finishTime: number;
|
||||
}
|
||||
export const musicList = [
|
||||
{
|
||||
name: 'A Part of Us',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aPartOfUs.mp3'
|
||||
},
|
||||
{
|
||||
name: 'a signal rose',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AsignalRose.mp3'
|
||||
},
|
||||
{
|
||||
name: 'a thousand lifetimes',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aThousandLifetimes.mp3'
|
||||
},
|
||||
{
|
||||
name: 'A Very Brady Special',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AVeryBradySpecial.mp3'
|
||||
},
|
||||
{
|
||||
name: 'A Wonderful Story',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AWonderfulStore.mp3'
|
||||
}
|
||||
{
|
||||
name: 'A Part of Us',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aPartOfUs.mp3'
|
||||
},
|
||||
{
|
||||
name: 'a signal rose',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AsignalRose.mp3'
|
||||
},
|
||||
{
|
||||
name: 'a thousand lifetimes',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aThousandLifetimes.mp3'
|
||||
},
|
||||
{
|
||||
name: 'A Very Brady Special',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AVeryBradySpecial.mp3'
|
||||
},
|
||||
{
|
||||
name: 'A Wonderful Story',
|
||||
music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AWonderfulStore.mp3'
|
||||
}
|
||||
]
|
||||
export default defineStore('work', () => {
|
||||
const state = reactive({
|
||||
list: [] as TomatoTarget[],
|
||||
timeList: [] as TomatoTime[]
|
||||
})
|
||||
const openShowModel = ref<undefined | null | TomatoTarget>()
|
||||
const openFullscreen = ref(false)
|
||||
return {
|
||||
state,
|
||||
openShowModel,
|
||||
openFullscreen
|
||||
}
|
||||
})
|
||||
export default defineStore("work", () => {
|
||||
const state = reactive({
|
||||
list: [] as TomatoTarget[],
|
||||
timeList: [] as TomatoTime[],
|
||||
isPlaying: false as boolean,
|
||||
selectMusic: 0,
|
||||
isStart: false as boolean,
|
||||
beginTime: -1 as number
|
||||
|
||||
})
|
||||
|
||||
const time = useTimeStore()
|
||||
const beginTomatoTime = () => {
|
||||
state.beginTime = dayjs().valueOf()
|
||||
state.isStart = true
|
||||
playMusic()
|
||||
}
|
||||
const stopTomatoTime = () => {
|
||||
state.isStart = false
|
||||
state.beginTime = -1
|
||||
stopMusic()
|
||||
}
|
||||
const remainingTime = computed(() => {
|
||||
const totalTime = TOTAL_TIME
|
||||
|
||||
return dayjs(state.beginTime).add(15, 'minute').diff(dayjs(time.date), 'second')
|
||||
})
|
||||
const playAudio = computed(() => {
|
||||
const audio = new Audio(musicList[state.selectMusic].music)
|
||||
return audio
|
||||
})
|
||||
watch(() => remainingTime, (val) => {
|
||||
if (val.value < 0) {
|
||||
state.isPlaying = false
|
||||
state.isStart = false
|
||||
state.beginTime = -1
|
||||
state.timeList.push({
|
||||
date: dayjs().valueOf(),
|
||||
finishTime: TOTAL_TIME
|
||||
})
|
||||
}
|
||||
})
|
||||
// watch(() => state.isPlaying, (val) => {
|
||||
// if (val) {
|
||||
// playAudio.value.play()
|
||||
// } else {
|
||||
// playAudio.value.pause()
|
||||
|
||||
// }
|
||||
// })
|
||||
const playMusic = () => {
|
||||
state.isPlaying = true
|
||||
playAudio.value.play()
|
||||
}
|
||||
|
||||
const pauseMusic = () => {
|
||||
state.isPlaying = false
|
||||
playAudio.value.pause()
|
||||
}
|
||||
const stopMusic = () => {
|
||||
state.isPlaying = false
|
||||
playAudio.value.pause()
|
||||
playAudio.value.currentTime = 0
|
||||
}
|
||||
const openShowModel = ref<undefined | null | TomatoTarget>()
|
||||
const openFullscreen = ref(false)
|
||||
return {
|
||||
state,
|
||||
openShowModel,
|
||||
openFullscreen,
|
||||
beginTomatoTime,
|
||||
remainingTime,
|
||||
playMusic,
|
||||
pauseMusic,
|
||||
stopMusic,
|
||||
stopTomatoTime
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue