You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.7 KiB
84 lines
2.7 KiB
1 week ago
|
<view class="login-container">
|
||
|
|
<!-- 应用图标 -->
|
||
|
|
<view class="app-icon">
|
||
|
|
<image src="/images/app-logo.png" mode="widthFix" class="logo-img" alt="记账程序图标"></image>
|
||
|
|
<text class="app-name">财务管家</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 登录表单卡片 -->
|
||
|
|
<view class="login-card">
|
||
|
|
<!-- 账户输入框 -->
|
||
|
|
<view class="input-group {{accountError ? 'error' : ''}}">
|
||
|
|
<view class="input-icon">
|
||
|
|
<icon type="user" size="20" color="{{accountError ? '#ff4d4f' : '#8c8c8c'}}"></icon>
|
||
|
|
</view>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="请输入账号"
|
||
|
|
placeholder-class="placeholder"
|
||
|
|
bindinput="handleAccountInput"
|
||
|
|
value="{{account}}"
|
||
|
|
class="input-field"
|
||
|
|
/>
|
||
|
|
<view wx:if="{{accountError}}" class="error-icon">
|
||
|
|
<icon type="warn" size="20" color="#ff4d4f"></icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view wx:if="{{accountError}}" class="error-message">{{accountErrorMsg}}</view>
|
||
|
|
|
||
|
|
<!-- 密码输入框 -->
|
||
|
|
<view class="input-group {{passwordError ? 'error' : ''}}">
|
||
|
|
<view class="input-icon">
|
||
|
|
<icon type="lock" size="20" color="{{passwordError ? '#ff4d4f' : '#8c8c8c'}}"></icon>
|
||
|
|
</view>
|
||
|
|
<input
|
||
|
|
type="{{showPassword ? 'text' : 'password'}}"
|
||
|
|
placeholder="请输入密码"
|
||
|
|
placeholder-class="placeholder"
|
||
|
|
bindinput="handlePasswordInput"
|
||
|
|
value="{{password}}"
|
||
|
|
class="input-field"
|
||
|
|
/>
|
||
|
|
<view class="toggle-password" bindtap="togglePassword">
|
||
|
|
<icon type="{{showPassword ? 'eye-o' : 'eye'}}" size="20" color="#8c8c8c"></icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view wx:if="{{passwordError}}" class="error-message">{{passwordErrorMsg}}</view>
|
||
|
|
|
||
|
|
<!-- 忘记密码 -->
|
||
|
|
<view class="forgot-password" bindtap="navigateToForgot">
|
||
|
|
<text>忘记密码？</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 登录按钮 -->
|
||
|
|
<button
|
||
|
|
class="login-button"
|
||
|
|
bindtap="handleLogin"
|
||
|
|
loading="{{isLoading}}"
|
||
|
|
disabled="{{isLoading}}"
|
||
|
|
>
|
||
|
|
登录
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- 注册入口 -->
|
||
|
|
<view class="register-section">
|
||
|
|
<text>还没有账号？</text>
|
||
|
|
<text class="register-link" bindtap="navigateToRegister">立即注册</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 其他登录方式 -->
|
||
|
|
<view class="other-login">
|
||
|
|
<view class="line"></view>
|
||
|
|
<text class="other-login-text">其他登录方式</text>
|
||
|
|
<view class="line"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="social-login">
|
||
|
|
<button class="social-btn" open-type="getUserInfo" bindgetuserinfo="wxLogin">
|
||
|
|
<image src="/images/wechat.png" mode="widthFix" class="social-icon" alt="微信登录"></image>
|
||
|
|
<text>微信快捷登录</text>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|