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

<!-- 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>