save

src/widgets/work/Large.tsx

@@ -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>
   )
 })

src/widgets/work/modal_view/list.tsx

@@ -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%)',
+            store.state.isStart ?
-            boxShadow: '0 2px 4px #0003'
+              <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%)',
-            onClick={() => {
+                boxShadow: '0 2px 4px #0003'
-              store.openFullscreen = true
+              }}
-            }}
+                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>

src/widgets/work/useTomatoStore.ts

@@ -1,49 +1,119 @@
-import { defineStore } from 'pinia'
+import useTimeStore from "@/utils/useTimeStore";
-import { computed, reactive, ref, watch } from 'vue'
+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
+    id: string;
-  finishTime: number
+    finishTime: number;
-  remindTime: number | null
+    remindTime: number | null;
-  title: string
+    title: string;
-  isCompleted: boolean
+    isCompleted: boolean;
+
 }
 export type TomatoTime = {
-  date: number
+    date: number;
-  finishTime: number
+    finishTime: number;
 }
 export const musicList = [
-  {
+    {
-    name: 'A Part of Us',
+        name: 'A Part of Us',
-    music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aPartOfUs.mp3'
+        music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aPartOfUs.mp3'
-  },
+    },
-  {
+    {
-    name: 'a signal rose',
+        name: 'a signal rose',
-    music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AsignalRose.mp3'
+        music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AsignalRose.mp3'
-  },
+    },
-  {
+    {
-    name: 'a thousand lifetimes',
+        name: 'a thousand lifetimes',
-    music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aThousandLifetimes.mp3'
+        music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/aThousandLifetimes.mp3'
-  },
+    },
-  {
+    {
-    name: 'A Very Brady Special',
+        name: 'A Very Brady Special',
-    music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AVeryBradySpecial.mp3'
+        music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AVeryBradySpecial.mp3'
-  },
+    },
-  {
+    {
-    name: 'A Wonderful Story',
+        name: 'A Wonderful Story',
-    music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AWonderfulStore.mp3'
+        music: 'https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/music/AWonderfulStore.mp3'
-  }
+    }
 ]
-export default defineStore('work', () => {
+export default defineStore("work", () => {
-  const state = reactive({
+    const state = reactive({
-    list: [] as TomatoTarget[],
+        list: [] as TomatoTarget[],
-    timeList: [] as TomatoTime[]
+        timeList: [] as TomatoTime[],
-  })
+        isPlaying: false as boolean,
-  const openShowModel = ref<undefined | null | TomatoTarget>()
+        selectMusic: 0,
-  const openFullscreen = ref(false)
+        isStart: false as boolean,
-  return {
+        beginTime: -1 as number
-    state,
+
-    openShowModel,
+    })
-    openFullscreen
+
-  }
+    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
+    }
+})