登录

src/utils/request.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { showToast } from 'vant';
+import { showToast } from 'vant'
 let baseURL = "/api"
 const service = axios.create({
   baseURL,
@@ -25,10 +25,10 @@ service.interceptors.response.use(
          return Promise.reject(new Error(res.message || 'Error'))
     } else {   
       if (res.code == 200) {
-        return res.result
+        return res.result || res.data
       } else { 
-        showToast(res.success)
-        return null
+          showToast(res.success)
+          return null
       }
     }
   },

src/view/login/index.vue

@@ -1,6 +1,65 @@
 <script setup lang="ts">
-  import { ref } from "vue";
-  let checked=ref(false)
+  import { ref,reactive } from "vue";
+  import {useRoute,useRouter}  from 'vue-router'
+  import { getCode,login } from '@/api/user'
+  import { showToast } from 'vant'
+  interface Istate{
+    checked:boolean;
+    accounts:string;
+    code:string;
+    codeText:string;
+    time:number;
+    interTimeCode:any 
+  }
+  const state:Istate = reactive({
+    checked:true,
+    accounts:'',
+    code:'',
+    codeText:"获取验证码",
+    time:60,
+    interTimeCode:null
+  })
+  const getCodeChange=async ()=>{
+       if(state.interTimeCode) return
+        const res:any=await getCode({
+            accounts:state.accounts
+        })
+       console.log(res);
+       if(res){
+           state.interTimeCode=setInterval(()=>{
+                  state.time--
+                  if(state.time<=0){
+                      clearInterval(state.interTimeCode)
+                      state.interTimeCode=null
+                      state.time=60
+                      state.codeText='获取验证码'
+                  }else{
+                    state.codeText='重新发送（'+state.time+'s)'
+                  }
+
+           },1000)
+           state.code=res.code
+       }
+  }
+  const loginSubmit=async ()=>{
+              if(!state.code){
+                    showToast('请输入验证码')
+                    return null 
+              }
+              if(!state.checked){
+                    showToast('轻阅读隐私协议')
+                    return 
+              }
+              const res:any=await login({
+                   accounts:state.accounts,
+                   code:state.code
+              })
+             if(res.errCode===200){
+                  
+             }
+
+  }
+
 </script>
 <template>
   <div>
@@ -9,16 +68,16 @@
         <h3>验证码登录</h3>
         <div class="login-form-item">
           <i class="icon-phone"></i>
-          <input placeholder="请输入手机号" type="text"/>
+          <input placeholder="请输入手机号" v-model="state.accounts" type="text"/>
         </div>
         <div class="login-form-item">
           <i class="icon-code"></i>
-          <input placeholder="请输入手机号" type="text"/>
-          <span>获取验证码</span>
+          <input placeholder="验证码" v-model="state.code" type="text"/>
+          <span @click="getCodeChange()">{{ state.codeText }}</span>
         </div>
-        <van-button type="primary" block>块级元素</van-button>
+        <van-button type="primary" block @click="loginSubmit()">登录</van-button>
          <div class="login-form-label">
-          <van-checkbox v-model="checked">我已阅读</van-checkbox>
+          <van-checkbox v-model="state.checked">我已阅读</van-checkbox>
           <router-link to="/login/serviceAgree">《IT企业平台服务协议》</router-link>和
           <router-link to="/login/privacyPolicy">《隐私政策》</router-link>
          </div>
@@ -87,4 +146,10 @@
   left: 0;
   width: 100%;
 }
+:deep .van-button--primary{
+  background: linear-gradient(90deg, #FEA829, #FE8F27);
+  border-radius: 1.17rem;
+  border: 0px ;
+
+}
 </style>

vite.config.ts

@@ -5,17 +5,19 @@ import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  resolve: {
-    alias: {
-      '@':path.resolve(__dirname,'./src')
-    }
-  },
   server: {
     port: 8002,
+    host: '0.0.0.0',
     open:true,
     proxy: {
-      '/api': 'https//api.imooc.zcwytd.com'
+      '/api': 'https://api.imooc.zcwytd.com'
     },
     cors:true
-  }
+  },
+  resolve: {
+    alias: {
+      '@':path.resolve(__dirname,'./src')
+    }
+  },
+ 
 })