132 lines
4.7 KiB
Plaintext
132 lines
4.7 KiB
Plaintext
<view class="login-page">
|
||
<!-- 顶部蓝色头部 -->
|
||
<view class="header">
|
||
<image class="header-bg" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/bg.png" mode="aspectFill" />
|
||
<view class="header-mask"></view>
|
||
<!-- 导航栏 -->
|
||
<!-- <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-back" bindtap="onBack">
|
||
<text class="nav-back-arrow">‹</text>
|
||
</view>
|
||
<text class="nav-title">登录</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view> -->
|
||
<mp-navigation-bar
|
||
title="登录"
|
||
background-color="transparent"
|
||
color="#fff"
|
||
bind:click-left="onBack"
|
||
left-arrow
|
||
></mp-navigation-bar>
|
||
<!-- 欢迎文字 + logo -->
|
||
<view class="header-content">
|
||
<text class="welcome-text">欢迎使用跃享跳</text>
|
||
<image class="logo-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/logo.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 白色内容区 -->
|
||
<view class="content-card">
|
||
<!-- Tab 切换 -->
|
||
<view class="tab-bar">
|
||
<view class="tab-item {{loginMode === 'password' ? 'active' : ''}}" bindtap="onSwitchMode" data-mode="password">
|
||
<text class="tab-text">账号登录</text>
|
||
<view class="tab-line" wx:if="{{loginMode === 'password'}}"></view>
|
||
</view>
|
||
<view class="tab-item {{loginMode === 'code' ? 'active' : ''}}" bindtap="onSwitchMode" data-mode="code">
|
||
<text class="tab-text">短信登录</text>
|
||
<view class="tab-line" wx:if="{{loginMode === 'code'}}"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账号登录模式 -->
|
||
<block wx:if="{{loginMode === 'password'}}">
|
||
<view class="field">
|
||
<text class="field-label">账号</text>
|
||
<view class="field-input-box">
|
||
<input
|
||
class="field-input"
|
||
type="number"
|
||
maxlength="11"
|
||
placeholder="请输入手机号"
|
||
placeholder-class="placeholder"
|
||
value="{{mobile}}"
|
||
bindinput="onMobileInput"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<text class="field-label">密码</text>
|
||
<view class="field-input-box">
|
||
<input
|
||
class="field-input"
|
||
password="{{!showPassword}}"
|
||
placeholder="请输入密码"
|
||
placeholder-class="placeholder"
|
||
value="{{password}}"
|
||
bindinput="onPasswordInput"
|
||
/>
|
||
<view class="eye-btn" bindtap="onTogglePassword">
|
||
<image class="eye-icon" src="/assets/icon-eye{{showPassword ? '-open' : '-close'}}.png" mode="aspectFit" wx:if="{{false}}" />
|
||
<text class="eye-text">{{showPassword ? '🙈' : '👁'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 短信登录模式 -->
|
||
<block wx:if="{{loginMode === 'code'}}">
|
||
<view class="field">
|
||
<text class="field-label">手机号</text>
|
||
<view class="field-input-box">
|
||
<input
|
||
class="field-input"
|
||
type="number"
|
||
maxlength="11"
|
||
placeholder="请输入手机号"
|
||
placeholder-class="placeholder"
|
||
value="{{mobile}}"
|
||
bindinput="onMobileInput"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<text class="field-label">验证码</text>
|
||
<view class="field-input-box">
|
||
<input
|
||
class="field-input"
|
||
type="number"
|
||
maxlength="6"
|
||
placeholder="请输入验证码"
|
||
placeholder-class="placeholder"
|
||
value="{{verificationCode}}"
|
||
bindinput="onCodeInput"
|
||
/>
|
||
<text class="send-code-link {{codeBtnDisabled ? 'disabled' : ''}}" bindtap="onSendCode">{{codeText}}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 协议 + 忘记密码 -->
|
||
<view class="agreement-row">
|
||
<view class="agreement-left" bindtap="onToggleAgreement">
|
||
<view class="check-box {{agreed ? 'checked' : ''}}">
|
||
<mp-icon class="check-icon" icon="done" color="#ffffff" wx:if="{{agreed}}" size="14"></mp-icon>
|
||
<!-- <text class="check-icon" wx:if="{{agreed}}">✓</text> -->
|
||
</view>
|
||
<text class="agreement-text">我同意</text>
|
||
<text class="agreement-link" catchtap="goToPrivacy"> 用户协议 </text>
|
||
<text class="agreement-text">与</text>
|
||
<text class="agreement-link" catchtap="goToPrivacy"> 隐私政策 </text>
|
||
</view>
|
||
<text class="forget-link" bindtap="onForgetPassword">忘记密码?</text>
|
||
</view>
|
||
|
||
<!-- 按钮区域 -->
|
||
<view class="btn-area">
|
||
<button class="btn-login" bindtap="onLoginTap" loading="{{logging}}">登录</button>
|
||
<navigator class="btn-register" url="/subpackages/mine/register/register" hover-class="btn-register-hover">注册</navigator>
|
||
</view>
|
||
</view><!-- /content-card -->
|
||
</view>
|