Showing
1 changed file
with
18 additions
and
5 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-11-10 18:08:59 | 2 | * @Date: 2025-11-10 18:08:59 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-11-11 14:01:40 | 4 | + * @LastEditTime: 2025-11-11 15:51:10 |
| 5 | * @FilePath: /stdj_h5/src/views/Login.vue | 5 | * @FilePath: /stdj_h5/src/views/Login.vue |
| 6 | * @Description: 登录页 | 6 | * @Description: 登录页 |
| 7 | --> | 7 | --> |
| ... | @@ -45,7 +45,7 @@ | ... | @@ -45,7 +45,7 @@ |
| 45 | </template> | 45 | </template> |
| 46 | 46 | ||
| 47 | <script setup> | 47 | <script setup> |
| 48 | -import { ref, onUnmounted, computed } from 'vue' | 48 | +import { ref, onUnmounted, computed, onMounted } from 'vue' |
| 49 | import { useRoute, useRouter } from 'vue-router' | 49 | import { useRoute, useRouter } from 'vue-router' |
| 50 | import { useTitle } from '@vueuse/core' | 50 | import { useTitle } from '@vueuse/core' |
| 51 | import { smsAPI } from '@/api/common.js' | 51 | import { smsAPI } from '@/api/common.js' |
| ... | @@ -82,7 +82,7 @@ const login_disabled = computed(function () { | ... | @@ -82,7 +82,7 @@ const login_disabled = computed(function () { |
| 82 | return ( | 82 | return ( |
| 83 | logging.value || | 83 | logging.value || |
| 84 | !is_valid_phone(phone.value) || | 84 | !is_valid_phone(phone.value) || |
| 85 | - !/^\d{4,6}$/.test(String(code.value || '').trim()) | 85 | + !/^\d{4}$/.test(String(code.value || '').trim()) |
| 86 | ) | 86 | ) |
| 87 | }) | 87 | }) |
| 88 | 88 | ||
| ... | @@ -172,8 +172,8 @@ const on_login = async function () { | ... | @@ -172,8 +172,8 @@ const on_login = async function () { |
| 172 | showFailToast('请输入有效的手机号') | 172 | showFailToast('请输入有效的手机号') |
| 173 | return | 173 | return |
| 174 | } | 174 | } |
| 175 | - if (!/^\d{4,6}$/.test(String(code.value || '').trim())) { | 175 | + if (!/^\d{4}$/.test(String(code.value || '').trim())) { |
| 176 | - showFailToast('请输入4~6位数字验证码') | 176 | + showFailToast('请输入4位数字验证码') |
| 177 | return | 177 | return |
| 178 | } | 178 | } |
| 179 | try { | 179 | try { |
| ... | @@ -193,6 +193,9 @@ const on_login = async function () { | ... | @@ -193,6 +193,9 @@ const on_login = async function () { |
| 193 | } | 193 | } |
| 194 | } | 194 | } |
| 195 | 195 | ||
| 196 | +onMounted(() => { | ||
| 197 | +}) | ||
| 198 | + | ||
| 196 | // 组件卸载时清理计时器 | 199 | // 组件卸载时清理计时器 |
| 197 | onUnmounted(function () { | 200 | onUnmounted(function () { |
| 198 | if (timer_id.value) { | 201 | if (timer_id.value) { |
| ... | @@ -220,6 +223,7 @@ onUnmounted(function () { | ... | @@ -220,6 +223,7 @@ onUnmounted(function () { |
| 220 | .logo-title { | 223 | .logo-title { |
| 221 | margin-bottom: 2rem; | 224 | margin-bottom: 2rem; |
| 222 | } | 225 | } |
| 226 | + | ||
| 223 | .logo-img { | 227 | .logo-img { |
| 224 | height: 5.5rem; | 228 | height: 5.5rem; |
| 225 | object-fit: contain; | 229 | object-fit: contain; |
| ... | @@ -234,6 +238,7 @@ onUnmounted(function () { | ... | @@ -234,6 +238,7 @@ onUnmounted(function () { |
| 234 | padding: 1rem; | 238 | padding: 1rem; |
| 235 | box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); | 239 | box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); |
| 236 | } | 240 | } |
| 241 | + | ||
| 237 | .card-title { | 242 | .card-title { |
| 238 | text-align: center; | 243 | text-align: center; |
| 239 | color: #432C0E; | 244 | color: #432C0E; |
| ... | @@ -248,6 +253,7 @@ onUnmounted(function () { | ... | @@ -248,6 +253,7 @@ onUnmounted(function () { |
| 248 | margin-top: 1.25rem; | 253 | margin-top: 1.25rem; |
| 249 | margin-bottom: 0.75rem; | 254 | margin-bottom: 0.75rem; |
| 250 | } | 255 | } |
| 256 | + | ||
| 251 | .code-row { | 257 | .code-row { |
| 252 | display: flex; | 258 | display: flex; |
| 253 | gap: 0.5rem; | 259 | gap: 0.5rem; |
| ... | @@ -258,6 +264,7 @@ onUnmounted(function () { | ... | @@ -258,6 +264,7 @@ onUnmounted(function () { |
| 258 | .input-with-icon { | 264 | .input-with-icon { |
| 259 | position: relative; | 265 | position: relative; |
| 260 | } | 266 | } |
| 267 | + | ||
| 261 | .input-with-icon::before { | 268 | .input-with-icon::before { |
| 262 | content: ''; | 269 | content: ''; |
| 263 | position: absolute; | 270 | position: absolute; |
| ... | @@ -270,9 +277,11 @@ onUnmounted(function () { | ... | @@ -270,9 +277,11 @@ onUnmounted(function () { |
| 270 | background-repeat: no-repeat; | 277 | background-repeat: no-repeat; |
| 271 | transform: translateY(-50%); | 278 | transform: translateY(-50%); |
| 272 | } | 279 | } |
| 280 | + | ||
| 273 | .input-with-icon.phone::before { | 281 | .input-with-icon.phone::before { |
| 274 | background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E6%89%8B%E6%9C%BA@2x.png'); | 282 | background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E6%89%8B%E6%9C%BA@2x.png'); |
| 275 | } | 283 | } |
| 284 | + | ||
| 276 | .input-with-icon.code::before { | 285 | .input-with-icon.code::before { |
| 277 | background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E9%AA%8C%E8%AF%81%E7%A0%81@2x-1.png'); | 286 | background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E9%AA%8C%E8%AF%81%E7%A0%81@2x-1.png'); |
| 278 | } | 287 | } |
| ... | @@ -286,6 +295,7 @@ onUnmounted(function () { | ... | @@ -286,6 +295,7 @@ onUnmounted(function () { |
| 286 | padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间 | 295 | padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间 |
| 287 | box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08); | 296 | box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08); |
| 288 | } | 297 | } |
| 298 | + | ||
| 289 | .input::placeholder { | 299 | .input::placeholder { |
| 290 | color: #999999; | 300 | color: #999999; |
| 291 | } | 301 | } |
| ... | @@ -302,12 +312,15 @@ onUnmounted(function () { | ... | @@ -302,12 +312,15 @@ onUnmounted(function () { |
| 302 | text-align: center; | 312 | text-align: center; |
| 303 | line-height: 2.5rem; | 313 | line-height: 2.5rem; |
| 304 | } | 314 | } |
| 315 | + | ||
| 305 | .btn.send { | 316 | .btn.send { |
| 306 | white-space: nowrap; | 317 | white-space: nowrap; |
| 307 | } | 318 | } |
| 319 | + | ||
| 308 | .btn.primary { | 320 | .btn.primary { |
| 309 | width: 100%; | 321 | width: 100%; |
| 310 | } | 322 | } |
| 323 | + | ||
| 311 | .btn.disabled { | 324 | .btn.disabled { |
| 312 | // 不可操作态:明显的灰显与禁止样式 | 325 | // 不可操作态:明显的灰显与禁止样式 |
| 313 | opacity: 0.5; | 326 | opacity: 0.5; | ... | ... |
-
Please register or login to post a comment