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/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>
            <!-- poster="https://oss.dayaedu.com/ktyq/1738923944096.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/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 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/1738822393434.png" data-src="https://oss.dayaedu.com/ktyq/1738822393434.png"></image>
          <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1738822501555.png" data-src="https://oss.dayaedu.com/ktyq/1738822501555.png"></image>
          <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1738822528040.png" data-src="https://oss.dayaedu.com/ktyq/1738822528040.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="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="type3" 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 id="type2" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1738822590749.png" data-src="https://oss.dayaedu.com/ktyq/1738822590749.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="combo-section">
            <view class="combo-title">
              超值组合，乐器随心选
              <text class="select-one">（可选1件）</text>
            </view>
            <view class="combo-tips">乐器图片仅供参考，具体产品请以实物为准</view>
            <view class="combo-list">
              <view class="combo-item {{ item.id === selectInstrumentId ? 'active' : '' }}" wx:for="{{ instrumentList }}" wx:key="index" bind:tap="onSelectInstrument" data-id="{{ item.id }}">
                <image src="./images/check-good.png" wx:if="{{ item.id === selectInstrumentId  }}" class="check-good" />
                <image class="combo-item-img" src="{{ item.pic }}"></image>
                <view class="combo-item-name">{{ item.name }}</view>
                <view class="combo-item-price">¥ {{ item.salePrice }}</view>
                <view class="combo-item-origin">日常价 ¥ {{ item.originalPrice }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="popupBottom">
          <!-- 有选择商品的时候 -->
          <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
            <view class="current-item-text">您已选择：</view>
            <text>{{ formatSelectGood.typeName }}</text>
            ，合计：
            <text>¥ {{ formatSelectGood.showSalePrice }}</text>
            <block wx:if="{{ formatSelectGood.originalPrice > formatSelectGood.salePrice }}">
              ，已省
              <text>¥ {{ formatSelectGood.discountPrice }}</text>
            </block>
          </view>
          <view class="btnGroup">
            <view class="left-section">
              <image src="./images/icon1.png" class="icon1" />
              <view class="currentPrice2">
                <text class="stuff">¥</text>
                <text class="priceZ">{{ formatSelectGood.integerPart || "0" }}</text>
                <text class="priceF">.{{ formatSelectGood.decimalPart || '00' }}</text>
              </view>
            </view>
            <button type="primary" catch:tap="onSubmit">去结算</button>
            <!-- <view class="btnInnerFree" wx:if="{{ selected.giftFlag }}">
              当天激活
              <text>赠{{selected.giftLongTime}}</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 客服功能 -->
  <service wx:if="{{serviceShow}}"></service>
</scroll-view>