YD_Event.miniApp/subpackages/mine/auth/auth.wxml

<view class="auth-page">
  <view class="tab-bar">
    <view class="tab-item {{activeTab === 1 ? 'active' : ''}}" bindtap="onSwitchTab" data-tab="1">
      <text class="tab-text">身份证认证</text>
      <image class="stat-iconb" wx:if="{{activeTab === 1}}" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/point-b.png" mode="aspectFit" />
    </view>
    <view class="tab-item {{activeTab === 2 ? 'active' : ''}}" bindtap="onSwitchTab" data-tab="2">
      <text class="tab-text">护照认证</text>
      <image class="stat-iconb" wx:if="{{activeTab === 2}}" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/point-b.png" mode="aspectFit" />
    </view>
    <view class="tab-item {{activeTab === 3 ? 'active' : ''}}" bindtap="onSwitchTab" data-tab="3">
      <text class="tab-text">户口本认证</text>
      <image class="stat-iconb" wx:if="{{activeTab === 3}}" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/point-b.png" mode="aspectFit" />
    </view>
  </view>
  <!-- 骨架屏 -->
  <view wx:if="{{loading}}" class="skeleton-wrap">
    <view class="skeleton-upload-card">
      <view class="skeleton-upload-row">
        <view class="skeleton-upload-box skeleton-anim"></view>
        <view class="skeleton-upload-box skeleton-anim"></view>
      </view>
    </view>
    <view class="skeleton-form-card">
      <view class="skeleton-form-row">
        <view class="skeleton-label skeleton-anim"></view>
        <view class="skeleton-value skeleton-anim"></view>
      </view>
      <view class="skeleton-form-row">
        <view class="skeleton-label skeleton-anim"></view>
        <view class="skeleton-value skeleton-anim"></view>
      </view>
      <view class="skeleton-form-row">
        <view class="skeleton-label skeleton-anim"></view>
        <view class="skeleton-value skeleton-anim"></view>
      </view>
      <view class="skeleton-form-row">
        <view class="skeleton-label skeleton-anim"></view>
        <view class="skeleton-value skeleton-anim"></view>
      </view>
      <view class="skeleton-form-row">
        <view class="skeleton-label skeleton-anim"></view>
        <view class="skeleton-value skeleton-anim"></view>
      </view>
    </view>
  </view>
  <view wx:if="{{!loading}}" class="content">
    <!-- 上传区 -->
    <view class="card upload-card">
      <view wx:if="{{activeTab === 1}}" class="upload-row">
        <view class="upload-box" bindtap="onChooseImage" data-kind="idFront">
          <image class="upload-img" wx:if="{{idCardImageUrl}}" src="{{idCardImageUrl}}" mode="aspectFill" />
          <view wx:else class="upload-placeholder">
            <image class="ph-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/idcard-top.png" />
          </view>
          <text class="upload-text">上传身份证人像面</text>
        </view>
        <view class="upload-box" bindtap="onChooseImage" data-kind="idBack">
          <image class="upload-img" wx:if="{{idCardBackImageUrl}}" src="{{idCardBackImageUrl}}" mode="aspectFill" />
          <view wx:else class="upload-placeholder">
            <image class="ph-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/idcard-back.png" />
          </view>
          <text class="upload-text">上传身份证国徽面</text>
        </view>
      </view>
      <view wx:elif="{{activeTab === 3}}" class="upload-row single">
        <view class="upload-box single" bindtap="onChooseImage" data-kind="household">
          <image class="upload-img" wx:if="{{householdImageUrl}}" src="{{householdImageUrl}}" mode="aspectFill" />
          <view wx:else class="upload-placeholder">
            <image class="ph-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/idcard-top.png" />
          </view>
          <text class="upload-text">上传户口本常住人口登记页</text>
        </view>
      </view>
      <view wx:else class="upload-row single">
        <view class="upload-box single" bindtap="onChooseImage" data-kind="passport">
          <image class="upload-img" wx:if="{{passportImageUrl}}" src="{{passportImageUrl}}" mode="aspectFill" />
          <view wx:else class="upload-placeholder">
            <image class="ph-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/idcard-top.png" />
          </view>
          <text class="upload-text">上传护照</text>
        </view>
      </view>
      <!-- 识别中提示 -->
      <view wx:if="{{recognizing}}" class="ocr-tip">
        <text class="ocr-tip-text">正在识别中，请稍候...</text>
      </view>
    </view>
    <!-- 表单区 -->
    <view class="card form-card">
      <view class="form-row">
        <text class="label">姓名</text>
        <input class="input readonly" value="{{name}}" placeholder="上传证件后自动识别" disabled="{{true}}" />
      </view>
      <!-- 身份证/户口本 专属字段：身份证号 -->
      <view wx:if="{{activeTab === 1 || activeTab === 3}}" class="form-row">
        <text class="label">身份证号</text>
        <input class="input readonly" value="{{idCardNumber}}" placeholder="上传证件后自动识别" disabled="{{true}}" />
      </view>
      <!-- 护照专属字段 -->
      <block wx:if="{{activeTab === 2}}">
        <view class="form-row">
          <text class="label">护照号码</text>
          <input class="input readonly" value="{{passportNumber}}" placeholder="上传护照后自动识别" disabled="{{true}}" />
        </view>
        <!-- <view class="form-row">
          <text class="label">国籍</text>
          <input class="input readonly" value="{{nationality}}" placeholder="上传护照后自动识别" disabled="{{true}}" />
        </view>
        <view class="form-row">
          <text class="label">签发日期</text>
          <input class="input readonly" value="{{issueDate}}" placeholder="上传护照后自动识别" disabled="{{true}}" />
        </view>
        <view class="form-row">
          <text class="label">有效期至</text>
          <input class="input readonly" value="{{expiryDate}}" placeholder="上传护照后自动识别" disabled="{{true}}" />
        </view> -->
      </block>
      <!-- 通用字段 -->
      <view class="form-row">
        <text class="label">出生日期</text>
        <input class="input readonly" value="{{birthDate}}" placeholder="上传证件后自动识别" disabled="{{true}}" />
      </view>
      <view class="form-row">
        <text class="label">性别</text>
        <input class="input readonly" value="{{genderOptions[genderIndex].label}}" disabled="{{true}}" />
      </view>
      <view wx:if="{{authStatus !== 2}}" class="form-row">
        <text class="label">联系电话</text>
        <input class="input" disabled="{{true}}" value="{{mobile}}" placeholder="手机号" type="number" maxlength="11" />
        <view class="send-code {{countdown>0 || codeSending ? 'disabled' : ''}}" bindtap="onSendCodeTap">
          {{countdown>0 ? countdown + 's' : '发送验证码'}}
        </view>
      </view>
      <view wx:if="{{authStatus !== 2}}" class="form-row">
        <text class="label">验证码</text>
        <input class="input" value="{{verificationCode}}" placeholder="请输入验证码" type="number" maxlength="6" bindinput="onCodeInput" />
      </view>
    </view>
    <view class="footer-space"></view>
  </view>
  <view wx:if="{{!loading}}" class="footer">
    <button wx:if="{{canSubmit}}" class="submit-btn" loading="{{submitting}}" disabled="{{submitting}}" bindtap="onSubmitTap">
      {{submitBtnText}}
    </button>
    <view wx:else class="auth-status-only status-{{authStatus}}">{{authStatusText}}</view>
    <!-- <view class="status-card">
      <text class="status-label ">认证状态</text>
      <view class="status-pill status-{{authStatus}}">
        <text class="status-pill-text">{{authStatusText}}</text>
      </view>
    </view> -->
  </view>
</view>