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

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="topShadow"></view>
    <view class="slider-count">{{current + 1}}/{{5}}</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/1731664204915.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1731664238525.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1731664250837.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1731664259087.png"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item ">
          <image src="https://oss.dayaedu.com/ktyq/1731664269098.png"></image>
        </view>
      </swiper-item>
    </swiper>

    <view class="shop-section">
      <view class="showPrice">
        <view class="left">
          <view class="currentPrice">
            <text class="stuff">¥</text>
            <text class="priceZ">356</text>
            <text class="priceF">.00</text>
          </view>
          <view class="originPrice">¥400.00</view>
        </view>
        <view class="right">
          已售1000+
        </view>
      </view>

      <view class="shopName">
        音乐数字课堂AI学练工具年卡
      </view>

      <view class="goodsInfo">
        <text class="desc">已选：</text>
        <view class="goodsList">
          <view class="goodsItem">1年卡</view>
          <view class="goodsItem selected">3年卡</view>
          <view class="goodsItem nosale">无限卡<image src="./images/nosale.png"></image></view>
        </view>
      </view>
    </view>
    
    <view class="goodsSection">
      <view class="goodsIntro">
        <view class="title">图文详情</view>
        <view class="images">
          <image src="https://oss.dayaedu.com/ktyq/1731664304424.png"></image>
          <image src="https://oss.dayaedu.com/ktyq/1731664318588.png"></image>
          <image src="https://oss.dayaedu.com/ktyq/1731664330981.png"></image>
          <image src="https://oss.dayaedu.com/ktyq/1731664343706.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">立即购买</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="https://oss.dayaedu.com/ktyq/1731664204915.png"></image>
          </view>
          <view class="product-left">
            <view class="currentPrice">
              <text class="stuff">¥</text>
              <text class="priceZ">356</text>
              <text class="priceF">.00</text>
            </view>
            <view class="originPrice">¥400.00</view>
          </view>
        </view>

        <view class="goodsInfo">
          <view class="desc">规格</view>
          <view class="goodsList">
            <view class="goodsItem">1年卡</view>
            <view class="goodsItem selected">3年卡</view>
            <view class="goodsItem nosale">无限卡<image src="./images/nosale.png"></image></view>
          </view>
        </view>

        <button type="primary">立即购买</button>
      </view>
    </view>
  </view>
</scroll-view>