qingcheng-xiaochengxu/pages/course/courseDetail/courseDetail.wxml

<view class="flex-col page">
  <view class="flex-col">
    <!-- 背景图 -->
    <view class="flex-col section">
      <image class="background-image" src="https://img.picui.cn/free/2025/06/26/685cc80000461.png" />
    </view>

    <!-- 选项卡 -->
    <view class="flex-col section_3">
      <view class="flex-row justify-center group_2">
        <text bindtap="selectTab" data-tab="intro" class="text-tab {{activeTab==='intro'?'tab-active':'tab-inactive'}}">课程简介</text>
        <text bindtap="selectTab" data-tab="catalog" class="text-tab {{activeTab==='catalog'?'tab-active':'tab-inactive'}}">课程目录</text>
      </view>
    </view>

    <!-- 标题+价格 -->
    <view class="flex-col section_4">
      <view class="flex-row items-center group_4">
        <view class="shrink-0 group_5">
          <text class="text_6">{{ courseObj.originPrice }}</text>
          <text class="font_3 text_7">元券后价</text>
        </view>
        <view class="ml-4 flex-col justify-start items-start shrink-0 relative group_6">
          <text class="font_2 text text_8">{{ courseObj.discountPrice }}元</text>
          <view class="divider pos"></view>
        </view>
      </view>
      <text class="group_4 text_9 mt-9">{{ courseObj.name }}</text>
    </view>

    <!-- 课程概述（仅当 activeTab==='intro'） -->
    <view wx:if="{{activeTab==='intro'}}" class="flex-col section_5">
      <view class="flex-row items-center group_7">
        <image class="image" src="./image/cal.png" />
        <text class="ml-6 font_2 text_10">课程概述</text>
      </view>
      <rich-text class="section_6" nodes="{{richText}}"></rich-text>
    </view>

    <!-- 课程目录（仅当 activeTab==='catalog'） -->
    <view wx:if="{{activeTab==='catalog'}}" class="flex-col mt-35">
      <view class="flex-col section_7">
        <view class="flex-col list">
          <view class="flex-col list-item mt-15" wx:for="{{chapterList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
            <!-- <view class="flex-col justify-start self-end text-wrapper_2">
              <text class="font_4 text_11">全集试看</text>
            </view> -->
            <view class="flex-row self-start group_8 mt-1">
              <text class="shrink-0 self-start font_5 text_12">{{ index + 1}}</text>
              <text class="ml-16 flex-1 font_2 {{activeIndex === index ? 'active-title' : ''}}" bindtap="selectCourse" data-index="{{index}}">
                {{ item.name }}
              </text>
            </view>
            <view class="flex-row justify-between self-stretch group_9 mt-1">
              <!-- <text class="self-start font_6 text_13" style="margin-top: 10rpx;">视频课·27分59秒</text> -->
              <!-- <image class="image_2" src="./image/lock.png" /> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部固定按钮栏 -->
  <view class="flex-row items-center section_8 section_8_fixed">
    <view class="flex-col items-center shrink-0" style="margin-left: 30rpx;">
      <image class="image_3" src="./image/messge.png" />
      <text class="font_6 text_16 mt-1">咨询</text>
    </view>
    <view class="ml-44 flex-row flex-1">
      <view class="flex-col justify-start items-center text-wrapper_3" bind:tap="gotoApplyPromotion" data-id="{{ '1' }}">
        <text class="font_7 text_14">申请推广</text>
      </view>
      <view class="flex-col justify-start items-center text-wrapper_4 ml-15" bind:tap="gotoCourseOrder" data-id="{{ '1' }}">
        <text class="font_7 text_15">立即购买</text>
      </view>
    </view>
  </view>
</view>