classroom-music-activation/miniprogram/pages/index/index.wxml

<!-- index.wxml -->
<scroll-view class="scrollarea" id="scroll-view" scroll-y="{{popupShow ? false : true}}" type="list" bindscroll="onScrollView" bounces="{{ false }}" enhanced enable-passive="true" scroll-into-view="{{scrolIntoView}}" scroll-top="{{ scrollTop }}">
  <view class="container">
    <view class="slider-count">{{current + 1}}/{{imgList.length + 1}}</view>
    <swiper class="bannerSwiper" indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
      <swiper-item>
        <view class="swiper-item swiper-video">
          <block wx:if="{{bannerImageloaded}}">
            <image class="bg" src="https://oss.dayaedu.com/ktyq/1738923944096.png"></image>
            <video style="height: {{videoHeight}};" object-fit="contain" bindplay="onBannerVideoPlay" picture-in-picture-mode="[]" id="bannerVideo" src="https://oss.dayaedu.com/ktyq/17337413498130cfedaf1.mp4"></video>
          </block>
          <block wx:if="{{ !bannerPlay }}">
            <image bindload="onBannerVideoLoad" src="https://oss.dayaedu.com/ktyq/1738923944096.png"></image>
            <image catch:tap="onBannerPlay" src="./images/icon-video.png" class="icon-video"></image>
          </block>
        </view>
      </swiper-item>
      <swiper-item wx:for="{{ imgList }}" wx:key="index">
        <view class="swiper-item ">
          <image src="{{ item }}" data-src="{{ item }}"></image>
        </view>
      </swiper-item>
    </swiper>
    <view id="scroll-header" class="scroll-header" style="opacity: {{opacity}}; pointer-events: {{opacity > 0 ? 'all' : 'none'}};">
      <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
      <view class="product-catagory">
        <view class="item {{ scrolIntoViewStr == 'type1' || !scrolIntoViewStr ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type1">
          产品介绍
        </view>
        <view class="item {{ scrolIntoViewStr == 'type3' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type3">
          互通案例
        </view>
        <view class="item {{ scrolIntoViewStr == 'type2' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type2">
          使用场景
        </view>
      </view>
    </view>
    <view class="goodsSection">
      <view class="title">
        <view class="before"></view>
        <view>商品详情</view>
        <view class="after"></view>
      </view>
      <view class="goodsIntro">
        <view class="images">
          <image id="type1" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1739353790443.png" data-src="https://oss.dayaedu.com/ktyq/1739353790443.png"></image>
          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1739353815962.png" data-src="https://oss.dayaedu.com/ktyq/1739353815962.png"></image>
          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1739353843494.png" data-src="https://oss.dayaedu.com/ktyq/1739353843494.png"></image>
          <view id="type3" class="type2s title-section">
            <image src="./images/title1.png" class="title"></image>
            <view class="topSection">
              <view class="content1">
                音乐数字AI已赢得超过100万名注册师生的喜爱与赞誉，成为学生乐器学习旅程中的得力伙伴，更是一路陪伴他们从初探音乐世界走向精通乐器。为学生带来极佳的学习体验。
              </view>
              <view class="titleVideoSection">
                <view class="video-section">
                  <image mode="widthFix" bind:tap="onPreivewDetailImg2" src="https://oss.dayaedu.com/ktyq/03/1772461866051.png" data-src="https://oss.dayaedu.com/ktyq/03/1772461866051.png" />
                </view>
              </view>
              <view class="content2">实践知真章，合作学校仅用两节课便完成母亲节主题演奏</view>
            </view>
            <view class="titleSwiper">
              <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiperDetail">
                <swiper-item wx:for="{{ detailImgList }}" wx:key="index">
                  <view class="swiper-item-detail">
                    <image bind:tap="onPreivewDetailImg" src="{{ item.url }}" data-src="{{ item.url }}"></image>
                    <view class="text">{{item.text}}</view>
                  </view>
                </swiper-item>
              </swiper>
              <view class="title-dot">
                <view wx:for="{{ detailImgList }}" wx:key="index" class="title-dot--item {{ detailCurrent === index ? 'title-dot--item-active' : '' }}"></view>
              </view>
            </view>
          </view>
          <image id="type2" mode="widthFix" src="https://oss.dayaedu.com/ktyq/03/1772550951364.png" data-src="https://oss.dayaedu.com/ktyq/03/1772550951364.png"></image>
        </view>
      </view>
    </view>
    <view class="bottom-section">
      <view class="orders" bind:tap="onOrder">
        <image src="./images/icon-order.png" />
        <text>订单</text>
      </view>
      <view class="btnSection">
        <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
      </view>
    </view>

    <!-- 购买弹窗 -->
    <view class="popup-section" wx:if="{{popupShow}}">
      <view class="popup-mask" bind:tap="onClose"></view>
      <view class="popup-container">
        <image catch:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>

        <!-- 用户类型切换 -->
        <view class="user-type-tabs">
          <view class="tab-item {{ userTypes === 'student' ? 'active' : '' }}" bind:tap="onSwitchUserType" data-type="student">学生端</view>
          <view class="tab-item {{ userTypes === 'teacher' ? 'active' : '' }}" bind:tap="onSwitchUserType" data-type="teacher">老师端</view>
        </view>

        <!-- 商品信息卡片 -->
        <view class="product-info-card">
          <view class="product-badge">
            <text class="duration-text">{{ selected.typeName || '14天' }}</text>
            <text class="user-label">学生端</text>
          </view>
          <view class="product-detail">
            <view class="product-name">{{ selected.name || '老师端-器乐数字AI畅享卡' }}</view>
            <view class="price-line">
              <text class="price-tag">到手价</text>
              <text class="price-num">¥{{ selected.showSalePrice || '388.00' }}</text>
            </view>
            <view class="origin-line">
              <text class="origin-tag">日常价</text>
              <text class="origin-num">¥{{ selected.originalPrice || '2900.00' }}</text>
              <text class="divider">|</text>
              <text class="sold-count">已售10W+</text>
            </view>
          </view>
        </view>

        <!-- 选择期限 -->
        <view class="period-select-section">
          <view class="section-label">选择期限</view>
          <view class="period-options">
            <view wx:for="{{ periodList }}" wx:key="value" class="period-btn {{ selectedPeriod === item.value ? 'active' : '' }}" bind:tap="onSelectPeriod" data-value="{{ item.value }}">
              {{ item.label }}
            </view>
          </view>
        </view>

        <!-- 额外赠送 -->
        <view class="gift-section" wx:if="{{ showBonusGift }}">
          <text class="gift-desc">满1年额外赠送2个月</text>
        </view>

        <!-- 底部结算栏 -->
        <view class="settlement-bar">
          <view class="select-summary">
            <text class="summary-label">选中:</text>
            <text class="summary-content">{{ userTypes === 'teacher' ? '老师端' : '学生端' }}/{{ selected.typeName || '14天' }},</text>
            <text class="summary-save">已省¥{{ formatSelectGood.discountPrice || '2512.00' }}</text>
          </view>
          <button class="submit-btn" catch:tap="onSubmit">立即购买</button>
        </view>
      </view>
    </view>
  </view>
  <!-- 客服功能 -->
  <service wx:if="{{serviceShow}}"></service>
</scroll-view>