✨ feat: 联调发送验证码相关功能页

+/*
+ * @Date: 2022-06-17 15:03:03
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-17 15:05:04
+ * @FilePath: /tswj/src/api/B/login.js
+ * @Description: 文件描述
+ */
+import { fn, fetch } from '@/api/fn';
+
+const Api = {
+  B_LOGIN: '/srv/?a=b_login',
+}
+
+/**
+ * @description 登录接口
+ * @param {*} phone 手机号
+ * @param {*} pin 验证码
+ */
+export const b_LoginAPI = (params) => fn(fetch.get(Api.B_LOGIN, params));

+/*
+ * @Date: 2022-06-17 14:54:29
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-17 14:58:17
+ * @FilePath: /tswj/src/api/common.js
+ * @Description: 通用接口
+ */
+import { fn, fetch } from '@/api/fn';
+
+const Api = {
+  SMS: '/srv/?a=sms',
+}
+
+/**
+ * @description: 发送验证码
+ * @param {*} phone 手机号码
+ * @returns 
+ */
+export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));

@@ -47,12 +47,14 @@ import { styleColor } from '@/constant.js';
 import { ref, onMounted } from 'vue';
 import { Toast } from 'vant'
 import { useRouter } from 'vue-router'
-import axios from '@/utils/axios'
 import logo_image from '@images/denglu-top@2x.png'
 import { wxInfo } from '@/utils/tools';
 
 import { useCountDown } from '@vant/use';
 
+import { smsAPI } from '@/api/common'
+import { b_LoginAPI } from '@/api/B/login'
+
 const $router = useRouter();
 
 // 判断是否显示控件
@@ -157,27 +159,13 @@ const countDown = useCountDown({
   }
 });
 
-const sendCode = () => { // 发送验证码
+const sendCode = async () => { // 发送验证码
   countDown.start();
-  // TODO: 验证码接口
-  axios.post('/srv/?a=bind_phone&t=get_code', {
-    phone: phone.value
-  })
-    .then(res => {
-      if (res.data.code === 1) {
+  // 验证码接口
+  const { code } = await smsAPI({ phone: phone.value });
+  if (code === 1) {
     Toast.success('发送成功');
-      } else {
-        console.warn(res.data);
-        if (!res.data.show) return false;
-        Toast({
-          message: res.data.msg,
-          icon: 'close',
-        });
   }
-    })
-    .catch(err => {
-      console.error(err);
-    })
 };
 
 const disabled = ref(true);
@@ -189,27 +177,13 @@ const formatter = (value) => value.substring(0, 4);
  * @param {*} values 
  */
 
-const onSubmit = (values) => {
-  axios.post('/srv/?a=b_login', {
-    phone: values.phone,
-    pin: values.code,
-  })
-    .then(res => {
-      if (res.data.code === 1) {
+const onSubmit = async (values) => {
+  const { code } = await b_LoginAPI({ phone: values.phone, pin: values.code })
+  if (code === 1) {
     $router.push({
       path: '/business/index'
     });
-      } else {
-        console.warn(res.data);
-        Toast({
-          message: res.data.msg,
-          icon: 'close',
-        });
   }
-    })
-    .catch(err => {
-      console.error(err);
-    })
 };
 
 const themeVars = {

@@ -19,9 +19,11 @@
             <van-field v-model="pin" center clearable name="pin" type="digit" 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 v-if="countDown.current.value.total === limit" size="small" type="primary" :disabled="disabled" @click="sendCode">
+                  <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>
@@ -48,6 +50,8 @@ import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
 import { styleColor } from '@/constant.js';
+import { smsAPI } from '@/api/common'
+import { useCountDown } from '@vant/use';
 
 const $route = useRoute();
 const $router = useRouter();
@@ -86,39 +90,36 @@ const onBlur = () => { // 数字键盘失焦回调
 
 /******************** 发送验证码模块 START ********************/
 
-// TODO：发送验证码接口待调，验证码写默认8888
-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) {
-    axios.post('/srv/?a=bind_phone&t=get_code', {
-      phone: phone.value
-    })
-      .then(res => {
-        if (res.data.code === 1) {
+});
+
+const sendCode = async () => { // 发送验证码
+  countDown.start();
+  // 验证码接口
+  const { code } = await smsAPI({ phone: phone.value });
+  if (code === 1) {
     Toast.success('发送成功');
-          countDownHandle()
-        } else {
-          console.warn(res.data);
-          Toast({
-            message: res.data.msg,
-            icon: 'close',
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      })
   }
 };