Prechádzať zdrojové kódy

fix: 登录页UI重构 + 我的页面补货入口

【登录页】
- 运营登录/补货员登录分离为两张卡片
- 微信按钮改用官方SVG图标(#2DC100绿底白字)
- 删除底部版权信息、测试账号

【我的页面】
- 管理员菜单新增「补货管理」入口→/pages/replenish/index
- 补货员首页跳转修正→/pages/replenish/home
- 底部padding增大避让导航栏扫码按钮

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 14 hodín pred
rodič
commit
ecd4d7e388

+ 25 - 102
haha-admin-mp/src/pages/login/login.vue

@@ -12,56 +12,37 @@
         <text class="brand-name">富玉餐饮运营</text>
       </view>
       
-      <!-- 登录表单 -->
+      <!-- 管理员登录 -->
       <view class="login-card">
+        <text class="card-label">运营登录</text>
         <view class="form-group">
           <view class="input-wrapper">
             <view class="input-icon user"></view>
-            <input 
-              class="form-input" 
-              type="text" 
-              v-model="formData.username" 
-              placeholder="请输入用户名"
-              placeholder-class="input-placeholder"
-            />
+            <input class="form-input" type="text" v-model="formData.username" placeholder="请输入用户名" placeholder-class="input-placeholder" />
           </view>
         </view>
-        
         <view class="form-group">
           <view class="input-wrapper">
             <view class="input-icon lock"></view>
-            <input 
-              class="form-input" 
-              :password="!showPassword" 
-              v-model="formData.password" 
-              placeholder="请输入密码"
-              placeholder-class="input-placeholder"
-            />
+            <input class="form-input" :password="!showPassword" v-model="formData.password" placeholder="请输入密码" placeholder-class="input-placeholder" />
             <view class="input-action" @click="showPassword = !showPassword">
               <view :class="['eye-icon', { active: showPassword }]"></view>
             </view>
           </view>
         </view>
-        
         <button class="login-btn" :loading="loading" :disabled="loading" @click="handleLogin">
           <text v-if="!loading">立即登录</text>
           <text v-else>登录中...</text>
         </button>
-        
-        <!-- 分隔线 -->
-        <view class="login-divider">
-          <view class="divider-line"></view>
-          <text class="divider-text">补货员登录</text>
-          <view class="divider-line"></view>
-        </view>
+      </view>
 
-        <!-- 微信登录 -->
+      <!-- 补货员登录 -->
+      <view class="replenisher-card">
+        <text class="card-label">补货员登录</text>
         <button class="wechat-btn" :loading="wechatLoading" :disabled="wechatLoading" @click="handleWechatLogin">
-          <view class="wechat-icon"></view>
+          <image class="wechat-icon-img" src="/static/icon-wechat.svg" />
           <text>微信一键登录</text>
         </button>
-
-        <!-- 绑定码入口 -->
         <view class="bind-toggle" v-if="!showBindInput" @click="showBindInput = true">
           <text>已有绑定码?扫码或输入绑定</text>
         </view>
@@ -76,19 +57,10 @@
           </button>
           <text class="bind-cancel" @click="showBindInput = false">取消绑定</text>
         </view>
-        
-        <view class="login-tips">
-          <view class="tips-icon"></view>
-          <text class="tips-label">测试账号</text>
-          <text class="tips-value">admin / admin123</text>
-        </view>
       </view>
+
     </view>
     
-    <!-- 底部 -->
-    <view class="login-footer">
-      <text>© 2025 哈哈零售 All Rights Reserved</text>
-    </view>
   </view>
 </template>
 
@@ -307,6 +279,9 @@ const handleBindWechat = async () => {
   }
 }
 
+/* 卡片公共 */
+.card-label { display: block; font-size: $font-size-sm; color: $text-color-muted; margin-bottom: 16rpx; text-align: center; letter-spacing: 0.05em; }
+
 /* 登录卡片 */
 .login-card {
   background: $bg-color-card;
@@ -539,6 +514,11 @@ const handleBindWechat = async () => {
   }
 }
 
+/* 补货员登录卡片 */
+.replenisher-card {
+  margin-top: 24rpx; padding: 32rpx 28rpx; background: $bg-color-card; border: 1rpx solid $border-color; border-radius: 24rpx;
+}
+
 /* 分隔线 */
 .login-divider {
   display: flex;
@@ -561,70 +541,13 @@ const handleBindWechat = async () => {
 
 /* 微信登录按钮 */
 .wechat-btn {
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
-  padding: 0;
-  background: $bg-color-card;
-  color: $text-color-primary;
-  font-size: 30rpx;
-  font-weight: 500;
-  border: 2rpx solid $border-color;
-  border-radius: 16rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  
-  &::after {
-    border: none;
-  }
-  
-  &:active {
-    background: $bg-color-page;
-    border-color: $primary-color;
-  }
-  
-  &[disabled] {
-    opacity: 0.6;
-  }
-  
-  .wechat-icon {
-    width: 36rpx;
-    height: 36rpx;
-    background: #07c160;
-    border-radius: 8rpx;
-    margin-right: 12rpx;
-    position: relative;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      top: 8rpx;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 14rpx;
-      height: 10rpx;
-      border: 3rpx solid #fff;
-      border-top: none;
-      border-right: none;
-      transform: translateX(-50%) rotate(-45deg);
-    }
-    
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 8rpx;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 16rpx;
-      height: 10rpx;
-      border: 3rpx solid #fff;
-      border-bottom: none;
-      border-right: none;
-      transform: translateX(-50%) rotate(45deg);
-    }
-  }
+  width: 100%; height: 88rpx; padding: 0; background: #2DC100; border-radius: 12rpx;
+  display: flex; align-items: center; justify-content: center; gap: 12rpx;
+  &::after { border: none; }
+  &:active { opacity: 0.85; }
+  &[disabled] { opacity: 0.6; }
+  .wechat-icon-img { width: 44rpx; height: 44rpx; flex-shrink: 0; }
+  text { font-size: $font-size-base; font-weight: 500; color: #fff; }
 }
 
 /* 绑定码切换链接 */

+ 17 - 3
haha-admin-mp/src/pages/my/my.vue

@@ -50,6 +50,16 @@
         <view class="menu-card" v-if="!isReplenisherUser">
           <text class="menu-title">业务管理</text>
           <view class="menu-list">
+            <view class="menu-item" @click="navigateTo('/pages/replenish/index')">
+              <view class="menu-icon amber">
+                <view class="icon-replenish"></view>
+              </view>
+              <view class="menu-content">
+                <text class="menu-name">补货管理</text>
+                <text class="menu-desc">设备补货与库存管理</text>
+              </view>
+              <view class="menu-arrow"></view>
+            </view>
             <view class="menu-item" @click="navigateTo('/pages/shop/list')">
               <view class="menu-icon amber">
                 <view class="icon-shop"></view>
@@ -282,7 +292,7 @@ const handleAbout = () => {
 };
 
 const handleReplenisherHome = () => {
-  uni.reLaunch({ url: '/pages/replenish/index' });
+  uni.reLaunch({ url: '/pages/replenish/home' });
 };
 
 const handleLogout = async () => {
@@ -309,8 +319,8 @@ $font-stack: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
   width: 100vw;
   overflow-x: hidden;
   background: $bg-color-page;
-  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
   font-family: $font-stack;
 }
 
@@ -629,6 +639,10 @@ $font-stack: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
     }
   }
 
+  .icon-replenish { width: 24rpx; height: 24rpx; border: 3rpx solid $primary-color; border-radius: 4rpx; position: relative;
+    &::after { content: ''; position: absolute; top: 7rpx; left: 5rpx; right: 5rpx; height: 3rpx; background: $primary-color; border-radius: 1rpx; box-shadow: 0 5rpx 0 $primary-color; }
+  }
+
 }
 
 .menu-content {

+ 1 - 0
haha-admin-mp/src/static/icon-wechat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 300 300"><path fill="#2DC100" d="M300 255c0 24.854-20.147 45-45 45H45c-24.854 0-45-20.146-45-45V45C0 20.147 20.147 0 45 0h210c24.853 0 45 20.147 45 45v210z"/><g fill="#FFF"><path d="M200.803 111.88c-24.213 1.265-45.268 8.605-62.362 25.188-17.271 16.754-25.155 37.284-23 62.734-9.464-1.172-18.084-2.462-26.753-3.192-2.994-.252-6.547.106-9.083 1.537-8.418 4.75-16.488 10.113-26.053 16.092 1.755-7.938 2.891-14.889 4.902-21.575 1.479-4.914.794-7.649-3.733-10.849-29.066-20.521-41.318-51.232-32.149-82.85 8.483-29.25 29.315-46.989 57.621-56.236 38.635-12.62 82.054.253 105.547 30.927 8.485 11.08 13.688 23.516 15.063 38.224zm-111.437-9.852c.223-5.783-4.788-10.993-10.74-11.167-6.094-.179-11.106 4.478-11.284 10.483-.18 6.086 4.475 10.963 10.613 11.119 6.085.154 11.186-4.509 11.411-10.435zm58.141-11.171c-5.974.11-11.022 5.198-10.916 11.004.109 6.018 5.061 10.726 11.204 10.652 6.159-.074 10.83-4.832 10.772-10.977-.051-6.032-4.981-10.79-11.06-10.679z"/><path d="M255.201 262.83c-7.667-3.414-14.7-8.536-22.188-9.318-7.459-.779-15.3 3.524-23.104 4.322-23.771 2.432-45.067-4.193-62.627-20.432-33.397-30.89-28.625-78.254 10.014-103.568 34.341-22.498 84.704-14.998 108.916 16.219 21.129 27.24 18.646 63.4-7.148 86.284-7.464 6.623-10.15 12.073-5.361 20.804.884 1.612.985 3.653 1.498 5.689zm-87.274-84.499c4.881.005 8.9-3.815 9.085-8.636.195-5.104-3.91-9.385-9.021-9.406-5.06-.023-9.299 4.318-9.123 9.346.166 4.804 4.213 8.69 9.059 8.696zm56.261-18.022c-4.736-.033-8.76 3.844-8.953 8.629-.205 5.117 3.772 9.319 8.836 9.332 4.898.016 8.768-3.688 8.946-8.562.19-5.129-3.789-9.364-8.829-9.399z"/></g></svg>