Jelajahi Sumber

feat: 替换新logo + 记住账号功能 + 微信按钮hover修复

- 将CSS绘制的logo替换为新logo图片
- 新增记住账号功能,勾选后登录成功自动保存用户名
- 微信一键登录按钮添加hover-class='none'防止白底
- 调整logo-section样式适配图片logo

Co-Authored-By: Claude <noreply@anthropic.com>
skyline 18 jam lalu
induk
melakukan
e8f4379a3a
2 mengubah file dengan 64 tambahan dan 39 penghapusan
  1. 64 39
      haha-admin-mp/src/pages/login/login.vue
  2. TEMPAT SAMPAH
      haha-admin-mp/src/static/logo.png

+ 64 - 39
haha-admin-mp/src/pages/login/login.vue

@@ -3,12 +3,7 @@
     <view class="login-content">
       <!-- Logo 区域 -->
       <view class="logo-section">
-        <view class="logo">
-          <view class="logo-icon">
-            <view class="logo-leaf"></view>
-            <view class="logo-leaf right"></view>
-          </view>
-        </view>
+        <image class="logo-img" src="/static/logo.png" mode="aspectFit" />
         <text class="brand-name">富玉餐饮运营</text>
       </view>
       
@@ -30,6 +25,12 @@
             </view>
           </view>
         </view>
+        <view class="remember-row" @click="rememberAccount = !rememberAccount">
+          <view :class="['remember-checkbox', { checked: rememberAccount }]">
+            <text v-if="rememberAccount" class="check-mark">✓</text>
+          </view>
+          <text class="remember-label">记住账号</text>
+        </view>
         <button class="login-btn" :loading="loading" :disabled="loading" @click="handleLogin">
           <text v-if="!loading">立即登录</text>
           <text v-else>登录中...</text>
@@ -39,7 +40,7 @@
       <!-- 补货员登录 -->
       <view class="replenisher-card">
         <text class="card-label">补货员登录</text>
-        <button class="wechat-btn" :loading="wechatLoading" :disabled="wechatLoading" @click="handleWechatLogin">
+        <button class="wechat-btn" hover-class="none" :loading="wechatLoading" :disabled="wechatLoading" @click="handleWechatLogin">
           <image class="wechat-icon-img" src="/static/icon-wechat.svg" />
           <text>微信一键登录</text>
         </button>
@@ -90,10 +91,20 @@ const wechatLoading = ref(false);
 const showBindInput = ref(false);
 const bindingCode = ref('');
 const bindLoading = ref(false);
+const rememberAccount = ref(false);
+
+const REMEMBERED_KEY = 'remembered_username';
 
 onMounted(() => {
   if (isLoggedIn()) {
     navigateHome();
+    return;
+  }
+  // 读取记住的账号
+  const saved = uni.getStorageSync(REMEMBERED_KEY);
+  if (saved) {
+    formData.username = saved;
+    rememberAccount.value = true;
   }
 });
 
@@ -110,6 +121,12 @@ const handleLogin = async () => {
   loading.value = true;
   try {
     await login(formData);
+    // 记住/清除账号
+    if (rememberAccount.value) {
+      uni.setStorageSync(REMEMBERED_KEY, formData.username);
+    } else {
+      uni.removeStorageSync(REMEMBERED_KEY);
+    }
     uni.showToast({ title: '登录成功', icon: 'success' });
     setTimeout(() => {
       navigateHome();
@@ -228,39 +245,11 @@ const handleBindWechat = async () => {
   text-align: center;
   margin-bottom: 48rpx;
   
-  .logo {
-    width: 120rpx;
-    height: 120rpx;
-    background: $primary-color;
-    border-radius: 32rpx;
+  .logo-img {
+    width: 160rpx;
+    height: 160rpx;
     margin: 0 auto 28rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    
-    .logo-icon {
-      position: relative;
-      width: 48rpx;
-      height: 48rpx;
-      
-      .logo-leaf {
-        position: absolute;
-        width: 24rpx;
-        height: 40rpx;
-        background: $bg-color-card;
-        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-        left: 0;
-        top: 4rpx;
-        transform: rotate(-20deg);
-        
-        &.right {
-          left: auto;
-          right: 0;
-          transform: rotate(20deg);
-        }
-      }
-    }
+    display: block;
   }
   
   .brand-name {
@@ -427,6 +416,42 @@ const handleBindWechat = async () => {
   color: $text-color-placeholder;
 }
 
+/* 记住账号 */
+.remember-row {
+  display: flex;
+  align-items: center;
+  margin-top: 4rpx;
+  padding: 8rpx 0;
+
+  .remember-checkbox {
+    width: 36rpx;
+    height: 36rpx;
+    border: 2rpx solid $border-color;
+    border-radius: 6rpx;
+    margin-right: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &.checked {
+      background: $primary-color;
+      border-color: $primary-color;
+
+      .check-mark {
+        color: #fff;
+        font-size: 22rpx;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .remember-label {
+    font-size: 26rpx;
+    color: $text-color-secondary;
+  }
+}
+
 /* 登录按钮 */
 .login-btn {
   width: 100%;

TEMPAT SAMPAH
haha-admin-mp/src/static/logo.png