nova-trip/nova-tourism/pages/gourmet/index.wxml

<nav type="title" background-color="#46a9a4" title="美食预定" frontColor="#ffffff" />
<view class="location">
    <view class="l_left">
        <van-icon name="https://cloud.file.futurestack.cn/F87DmDd4qN/20230327/1loeus105642.png" />
        阜康市
    </view>
    <view class="l_right">
        已有
        <span>5,666</span>
        人打卡自己自由之旅
    </view>
</view>
<van-search value="{{ value }}" placeholder="请输入搜索关键词" shape="round" use-action-slot bind:change="onChan" bind:blur="onClick"></van-search>
<!-- <view slot="action" bind:tap="onClick">搜索</view> -->
<swiper class="swiper" indicator-dots="true" autoplay="true" circular>
    <!-- <block wx:for="{{imgUrls}}"> -->
    <swiper-item wx:for="{{banners}}" wx:key="index">
        <image src="{{item.image}}" class="slide-image" />
    </swiper-item>
    <!-- </block> -->
</swiper>
<view class="tabs">
  <view class="navBar">
    <block wx:for="{{tabs}}" wx:key="item">
      <view data-index="{{index}}" class="navItem {{tabIndex == index ? 'active' : '' }}" bindtap="onTabClick">
        <view class="navItemIcon">
          <image src="{{item.icon}}" />
        </view>
        <view class="navItemTitle">{{item.title}}</view>
      </view>
    </block>
  </view>
  <view class="nav_content">
    <block wx:if="{{tabIndex == 0}}">
      <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
        <view class="kind">
          <view class="item">
            <image src="https://file-cloud.fmode.cn/sHNeVwSaAg/20230530/kq2o16044008604.png" />
            <view class="head-text">火锅类</view>
          </view>
          <view class="item">
            <image src="https://file-cloud.fmode.cn/sHNeVwSaAg/20230530/h51281044008796.png" />
            <view class="head-text">烧烤类</view>
          </view>
          <view class="item">
            <image src="https://file-cloud.fmode.cn/sHNeVwSaAg/20230530/g17fm1044008357.png" />
            <view class="head-text">炒菜类</view>
          </view>
        </view>
        <view class="box">
          <block wx:for="{{list}}" wx:key="index">
            <view class="recommended-box" bindtap="storepackage" data-item="{{item}}">
              <image class="recommended-image" src="{{item.cover}}" />
              <view class="recommended__box">
                <view class="recommended-name">{{item.storeName}}</view>
                <view class="recommended-score">
                  <van-icon name="https://file-cloud.fmode.cn/sHNeVwSaAg/20230602/cv1d8f031530864.png" />
                  <view class="score">评分:{{item.score}}分</view>
                  <view class="recommended-distance">{{item.distance}}km</view>
                </view>
                <view class="recommended-score">
                  <van-icon name="https://file-cloud.fmode.cn/sHNeVwSaAg/20230602/11pgj9031525427.png" />
                  <view class="recommended-address">{{item.storeAddress}}</view>
                </view>
                <view class="price">￥{{item.perCapita}}/人</view>
              </view>
              <button class="button_1">GO</button>
            </view>
          </block>
        </view>
      </scroll-view>
    </block>
    <block wx:if="{{tabIndex == 1}}">
      <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
        <view class="box">
          <block wx:for="{{list}}" wx:key="index">
            <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
              <image class="recommended-image" src="{{item.image[0]}}" />
              <view class="recommended__box">
                <view class="recommended-name">{{item.storeName}}</view>
                <view class="recommended-score">
                  <van-icon name="https://i.328888.xyz/2023/04/04/ibFrOJ.png" />
                  <view class="score">评分:{{item.score}}分</view>
                  <view class="recommended-distance">距离{{item.distance}}km</view>
                </view>
                <view class="recommended-score">
                  <van-icon name="https://cloud.file.futurestack.cn/F87DmDd4qN/20230327/1loeus105642.png" />
                  <view class="recommended-address">{{item.storeAddress}}</view>
                </view>
                <view class="price">￥{{item.perCapita}}/人</view>
              </view>
              <button class="button_1">GO</button>
            </view>
          </block>
        </view>
      </scroll-view>
    </block>
    <block wx:if="{{tabIndex == 2}}">
      <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
        <view class="box">
          <block wx:for="{{list}}" wx:key="index">
            <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
              <image class="recommended-image" src="{{item.image[0]}}" />
              <view class="recommended__box">
                <view class="recommended-name">{{item.storeName}}</view>
                <view class="recommended-score">
                  <van-icon name="https://i.328888.xyz/2023/04/04/ibFrOJ.png" />
                  <view class="score">评分:{{item.score}}分</view>
                  <view class="recommended-distance">距离{{item.distance}}km</view>
                </view>
                <view class="recommended-score">
                  <van-icon name="https://cloud.file.futurestack.cn/F87DmDd4qN/20230327/1loeus105642.png" />
                  <view class="recommended-address">{{item.storeAddress}}</view>
                </view>
                <view class="price">￥{{item.perCapita}}/人</view>
              </view>
              <button class="button_1">GO</button>
            </view>
          </block>
        </view>
      </scroll-view>
    </block>
    <block wx:if="{{tabIndex == 3}}">
      <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
        <view class="box">
          <block wx:for="{{list}}" wx:key="index">
            <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
              <image class="recommended-image" src="{{item.image[0]}}" />
              <view class="recommended__box">
                <view class="recommended-name">{{item.storeName}}</view>
                <view class="recommended-score">
                  <van-icon name="https://i.328888.xyz/2023/04/04/ibFrOJ.png" />
                  <view class="score">评分:{{item.score}}分</view>
                  <view class="recommended-distance">距离{{item.distance}}km</view>
                </view>
                <view class="recommended-score">
                  <van-icon name="https://cloud.file.futurestack.cn/F87DmDd4qN/20230327/1loeus105642.png" />
                  <view class="recommended-address">{{item.storeAddress}}</view>
                </view>
                <view class="price">￥{{item.perCapita}}/人</view>
              </view>
              <button class="button_1">GO</button>
            </view>
          </block>
        </view>
      </scroll-view>
    </block>
  </view>
</view>
<!-- <van-tabs active="{{ active }}" title-active-color="#3a3a3a" title-inactive-color="#a7a6a6" bind:change="onChange">
    <van-tab title="推荐">
        <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
            <view class="kind">
                <view class="item1">
                    <image src="https://i.328888.xyz/2023/04/03/iOKgfH.png" />
                    <view class="head-text">火锅类</view>
                </view>
                <view class="item2">
                    <image src="https://i.328888.xyz/2023/04/03/iOKxjQ.png" />
                    <view class="head-text">烧烤类</view>
                </view>
                <view class="item3">
                    <image src="https://i.328888.xyz/2023/04/03/iOKBoF.png" />
                    <view class="head-text">炒菜类</view>
                </view>
            </view>
            <view class="box">
                <block wx:for="{{list}}" wx:key="index">
                    <view class="recommended-box" bindtap="storepackage" data-item="{{item}}">
                        <image class="recommended-image" src="{{item.cover}}" />
                        <view class="recommended__box">
                            <view class="recommended-name">{{item.storeName}}</view>
                            <view class="recommended-score">
                                <van-icon name="https://i.328888.xyz/2023/04/04/ibFrOJ.png" />
                                <view class="score">评分:{{item.score}}分</view>
                                <view class="recommended-distance">{{item.distance}}km</view>
                            </view>
                            <view class="recommended-score">
                                <van-icon name="https://cloud.file.futurestack.cn/F87DmDd4qN/20230327/1loeus105642.png" />
                                <view class="recommended-address">{{item.storeAddress}}</view>
                            </view>
                             <view class="price">￥{{item.perCapita}}/人</view>
                        </view>
                        <button class="button_1">GO</button>
                    </view>
                </block>
            </view>
        </scroll-view>
    </van-tab>
    <van-tab title="评分"></van-tab>
    <van-tab title="距离"></van-tab>
    <van-tab title="价格"></van-tab>
    <van-tab title="评分" title-style="margin_left:-40rpx;display:block"></van-tab>
  <van-tab title="距离" title-style="margin_left:-40rpx;display:block"></van-tab>
  <van-tab title="价格" title-style="margin_left:-40rpx;display:block"></van-tab>
</van-tabs> -->
<!-- <van-tabs id="show" wx:if="{{showTab}}" active="{{ active }}" bind:change="onChange" color="#46a9a4" nav-class="tab_title">
    <van-tab title="推荐">
        <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
            <view class="box">
                <block wx:for="{{list}}" wx:key="index">
                    <view class="recommended-box" bindtap="storepackage" data-item="{{item}}">
                        <image class="recommended-image" src="{{item.cover}}" />
                        <view class="recommended-name">{{item.storeName}}</view>
                        <view class="recommended-score">
                            <view class="score">{{item.score}}分</view>
                                <view class="price">￥{{item.perCapita}}/人</view>
                        </view>
                        <view class="recommended-score">
                            <view class="recommended-address">{{item.storeAddress}}</view>
                        </view>
                        <view class="recommended-distance">距离{{item.distance}}km</view>
                    </view>
                </block>
            </view>
        </scroll-view>
    </van-tab>
    <van-tab title="评分">
        <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
            <view class="box">
                <block wx:for="{{list}}" wx:key="index">
                    <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
                        <image class="recommended-image" src="{{item.image[0]}}" />
                        <view class="recommended-name">{{item.storeName}}</view>
                        <view class="recommended-score">
                            <view class="score">{{item.score}}分</view>
                               <view class="price">￥{{item.perCapita}}/人</view>
                        </view>
                        <view class="recommended-score">
                            <view class="recommended-address">{{item.storeAddress}}</view>
                        </view>
                        <view class="recommended-distance">距离{{item.distance}}km</view>
                    </view>
                </block>
            </view>
        </scroll-view>
    </van-tab>
    <van-tab title="距离">
        <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
            <view class="box">
                <block wx:for="{{list}}" wx:key="index">
                    <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
                        <image class="recommended-image" src="{{item.image[0]}}" />
                        <view class="recommended-name">{{item.storeName}}</view>
                        <view class="recommended-score">
                            <view class="score">{{item.score}}分</view>
                               <view class="price">￥{{item.perCapita}}/人</view>
                        </view>
                        <view class="recommended-score">
                            <view class="recommended-address">{{item.storeAddress}}</view>
                        </view>
                        <view class="recommended-distance">距离{{item.distance}}km</view>
                    </view>
                </block>
            </view>
        </scroll-view>
    </van-tab>
    <van-tab title="价格">
        <scroll-view style="height:calc(100vh - {{stickytop+ 148}}px);" scroll-y="{{true}}">
            <view class="box">
                <block wx:for="{{list}}" wx:key="index">
                    <view class="recommended-box" data-item="{{item}}" bindtap="storepackage">
                        <image class="recommended-image" src="{{item.image[0]}}" />
                        <view class="recommended-name">{{item.storeName}}</view>
                        <view class="recommended-score">
                            <view class="score">{{item.score}}分</view>
                              <view class="price">￥{{item.perCapita}}/人</view>
                        </view>
                    
                        <view class="recommended-score">
                            <view class="recommended-address">{{item.storeAddress}}</view>
                        </view>
                        <view class="recommended-distance">距离{{item.distance}}km</view>
                    </view>
                </block>
            </view>
        </scroll-view>
    </van-tab>
</van-tabs>
<block wx:for="{{list}}" wx:key="index">
    <view class="store" bindtap="storepackage">
        <view class="stores">
            <image class="store-image" src="{{item.image[0]}}" />
            <view class="store-box">
                <view class="box-name">{{item.storeName}}</view>
                <view class="price">￥{{item.perCapita}}/人</view>
                <view class="address">{{item.storeAddress}}</view>
            </view>
        </view>
        <view class="box-evaluation">
            <view class="store-evaluation">
                <van-rate readonly value="{{ item.score }}" allow-half void-icon="star" size="{{ 15 }}" void-color="#eee" color="#ffd21e" />
                <view class="evaluation">{{item.score}}</view>
            </view>
            <view class="sold">季售 {{item.sold?item.sold:'0'}}</view>
        </view>
    </view>
</block> -->