增加一个带倒计时的按钮

src/components/checkBtn.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-button class="mybtn" :loading="timeLeft > 0" @click="beginAction">{{ timeLeft > 0 ? timeLeft + 's' : title }}</el-button>
+</template>
+
+<script>
+import {
+  apiCheckActivity,
+} from "@/utils/webapi.js";
+export default {
+  props: {
+    title: String,
+    time: String,
+    dataid: String
+  },
+  data() {
+    return {
+      timeLeft: 0,
+    }
+  },
+  methods: {
+    async beginAction() {
+      try {
+        let { errcode, data } = await apiCheckActivity(this.dataid);
+        if (errcode !== 0) {
+          this.beginCountdown();
+          return;
+        }
+        if (data.status === 2) {
+          this.$emit('stateupdate', data.status);
+          return;
+        }
+        this.beginCountdown();
+
+      } catch (err) {
+        console.log(err);
+        this.beginCountdown();
+      }
+    },
+    beginCountdown() {
+      this.timeLeft = parseInt(this.time);
+      let timer = setInterval(() => {
+        this.timeLeft--;
+        if (this.timeLeft <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mybtn{
+  width: 90px;
+  height: 30px;
+  line-height: 0!important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50% , -50%);
+  background: #fec25d;
+  background: url('@/assets/home/ButtonFollow.png') no-repeat;
+  background-size: 100% 100%;
+  color: unset;
+  border: none;
+}
+.mybtn:disabled{
+  color:unset;
+  border: none;
+  line-height: 0!important;
+}
+.mybtn.is-loading:before{
+  background-color: unset;
+}
+
+</style>
+<style lang="scss">
+.mybtn .el-icon-loading{
+  line-height: 0!important;
+}
+</style>

src/views/home/index.vue

@@ -167,7 +167,7 @@
               <div v-if="token != null" class="btn">
                 <div class="is-btn">
                   <div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
-                  <div v-if="item.status == 1" class="started" @click="toCheck(item)">Check</div>
+                  <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
                   <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
                   <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
                 </div>
@@ -479,6 +479,7 @@ import Calen from "./calenView.vue";
 import BoxBtm from './boxBtm.vue'
 // import ImgView from './../../components/imgView.vue'
 import gameView from "./gameView.vue";
+import CheckBtn from "@/components/checkBtn.vue";
 import WalletDialog from "@/components/walletDialog/index.vue";
 import { getToken } from '@/utils/cookies.js'
 import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
@@ -500,6 +501,7 @@ export default {
     gameView,
     WalletDialog,
     BoxBtm,
+    CheckBtn
     // ImgView,
   },
   data() {
@@ -672,8 +674,8 @@ export default {
       }
     },
     // 手动检查任务
-    async toCheck(data) {
-      this.getActivitrStatue(data.id)
+    async toCheck() {
+      await this.getProgress()
     },
     // 检查任务状态
     async getActivitrStatue(id) {