feat: 增加倒计时hook

.vscode/settings.json

@@ -11,7 +11,6 @@
         "html"
     ],
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-        // "source.fixAll.stylelint": true
+        "source.fixAll.eslint": "explicit"
     }
 }

components/_common/cache.ts

@@ -0,0 +1,20 @@
+const ls = window.localStorage
+
+export default {
+    set(key, val) {
+        if (val && typeof val !== 'string') {
+            val = JSON.stringify(val)
+        }
+        ls.setItem(key, val)
+    },
+    get(key) {
+        let val = ls.getItem(key)
+        if (val && typeof val === 'string') {
+            val = JSON.parse(val)
+        }
+        return val
+    },
+    rm(key) {
+        ls.removeItem(key)
+    },
+}

components/useCountDown/index.tsx

@@ -0,0 +1,51 @@
+import {
+    reactive, ref, readonly 
+} from 'vue'
+
+export default function useCountDown() {
+    const state = reactive({
+        count: 0,
+    })
+
+    let isFirstCountDown = true
+
+    const getCountDownText = () => {
+        const initCountDownText = isFirstCountDown ? '获取验证码' : '重新获取'
+        return state.count <= 0 ? initCountDownText : `${state.count}s后获取`
+    }
+
+    const countDisabled = ref(false)
+
+    const countDown = (sec = 60) => {
+        const now = Date.now()
+        const endTime = now + 1000 * sec
+        let timer = null
+
+        state.count = sec
+
+        if (timer) {
+            clearInterval(timer)
+        } else {
+            timer = setInterval(() => {
+                if (Date.now() >= endTime) {
+                    state.count = 0
+                    clearInterval(timer)
+                } else {
+                    state.count = Math.ceil((endTime - Date.now()) / 1000)
+                    isFirstCountDown = false
+                    if (state.count <= 0) {
+                        state.count = 0
+                        clearInterval(timer)
+                    }
+                }
+            }, 1000)
+        }
+    }
+
+    return {
+        countDown,
+        getCountDownText,
+        countDisabled,
+        state: readonly(state),
+    }
+}

components/useCountDownCache/index.tsx

@@ -0,0 +1,70 @@
+import {
+    onMounted, reactive, ref, readonly 
+} from 'vue'
+import cache from '../_common/cache'
+
+export default function useCountDownCache({ unique = false } = {}) {
+    const state = reactive({
+        count: 0,
+    })
+
+    let endTime = 0
+    let isFirstCountDown = true
+
+    const getCountDownText = () => {
+        const initCountDownText = isFirstCountDown ? '获取验证码' : '重新获取'
+        return state.count <= 0 ? initCountDownText : `${state.count}s后获取`
+    }
+
+    const countDisabled = ref(false)
+
+    const countDown = (sec = 60, endTimeKey = 'refreshEndTime') => {
+        const now = Date.now()
+        let timer = null
+        const cacheEndTime = Number(cache.get(endTimeKey))
+
+        // 点击开始倒计时
+        if (countDisabled.value && cacheEndTime < Date.now()) {
+            state.count = sec
+            endTime = now + 1000 * sec
+            cache.set(endTimeKey, endTime)
+        } else {
+            // 刷新页面
+            endTime = cacheEndTime
+            state.count = Math.ceil((cacheEndTime - Date.now()) / 1000)
+        }
+
+        if (timer) {
+            clearInterval(timer)
+        } else {
+            timer = setInterval(() => {
+                if (now >= endTime) {
+                    state.count = 0
+                    clearInterval(timer)
+                } else {
+                    state.count = Math.ceil(
+                        (Number(cache.get(endTimeKey)) - Date.now()) / 1000
+                    )
+                    isFirstCountDown = false
+                    if (state.count <= 0) {
+                        state.count = 0
+                        clearInterval(timer)
+                    }
+                }
+            }, 1000)
+        }
+    }
+
+    onMounted(() => {
+        if (!unique) {
+            countDown()
+        }
+    })
+
+    return {
+        countDown,
+        getCountDownText,
+        countDisabled,
+        state: readonly(state),
+    }
+}