注册 短信发送失败

src/api/index.ts

@@ -171,3 +171,26 @@ interface Liveaddrule{
     const res = await post<Liveaddrule>('live',data);
     console.log(res)
 }
+
+
+/**
+ * 发送验证码 
+ * @param phone 手机号 
+ * @param type 国外1 国内0
+ */
+interface SendSms{
+    code: number;
+    msg: string;
+}
+
+export async function sendsms(phone: string, type: number): Promise<boolean>{
+    const res = await post<SendSms>("SendSms", {phone, type});
+    console.log(res);
+    if(res.code == 0){
+        message.success(res.msg);
+        return true;
+    }else{
+        message.error(res.msg);
+        return false;
+    }
+}

src/views/login/Login.vue

@@ -7,7 +7,7 @@
           您好，欢迎来到 <span class="orgname">Beelink</span>
         </div>
         <div class="nosign">
-          还没有账号？ <span class="tosign"> 成为一名Beelink老师 </span>
+          还没有账号？ <span class="tosign"><router-link to="/sign"> 成为一名Beelink老师 </router-link></span>
         </div>
         <div class="tab">
           <LoginTab @sel="Selectnum"></LoginTab>
@@ -260,7 +260,7 @@ export default defineComponent({
         margin-top: 17px;
         margin-bottom: 35px;
       }
-      .tosign {
+      .tosign > a {
         color: #0dbba4;
         cursor: pointer;
       }

src/views/login/Sign.vue

@@ -17,26 +17,26 @@
             <a-form-item label="手机号" class="form-item">
               <a-input-group compact>
                 <a-select
-                  default-value="Zhejiang"
                   class="getcode"
                   style="width: 50%"
+                  v-model:value="phone.quhao"
                 >
-                  <a-select-option value="Zhejiang">
+                  <a-select-option value="86">
                     中国+0086
                   </a-select-option>
                   <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
                 </a-select>
                 <div class="line"></div>
-                <a-input style="width: 50%" placeholder="请输入您的手机号" />
+                <a-input v-model:value="phone.phone" style="width: 50%" placeholder="请输入您的手机号" />
               </a-input-group>
             </a-form-item>
             <a-form-item label="验证码" class="form-item">
               <a-input-group compact>
-                <div class="getcode" @click="getcode">
+                <div class="getcode" style="width: 50%" @click="getcode">
                   点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
                 </div>
                 <div class="line"></div>
-                <a-input style="width: 50%" placeholder="请输入您的验证码" />
+                <a-input v-model:value="phone.code" style="width: 50%" placeholder="请输入您的验证码" />
               </a-input-group>
             </a-form-item>
             <div class="submit" @click="next(2)">下一步</div>
@@ -62,10 +62,18 @@
           <a-form :layout="formLayout">
             <div class="signform">
               <a-form-item label="设置密码" class="form-item">
-                <a-input class="shuru" placeholder="请输入您的密码" type="password"/>
+                <a-input
+                  class="shuru"
+                  placeholder="请输入您的密码"
+                  type="password"
+                />
               </a-form-item>
               <a-form-item label="设置密码" class="form-item">
-                <a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
+                <a-input
+                  class="shuru"
+                  placeholder="请再次输入您的密码"
+                  type="password"
+                />
               </a-form-item>
               <a-form-item label="姓名" class="form-item">
                 <a-input class="shuru" placeholder="请输入您的姓名" />
@@ -93,7 +101,7 @@
 
         <div v-if="stepnow == 3">
           <div class="nosign">您已完成注册</div>
-          <img src="@/static/images/success.png" alt="" class="success">
+          <img src="@/static/images/success.png" alt="" class="success" />
           <div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
         </div>
       </div>
@@ -128,8 +136,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-import NavTop from "@/components/NavTop.vue"
+import { defineComponent, reactive, ref } from "vue";
+import NavTop from "@/components/NavTop.vue";
+import { sendsms } from '@/api';
 
 export default defineComponent({
   name: "Sign",
@@ -140,21 +149,31 @@ export default defineComponent({
       wrapperCol: 14,
     };
     const time = ref(60); //倒计时初始化
+    const phone = reactive({
+        quhao:"86",
+        phone: "",
+        code: ""
+    });
 
     /**
      * @param
      * 点击获取验证码  触发60S倒计时
      */
+    let lock = false;
     const getcode: () => void = () => {
         console.log(11111);
+        if (lock) {
+        return;
+        }
+        lock = true;
+        sendsms(phone.quhao + phone.phone, 0);
         const timestep = setInterval(() => {
-        console.log(11112);
+        console.log(phone);
         time.value = time.value - 1;
-        if (time.value > 0) {
-          console.log();
-        } else {
+        if (time.value <= 0) {
             time.value = 60;
             clearInterval(timestep);
+            lock = false;
         }
         }, 1000);
     };
@@ -186,6 +205,7 @@ export default defineComponent({
       ifagree,
       stepnow,
       next,
+      phone
     };
   },
 });
@@ -266,6 +286,7 @@ export default defineComponent({
         font-size: 15px;
         color: #08ae98;
         width: 313px;
+        // width: 50%;
         line-height: 30px;
         cursor: pointer;
       }
@@ -382,7 +403,7 @@ export default defineComponent({
     height: 233px;
   }
   .ale {
-    color:#08AE98;
+    color: #08ae98;
     font-size: 14px;
     font-weight: 800;
     margin-top: 34px;