index.wxml

<!-- 商品列表组件 -->
<view class="goodsList" style="padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
  <view class="list-wrap heap-wrap" style="background-color:{{datas.componentData['heapBgColorShow'] ? datas.componentData['heapBgColor'] : ''}};border-radius:{{datas.componentData['cardBorderRadius']*2}}rpx;">
    <!-- 头部 -->
    <view class="tops flex" style="padding:{{(datas.componentData['titleIcon'] || (datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top')) ?'0rpx 0rpx 0rpx 10rpx' : ''}};margin-bottom:{{datas.componentData['titleCardGap']*2}}rpx">
      <view class="left flex">
        <view class="img" wx:if="{{titleIcon}}">
          <image mode="widthFix" src="{{titleIcon}}" />
        </view>
        <view class="title">{{datas.componentData['titles']}}</view>
      </view>
      <view
        class="moreTop"
        bindtap="viewMore"
        wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign' && datas.componentData['goodsSource']!='intelligenceRec'}}"
      >
        查看更多
        <text class="jt"></text>
      </view>
    </view>
    <!-- 筛选组件 -->
    <view class="filterComponents" wx:if="{{datas.componentData.filterComponentsFlag}}">
      <view class="filterInput flex">
        <i class="iconfont-common common-iconsousuo"></i>
        <input type="text" placeholder="搜索" bindinput="filterInput" />
        <view class="btn" bindtap="init">搜索</view>
      </view>
      <view class="filterCondition flex">
        <view class="left flex">
          <view class="filterItem {{filterType == -1?'activeStatus':''}}" bindtap="filterGoods" data-item="{{-1}}">
            综合
          </view>
          <view class="filterItem {{filterType == 3?'activeStatus':''}}" bindtap="filterGoods" data-item="{{3}}">
            销量
          </view>
          <view class="filterItem flex filterPrice {{filterType == 2?'activeStatus':''}}" bindtap="filterGoods" data-item="{{2}}">
            <text>价格</text>
            <view class="svgItem flex">
              <view class="arrowTop">
                <m-svg src="/static/svg/arrowTop.svg" colors="{{[filterType == 2 && filterPriceType == 0?mainColor:'']}}"></m-svg>
              </view>
              <view class="arrowBottom">
                <m-svg src="/static/svg/arrowBottom.svg" colors="{{[filterType == 2 && filterPriceType == 1?mainColor:'']}}"></m-svg>
              </view>
            </view>
          </view>
          <view class="filterItem {{filterType == 8?'activeStatus':''}}" bindtap="filterGoods" data-item="{{8}}">
            上新
          </view>
        </view>
        <view class="filterItem flex verticalLine">|</view>
        <view class="filterItem flex {{selectScreen == true?'activeStatus':''}}" bindtap="filterGoods" data-item="{{99}}">
          <text>筛选</text>
          <view class="shaixuan">
            <m-svg src="/static/svg/shaixuan1.svg" colors="{{[selectScreen == true?mainColor:'']}}"></m-svg>
          </view>
        </view>
      </view>
    </view>
    <!-- 网格布局 -->
    <view
      wx:if="{{datas.componentData.style==='list'}}"
      class="goodsItem-list flex"
      style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
    >
      <view
        wx:for="{{pageGoodsList[datasIndex]}}"
        wx:key="index"
        class="goods-item {{'goodsItemIndex'+index}}"
        style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
      >
        <!-- <goods-item
          datas="{{datas}}"
          items="{{goodsList[index]}}"
          indexs="{{index}}"
        ></goods-item> -->
        <goods-item
          items="{{item}}"
          datas="{{datas}}"
          indexs="{{index}}"
        ></goods-item>
      </view>
      <!-- 网格布局滚动加载 -->
      <view class="scrollLoading" wx:if="{{scrollLoading}}">
        <van-loading size="16px" color="#fff"><text class="scrollLoadingText">加载中...</text></van-loading>
      </view>
    </view>
    <!-- 横向滚动 -->
    <view class="goods-across" wx:elif="{{datas.componentData.style==='across'}}">
      <view class="prev-btn">
        <text class="iconfont-common common-iconyoujiantou"></text>
      </view>
      <view class="next-btn">
        <text class="iconfont-common common-iconyoujiantou"></text>
      </view>
      <view
        wx:for="{{datas.componentData.goodsList}}"
        wx:key="index"
        class="goods-item"
        style="width:{{100/datas.componentData.columnNum}}%;margin-right:{{datas.componentData.proGap*2}}rpx"
      >
        <goods-item
          datas="{{datas}}"
          items="{{datas.componentData.goodsList[index]}}"
          indexs="{{index}}"
        ></goods-item>
      </view>
    </view>
    <!-- 瀑布流 -->
    <view wx:if="{{datas.componentData.style==='waterfall'}}">
      <waterfall-flow
        generic:defaultCom="goods-item"
        id="waterfallFlow"
        note="{{datas.componentData.goodsList}}"
        datas="{{datas}}"
        padding="{{datas.componentData.proGap}}"
        wx:if="{{datas.componentData.goodsList}}"
        bindonLoad="onLoad"
        loading="{{loading}}"
        finished="{{finished}}"
      ></waterfall-flow>
    </view>
    <!-- 横向列表 -->
    <view
      class="goods goods-rowList"
      id="goods-rowList"
      wx:if="{{datas.componentData.style==='rowList'}}"
      style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
    >
      <view
        wx:for="{{pageGoodsList[datasIndex]}}"
        wx:key="index"
        class="goods-item"
        style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
      >
        <goods-item
          datas="{{datas}}"
          items="{{pageGoodsList[datasIndex][index]}}"
          indexs="{{index}}"
        ></goods-item>
      </view>
      <!-- 上拉加载底部展示 -->
      <view class="loadBottom" wx:if="{{datas.componentData.moreShow == false && datas.componentData.style == 'rowList'}}">
        <van-loading size="16px" wx:if="{{loading}}" color="#999"><text class="scrollLoadingText">加载中</text></van-loading>
        <text wx:elif="{{ finished}}">暂无更多</text>
      </view>
    </view>
    <!-- 堆叠卡片 -->
    <view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">
      <heap-item datas="{{datas}}"></heap-item>
    </view>
    <!-- 轮播滑动 -->
    <view wx:if="{{datas.componentData.style === 'swipe'}}" style="position:relative;">
      <swiper bindchange="handleSwipeChange">
        <block wx:for="{{swipeInfo}}">
          <swiper-item>
            <view style="display: grid;gap:{{datas.componentData.proGap*2}}rpx;grid-template-columns:repeat({{datas.componentData.columnNum}}, 1fr)">
              <view wx:for="{{item}}" wx:for-index="indey">
                <goods-item
                  datas="{{datas}}"
                  items="{{datas.componentData.goodsList[index * datas.componentData.columnNum + indey]}}"
                  indexs="{{index}}"
                ></goods-item>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <view class="flex custom-indicator">
        <block wx:for="{{swipeInfo}}">
          <view class="custom-indicator__item {{currentSwiperIndex === index && 'custom-indicator__active'}}"></view>
        </block>
      </view>
    </view>
    <view class="noGoods" wx:if="{{datas.componentData.goodsList.length == 0 && datas.componentData.filterComponentsFlag && !loading && datas.componentData.style != 'rowList'}}">
      <image mode="widthFix" src="https://cdn.mayi888.com/static/img/empty-goods.png"></image>
      没有找到商品
    </view>
    <view
      class="moreBottom"
      bindtap="viewMore"
      wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='bottom' && datas.componentData['goodsSource']!='assign' && datas.componentData['goodsSource']!='intelligenceRec' && !loading}}"
    >
      查看更多
      <text class="jt"></text>
    </view>
  </view>
</view>