gather/pages/category/category.wxml

<!--pages/category/category.wxml-->
<view class="container" style="padding-top: {{pageTopHeight}}px;">
  <!-- 头部搜索区 -->
  <navbar>
    <view class="top-search-input">
      <swiper vertical="true" circular="true" autoplay="true" interval="3000" class="top-search-swiper" bindtap="toSearchPage" bindchange="topSwiperChange">
        <swiper-item wx:for="{{hotList}}" wx:key="index">{{item.name}}</swiper-item>
      </swiper>
      <view class="top-search-line">|</view>
      <view class="top-search-text" bindtap="topHotSearch">搜索</view>
    </view>
  </navbar>

  <!-- 全部分类弹窗 -->
  <van-popup show="{{ show }}" position="top" close-on-click-overlay="{{false}}" z-index="{{99999}}" round bind:close="onClose">
    <view class="popup-box" style="padding-top: {{pageTopHeight}}px;">
      <!-- 搜索 -->
      <navbar>
        <view class="top-search-input">
          <swiper vertical="true" circular="true" autoplay="true" interval="3000" class="top-search-swiper" bindtap="toSearchPage" bindchange="topSwiperChange">
            <swiper-item wx:for="{{hotList}}" wx:key="index">{{item.name}}</swiper-item>
          </swiper>
          <view class="top-search-line">|</view>
          <view class="top-search-text" bindtap="topHotSearch">搜索</view>
        </view>
      </navbar>
      <!-- 分类 -->
      <view class="top-box top-all-box">
        <view wx:for='{{categoryList}}' class="type-item" wx:key='categoryId' data-index="{{index}}" data-id="{{item.categoryId}}" bindtap='onMenuTab'>
          <!-- <view class="icon"></view> -->
          <image class='icon {{selIndex==index?"active":""}}' src="{{imgUrl+item.icon}}" mode="" />
          <view class='name {{selIndex==index?"active":""}} '>
            {{item.categoryName}}
          </view>
        </view>
        <view wx:if="{{5-(categoryList.length%5) >0}}" style="width: 100rpx;height: 100rpx;"></view>
        <view wx:if="{{5-(categoryList.length%5) >1}}" style="width: 100rpx;height: 100rpx;"></view>
        <view wx:if="{{5-(categoryList.length%5) >2}}" style="width: 100rpx;height: 100rpx;"></view>
        <view wx:if="{{5-(categoryList.length%5) >3}}" style="width: 100rpx;height: 100rpx;"></view>
      </view>

      <view class="close-box" bind:tap="onClose">
        点击收起
        <image class="icon" src="../../images/icon/more-icon.png" mode="" />
      </view>
    </view>
  </van-popup>

  <!-- 顶部滚动分类 -->
  <view class="top-content">
    <scroll-view scroll-x="true" class='top-box' 	scroll-into-view-offset="-150" 	scroll-with-animation		enable-passive scroll-into-view="{{'item'+selCategory}}">
      <view wx:for='{{categoryList}}' id="{{'item'+item.categoryId}}" class="type-item" wx:key='{{item.categoryId}}' data-index="{{index}}" data-id="{{item.categoryId}}" bindtap='onMenuTab'>
        <image class='icon {{selIndex==index?"active":""}}' src="{{imgUrl+item.icon}}" mode="" />
        <view class='name {{selIndex==index?"active":""}} '>
          {{item.categoryName}}
        </view>
      </view>
      <view class="type-item" style="width: 100rpx;height: 44rpx"></view>

    </scroll-view>
    <view wx:if="{{categoryList.length}}" class="all" bind:tap="handleAll">展开
      <image class="icon" src="../../images/icon/more-icon.png" mode="" />
    </view>
  </view>



  <!-- 滚动内容区 -->
  <view class="main" wx:if="{{categoryList.length>0}}">
    <!-- 左侧菜单start -->
    <!-- <scroll-view scroll-y="true" class='leftmenu'  scroll-into-view="{{'item'+subIndex}}"> -->
    <scroll-view scroll-y="true" class='leftmenu' >
      <view wx:for='{{subCategoryList}}' id="{{'item'+index}}" wx:key='categoryId'>
        <view class='menu-item {{subIndex==index?"active":""}} ' data-index="{{index}}" data-id="{{item.categoryId}}" bindtap='onleftMenuTab'>
        <image wx:if="{{index == 0}}" class="icon" src="../../images/icon/good-icon.png" mode=""/>
        <image wx:if="{{index == 1 || index ==4}}" class="icon" src="../../images/icon/hot-icon.png" mode=""/>
        <image wx:if="{{index == 5}}" class="icon" src="../../images/icon/new-icon.png" mode=""/>
          {{item.categoryName}}
        </view>
      </view>
        <view style="height: 200rpx;"></view>
    </scroll-view>
    <!-- 左侧菜单end -->

    <!-- 右侧内容start -->
    <!-- scroll-view  -->
    <view scroll-y="true" class='rightcontent' 	enable-passive scroll-into-view="{{rightView}}"	upper-threshold="10" 	lower-threshold="10"  scroll-top="{{topHeight}}" bindscroll="scroll"bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom">
      <image class="banner" src="../../images/imgs/banner.png" mode="" />
      <!-- <text wx:if="{{subCategoryList.length>0}}" class="sub-title" >{{subCategoryList[subIndex].categoryName}}</text> -->
    <view class="loading" wx:if="{{showLoading}}">
      <!-- <van-icon class="icon" color="#006CE8" size="50rpx" name="replay" /> -->
      <image class="icon" src="../../images/imgs/loading-icon.png" mode=""/>
    </view>
      <view class="right-top-box">
        <view class="thrid-type-box" wx:if="{{thridCategoryList.length>0}}">
          <view class='thrid-type-item {{thridIndex==-1?"active":""}}' data-index="-1" bind:tap="handleThrid">全部</view>
          <view class='thrid-type-item {{thridIndex==index?"active":""}}' data-index="{{index}}" data-categoryId="{{item.categoryId}}" wx:for="{{thridCategoryList}}" bind:tap="handleThrid">{{item.categoryName}}</view>
        </view>
        <view class="filter-box">
          <view class="filter-item {{sort == 1 ?'active':''}}" bind:tap="handleSale">销量</view>
          <view class="filter-item" bind:tap="handlePrice">价格 
            <!-- <view class="icon-box"> 
              <van-icon class="down" size="20rpx" color="{{sort ==2? '#006CE8':'#AAAAAA'}}" name="play" />
              <van-icon class="up" size="20rpx" color="{{sort ==3? '#006CE8':'#AAAAAA'}}" name="play" />
            </view>  -->
            <image wx:if="{{sort == 0}}" class="icon" src="../../images/icon/sort1.png" mode=""/>
            <image wx:else class="icon" src="{{sort ==2?'../../images/icon/sort2.png':'../../images/icon/sort3.png'}}" mode=""/>
          </view>
        </view>
      </view>
      <scroll-view class="right-box"  scroll-y="true" 	enable-passive scroll-into-view="{{rightView}}"	upper-threshold="10" 	lower-threshold="10"  scroll-top="{{topHeight}}" bindscroll="scroll"bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom">
        <view class="product-item" id="{{'test'+index}}" wx:for="{{productList}}">
          <image class="pic" src="{{item.pic}}" mode="" data-prodId="{{item.prodId}}" bind:tap="toProdPage" />
          <view class="info">
            <view class="title" data-prodId="{{item.prodId}}" bind:tap="toProdPage">{{item.prodName}}</view>
              <view class="salesVolume">已售{{item.salesVolume||0}}</view>
            <view class="price-box">
              <view class="price">￥{{item.price}}</view>
              <view wx:if="{{item.show}}" class="num-box">
              <image class="btn" data-num="-1" data-item="{{item}}" bind:tap="handleNum" src="/images/icon/reduce.png" mode=""/>
                <view class="num">{{item.prodCount}}</view>
              <image class="btn" data-num="1" data-item="{{item}}" bind:tap="handleNum" src="/images/icon/add.png" mode=""/>
              </view>
              <image wx:else style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode="" data-num="1" data-item="{{item}}" bind:tap="handleNum" />
            </view>
          </view>
        </view>
        <view wx:if="{{subCategoryList.length!=0&&productList.length == 0}}">
          <van-empty image="error" description="暂无商品" />
        </view>
        <view id="empty" class="block" style="height: 90vh;">
        </view>
        <view class="sub-cate-title not-category-data" wx:if="{{subCategoryList.length==0}}">
          <view class="sub-cate-text">无二级分类</view>
        </view>
      </scroll-view>
    </view>
    <!-- 右侧内容end -->
  </view>
  <view class="not-data-list" wx:else>
    <van-empty image="search" description="附近暂无可配送门店" />
    <!-- <view class="reset-localization" bindtap="toLocationPage">定位不准确？<text style="color: rgb(40,120,255);">点击手动定位</text></view> -->
  </view>

  <!-- 购物车弹窗 -->
  <van-popup show="{{ showCar }}" position="bottom" safe-area-tab-bar safe-area-inset-bottom close-on-click-overlay="{{true}}" z-index="{{99999}}" round bind:close="onCarClose">
    <view class="car-box">
      <view wx:if="{{carData.length}}">
        <view class="item" wx:for="{{carData}}">
          <image class="img" src="{{item.pic}}" mode="" />
          <view class="info">
            <view class="title">{{item.prodName}}</view>
            <view class="desc">规格：{{item.weight}}{{item.weightUnit}}</view>
            <view class="price-box">
              <view class="price">
                <view class="unit">￥</view>
                <view class="num">{{item.price}}</view>
              </view>
              <view class="num-box">
                <view class="btn" data-num="-1" data-item="{{item}}" bind:tap="handleNum">-</view>
                <view class="num">{{item.prodCount}}</view>
                <view class="btn" data-num="1" data-item="{{item}}" bind:tap="handleNum">+</view>
              </view>

            </view>
          </view>
        </view>
      </view>
      <!-- 空 -->
      <view class="empty" wx:else="{{!carData.length}}">
        <view class="empty-icon">
          <image src="../../images/icon/empty-basket.png"></image>
        </view>
        <view class="empty-text">您还没有添加商品到购物车哦~</view>
      </view>
    </view>
    

  </van-popup>

  <view class="bottom-box">
    <view class="left" bindtap="openCar">
      <view class="num" wx:if="{{totalInfo.count}}">{{totalInfo.count}}</view>
      <image class="icon" src="../../images/icon/car-icon.png" mode="" />
      <view class="price-box">
        <view class="top">
          <view class="price">￥{{totalInfo.finalMoney}}</view>
          <view class="reduce-price">共减￥{{totalInfo.subtractMoney}}</view>
        </view>
        <view class="shipping-fee">配送费￥0</view>
      </view>
    </view>

    <view class="btn" bind:tap="handleBuy">去结算</view>
  </view>
  <tabbar active="1"></tabbar>

</view>
<wxs module="wxs" src="../../wxs/number.wxs" />