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

<!-- pages/course/createCourseOrder/createCourseOrder.wxml -->
<view class="page">

  <!-- 可滚动内容区：为固定底部预留内边距，避免遮挡 -->
  <scroll-view scroll-y class="content no-scrollbar">

    <!-- 商品信息卡片 -->
    <view class="card product">
      <image
        class="cover"
        src="{{ globalImgUrl + courseObj.image }}"
        mode="aspectFill"
        lazy-load="true"
      />
      <view class="info">
        <text class="title ellipsis-2">{{ courseObj.name }}</text>
        <view class="price-line">
          <text class="price-now">￥{{ courseObj.discountPrice }}</text>
          <text class="price-origin">￥{{ courseObj.originPrice }}</text>
        </view>
      </view>
    </view>

    <!-- 商品价格行 -->
    <view class="card row">
      <text class="row-left">商品价格</text>
      <text class="row-right accent">￥{{ courseObj.discountPrice }}</text>
    </view>

    <!-- 支付方式 -->
    <view class="card pay">
      <view class="pay-left">
        <image class="pay-icon" src="./image/wxpay.png" mode="aspectFit" />
        <text class="pay-text">微信支付</text>
      </view>
      <radio-group class="pay-right" bindchange="onPayMethodChange">
        <radio value="wxpay" checked></radio>
      </radio-group>
    </view>

  </scroll-view>

  <!-- 固定底部结算栏 -->
  <view class="footer">
    <view class="footer-inner">
      <text class="to-pay">应付 <text class="to-pay-amount">￥{{ courseObj.discountPrice }}</text></text>
      <view class="btn-pay" bindtap="createOrder">立即支付</view>
    </view>
  </view>

  <!-- 遮罩 -->
  <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
</view>


<!-- ===== 购买须知弹窗（富文本） ===== -->
<view wx:if="{{isNoticeVisible}}" class="modal-mask" catchtouchmove="noop">
  <view class="modal" catchtap="noop">
    <view class="modal-title">课程购买须知</view>

    <!-- 富文本内容：支持 p/h1-h6/strong/em/ul/ol/a 等常见标签 -->
    <scroll-view scroll-y class="modal-body">
      <rich-text nodes="{{noticeHtml}}"></rich-text>
    </scroll-view>

    <view class="modal-actions">
      <button class="btn-primary" bindtap="closeNotice">我知道了</button>
    </view>
  </view>
</view>

<!-- 右上角购买须知按钮 -->
<view class="notice-icon" bindtap="openNotice">
  <image src="./image/info.png" mode="aspectFit" class="notice-icon-img" />
  <text class="notice-icon-text">购买须知</text>
</view>