调整登录组织校验和图形验证码交互

src/api/auth.ts

@@ -5,6 +5,7 @@ import type { TokenResponse } from '@/types/api'
 import { joinUrl } from '@/utils/url'
 
 export interface OrganizationMemberInfo {
+  userId?: string
   memberId?: string
   organizationId?: string
   memberName?: string
@@ -28,7 +29,7 @@ export const getImageCodeUrl = (imageRandomStr: string) => {
     randomStr: imageRandomStr,
     t: String(Date.now())
   })
-  return `${joinUrl(env.authBase, 'code/image')}?${params.toString()}`
+  return `${joinUrl(env.apiBase, env.authBase, 'code/image')}?${params.toString()}`
 }
 
 export const sendMobileCode = async (payload: SendMobileCodePayload) => {
@@ -72,3 +73,10 @@ export const bindUserInfoAndGetUserMemberInfoByPhone = async (phone: string) =>
     { userPhone: phone }
   ) as unknown as OrganizationMemberInfo
 }
+
+export const getBindStaffInfo = async () => {
+  if (env.useMock) return mockApi.getBindStaffInfo()
+  return await http.post<OrganizationMemberInfo>(
+    joinUrl(env.staffBase, 'user/getBindStaffInfo')
+  ) as unknown as OrganizationMemberInfo
+}

src/api/mock.ts

@@ -171,6 +171,17 @@ export const mockApi = {
     }
   },
 
+  async getBindStaffInfo() {
+    await wait(180)
+    return {
+      userId: 'USER10001',
+      memberId: 'MEMBER10001',
+      organizationId: 'ORG10001',
+      memberName: '当前员工',
+      memberRoleId: 'ROLE_STAFF'
+    }
+  },
+
   async orderList(query: CommodityOrderSearch) {
     await wait()
     const keyword = query.orderId || query.contactPhone || ''

src/stores/auth.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import {
-  bindUserInfoAndGetUserMemberInfoByPhone,
+  getBindStaffInfo,
   loginByMobile,
   type OrganizationMemberInfo
 } from '@/api/auth'
@@ -66,7 +66,7 @@ export const useAuthStore = defineStore('auth', () => {
     const payload = await loginByMobile(phone, code)
     persistToken(payload, phone)
     try {
-      const member = await bindUserInfoAndGetUserMemberInfoByPhone(phone)
+      const member = await getBindStaffInfo()
       if (!member?.organizationId || !member?.memberId) {
         throw new Error('未绑定组织，请联系管理员')
       }

src/views/login/LoginView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { BadgeCheck, Phone, ShieldCheck } from 'lucide-vue-next'
@@ -36,6 +36,7 @@ const refreshImageCode = () => {
 }
 
 const canSend = computed(() => /^1\d{10}$/.test(phone.value) && seconds.value === 0)
+const captchaLocked = computed(() => seconds.value > 0 || sending.value)
 
 const startCountdown = () => {
   seconds.value = 60
@@ -43,7 +44,9 @@ const startCountdown = () => {
   timer = window.setInterval(() => {
     seconds.value -= 1
     if (seconds.value <= 0) {
+      seconds.value = 0
       window.clearInterval(timer)
+      refreshImageCode()
     }
   }, 1000)
 }
@@ -74,7 +77,6 @@ const handleSend = async () => {
       showToast('验证码已发送')
     }
     startCountdown()
-    refreshImageCode()
   } catch (error) {
     showToast(error instanceof Error ? error.message : '验证码发送失败')
     refreshImageCode()
@@ -105,6 +107,7 @@ const handleLogin = async () => {
 }
 
 onMounted(refreshImageCode)
+onBeforeUnmount(() => window.clearInterval(timer))
 </script>
 
 <template>
@@ -137,6 +140,7 @@ onMounted(refreshImageCode)
           maxlength="8"
           placeholder="请输入图形验证码"
           autocomplete="off"
+          :disabled="captchaLocked"
           clearable
         >
           <template #left-icon><ShieldCheck :size="18" /></template>
@@ -145,6 +149,7 @@ onMounted(refreshImageCode)
               class="captcha-image-button"
               type="button"
               aria-label="刷新图形验证码"
+              :disabled="captchaLocked"
               @click="refreshImageCode"
             >
               <img v-if="imageCodeUrl" :src="imageCodeUrl" alt="图形验证码" />
@@ -200,6 +205,7 @@ onMounted(refreshImageCode)
   overflow-x: hidden;
   place-items: center;
   background:
+    radial-gradient(circle at 18% 4%, rgba(19, 144, 111, 0.18), transparent 220px),
     linear-gradient(180deg, #dff4ec 0, rgba(246, 248, 247, 0) 44%),
     var(--app-bg);
 }
@@ -210,10 +216,11 @@ onMounted(refreshImageCode)
   min-width: 0;
   padding: 22px 16px 16px;
   overflow: hidden;
-  border: 1px solid var(--line);
+  border: 1px solid rgba(202, 214, 208, 0.86);
-  border-radius: var(--radius);
+  border-radius: var(--panel-radius);
-  background: var(--surface);
+  background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
 }
 
 .login-brand {
@@ -233,7 +240,8 @@ onMounted(refreshImageCode)
   width: 54px;
   height: 54px;
   flex: 0 0 54px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(19, 144, 111, 0.16);
+  border-radius: var(--panel-radius);
   background: var(--primary-soft);
   color: var(--primary-deep);
   place-items: center;
@@ -250,6 +258,7 @@ onMounted(refreshImageCode)
   margin: 0;
   color: var(--text-strong);
   font-size: 25px;
+  font-weight: 750;
   line-height: 1.2;
 }
 
@@ -261,10 +270,18 @@ onMounted(refreshImageCode)
 
 .login-form :deep(.van-cell) {
   width: 100%;
+  height: 50px;
   min-width: 0;
-  min-height: 50px;
+  padding: 0 12px;
+  align-items: center;
   border: 1px solid var(--line);
   border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.login-form :deep(.van-cell:focus-within) {
+  border-color: var(--primary);
+  box-shadow: var(--focus-ring);
 }
 
 .login-form :deep(.van-field__value),
@@ -273,8 +290,16 @@ onMounted(refreshImageCode)
   min-width: 0;
 }
 
+.login-form :deep(.van-field__value),
+.login-form :deep(.van-field__body) {
+  height: 100%;
+  align-items: center;
+}
+
 .login-form :deep(.van-field__button) {
+  display: inline-flex;
   flex: 0 0 auto;
+  align-items: center;
   padding-left: 8px;
 }
 
@@ -282,10 +307,17 @@ onMounted(refreshImageCode)
   max-width: 100%;
 }
 
+.login-form :deep(.van-field__button .van-button) {
+  min-width: 86px;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
 .captcha-image-button {
   display: inline-flex;
-  width: 100px;
+  width: 96px;
-  height: 40px;
+  height: 32px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -294,13 +326,23 @@ onMounted(refreshImageCode)
   border-radius: var(--radius);
   background: var(--surface-soft);
   color: var(--primary-deep);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.captcha-image-button:active {
+  transform: scale(0.98);
+}
+
+.captcha-image-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.66;
 }
 
 .captcha-image-button img {
   display: block;
-  width: 100px;
+  width: 96px;
-  height: 40px;
+  height: 32px;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .login-note {