手机号登录

src/views/login/Login.vue

@@ -17,11 +17,17 @@
           <a-form :layout="formLayout">
             <a-form-item label="手机号" class="form-item">
               <a-input-group compact>
-                <a-select default-value="Zhejiang" class="getcode">
+                <!-- <a-select default-value="Zhejiang" class="getcode">
                   <a-select-option value="Zhejiang">
                     中国+0086
                   </a-select-option>
                   <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
+                </a-select> -->
+                 <a-select :default-value="quhaolist[0].code" size="small"  @change="getquhao" class="getcode">
+                    <a-select-option  v-for="(i,j) in quhaolist" :key="j" :value="i.code">
+                        {{i.name}}+{{i.code}}
+                    </a-select-option>
+                    <!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
                 </a-select>
                 <div class="line"></div>
                 <a-input v-model:value="phone" style="width: 50%" placeholder="请输入您的手机号" />
@@ -33,10 +39,10 @@
                   点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
                 </div>
                 <div class="line"></div>
-                <a-input style="width: 50%" placeholder="请输入您的验证码" />
+                <a-input style="width: 50%" placeholder="请输入您的验证码" v-model:value="code"/>
               </a-input-group>
             </a-form-item>
-            <div class="submit">立即登录</div>
+            <div class="submit" @click="sublogin">立即登录</div>
             <div>Beelink公司版权所有 2019—2022</div>
           </a-form>
         </div>
@@ -146,10 +152,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from "vue";
+import { defineComponent, onMounted, reactive, ref } from "vue";
 import LoginTab from "@/components/login/LoginTab.vue";
 import NavTop from "@/components/NavTop.vue"
-import { loginpass } from '@/api';
+import { getquhaolist, loginpass, sendsms } from '@/api';
+import { message } from 'ant-design-vue';
 
 export default defineComponent({
   name: "Login",
@@ -165,10 +172,26 @@ export default defineComponent({
     const tabselected = ref(1);  //tab切换的标志
     const time = ref(60);//倒计时
     const phone = ref(""); // 手机号
+    const code =ref("")
+    const myquhao=ref("86")
     const userinfo = reactive({
       phone: '13152639856',
       password: '123456'
     })
+    const quhaolist = ref<any>([
+    {
+      code: "86",
+      id: 214,
+      name: "中国"
+    }
+    ])
+
+    onMounted(async ()=>{
+        quhaolist.value=await getquhaolist()
+        console.log(quhaolist.value,"listsssss")
+    })
+
+
     /**
      * @param val  子组件传过来的值
      */
@@ -182,10 +205,25 @@ export default defineComponent({
      * @param 
      * 点击获取验证码 触发倒计时
      */
+     let lock=false
     const getcode: () => void = () => {
       console.log(phone.value);
-      const timestep = setInterval(() => {
+         if (lock) {
+          console.log("lock")
+          return;
+        }
+        if (phone.value == "") {
+            message.error("手机号不能为空");
+            return;
+        }
+        lock = true;
+        console.log(myquhao.value,"quhao")
+        sendsms(myquhao.value + phone.value, 0);
+        const timestep = setInterval(() => {
         console.log(11112);
+     
+        
+
         time.value = time.value - 1;
         if (time.value > 0) {
           console.log();
@@ -195,11 +233,21 @@ export default defineComponent({
         }
       }, 1000);
     };
+    function getquhao(e ?:any){
+            console.log(e)
+            myquhao.value=e.toString()
+            console.log(myquhao.value)
+        }
     function login(): void {
         console.log(userinfo.phone,userinfo.password)
         loginpass(userinfo.phone,userinfo.password)
 
     }
+
+    function sublogin(){
+      console.log(11)
+       loginpass(phone.value,'',1,code.value)
+    }
     return {
       formLayout,
       tabselected,
@@ -208,7 +256,12 @@ export default defineComponent({
       time,
       phone,
       login,
-      userinfo
+      userinfo,
+      quhaolist,
+      getquhao,
+      code,
+      myquhao,
+      sublogin
     };
   },
 });