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>