seahorsesShop_miniapp/pages/index/index.wxml

<!--index.wxml-->
<view class="container" style="padding-top: {{pageTopHeight}}px;">
  <navbar>
    <view class="top-navbar-box" wx:if="{{gapTop==1}}" style="opacity: {{titleOpacity}};">
      <!-- <view class="shop-title">海马购</view> -->
      <view class="shop-info">
        <!-- <view>百货超市</view>| -->
        <view bindtap="toLocationPage" class="shop-address-info">
          <!-- <van-icon name="location-o" /> -->
          <image class="position-icon" src="../../images/icon/position.png" mode=""/>
          <!-- {{select_address||'选择定位'}} -->
          {{shopName||'附近暂无可配送门店'}}
        </view>
      </view>
    </view>
    <view wx:else>
      <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>
    </view>
  </navbar>
  <!-- 搜索框 -->
  <view class="search-box" id="my-element">
    <view class="search-input">
      <swiper vertical="true" circular="true" autoplay="true" interval="3000" class="search-swiper" bindtap="toSearchPage" bindchange="swiperChange">
        <swiper-item wx:for="{{hotList}}" wx:key="index">{{item.name}}</swiper-item>
      </swiper>
      <!-- <view class="search-line">|</view> -->
      <view class="search-text" bindtap="inputSearch">搜索</view>
    </view>
    <view class="top-share">
      <van-icon name="share" color="#fff" />
      <view class="share-text">分享</view>
      <button class="share-btn" open-type="share"></button>
    </view>
  </view>
  <view class="recommended-box">
    <scroll-view class="recommended-swiper" enhanced="true" show-scrollbar="false" scroll-x="true">
      <view class="recommended-text" wx:for="{{recommendedList}}" bindtap="recommendedSearch" data-name="{{item.name}}">
        {{item.name}}
      </view>
    </scroll-view>
  </view>
  <!-- 搜索框end -->
  <view class="bg-box">
    <image class="bg" src="{{imgUrl+swiperList[swiperCurrent].advertBack}}" mode=""/>
    <swiper indicator-dots="true" class="swiper-box" interval="3000" circular="true" indicator-active-color="#04358D" autoplay="true" bindchange="changeIndex">
      <swiper-item wx:for="{{swiperList}}"  wx:key="index" bindtap="goToLevelPage" data-name="{{item}}">
        <image class="block" src="{{imgUrl+item.advertImg}}" mode=""/>
      </swiper-item>
    </swiper>
    <view class="white-block"></view>
  </view>

  <!-- 板块 -->
  <view class="swiper-grid-box" wx:if="{{categoryList1.length>0}}">
  <view class="grid-box">
    <van-grid border="{{false}}" column-num="5">
          <van-grid-item class="my-grid-item" use-slot bind:click="selectMenu" wx:for="{{categoryList}}" wx:key="categoryId" data-pic="{{item.pic}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}">
            <image class="swiper-grid-image" src="{{item.icon}}" />
            <text class="swiper-grid-text">{{item.categoryName}}</text>
          </van-grid-item>
        </van-grid>
  </view>
    
    <swiper class="swiper-grid" indicator-dots="true" indicator-active-color="#04358D" bindchange="menuSwiper">
      <swiper-item wx:for="{{categoryList1}}" wx:key="index">
        <van-grid border="{{false}}" column-num="5">
          <van-grid-item class="my-grid-item" use-slot bind:click="selectMenu" wx:for="{{item}}" wx:key="categoryId" data-pic="{{item.pic}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}">
            <image class="swiper-grid-image" src="{{item.icon}}" />
            <text class="swiper-grid-text">{{item.categoryName}}</text>
          </van-grid-item>
        </van-grid>
      </swiper-item>
    </swiper>
  </view>
  <!-- 板块end -->

  <!-- 通知 广告 -->
  <view class="notice">
  <image class="icon" src="../../images/icon/notice-icon.png" mode=""/>
    【会员超福利】限时30元开卡红包好礼，速点>
  </view>

  <image class="adv adv1" src="../../images/imgs/adv1.png" mode=""/>
  

  <!-- 通知广告end -->


  <!-- <view class="bonus-box" wx:if="{{hotSalesList.length>0}}">
    <view class="content-bonus" bindtap="toRedPackage">
      <image style="width:36rpx;height: 36rpx;" src="/images/icon/redPack.png" mode="" />
      <view class="bonus-text">天天领红包</view>
    </view>
    <view class="content-bonus" bindtap='toCouponCenter'>
      <image style="width:36rpx;height: 36rpx;" src="/images/icon/ticket.png" mode="" />
      <view class="bonus-text">领券中心</view>
    </view>
  </view> -->
  <view class="seckill-box" wx:if="{{snapUpList.length>0}}">
  <!-- 秒杀 -->
    <view class="seckill-time">
      <view class="seckill-title">秒杀特卖</view>
      <view class="times">
        {{days<10?'0'+days:days}}天/{{hours<10?'0'+hours:hours}}:{{minutes<10?'0'+minutes:minutes}}:{{seconds<10?'0'+seconds:seconds}} </view>
          <image style="width:60rpx;height:60rpx;" src="/images/icon/seckill.png" mode="" />
      </view>
      <view class="seckill-content" wx:for="{{snapUpList}}" wx:key="index" bindtap="toSnapUpListPage" data-seckillid='{{item.seckillId}}'>
        <view class="seckill-product-box">
          <image style="width: 100rpx;height:100rpx;" src="{{item.pic}}" mode="widthFix" />
          <view class="seckill-Price">
            <image class="price-bg" style="width: 100rpx;" src="/images/icon/price_bg.png" mode="widthFix" />
            <view class="price-num">￥{{wxs.toPrice(item.seckillPrice)}}</view>
          </view>
        </view>
      </view>
      <view class="more-icon" bindtap="toSnapUpPage">
        <van-icon name="arrow" />
      </view>
    </view>
    <!-- 秒杀end -->
    <image class="adv adv2" src="../../images/imgs/adv2.png" mode=""/>

    <!-- 推荐 -->
    <!-- <view class="recommended-card" wx:if="{{newList.length>0}}">
      <view class="new-text">
        <view class="seckill-title new-text-two">新品推荐</view>
        <view class="times">鲜品速荐</view>
        <image style="width:60rpx;height:60rpx;" src="/images/icon/new.png" mode="" />
      </view>
      <view class="seckill-content" wx:for="{{newList}}" wx:key="index">
        <view class="seckill-product-box" bindtap="newToProdPage" data-prod="{{item.prodId}}">
          <image style="width: 100rpx;height:100rpx;" src="{{item.pic}}" />
          <view class="recommended-Price">￥{{item.price}}</view>
        </view>
      </view>
      <view class="more-icon" bindtap="toClassifyPage" data-sts="1">
        <van-icon name="arrow" />
      </view>
    </view> -->
    <!-- 推荐end -->

    <!-- 分类分页 -->
    <scroll-view class="tab-box" scroll-x="true" bounces="true" enhanced="true" show-scrollbar="false" style="width: 100%">
      <view id="demo1" class="tab {{active==1?'active':''}}" bindtap="handleTab" data-active="1">精选热卖</view>
      <view id="demo1" class="tab {{active==2?'active':''}}" bindtap="handleTab" data-active="2">疯狂折扣</view>
      <view id="demo1" class="tab {{active==3?'active':''}}" bindtap="handleTab" data-active="3">
        <image class="icon" src="../../images/imgs/chaozhi.png" alt=""/>
      </view>
      <view id="demo1" class="tab {{active==4?'active':''}}" bindtap="handleTab" data-active="4">地道特产</view>
      <view id="demo1" class="tab {{active==5?'active':''}}" bindtap="handleTab" data-active="5">预售</view>
    </scroll-view>

    <!-- 商城热卖 -->
    <view class="content" wx:if="{{hotSalesList.length>0}}">
      <view class="left">
        <view class="swiper-card-box" wx:if="{{banner_img.length>0}}">
          <!-- 轮播卡片 -->
          <swiper indicator-dots="true" class="swiper-card" circular="true" indicator-active-color="#04358D" autoplay="true">
            <swiper-item wx:for="{{banner_img}}" wx:key="index" bindtap="goToLevelPage" data-name="{{item.name}}">
              <image class="swiper-card-img" src="{{item.img}}" mode="" />
            </swiper-item>
          </swiper>
        </view>
        <block wx:for="{{hotSalesList}}" wx:key="index">
          <view wx:if="{{index%2==1}}">
            <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}">
              <image lazy-load class="item-img" src="{{item.pic}}" mode="widthFix"></image>
              <view class="item-title-box">
                <view class="item-title">{{item.prodName}}</view>
              </view>
              <view class="name">
                <view class="name-title">{{'已售'+item.salesVolume}}</view>
                <view class="heart">
                  <view class="name-price">
                    <view style="font-size:26rpx;color: #FF4D3A;">￥</view>{{wxs.toPrice(item.price)}}
                  </view>
                  <image style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode=""/>
                  <!-- <view class="stepper-box" wx:if="{{item.notData}}">
                    <view class="stepper-minus" catchtap="minusButton" data-item="{{item}}">-</view>
                    <view class="stepper-num">{{totalNum}}</view>
                    <view class="stepper-add" catchtap="addButton" data-item="{{item}}">+</view>
                  </view>
                  <image wx:else catchtap="addShopCar" data-shop="{{item}}" style="width: 50rpx;height: 50rpx;" src="/images/icon/shop-car.png" mode="" /> -->
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="right">
        <block wx:for="{{hotSalesList}}" wx:key="index">
          <view wx:if="{{index%2==0}}">
            <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}">
              <image class="item-img" lazy-load src="{{item.pic}}" mode="widthFix"></image>
              <view class="item-title-box">
                <view class="item-title">{{item.prodName}}</view>
              </view>
              <view class="name">
                <view class="name-title">{{'已售'+item.salesVolume}}</view>
                <view class="heart">
                  <view class="name-price">
                    <view style="font-size:26rpx;color: #FF4D3A;">￥</view>{{wxs.toPrice(item.price)}}
                  </view>
                  <image style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode=""/>
                  <!-- <view class="stepper-box" wx:if="{{item.notData}}">
                    <view class="stepper-minus" catchtap="minusButton">-</view>
                    <view class="stepper-num">1</view>
                    <view class="stepper-add" catchtap="addButton">+</view>
                  </view>
                  <image wx:else catchtap="addShopCar" data-shop="{{item}}" style="width: 50rpx;height: 50rpx;" src="/images/icon/shop-car.png" mode="" /> -->
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <block wx:else>
      <view style="height: 500rpx;">
        <van-empty image="search" description="附近暂无可配送门店" />
      </view>
      <view class="reset-localization" bindtap="toLocationPage">定位不准确？<text style="color: rgb(40,120,255);">点击手动定位</text></view>
    </block>
    <block wx:if="{{hotSalesList.length>0}}">
      <view class="tips" wx:if="{{isAll}}">已经到底咯~</view>
      <view class="loading-box" wx:else>
        <van-loading size="20px" type="spinner" color="#04358D">加载中...</van-loading>
      </view>
    </block>

    <van-popup show="{{ addCarshow }}" closeable round position="bottom" custom-style="height: 43%" bind:close="onClose">
      <view class="popup-box">
        <view class="popup-detail">
          <view class="popup-img-box">
            <image style="width: 200rpx;height: 200rpx;" src="{{shopDetail.pic}}" mode="" />
          </view>
          <view class="popup-shop-detail">
            <view class="shop-price"><text style="font-size:26rpx;">￥</text>{{wxs.toPrice(shopDetail.price)}}</view>
            <view class="shop-detail">
              <view class="shop-isselect">已选</view>
              <view class="shop-info">黑色，1件</view>
            </view>
          </view>
        </view>
        <view class="popup-line"></view>
        <view class="shop-color">
          <view class="color-text">颜色</view>
          <view class="color-btn-box">
            <view class="color-btn">黑色</view>
            <view class="color-btn">黑色</view>
            <view class="color-btn">黑色</view>
          </view>
        </view>
        <view class="popup-num-box">
          <view class="color-text">数量</view>
          <view class="stepper-box">
            <view class="stepper-minus">-</view>
            <view class="stepper-num">1</view>
            <view class="stepper-add">+</view>
          </view>
        </view>
      </view>
      <view class="bottom-button-box">
        <view class="bottom-button">选好了</view>
      </view>
    </van-popup>
  </view>
  <wxs module="wxs" src="../../wxs/number.wxs" />