使用vant提供函数调整倒计时

@@ -22,9 +22,11 @@
           <van-field v-model="code" center clearable name="code" label="短信验证码" placeholder="请输入短信验证码"
             :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
             <template #button>
-              <van-button @click="sendCode" size="small" type="primary" :disabled="disabled">
-                <span v-if="countDown === 60">发送验证码</span>
-                <span v-else>{{ countDown }} 秒重新发送</span>
+              <van-button @click="sendCode" v-if="countDown.current.value.total === limit" size="small" type="primary" :disabled="disabled">
+                <span>发送验证码</span>
+              </van-button>
+              <van-button v-else size="small" type="primary" :disabled="disabled">
+                <span>{{ countDown.current.value.seconds }} 秒重新发送</span>
               </van-button>
             </template>
           </van-field>
@@ -46,6 +48,9 @@ import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios'
 import logo_image from '@images/zhengshu-banner@2x.png'
 import { wxInfo } from '@/utils/tools';
+
+import { useCountDown } from '@vant/use';
+
 const $route = useRoute();
 const $router = useRouter();
 
@@ -104,40 +109,50 @@ const onBlur = () => { // 数字键盘失焦回调
 };
 
 // 设置发送短信倒计时
-const countDown = ref(60);
-const countDownHandle = () => {
-  // 倒计时
-  if (countDown.value === 0) {
-    countDown.value = 60;
-  } else {
-    countDown.value--;
-    setTimeout(() => {
-      countDownHandle()
-    }, 1000)
+// const countDown = ref(60);
+// const countDownHandle = () => {
+//   // 倒计时
+//   if (countDown.value === 0) {
+//     countDown.value = 60;
+//   } else {
+//     countDown.value--;
+//     setTimeout(() => {
+//       countDownHandle()
+//     }, 1000)
+//   }
+// }
+
+// 设置发送短信倒计时
+// TAG: vant 自带倒计时函数
+const limit = ref(60000); // 配置倒计时秒数
+const countDown = useCountDown({
+  // 倒计时 24 小时
+  time: limit.value,
+  onFinish: () => {
+    countDown.reset();
   }
-}
+});
+
 const sendCode = () => { // 发送验证码
-  if (countDown.value === 60) {
-    // TODO: 验证码接口
-    axios.post('/srv/?a=bind_phone&t=get_code', {
-      phone: phone.value
+  countDown.start();
+  // TODO: 验证码接口
+  axios.post('/srv/?a=bind_phone&t=get_code', {
+    phone: phone.value
+  })
+    .then(res => {
+      if (res.data.code === 1) {
+        Toast.success('发送成功');
+      } else {
+        console.warn(res.data);
+        Toast({
+          message: res.data.msg,
+          icon: 'close',
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
     })
-      .then(res => {
-        if (res.data.code === 1) {
-          Toast.success('发送成功');
-          countDownHandle()
-        } else {
-          console.warn(res.data);
-          Toast({
-            message: res.data.msg,
-            icon: 'close',
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      })
-  }
 };
 
 const disabled = ref(true);