nova-trip/nova-tourism/pages/shop/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>
<view class="search">
  <van-search model:value="{{ value }}" placeholder="请输入搜索关键词" shape="round" bind:search="search" use-action-slot >
   <view slot="action" bind:tap="search" >搜索</view>
  </van-search>
</view>
<view class="store" date-store="{{store.objectId ? store.objectId : ''}}">
  <view class="cover" bind:tap="selectStore">
    <image src="{{store.cover ? store.cover : 'https://file-cloud.fmode.cn/sHNeVwSaAg/20220823/n1ei8h103147.png'}}" mode="aspectFill"></image>
  </view>
  <view class="storeInfo" bind:tap="selectStore">
    <view class="storeInfo_left">
      <view class="name">
        {{store.storeName ? store.storeName : '请选择店铺'}}
        <van-icon name="arrow" />
      </view>
      <view class="add">
        {{store.address ? store.address : '暂无店铺地址'}}
        <van-icon name="arrow" />
      </view>
    </view>
    <view class="storeInfo_right">
      <view class="mobile">
        <van-icon name="phone" />
        联系方式：{{store.mobile ? store.mobile : '暂无联系方式' }}
      </view>
      <view class="opening">
        <van-icon name="clock" />
        营业时间：{{store.workingTime ? store.workingTime : '暂未设置营业时间'}}
      </view>
    </view>
  
  </view>
  <view class="shopCart" bind:tap="checkCart">
    <image src="https://file-cloud.fmode.cn/sHNeVwSaAg/20220824/a18ee1095119.png" mode="aspectFill"></image>
    <view class="total" wx:if="{{shopCart.length > 0}}">{{shopCart.length}}</view>
  </view>
</view>
<!-- <view class="banner">
  <swiper class="swiper" indicator-dots="true" autoplay="true" circular="ture">
    <swiper-item wx:for="{{store.image}}" wx:key="index">
      <image src="{{item}}" class="slide-image" mode="aspectFill" />
    </swiper-item>
  </swiper>
</view> -->
<!-- 可视高度 - (nav栏 + docker条)- (搜索框 + hred元素 + tabs栏) - banners -->
<view class="cate_info" style="height:calc(100vh - {{2 * (customBarHeight + screenHeight - bottom) + 50 + 340 }}rpx); margin-top: 20rpx;">
  <view class="cate_container">
    <scroll-view class="left_menu" scroll-y style="height:calc(100vh - {{2 * (customBarHeight + screenHeight - bottom) + 50 + 340}}rpx)">
      <view class="left_content">
        <view class="left_item {{activeItem == 'all' ? 'active' : ''}}" data-id="all" bind:tap="changeCate">
          全部
        </view>
        <view class="left_item {{activeItem == item.objectId ? 'active' : ''}}" wx:for="{{category}}" wx:key="index" data-id="{{item.objectId}}" bind:tap="changeCate">
          {{item.name}}
        </view>
      </view>
    </scroll-view>
    <scroll-view class="right_list" scroll-y="{{true}}" scroll-top="{{scrollTop}}" style="height:calc(100vh - {{2 * (customBarHeight + screenHeight - bottom) + 50+ 340}}rpx)" bindscrolltolower="scrolltolower">
      <view class="loading" wx:if="{{loading}}">
        <van-loading type="spinner" size='60rpx' vertical>加载中...</van-loading>
      </view>
      <view class="right_content" wx:elif="{{goods &&  goods.length > 0}}">
        <block wx:for="{{goods}}" wx:key="index">
          <view class="title" wx:if="{{activeItem == 'all'}}">{{item.category.name}}</view>
          <view class="right_item" data-id="{{item.objectId}}">
            <image class="image" src="{{item.image}}" mode="aspectFill" />
            <view class="li_right">
              <view class="name">{{item.name}}</view>
              <view class="li_desc">{{item.desc ? item.desc : '暂无零食介绍~'}}</view>
              <view class="li_num">
                <view class="li_desc_row">销量 {{item.sales}}</view>
                <view class="li_desc_row" wx:if="{{!active}}">库存 {{item.total}}</view>
              </view>
              <view class="li_row">
                <view class="price">
                  ￥{{item.price}}
                  <view class="decoration">
                    {{item.originalPrice ? item.originalPrice : item.price}}
                  </view>
                </view>
                <view class="count">
                  <van-icon wx:if="{{!active && !item.total}}" color="#999" name="add" class="tag" bind:tap="onTips" />
                  <van-icon wx:else name="add" class="tag" data-index="{{index}}" bind:tap="addCount" />
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view wx:else>
        <van-empty description="暂无商品" />
      </view>
    </scroll-view>
  </view>
</view>
<!-- 购物车 -->
<van-popup show="{{ show }}" bind:close="onClose" round closeable close-icon-position="top-right" position="bottom" custom-style="height: 60%;">
  <view class="shopGoods">
    <view class="title" style="bottom:{{screenHeight - bottom }}px">购物车</view>
    <view class="loading" wx:if="{{cartLoading}}">
      <van-loading type="spinner" size='60rpx' vertical>加载中...</van-loading>
    </view>
    <block wx:if="{{shopCart.length > 0}}">
      <scroll-view scroll-y="{{true}}" style="height: 100% - 80rpx;padding-bottom: 200rpx;">
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" text="向右滑动删除商品即可移出购物车" />
        <view class="goods" wx:for="{{orderGoods}}" wx:key="index">
          <van-radio-group value="{{ radio }}" bind:change="onChange">
            <van-swipe-cell right-width="{{ 65 }}" data-index="{{index}}" data-id="{{item.objectId}}" async-close bind:close="delete">
              <view class="cart_info">
                <view class="left_info">
                  <radio class="radio" wx:if="{{!item.open}}" disabled color="#fd4441" />
                  <radio class="radio" bindtap="checkItem" wx:else data-index="{{index}}" checked="{{item.check}}" color="#fd4441" />
                  <view class="image_box">
                    <view class="open" wx:if="{{!item.open}}">该店铺库存不足</view>
                    <image class="image" src="{{item.image}}" mode="aspectFill" lazy-load="false" />
                  </view>
                </view>
                <view class="right_info">
                  <view class="title">{{item.name}}</view>
                  <view class="down_info">
                    <view class="price">￥{{item.totalPrice}}</view>
                    <van-stepper value="{{item.count}}" min="1" max="100" disable-input="true" input-class="ipt" data-index="{{index}}" bind:plus="plus" bind:minus="minus" bind:change="onChange" />
                  </view>
                </view>
              </view>
              <view slot="right" class="delete">删除</view>
            </van-swipe-cell>
          </van-radio-group>
        </view>
      </scroll-view>
      <view class="cart_down" style="--bottom:{{screenHeight - bottom }}px">
        <view class="cart_left">
          <label class="">
            <radio bindtap="checkAll" class="all_radio" checked="{{allCheck}}" color="#ef2a01" />
          </label>
          <view class="choose">全选</view>
        </view>
        <view class="cart_right">
          <view class="total_info">
            <view class="total_price">合计：￥{{totalPrice ? totalPrice : 0}}</view>
          </view>
          <button bindtap="{{totalPrice > 0 ? 'onDelete' : ''}}" class="button {{totalPrice > 0 ? 'actives' : ''}}">
            删除
          </button>
          <button bindtap="submit" class="button {{totalPrice > 0 ? 'active' : ''}}">结算</button>
        </view>
      </view>
    </block>
    <block wx:else>
      <van-empty description="购物车空空如也~" />
    </block>
  </view>
</van-popup>