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" enable-passive="true" scroll-into-view="{{scrolIntoView}}" scroll-top="{{ scrollTop }}">
  <view class="container">
    <!-- <view class="topShadow"></view> -->
    <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/1733727669132.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>
          <!-- poster="https://oss.dayaedu.com/ktyq/1733727669132.png" -->
          <!-- https://oss.dayaedu.com/ktyq/17334015356119a704b08.mp4 100M -->
          <!-- https://oss.dayaedu.com/ktyq/1733405365311b760c974.mp4 30M -->
          <!-- https://oss.dayaedu.com/ktyq/17334057618630fc77dba.mp4 60M -->
        </block>
          <block wx:if="{{ !bannerPlay }}">
            <image bindload="onBannerVideoLoad" src="https://oss.dayaedu.com/ktyq/1733727669132.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 bind:tap="onPreivewBannerImg" 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="scroll-current-item" wx:if="{{!isOverSaled && selected.id }}">
      您已选中：<text>{{ selected.typeName }}</text> ，合计：<text>¥ {{ selected.showSalePrice }}</text>
      <block wx:if="{{ selected.originalPrice > selected.salePrice }}">，已优惠：<text>¥ {{ selected.discountPrice }}</text></block>
    </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" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175006625.png" data-src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
          <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175021350.png" data-src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
          <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175031878.png" data-src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
          <!-- <image  mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/173339759143825859f65.png" data-src="https://oss.dayaedu.com/ktyq/173339759143825859f65.png"></image> -->
          <view id="type3" class="liu-section">
            <view class="liu-img1">
              <image  mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1733457722973.png" data-src="https://oss.dayaedu.com/ktyq/1733457722973.png"></image>
            </view>
            <!-- <view class="titleVideoSection">
              <video object-fit="fill" show-center-play-btn="{{false}}" picture-in-picture-mode="[]" controls="{{liuControls}}" bindplay="onLiuPlay" class="videoItem" id="liuVideo" src="https://oss.dayaedu.com/ktyq/1733395673461fc6123ca.mp4"></video>
              <image wx:if="{{!liuControls}}" bind:tap="onLiuVideoPlay" src="./images/icon-video.png" class="icon-video"></image>
            </view> -->
            <view class="liu-img2">
              <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/173340695604938755d8b.png" data-src="https://oss.dayaedu.com/ktyq/173340695604938755d8b.png"></image>
            </view>
          </view>
          <!-- <image id="type2" class="type2s" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617388991.png" data-src="https://oss.dayaedu.com/ktyq/1732617388991.png"></image> -->
          <view id="type2" class="type2s title-section">
            <image src="./images/title1.png" class="title"></image>
            <view class="topSection">
              <view class="content1">音乐数字课堂已赢得超过100万名注册师生的喜爱与赞誉，成为学生乐器学习旅程中的得力伙伴，更是一路陪伴他们从初探音乐世界走向精通乐器。为学生带来极佳的学习体验。</view>
              <view class="titleVideoSection">
                <video object-fit="contain" show-center-play-btn="{{false}}" picture-in-picture-mode="[]" controls="{{titleControls}}" bindplay="onTitlePlay" class="videoItem" id="titleVideo" src="https://oss.dayaedu.com/ktyq/1733395673461fc6123ca.mp4"></video>
                <image wx:if="{{!titleControls}}" bind:tap="onTItleVideoPlay" src="./images/icon-video.png" class="icon-video"></image>
              </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 mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.png" data-src="https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.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 class="btnInnerFree" wx:if="{{ selected.giftFlag }}">当天激活<text>赠{{selected.giftLongTime}}</text></view>
      </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="shop-section">
          <view class="main-goods">
            <view class="showPrice">
              <view class="left">
                <view class="left-top">
                  <image class="t1" src="./images/t1.png"></image>
                </view>
                <view class="left-bottom">
                  <view class="currentPrice">
                    <text class="stuff">¥ </text>
                    <text class="priceZ">{{ selected.integerPart || 0 }}</text>
                    <text class="priceF">.{{ selected.decimalPart || '00' }}</text>
                  </view>
                </view>
              </view>
              <view class="right">
                <view class="right-top">
                  <block wx:if="{{ selected.originalPrice > selected.salePrice }}">
                    <view class="originPrice">原价 ¥{{ selected.originalPrice || '0.00' }}</view><text style="padding: 0 6rpx"> | </text>
                  </block>
                  <view class="saleNum">已售10W+</view>
                </view>
                <view class="right-bottom">
                  <view class="shopName">
                    {{ selected.name }}
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="goodsInfo">
            <text class="desc">规格选择</text>
            <view class="goodsList">
              <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">
                <image class="select-arrow" src="./images/icon-down-arrow.png"></image>
                <image class="imgSale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
                <image class="pic" src="{{ item.pic }}"></image>
                <view class="nameorprice">
                  <view class="name">{{ item.typeName }}</view>
                  <view class="price">¥{{ item.showSalePrice }}</view>
                </view>
              </view>
            </view>
            <!-- <image wx:if="{{ list.length > 3 }}" bind:tap="onLookMore" class="iconMore" src="./images/icon-more.png"></image> -->
          </view>

          <!-- 有选择商品的时候  -->
          <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
            您已选中：<text>{{ selected.typeName }}</text>，合计：<text>¥ {{ selected.showSalePrice }}</text>
            <block wx:if="{{ selected.originalPrice > selected.salePrice }}">，已优惠：<text>¥ {{ selected.discountPrice }}</text></block>
          </view>

        </view>

        <view class="btnGroup">
          <button type="primary" catch:tap="onSubmit">
            立即购买
          </button>
          <view class="btnInnerFree" wx:if="{{ selected.giftFlag }}">当天激活<text>赠{{selected.giftLongTime}}</text></view>
        </view>
      </view>
    </view>
  </view>
  <!-- 客服功能 -->
  <service wx:if="{{serviceShow}}"></service>
</scroll-view>