yyszkt_help_douyin_miniprogram/pages/trial/index.ttml

<view class="trial-page">
  <view class="hero">
    <text class="title">申请试用</text>
    <text class="subtitle">完整真实填写以下信息，即可免费申请软件试用。</text>
  </view>

  <view class="form-card">
    <view class="form-item">
      <text class="label">职业</text>
      <view class="option-group">
        <view
          class="option-item {{formData.occupation === '学生' ? 'option-item-active' : ''}}"
          data-field="occupation"
          data-value="学生"
          bindtap="handleSelectOption"
        >
          学生
        </view>
        <view
          class="option-item {{formData.occupation === '教师' ? 'option-item-active' : ''}}"
          data-field="occupation"
          data-value="教师"
          bindtap="handleSelectOption"
        >
          教师
        </view>
      </view>
    </view>

    <view class="form-item">
      <text class="label">姓名</text>
      <input
        class="input"
        placeholder="请输入姓名"
        value="{{formData.name}}"
        data-field="name"
        bindinput="handleInputChange"
      />
    </view>

    <view class="form-item">
      <text class="label">性别</text>
      <view class="option-group">
        <view
          class="option-item {{formData.gender === '男' ? 'option-item-active' : ''}}"
          data-field="gender"
          data-value="男"
          bindtap="handleSelectOption"
        >
          男
        </view>
        <view
          class="option-item {{formData.gender === '女' ? 'option-item-active' : ''}}"
          data-field="gender"
          data-value="女"
          bindtap="handleSelectOption"
        >
          女
        </view>
      </view>
    </view>

    <view class="form-item">
      <text class="label">手机号</text>
      <view class="input-with-btn">
        <input
          class="input input-flex"
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
          value="{{formData.phone}}"
          data-field="phone"
          bindinput="handleInputChange"
        />
        <button
          class="code-btn"
          bindtap="handleSendCode"
          disabled="{{isSendingCode || isLoadingImgCode || countdown > 0}}"
        >
          {{countdown > 0 ? (countdown + 's后重发') : '获取验证码'}}
        </button>
      </view>
    </view>

    <view class="form-item" tt:if="{{isCodeSent}}">
      <text class="label">验证码</text>
      <input
        class="input"
        type="number"
        maxlength="6"
        placeholder="请输入验证码"
        value="{{formData.code}}"
        data-field="code"
        bindinput="handleInputChange"
      />
    </view>

    <button class="submit-btn" bindtap="handleSubmit" disabled="{{isSubmitting}}" loading="{{isSubmitting}}">提交申请</button>

    <view class="tips-box">
      <text class="tips-title">提示说明</text>
      <text class="tips-line">1. 职业选择“学生”：请前往 APP 应用商店搜索名称为“音乐数字课堂”进行下载并体验。</text>
      <text class="tips-line">2. 职业选择“老师”：请下载安装 Chrome 浏览器，并在地址栏输入 kt.colexiu.com 访问体验。</text>
      <text class="tips-line">3. 同一手机号仅可申请试用一次，不可重复申请。</text>
    </view>
  </view>

  <view class="page-tabbar">
    <view class="page-tab-item" bindtap="handleGoProduct">
      <text class="page-tab-text">产品介绍</text>
    </view>
    <view class="page-tab-item page-tab-item-active" bindtap="handleGoTrial">
      <text class="page-tab-text page-tab-text-active">申请试用</text>
    </view>
  </view>

  <view class="img-code-mask" tt:if="{{showImgCodePanel}}">
    <view class="img-code-dialog">
      <view class="img-code-close" bindtap="handleCloseImgCodeModal">×</view>
      <text class="img-code-title">输入图形验证码</text>
      <view class="img-code-content">
        <input
          class="img-code-input"
          maxlength="8"
          placeholder="请输入验证码"
          value="{{imgCodeInput}}"
          bindinput="handleImgCodeInput"
        />
        <view class="img-code-right">
          <image
            class="img-code-image"
            src="{{imgCodeImage}}"
            mode="aspectFit"
            bindtap="handleRefreshImgCode"
          />
          <text class="img-code-refresh" bindtap="handleRefreshImgCode">
            {{isLoadingImgCode ? '加载中...' : '看不清？换一换'}}
          </text>
        </view>
      </view>
    </view>
  </view>

  <view class="submit-tip" tt:if="{{showSubmitTip}}">
    <text class="submit-tip-text">{{submitTipText}}</text>
  </view>
</view>