wxamp-ymtxUser/pagesA/pages/attestation/attestation.wxml

<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 class="modal-overlay {{showErrorModal ? 'show' : ''}}" bindtap="closeErrorModal">
    <view class="modal-container error-modal" catchtap="stopPropagation">
      <view class="modal-header">
        <view class="modal-title error-title">{{errorTitle}}</view>
        <button class="modal-close" bindtap="closeErrorModal">
          <image class="close-icon" src="/pagesA/images/ch.png" mode="aspectFit"></image>
        </button>
      </view>
      
      <view class="modal-content error-content">
        <view class="error-message">
          {{errorMessage}}
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="modal-confirm error-confirm" bindtap="closeErrorModal">
          确定
        </button>
      </view>
    </view>
  </view>
</view>