Bladeren bron

fix(登录页): 优化验证码显示及重定向逻辑

- 调整验证码输入框布局,添加刷新按钮功能
- 修复验证码图片未加载时的显示问题
- 更新登录成功后的重定向路径到新首页
- 修复输入框宽度样式问题
huoyi 1 maand geleden
bovenliggende
commit
955f7f5748
1 gewijzigde bestanden met toevoegingen van 41 en 18 verwijderingen
  1. 41 18
      src/pages/login.vue

+ 41 - 18
src/pages/login.vue

@@ -17,17 +17,17 @@
17 17
           <view class="iconfont icon-password icon"></view>
18 18
           <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
19 19
         </view>
20
-        <view style="display: flex; align-items: center;">
21
-          <view class="input-item flex align-center" style="flex:1;margin: 0px;" v-if="captchaEnabled">
22
-            <view class="iconfont icon-code icon"></view>
23
-            <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
24
-
25
-          </view>
20
+        <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
21
+          <view class="iconfont icon-code icon"></view>
22
+          <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
26 23
           <view class="login-code">
27
-            <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
24
+            <image v-if="codeUrl" :src="codeUrl" @click="getCode" class="login-code-img"></image>
25
+            <view v-else class="refresh-btn" @click="getCode">
26
+              <text class="iconfont icon-refresh refresh-icon"></text>
27
+              <text class="refresh-text">点击刷新</text>
28
+            </view>
28 29
           </view>
29 30
         </view>
30
-
31 31
         <view class="action-btn">
32 32
           <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
33 33
         </view>
@@ -78,7 +78,7 @@ export default {
78 78
   onLoad() {
79 79
     //#ifdef H5
80 80
     if (getToken()) {
81
-      this.$tab.reLaunch('/pages/home/index')
81
+      this.$tab.reLaunch('/pages/home-new/index')
82 82
     }
83 83
     this.getStorage()
84 84
     //#endif
@@ -164,7 +164,7 @@ export default {
164 164
       this.$store.dispatch('GetInfo').then(res => {
165 165
         // 登录成功后调用showMessageTabRedDot更新消息tab红点状态
166 166
         showMessageTabRedDot()
167
-        this.$tab.reLaunch('/pages/home/index')
167
+        this.$tab.reLaunch('/pages/home-new/index')
168 168
       })
169 169
     }
170 170
   }
@@ -214,7 +214,7 @@ page {
214 214
       }
215 215
 
216 216
       .input {
217
-    
217
+        width: 100%;
218 218
         font-size: 14px;
219 219
         line-height: 20px;
220 220
         text-align: left;
@@ -239,18 +239,41 @@ page {
239 239
 
240 240
     .login-code {
241 241
       height: 38px;
242
-      margin-left: 10rpx;
243
-      // position: absolute;
244
-
245
-      // left: 470rpx;
246
-
247
-
242
+      float: right;
248 243
 
249 244
       .login-code-img {
250 245
         height: 38px;
246
+        position: absolute;
247
+        margin-left: 10px;
248
+        width: 200rpx;
249
+      }
251 250
 
252
-
251
+      .refresh-btn {
252
+        display: flex;
253
+        flex-direction: row;
254
+        align-items: center;
255
+        justify-content: center;
256
+        background-color: #f0f0f0;
257
+        cursor: pointer;
258
+        height: 38px;
259
+        position: absolute;
260
+        margin-left: 10px;
253 261
         width: 200rpx;
262
+
263
+        .refresh-icon {
264
+          font-size: 16px;
265
+          color: #666;
266
+        }
267
+
268
+        .refresh-text {
269
+          font-size: 12px;
270
+          color: #666;
271
+          margin-left: 5rpx;
272
+        }
273
+
274
+        &:active {
275
+          background-color: #e0e0e0;
276
+        }
254 277
       }
255 278
     }
256 279
   }