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

<!--pages/select-goods/index.wxml-->
<view class="container">
  <navigation-bar title=" " background="transparent"></navigation-bar>
  <view class="top-bar"></view>


  <view class="select-good-section">
    <view class="select-good-img">
      <image mode="widthFix" src="{{ selected.pic }}"></image>
    </view>
    <view class="good-info" wx:if="{{ selected.id }}">
      <view class="good-name">{{ selected.name }}</view>
      <view class="good-price">
        <!-- <view class="desc">共计</view> -->
        <view class="currentPrice">
          <text class="stuff">¥</text>
          <text class="priceZ">{{ selected.integerPart }}</text>
          <text class="priceF">.{{ selected.decimalPart }}</text>
        </view>
        <block wx:if="{{ selected.originalPrice > selected.salePrice  }}">
          <text class="line"></text>
          <text class="discountPrice">优惠前 ¥{{ selected.originalPrice }}</text>
        </block>
      </view>

      <!-- <image class="img_back" bind:tap="onBack" src="./images/icon-back.png"></image> -->
    </view>
  </view>
  <view class="section-block">
    <scroll-view class="popup-container" scroll-y="true" type="list" >
      <view class="popup-scroll">
        <view class="goodsInfo">
          <view class="desc">
            <image src="./images/icon2.png" class="iconBefore"></image>选择规格（{{ list.length }}）
          </view>
          <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 }}" id="{{ 'goodsItem-' + index }}">
              <image class="goodImg" src="{{ item.pic }}"></image>
              <view class="infos">
                <view class="name">{{ item.typeName }}</view>
                <view class="price">￥<text>{{ item.showSalePrice }}</text></view>
              </view>
              <image class="nosale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
            </view>
          </view>
        </view>

        <view class="goodsInfo">
          <view class="desc">
            <image src="./images/icon2.png" class="iconBefore"></image>选择乐器（{{ instrumentList.length }}）
          </view>
          <view class="tips">乐器图片仅供参考，实际产品以实物为准</view>

          <view class="goodsInstrument">
            <view class="instrument-item {{ item.id == selectInstrumentId ? 'selected' : '' }}" wx:for="{{ instrumentList }}" wx:key="index" bind:tap="onSelectInstrument" data-id="{{ item.id }}">
              <image class="checkbox" wx:if="{{ item.id == selectInstrumentId }}" src="./images/icon-select.png"></image>
              <image class="checkbox" wx:else src="./images/icon-default.png"></image>

              <image class="instrument-img" src="{{ item.pic }}"></image>

              <view class="instrment-info">
                <view class="name">{{ item.name }}</view>
                <view class="prices">
                  <view class="currentPrice">
                    <text class="stuff">¥</text>
                    <text class="priceZ">{{ item.integerPart }}</text>
                    <text class="priceF">.{{ item.decimalPart }}</text>
                  </view>
                  <block wx:if="{{ item.originalPrice > item.salePrice }}">
                    <text class="line"></text>
                    <text class="discountPrice"><text>优惠前</text>¥<text class="showP">{{ item.originalPrice }}</text></text>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="popupBottom">
      <view class="select-buyer" wx:if="{{ !userBeneficiaryId }}">
        <view class="desc">
          <image src="./images/icon2.png" class="iconBefore"></image>选择权益享用人
        </view>
        <view class="btn-add" bind:tap="onAddBuyer">添加</view>
      </view>

      <view class="select-buyer selected" wx:else bind:tap="onAddBuyer">
        <view class="desc">
          <image src="./images/icon2.png" class="iconBefore"></image>选择权益享用人
        </view>
        <view class="users">
          <image class="checkbox" src="./images/icon-select.png"></image>

          <view class="user">
            <view class="name"><text>{{ userBeneficiaryInfo.name }}</text>{{ userBeneficiaryInfo.phoneNumber }}</view>
            <view class="detail">{{ userBeneficiaryInfo.schoolInfo }}</view>
          </view>

          <image class="icon-edit" src="./images/icon-edit.png"></image>
        </view>
      </view>


      <!-- 有选择商品的时候 -->
      <view class="current-good" wx:if="{{!isOverSaled && selected.id}}">
        <view class="current-item-text">您已选中</view>
        <text>{{ formatSelectGood.typeName }}</text>，<block wx:if="{{ formatSelectGood.originalPrice > formatSelectGood.salePrice }}">
          共减<text class="discountPrice">¥ {{formatSelectGood.discountPrice}}</text>，
        </block>应付：
        <text>¥ {{formatSelectGood.showSalePrice}}</text>
      </view>
      <view class="btnGroup">
        <button type="primary" catch:tap="onSubmit" disabled="{{ isOverSaled || submitDisabled }}">
          <view class="btn-prices">
            <text class="text">立即支付</text>
            <text class="stuff">¥</text>
            <text class="priceZ">{{ formatSelectGood.integerPart || 0 }}</text>
            <text class="priceF">.{{ formatSelectGood.decimalPart || '00' }}</text>
          </view>
        </button>
      </view>
    </view>
  </view>
</view>