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.
261 lines
9.1 KiB
261 lines
9.1 KiB
<view class="auth-container">
|
|
<!-- 背景装饰 -->
|
|
<view class="background-design">
|
|
<view class="bg-circle circle-1"></view>
|
|
<view class="bg-circle circle-2"></view>
|
|
<view class="bg-wave"></view>
|
|
</view>
|
|
|
|
<!-- 头部区域 -->
|
|
<view class="header-section">
|
|
<view class="brand-header">
|
|
<view class="brand-text">
|
|
<view class="brand-name">与牧同行</view>
|
|
<view class="brand-slogan">专业牧业，贴心同行</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="auth-header">
|
|
<view class="auth-title">
|
|
<text class="title-text">实名认证</text>
|
|
<view class="title-badge">必填</view>
|
|
</view>
|
|
<view class="auth-description">
|
|
为了更好的服务体验，请完成实名认证
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 进度指示 -->
|
|
<view class="progress-indicator">
|
|
<view class="progress-step active">
|
|
<view class="step-bubble">
|
|
<view class="step-number">1</view>
|
|
</view>
|
|
<view class="step-label">填写信息</view>
|
|
</view>
|
|
|
|
<view class="progress-line">
|
|
<view class="line-progress" style="width: {{lineProgress1}}%;"></view>
|
|
</view>
|
|
|
|
<view class="progress-step {{currentStep >= 2 ? 'active' : ''}}">
|
|
<view class="step-bubble">
|
|
<view class="step-number">2</view>
|
|
</view>
|
|
<view class="step-label">信息验证</view>
|
|
</view>
|
|
|
|
<view class="progress-line">
|
|
<view class="line-progress" style="width: {{lineProgress2}}%;"></view>
|
|
</view>
|
|
|
|
<view class="progress-step {{currentStep >= 3 ? 'active' : ''}}">
|
|
<view class="step-bubble">
|
|
<view class="step-number">3</view>
|
|
</view>
|
|
<view class="step-label">完成认证</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-section">
|
|
<!-- 姓名输入 -->
|
|
<view class="input-card">
|
|
<view class="input-label">
|
|
<image class="label-icon" src="/pagesA/images/name.png" mode="aspectFit"></image>
|
|
<text class="label-text">真实姓名</text>
|
|
<text class="required-star">*</text>
|
|
</view>
|
|
|
|
<view class="input-container">
|
|
<input
|
|
class="input-field {{nameFocus ? 'focused' : ''}} {{nameError ? 'error' : ''}} {{name ? 'has-value' : ''}} {{isNameValid ? 'valid' : ''}}"
|
|
placeholder="请输入您的真实姓名"
|
|
placeholder-class="placeholder"
|
|
value="{{name}}"
|
|
bindinput="onNameInput"
|
|
bindfocus="onNameFocus"
|
|
bindblur="onNameBlur"
|
|
maxlength="10"
|
|
/>
|
|
|
|
<!-- 删除按钮 -->
|
|
<view class="clear-wrapper" wx:if="{{name}}">
|
|
<button class="clear-btn" bindtap="clearName" hover-class="btn-hover">
|
|
<image class="clear-icon" src="/pagesA/images/ch.png" mode="aspectFit"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 输入框下划线 -->
|
|
<view class="input-underline">
|
|
<view class="underline-bg"></view>
|
|
<view class="underline-progress {{nameFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
|
|
<!-- 字符计数 -->
|
|
<view class="char-count {{name.length > 8 ? 'warning' : ''}}">
|
|
{{name.length}}/10
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提示信息 -->
|
|
<view class="hint-container" wx:if="{{showNameHint || nameError}}">
|
|
<text class="hint-text {{nameError ? 'error' : 'normal'}}">
|
|
{{nameError || '请输入与身份证一致的姓名（2-10个汉字）'}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证号输入 -->
|
|
<view class="input-card">
|
|
<view class="input-label">
|
|
<image class="label-icon" src="/pagesA/images/sfz.png" mode="aspectFit"></image>
|
|
<text class="label-text">身份证号</text>
|
|
<text class="required-star">*</text>
|
|
</view>
|
|
|
|
<view class="input-container">
|
|
<input
|
|
class="input-field {{idNumberError ? 'error' : ''}} {{isIdNumberValid ? 'valid' : ''}} {{idNumber ? 'has-value' : ''}}"
|
|
placeholder="请输入18位身份证号码"
|
|
placeholder-class="placeholder"
|
|
value="{{idNumber}}"
|
|
bindinput="onIdNumberInput"
|
|
bindfocus="onIdNumberFocus"
|
|
bindblur="onIdNumberBlur"
|
|
maxlength="18"
|
|
type="idcard"
|
|
/>
|
|
|
|
<!-- 删除按钮 -->
|
|
<view class="clear-wrapper" wx:if="{{idNumber}}">
|
|
<button class="clear-btn" bindtap="clearIdNumber" hover-class="btn-hover">
|
|
<image class="clear-icon" src="/pagesA/images/ch.png" mode="aspectFit"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 输入框下划线 -->
|
|
<view class="input-underline">
|
|
<view class="underline-bg"></view>
|
|
<view class="underline-progress {{idNumberFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
|
|
<!-- 分段显示 -->
|
|
<view class="id-segments {{idNumberFocus || idNumber ? 'show' : ''}}">
|
|
<view class="id-segment {{idNumber.length >= 6 ? 'filled' : ''}}">{{idNumber.substring(0, 6) || '地区'}}</view>
|
|
<view class="id-segment {{idNumber.length >= 14 ? 'filled' : ''}}">{{idNumber.substring(6, 14) || '出生'}}</view>
|
|
<view class="id-segment {{idNumber.length >= 17 ? 'filled' : ''}}">{{idNumber.substring(14, 17) || '顺序'}}</view>
|
|
<view class="id-segment last {{idNumber.length === 18 ? 'filled' : ''}}">{{idNumber.substring(17) || '校验'}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提示信息 -->
|
|
<view class="hint-container" wx:if="{{showIdNumberHint || idNumberError}}">
|
|
<text class="hint-text {{idNumberError ? 'error' : 'normal'}}">
|
|
{{idNumberError || '请输入有效的18位身份证号码'}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 协议条款 -->
|
|
<view class="agreement-card">
|
|
<label class="agreement-item" bindtap="toggleAgreement">
|
|
<view class="agreement-checkbox {{agreed ? 'checked' : ''}}">
|
|
<image
|
|
wx:if="{{agreed}}"
|
|
class="checkmark"
|
|
src="/pagesA/images/duig.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
<view class="agreement-content">
|
|
<text>我已阅读并同意</text>
|
|
<text class="link-text" bindtap="showAgreementModal">《用户服务协议》</text>
|
|
<text>和</text>
|
|
<text class="link-text" bindtap="showPrivacyModal">《隐私保护协议》</text>
|
|
</view>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交区域 -->
|
|
<view class="submit-section">
|
|
<button
|
|
class="submit-button {{canSubmit ? 'active' : 'disabled'}}"
|
|
bindtap="submitAuth"
|
|
disabled="{{!canSubmit}}"
|
|
hover-class="button-hover"
|
|
loading="{{isSubmitting}}"
|
|
>
|
|
验证
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 协议弹窗 -->
|
|
<view class="modal-overlay {{showModal ? 'show' : ''}}" bindtap="closeModal">
|
|
<view class="modal-container" catchtap="stopPropagation">
|
|
<view class="modal-header">
|
|
<view class="modal-title">{{modalTitle}}</view>
|
|
<button class="modal-close" bindtap="closeModal">
|
|
<image class="close-icon" src="/pagesA/images/ch.png" mode="aspectFit"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<scroll-view class="modal-content" scroll-y>
|
|
<view class="modal-text">
|
|
{{modalContent}}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="modal-footer">
|
|
<button class="modal-confirm" bindtap="closeModal">
|
|
我已阅读并理解
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 成功弹窗 -->
|
|
<view class="success-modal {{showSuccessModal ? 'show' : ''}}">
|
|
<view class="success-overlay" bindtap="closeSuccessModal"></view>
|
|
<view class="success-container">
|
|
<view class="success-icon">
|
|
<image class="success-badge" src="/pagesA/images/duig.png" mode="aspectFit"></image>
|
|
<view class="success-ring ring-1"></view>
|
|
<view class="success-ring ring-2"></view>
|
|
</view>
|
|
|
|
<view class="success-body">
|
|
<view class="success-title">认证成功！</view>
|
|
<view class="success-message">
|
|
欢迎加入<text class="brand">与牧同行</text>大家庭
|
|
</view>
|
|
|
|
<view class="success-details">
|
|
<view class="detail-item">
|
|
<view class="detail-label">
|
|
<image class="detail-icon" src="/pagesA/images/name.png" mode="aspectFit"></image>
|
|
<text>姓名</text>
|
|
</view>
|
|
<view class="detail-value">{{name}}</view>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<view class="detail-label">
|
|
<image class="detail-icon" src="/pagesA/images/sfz.png" mode="aspectFit"></image>
|
|
<text>身份证号</text>
|
|
</view>
|
|
<view class="detail-value">{{maskedIdNumber}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="success-footer">
|
|
<button class="success-button" bindtap="goToHome">
|
|
<text>开始使用</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|