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" 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='pic-box  {{selIndex==index?"active":""}}'>
            <view wx:if="{{item.children.length == 0}}" class='sell-out-box'>
                  <view class="sell-out-text">敬请期待</view>
                </view>
            <image class='icon {{selIndex==index?"active":""}}' src="{{imgUrl+item.icon}}" mode="" />
          </view>
          <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'>
        <view style="display: flex;flex-direction: column;align-items: center;">
          <view class='pic-box  {{selIndex==index?"active":""}}'>
              <view wx:if="{{item.children.length == 0}}" class='sell-out-box'>
                    <view class="sell-out-text">敬请期待</view>
                  </view>
              <image class='icon {{selIndex==index?"active":""}}' src="{{imgUrl+item.icon}}" mode="" />
            </view>
          <view class='name {{selIndex==index?"active":""}} '>
            {{item.categoryName}}
          </view>
        </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="{{item.icon}}" class="icon" src="{{item.icon}}" mode=""/>
        <image wx:elif="{{index == 0}}" class="icon" src="../../images/icon/good-icon.png" mode=""/>
        <image wx:elif="{{index == 1 || index ==4}}" class="icon" src="../../images/icon/hot-icon.png" mode=""/>
        <image wx:elif="{{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}}">
      <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 	upper-threshold="10" 	lower-threshold="10"  scroll-top="{{topHeight}}" bindscroll="scroll" bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom">
        <view style="height:20px"></view>
        <view class="product-item" id="{{'test'+index}}" data-index="{{index}}" wx:for="{{productList}}" data-prodId="{{item.prodId}}" data-shopId="{{item.shopId}}" bind:tap="toProdPage">
        <view class="pic-box">
          <image class="pic" src="{{item.pic}}" mode="" />
          <view class="sell-out" wx:if="{{item.totalStocks == 0}}">
            <view class="sell-out-text">已售罄</view>
          </view>
        </view>
          <view class="info">
            <view class="title" data-prodId="{{item.prodId}}"  data-shopId="{{item.shopId}}" 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}}" catch:tap="handleNum" src="/images/icon/reduce.png" mode=""/>
                <view class="num">{{item.prodCount}}</view>
              <image class="btn" data-num="1" data-item="{{item}}" data-type="add" catch:tap="handleNum" src="/images/icon/add.png" mode=""/>
              </view>
              <image wx:else class="test" style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode="" data-img="/images/icon/car-btn.png" data-type="add" data-num="1" data-item="{{item}}" data-index="{{index}}" catch:tap="handleNum" />
            </view>
          </view>
        </view>
        <view wx:if="{{subCategoryList.length!=0&&productList.length == 0}}">
          <van-empty image="error" description="暂无商品" />
        </view>
        <view class="none" wx:if="{{subCategoryList.length==0&&productList.length == 0}}">
          <van-empty image="/images/icon/none.png" description="敬请期待" />
        </view>
        <view wx:if="{{productList.length}}" 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">
                <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-type="add" data-item="{{item}}" bind:tap="handleNum" src="/images/icon/add.png" mode=""/>
              </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/basket-icon.png" mode="" />
      <view class="price-box">
          <view class="label">总计:</view>
          <!-- <view class="price">￥{{totalInfo.finalMoney}}</view> -->
          <view class='price'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{wxs.parsePrice(totalInfo.finalMoney)[0]}}</text>
							<text class='small-num'>.{{wxs.parsePrice(totalInfo.finalMoney)[1]}}</text>
						</view>
      </view>
    </view>

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


<!-- 抛物线动画容器（数据驱动渲染） -->
<view class="animation-wrap" id="animationWrap">
  <view class="{{move?'move-x':''}}" style="position:absolute;width: 50rpx;height: 50rpx;left:{{animateInfo.startX}}px;top:{{animateInfo.startY}}px;--endX: {{animateInfo.endX-animateInfo.startX}}px;--endY: {{animateInfo.endY-animateInfo.startY}}px;" bind:animationend="endAnimate" >
    <image 
      class="{{move?'move-y':''}}"
      src="/images/icon/car-btn.png"
      style="width: 40rpx;height: 40rpx;--endX: {{animateInfo.endX-animateInfo.startX}}px; --endY: {{animateInfo.endY-animateInfo.startY}}px;"
      bind:animationend="endAnimate"
    ></image>
  </view>
</view>
  

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