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}}</view>
    <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
      <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 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 id="scroll-header" class="scroll-header" style="opacity: {{opacity}}">
      <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 && opacity >= 1}}">
      您已选中：<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 id="type3" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617269723.png" data-src="https://oss.dayaedu.com/ktyq/1732617269723.png"></image>
          <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>
          
          <!-- <block wx:for="{{ goodsImgList }}" wx:key="index">
            <image id="{{ 'type1' + (index + 1) }}" mode="widthFix" bind:tap="onPreivewGoodsImg" data-src="{{item}}" src="{{ item }}"></image>
          </block> -->
        </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="product-section">
          <view class="product-img">
            <image bind:tap="onPreivewGoods" data-src="{{ selected.pic }}" src="{{ selected.pic }}"></image>
          </view>
          <view>
            <view class="product-left">
              <view class="currentPrice">
                <text class="stuff">¥ </text>
                <text class="priceZ">{{ selected.integerPart }}</text>
                <text class="priceF">.{{ selected.decimalPart }}</text>
              </view>
              <view class="originPrice">原价 ¥{{ selected.originalPrice }}</view>
            </view>
            <view class="selected-info">
              您已选中：<text>{{ selected.typeName }}</text> <block wx:if="{{ selected.originalPrice > selected.salePrice }}">，已优惠：<text>¥ {{ selected.discountPrice }}</text></block>
            </view>
          </view>
        </view>

        <view class="goodsInfo">
          <view class="goodsList">
            <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" catch: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>
        </view>

        <button type="primary" catch:tap="onSubmit">立即购买</button>
      </view>
    </view>
  </view>
  <!-- 客服功能 -->
  <service wx:if="{{serviceShow}}"></service>
</scroll-view>