yyszkt_help_douyin_miniprogram/pages/trial/index.ttml

<view class="trial-page">
  <scroll-view class="page-scroll" scroll-y="true">
    <image
      class="header-image"
      src="/images/trial-hero.jpg"
      mode="aspectFill"
    />

    <view class="form-wrap">
      <view class="form-item">
        <text class="label">身份职业</text>
        <view class="switch-group">
          <view
            class="switch-item {{formData.occupation === '学生' ? 'switch-item-active' : ''}}"
            data-field="occupation"
            data-value="学生"
            bindtap="handleSelectOption"
          >学生</view>
          <view
            class="switch-item {{formData.occupation === '教师' ? 'switch-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="switch-group">
          <view
            class="switch-item {{formData.gender === '男' ? 'switch-item-active' : ''}}"
            data-field="gender"
            data-value="男"
            bindtap="handleSelectOption"
          >男</view>
          <view
            class="switch-item {{formData.gender === '女' ? 'switch-item-active' : ''}}"
            data-field="gender"
            data-value="女"
            bindtap="handleSelectOption"
          >女</view>
        </view>
      </view>

      <view class="form-item">
        <text class="label">联系电话</text>
        <view class="phone-row">
          <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>
        <view class="tips-line tips-line-inline">
          <text>2. 教师用户：本产品配套有教师端管理系统，安装请</text>
          <text class="tips-link" bindtap="handleOpenVideo">查看视频</text>
          <text>详情。</text>
        </view>
        <text class="tips-line">3. 同一手机号仅可申请试用一次，申请后账号（手机号）自动开通，试用期为2天。</text>
        <text class="tips-line">4. 有任何问题可以加入抖音主页粉丝群进行咨询。</text>
      </view>
    </view>
  </scroll-view>

  <view class="page-tabbar" tt:if="{{!showVideoModal}}">
    <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="video-mask" tt:if="{{showVideoModal}}" catchtap="noop">
    <view class="video-close" bindtap="handleCloseVideo">关闭</view>
    <video
      id="trialVideo"
      class="trial-video-fullscreen"
      src="{{trialVideoUrl}}"
      controls
      autoplay="{{showVideoModal}}"
      object-fit="contain"
    />
  </view>

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