<view class="flex-col page">
  <image
    class="self-center image"
    src="./images/logo.png"
  />
  <text class="self-center text">欢迎登陆—青橙校园</text>

  <view class="flex-col self-stretch group">
    <text class="self-start font text_2">忘记密码</text>

    <!-- 手机号 -->
    <view class="flex-col justify-start self-stretch relative section mt-20">
      <input
        class="flex-col justify-start items-start text-wrapper view input"
        placeholder="请输入手机号"
        maxlength="11"
        type="number"
        model:value="{{phone}}"
        bindinput="onPhoneInput"
      />
    </view>

    <view class="flex-col self-stretch group_2 mt-20">
      <!-- 验证码 + 发送 -->
      <view class="flex-row items-center self-stretch relative section_2">
        <input
          class="flex-col justify-start items-start text-wrapper_2 view_2 input_1"
          placeholder="请输入验证码"
          maxlength="6"
          type="number"
          model:value="{{code}}"
          bindinput="onCodeInput"
        />
        <text
          class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-12 text_6 send-code {{ countdown>0 ? 'disabled' : '' }}"
          bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
        >{{ codeButtonText }}</text>
      </view>

      <!-- 新密码 -->
      <view class="flex-col justify-start self-stretch relative section_1 mt-22">
        <input
          class="flex-col justify-start items-start text-wrapper text-wrapper_1 input_2"
          placeholder="请输入密码"
          password="true"
          model:value="{{newPwd}}"
          bindinput="onNewPwdInput"
        />
      </view>

      <!-- 确认密码 -->
      <view class="flex-col justify-start self-stretch relative section_3 mt-22">
        <input
          class="flex-col justify-start items-start text-wrapper text-wrapper_5 input_3"
          placeholder="请再次输入密码"
          password="true"
          model:value="{{confirmPwd}}"
          bindinput="onConfirmPwdInput"
        />
      </view>

      <!-- 登录账号 -->
      <text
        class="self-end text_9 mt-22 link"
        bindtap="gotoLogin"
      >登录账号</text>

      <!-- 重置密码 按钮 -->
      <view
        class="flex-col justify-start items-center self-stretch text-wrapper_4 mt-22 reset-button"
        bindtap="resetPassword"
      >
        <text class="text_10">重置密码</text>
      </view>
    </view>
  </view>
</view>
