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" scroll-top="{{scrollTop}}">
  <view class="container">
    <!-- <view class="topShadow"></view> -->
    <view class="slider-count">{{current + 1}}/{{8}}</view>
    <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732173958445.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732173972772.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732173985370.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732173997722.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732174010387.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732174025169.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732174034215.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1732174043543.png"></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">
              <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">原价 ¥{{ selected.originalPrice || '0.00' }}</view><text style="padding: 0 6rpx"> | </text>
              <view class="saleNum"> 已售100W+</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>
      </view>

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

    </view>


    <view class="scroll-header" style="opacity: {{opacity}}">
      <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
      <view class="product-catagory">
        <view class="item selected" bind:tap="onTapAnchor" data-type="type1">产品介绍</view>
        <view class="item" bind:tap="onTapAnchor" data-type="type2">互通案例</view>
        <view class="item" bind:tap="onTapAnchor" data-type="type3">购买流程</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/1732175006625.png"></image>
          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
          <image id="type2" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175041724.png"></image>
          <image id="type3" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175051612.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"></view>
      <view class="popup-container">
        <image bind:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>

        <view class="product-section">
          <view class="product-img">
            <image 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> ，已优惠：<text>¥ {{ selected.discountPrice }}</text>
            </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' : '' }}" 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>
        </view>

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