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.
185 lines
6.5 KiB
185 lines
6.5 KiB
<!-- pages/real-name-auth/real-name-auth.wxml -->
|
|
<view class="auth-container">
|
|
<!-- 顶部装饰 -->
|
|
<view class="top-decoration">
|
|
<view class="decoration-circle circle-1"></view>
|
|
<view class="decoration-circle circle-2"></view>
|
|
<view class="decoration-circle circle-3"></view>
|
|
</view>
|
|
|
|
<!-- 头部 -->
|
|
<view class="header">
|
|
<image class="logo" src="/assets/icons/sheep-logo.svg" mode="aspectFit"></image>
|
|
<view class="brand-name">与牧同行</view>
|
|
<view class="page-title">实名认证</view>
|
|
<view class="page-subtitle">开启您的牧业伙伴之旅</view>
|
|
</view>
|
|
|
|
<!-- 表单卡片 -->
|
|
<view class="form-card">
|
|
<!-- 表单标题 -->
|
|
<view class="card-header">
|
|
<view class="card-title">
|
|
<image class="title-icon" src="/assets/icons/id-card.svg" mode="aspectFit"></image>
|
|
<text>身份信息</text>
|
|
</view>
|
|
<view class="card-hint">请填写您的真实信息</view>
|
|
</view>
|
|
|
|
<!-- 姓名输入 -->
|
|
<view class="input-group">
|
|
<view class="input-label">
|
|
<image class="label-icon" src="/assets/icons/user.svg" mode="aspectFit"></image>
|
|
<text>真实姓名</text>
|
|
</view>
|
|
<view class="input-wrapper">
|
|
<input
|
|
class="name-input"
|
|
placeholder="请输入您的真实姓名"
|
|
placeholder-class="placeholder"
|
|
value="{{name}}"
|
|
bindinput="onNameInput"
|
|
focus="{{nameFocus}}"
|
|
bindfocus="onNameFocus"
|
|
bindblur="onNameBlur"
|
|
/>
|
|
<view class="input-border"></view>
|
|
<view class="input-focus-border {{nameFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
<view class="input-hint {{nameError ? 'error' : ''}}">
|
|
{{nameError || '请务必使用真实姓名'}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 手机号输入 -->
|
|
<view class="input-group">
|
|
<view class="input-label">
|
|
<image class="label-icon" src="/assets/icons/phone.svg" mode="aspectFit"></image>
|
|
<text>手机号码</text>
|
|
</view>
|
|
<view class="input-wrapper">
|
|
<input
|
|
class="phone-input"
|
|
placeholder="请输入您的手机号码"
|
|
placeholder-class="placeholder"
|
|
value="{{phone}}"
|
|
bindinput="onPhoneInput"
|
|
type="number"
|
|
maxlength="11"
|
|
focus="{{phoneFocus}}"
|
|
bindfocus="onPhoneFocus"
|
|
bindblur="onPhoneBlur"
|
|
/>
|
|
<view class="input-border"></view>
|
|
<view class="input-focus-border {{phoneFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
<view class="input-hint {{phoneError ? 'error' : ''}}">
|
|
{{phoneError || '用于接收重要通知'}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 验证码 -->
|
|
<view class="input-group">
|
|
<view class="input-label">
|
|
<image class="label-icon" src="/assets/icons/sms.svg" mode="aspectFit"></image>
|
|
<text>验证码</text>
|
|
</view>
|
|
<view class="code-input-wrapper">
|
|
<view class="code-input-container">
|
|
<input
|
|
class="code-input"
|
|
placeholder="请输入验证码"
|
|
placeholder-class="placeholder"
|
|
value="{{smsCode}}"
|
|
bindinput="onSmsCodeInput"
|
|
type="number"
|
|
maxlength="6"
|
|
focus="{{codeFocus}}"
|
|
bindfocus="onCodeFocus"
|
|
bindblur="onCodeBlur"
|
|
/>
|
|
<view class="input-border"></view>
|
|
<view class="input-focus-border {{codeFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
<button
|
|
class="send-code-btn {{!canSendCode ? 'disabled' : ''}} {{countdown > 0 ? 'counting' : ''}}"
|
|
bindtap="sendSmsCode"
|
|
disabled="{{!canSendCode || countdown > 0}}"
|
|
hover-class="btn-hover"
|
|
>
|
|
<view class="btn-content">
|
|
<image wx:if="{{countdown === 0}}" class="sms-icon" src="/assets/icons/send.svg" mode="aspectFit"></image>
|
|
<!-- <text>{{countdown > 0 ? `${countdown}s后重发` : '发送验证码'}}</text> -->
|
|
</view>
|
|
</button>
|
|
</view>
|
|
<view class="input-hint {{smsCodeError ? 'error' : ''}}">
|
|
{{smsCodeError || '输入6位数字验证码'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 协议 -->
|
|
<view class="agreement-card">
|
|
<label class="agreement-item" bindtap="toggleAgreement">
|
|
<view class="checkbox {{agreed ? 'checked' : ''}}">
|
|
<image wx:if="{{agreed}}" class="check-icon" src="/assets/icons/check.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="agreement-text">
|
|
我已阅读并同意
|
|
<text class="link" bindtap="viewAgreement">《用户服务协议》</text>
|
|
和
|
|
<text class="link" bindtap="viewPrivacy">《隐私政策》</text>
|
|
</view>
|
|
</label>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-section">
|
|
<button
|
|
class="submit-btn {{canSubmit ? 'active' : 'disabled'}}"
|
|
bindtap="submitAuth"
|
|
disabled="{{!canSubmit}}"
|
|
hover-class="submit-btn-hover"
|
|
loading="{{isSubmitting}}"
|
|
>
|
|
<view class="btn-inner">
|
|
<text>{{isSubmitting ? '提交中...' : '完成认证'}}</text>
|
|
<image wx:if="{{!isSubmitting}}" class="arrow-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"></image>
|
|
</view>
|
|
</button>
|
|
|
|
<view class="submit-hint">
|
|
认证成功后，您将享受与牧同行的专属服务
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部装饰 -->
|
|
<view class="bottom-decoration">
|
|
<image class="sheep-illustration" src="/assets/illustrations/sheep.svg" mode="aspectFit"></image>
|
|
<view class="decoration-text">
|
|
<text class="highlight">与牧同行</text>，伴您每一次成长
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 成功弹窗 -->
|
|
<view class="success-modal {{showSuccessModal ? 'show' : ''}}">
|
|
<view class="modal-mask" bindtap="closeSuccessModal"></view>
|
|
<view class="modal-content">
|
|
<view class="modal-icon">
|
|
<image class="success-icon" src="/assets/icons/success.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="modal-title">认证成功！</view>
|
|
<view class="modal-message">
|
|
欢迎加入<text class="brand-highlight">与牧同行</text>大家庭
|
|
</view>
|
|
<view class="modal-subtitle">
|
|
您已成功完成实名认证，开始享受专属服务吧！
|
|
</view>
|
|
<button class="modal-btn" bindtap="goToHome">
|
|
<image class="home-icon" src="/assets/icons/home.svg" mode="aspectFit"></image>
|
|
<text>前往首页</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|