wx-mls/pages/register/register.wxml

<view class="container">
  <header text="活动报名" url="{{false}}"></header>
  <view class="content">
    <view class="register">
      <image class="register-img" src="/static/image/register/register-logo.png" mode="aspectFit" />
      <view class="from-ul">
        
        <!-- 手机号 -->
        <view class="from-li li-m0">
          <image class="from-li-img" src="/static/image/register/sjh.png" mode="aspectFit" />
          <van-field
            model:value="{{formData.phone}}"
            bind:input="onInput"
            data-field="phone"
            type="number"
            placeholder="请输入手机号"
            border="{{ false }}"
          />
          <view class="error-text">{{phoneError}}</view>
        </view>

        <!-- 验证码 -->
        <view class="from-li">
          <image class="from-li-img" src="/static/image/register/yzm.png" mode="aspectFit" />
          <van-field
            model:value="{{formData.captcha}}"
            bind:input="onInput"
            data-field="captcha"
            placeholder="请输入验证码"
            border="{{ false }}"
          >
            <view slot="button" class="from-code">获取验证码</view>
          </van-field>
        </view>

        <!-- 姓名 -->
        <view class="from-li">
          <image class="from-li-img img-w" src="/static/image/register/xm.png" mode="aspectFit" />
          <van-field
            model:value="{{formData.nickname}}"
            bind:input="onInput"
            data-field="nickname"
            placeholder="请输入姓名"
            border="{{ false }}"
          />
        </view>

        <!-- 性别选择 -->
        <view class="from-li" bindtap="onShowPicker">
          <image class="from-li-img img-w" src="/static/image/register/xb.png" mode="aspectFit" />
          <van-field
            readonly="{{true}}"
            model:value="{{formData.gender}}"
            placeholder="请选择性别"
            border="{{ false }}"
          >
            <view slot="right-icon">
              <van-icon name="arrow-down" class="from-icon" />
            </view>
          </van-field>
        </view>

        <!-- 身份证号 -->
        <view class="from-li">
          <image class="from-li-img img-w1" src="/static/image/register/sfz.png" mode="aspectFit" />
          <van-field
            model:value="{{formData.race_number}}"
            bind:input="onInput"
            data-field="race_number"
            placeholder="请输入身份证号"
            border="{{ false }}"
          />
        </view>

        <!-- 参赛号码 -->
        <view class="from-li">
          <image class="from-li-img img-w2" src="/static/image/register/cshm.png" mode="aspectFit" />
          <van-field
            model:value="{{formData.competition_no}}"
            bind:input="onInput"
            data-field="competition_no"
            placeholder="请输入参赛号码"
            border="{{ false }}"
          />
        </view>

        <!-- 上传图片 -->
        <view class="from-li">
          <image class="from-li-img img-w3" src="/static/image/register/sc.png" mode="aspectFit" />
          <view class="uploader">
            <van-uploader file-list="{{fileList}}" bind:after-read="afterRead" />
          </view>
        </view>

      </view>
    </view>

    <!-- 协议勾选 -->
    <view class="agree">
      <van-checkbox
        checked-color="#000000"
        icon-size="28rpx"
        value="{{checked}}"
        bind:change="onCheckbox"
      >
        已读并承诺遵守
      </van-checkbox>
      <view>
        <text class="rules" data-type="rules" bindtap="showAgreement">《活动规则》</text>
        <text class="rules" data-type="liability" bindtap="showAgreement">《免责协议》</text>
        <text class="rules" data-type="privacy" bindtap="showAgreement">《隐私政策》</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view
      class="submit"
      bindtap="onSubmit"
      hover-class="{{ canSubmit ? 'btn-hover' : '' }}"
      hover-start-time="50"
    >
      <image class="submit-img {{ canSubmit ? '' : 'disabled' }}" src="/static/image/register/submit.png" mode="aspectFit"/>
    </view>

  </view>

  <!-- 性别选择器 -->
  <van-popup show="{{showPicker}}" round position="bottom" close-on-click-overlay="{{false}}">
    <van-picker
      show-toolbar
      columns="{{genders}}"
      bind:change="onPickerChange"
      bind:cancel="onCancel"
      bind:confirm="onConfirm"
    />
  </van-popup>

  <!-- 提交成功弹框 -->
  <van-popup class="registration" show="{{showRegistrationSuccess}}" round close-on-click-overlay="{{false}}">
    <view class="pop-content">
      <image class="pop-img" src="/static/image/register/yhq-logo.png" mode="aspectFit"/>
      <image class="pop-yhq" src="/static/image/register/yhq.png" mode="aspectFit"/>
      <view class="pop-card">
        <image class="pop-card-img" src="/static/image/register/yhq-bg.png" mode="aspectFit"/>
        <view class="pop-card-cont">
          <view class="pop-card-cont-lf">菜品券</view>
          <view class="pop-card-cont-ri">
            <view>烤鸭券</view>
            <view class="pop-time">2025-01-01到期</view>
          </view>
        </view>
      </view>
      <view class="receive" bindtap="onReceive" hover-class="btn-hover" hover-start-time="50">
        <image class="receive-img" src="/static/image/register/receive.png" mode="aspectFit"/>
      </view>
    </view>
  </van-popup>

  <!-- 协议弹窗 -->
  <van-dialog
    confirm-button-class="confirm-btn"
    use-slot
    title="{{agreementTitle}}"
    show="{{showAgreementModal}}"
    show-cancel-button="{{false}}"
  >
    <view class="dialog-box">
      <rich-text nodes="{{agreementContent}}" />
    </view>
  </van-dialog>
</view>