Login 页面改写完成

src/styles/variables.styl

@@ -1,27 +1,3 @@
-$themeColor = rgb(128,51,134);
-$fontColor = rgb(77,9,86)
-
-Button()
-    background linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)
-    color white
-    padding 10px
-    width 85%
-    text-align center
-    border-radius 25px
-    border: 1px solid transparent
-
-hint()
-    width 100%
-    box-sizing border-box
-    position absolute
-    text-indent 2em
-    z-index 9999
-    padding 10px
-    background rgba(255,255,255,0.8)
-    color rgb(0,133,208)
-    font-size 12px
-    line-height 1.4em
-
 .home-wrap
     overflow hidden
     height: 100vh
@@ -44,7 +20,7 @@ hint()
         color: white
         text-align: center
         margin-top: 15vh
-    .info-card
+    .card
         position relative
         width 90%
         box-shadow: 0 4px 10px #00000012
@@ -55,7 +31,6 @@ hint()
             padding 30px
             box-sizing border-box
             position relative
-            // z-index 999
             .van-cell-group
                 margin: 30px auto
                 .van-cell
@@ -78,7 +53,6 @@ hint()
     .main
         width 100vw
         position relative
-        z-index 800
         .hint
             width 70%
             border-radius 10px

src/utils/request.js

@@ -12,7 +12,7 @@ const service = axios.create({
 // request interceptor（请求拦截器）
 service.interceptors.request.use(
     config => {
-        vm.$Loading.show()
+        // vm.$Loading.show()
         // 给config统一配置属性
         return config
     },
@@ -24,7 +24,7 @@ service.interceptors.request.use(
 //response （响应拦截器）
 service.interceptors.response.use(
     response => {
-        vm.$Loading.hidden()
+        // vm.$Loading.hidden()
         const res = response.data
         const code = response.status
         if (code !== 200) {
@@ -38,7 +38,7 @@ service.interceptors.response.use(
         }
     },
     error => {
-        vm.$Loading.hidden()
+        // vm.$Loading.hidden()
         if (error.response.status && error.response.status == 401) {       //拦截401，代表登陆失效，触发页面刷新后再触发路由拦截，拦截到重新登录
             // 401一般是权限问题或者登录失效
             // router.push('/login')      //如果项目存在登录验证，应该在这里返回登录页面重新登录；

src/views/login/index.vue

@@ -6,7 +6,7 @@
         <div class="top-brand-wrap">
             <h1 class="title">5G 赛道</h1>
         </div>
-        <div class="info-card flex-container">
+        <div class="card flex-container">
             <van-form>
                 <van-cell-group inset>
                     <van-field required v-model="formData.Name" name="姓名" label="姓名" clearable placeholder="请输入姓名" />
@@ -25,8 +25,8 @@
 import { Form, Field, Toast, CellGroup, Dialog, Button, Col, Row } from 'vant'
 import { Login } from 'api/home'
 
-import imgs1 from '@/assets/image/imgs-01.jpg'
+// import imgs1 from '@/assets/image/imgs-01.jpg'
-import imgs2 from '@/assets/image/imgs-02.jpg'
+// import imgs2 from '@/assets/image/imgs-02.jpg'
 
 export default {
     name:'Home',
@@ -38,7 +38,7 @@ export default {
         [Dialog.name]:Dialog,
         [Button.name]:Button,
         [Col.name]:Col,
-        [Row.name]:Row
+        [Row.name]:Row,
     },
     activated(){
 
@@ -61,25 +61,30 @@ export default {
     methods:{
         onLogin(){
             if (!this.formData.Name){
-                this.$Toast.error('请填写姓名！')
+                Toast.fail('请填写姓名！')
                 return 
             } else if (!this.formData.Phone || this.formData.Phone.length != 11){
-                this.$Toast.error('请填写正确的手机号！')
+                Toast.fail('请填写正确的手机号！')
                 return 
             } else {
-                this.$Loading.show('正在登陆...')
+                Toast.loading({
+                    message: '正在登录……',
+                    forbidClick: true,
+                });
+                console.log(this.formData)
                 Login(this.formData).then(res => {
                     if (res.code === 0){
-                        this.$Toast.success('登陆成功！')
+                        Toast.success('登陆成功！')
                         this.$router.push('/photos')
                         localStorage.images = JSON.stringify(res.data)
                         // localStorage.images = JSON.stringify([imgs1,imgs2,imgs1,imgs2])
                     } else {
-                        this.$Toast.error('登陆失败：' + res.msg)
+                        Toast.fail('登陆失败：' + res.msg)
                     }
-                    this.$Loading.hidden()
+                    Toast.clear()
                 }).catch(err => {
-                    this.$Loading.hidden()
+                    Toast.fail('登陆失败：' + err)
+                    Toast.clear()
                 })
             }
         },