|
|
@@ -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; }
|
|
|
}
|
|
|
|
|
|
/* 绑定码切换链接 */
|