<view class="flex-col page">
  <image class="self-center image" src="./images/logo.png" />

  <view class="flex-col items-center self-stretch group">
    <!-- 加上 bold-text -->
    <text class="font text bold-text">欢迎登陆—青橙校园</text>
    <text class="font mt-12">（{{ showRole }}端）</text>
  </view>

  <view class="flex-col self-stretch group_2">
    <view class="flex-row">
      <!-- 密码登录 -->
      <text
        class="font_2 toggle-text {{loginType==='password'?'active':''}}"
        bindtap="switchToPassword"
      >密码登录</text>

      <!-- 验证码登录 -->
      <text
        class="font_2 ml-8 toggle-text {{loginType==='sms'?'active':''}}"
        bindtap="switchToSms" wx:if="{{ role === 'user' }}"
      >验证码登录</text>
    </view>

    <view class="flex-col group_1 mt-20">
      <!-- 手机号 输入框，保持原 .text-wrapper 样式 -->
      <view class="flex-col self-stretch">
        <view class="flex-col justify-start relative section">
          <input
            class="text-wrapper"
            placeholder="请输入手机号"
            value="{{phone}}"
            bindinput="onPhoneInput"
            maxlength="11"
            type="number"
          />
        </view>
      </view>

      <!-- 密码/验证码 输入框，保持原 .text-wrapper_2 样式 -->
      <view class="flex-row items-center section_2 mt-21">
        <input
          class="text-wrapper"
          placeholder="{{ loginType==='password' ? '请输入密码' : '请输入验证码' }}"
          value="{{credential}}"
          bindinput="onCredentialInput"
          password="{{ loginType==='password' }}"
          type="{{ loginType==='sms' ? 'number' : 'text' }}"
        />

        <!-- 仅验证码登录时显示倒计时按钮 -->
        <view 
          class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-2" 
          bindtap="getSmsCode" 
          wx:if="{{ loginType==='sms' }}"
        >
          <text class="text_6">{{ codeButtonText }}</text>
        </view>
      </view>

      <!-- 忘记密码，仅密码登录时显示 -->
      <text 
        class="self-end font_4 text_7" 
        bindtap="gotoForgetPwd" 
        wx:if="{{ loginType==='password' }}"
      >忘记密码</text>

      <!-- 登录按钮 -->
      <view 
        class="flex-col justify-start items-center self-stretch text-wrapper_4" 
        bindtap="onLogin"
      >
        <text class="text_8">登录</text>
      </view>

      <!-- 协议勾选 -->
      <view class="flex-row items-center self-stretch group_3">
        <checkbox-group bindchange="onAgreeChange">
          <checkbox
            class="checkbox"
            value="agree"
            checked="{{ isAgree }}"
            color="#FF8D1A"
          />
        </checkbox-group>
        <view class="group_4 ml-12">
          <text class="font_5 text_9">登录代表您已同意</text>
          <text class="font_5" bindtap="gotoAgreement">《用户协议》</text>
          <text class="text_10">&</text>
          <text class="font_5" bindtap="gotoPolicy">《隐私协议》</text>
        </view>
      </view>

      <!-- 去注册 -->
      <view class="self-center group_5" wx:if="{{isShowRegister}}">
        <text class="font_4 text_11">没有账号？</text>
        <text class="font_5 text_12" bindtap="gotoRegister">去注册→</text>
      </view>
    </view>
  </view>

  <view class="flex-row justify-evenly items-center self-end section_3" bind:tap="joinUs" wx:if="{{ role === 'user' }}">
    <text class="font_2 text_13">加入我们</text>
    <image class="image_3" src="./images/joinus.png" />
  </view>
</view>
