You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
8.5 KiB
215 lines
8.5 KiB
<view class="container">
|
|
<!-- 顶部搜索区域容器 - 始终固定显示 -->
|
|
<view class="top-section-container">
|
|
|
|
<!-- 搜索区域 -->
|
|
<view class="search-section" style="height: 100rpx; display: block; box-sizing: border-box">
|
|
<view class="search-bar" style="width: 693rpx; display: flex; box-sizing: border-box; position: relative; left: 0rpx; top: 19rpx">
|
|
<view class="search-input-wrapper">
|
|
<!-- 搜索图标和输入框 -->
|
|
<text class="search-icon">🔍</text>
|
|
<input
|
|
class="search-input"
|
|
placeholder="搜索商品名称或地区"
|
|
placeholder-class="search-placeholder"
|
|
value="{{searchKeyword}}"
|
|
bindinput="onSearchInput"
|
|
/>
|
|
</view>
|
|
<view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 品种筛选区域 -->
|
|
<view class="category-section">
|
|
<view class="category-scroll">
|
|
<view
|
|
wx:for="{{categories}}"
|
|
wx:key="index"
|
|
class="egg-item {{selectedCategory === item ? 'active' : ''}}"
|
|
bindtap="selectCategory"
|
|
data-category="{{item}}"
|
|
>
|
|
<view class="egg-inner">{{item}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 地区选择器弹窗 -->
|
|
<view wx:if="{{showRegionPicker}}" class="region-picker-overlay" bindtap="toggleRegionPicker">
|
|
<view class="region-picker-container" catchtap="stopPropagation">
|
|
<view class="region-picker-title">选择地区</view>
|
|
<view class="region-list">
|
|
<view
|
|
wx:for="{{regions}}"
|
|
wx:key="index"
|
|
class="region-item {{selectedRegion === item ? 'active' : ''}}"
|
|
catchtap="selectRegion"
|
|
data-region="{{item}}"
|
|
>
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 侧边栏按钮 -->
|
|
<view
|
|
class="sidebar-btn {{sidebarBtnHidden ? 'hidden' : ''}}"
|
|
style="top: {{sidebarBtnTop}}rpx;"
|
|
bindtouchstart="handleTouchStart"
|
|
bindtouchmove="handleTouchMove"
|
|
bindtouchend="handleTouchEnd"
|
|
>
|
|
<!-- 侧边栏内容区域 -->
|
|
<view class="sidebar-btn-content" bindtap="toggleSidebar">
|
|
<text class="sidebar-text-black">招商</text>
|
|
<text class="sidebar-text-black">入驻</text>
|
|
</view>
|
|
|
|
<!-- 箭头按钮 -->
|
|
<view class="sidebar-arrow" bindtap="toggleSidebarBtn">
|
|
<text class="arrow-icon {{sidebarBtnHidden ? 'arrow-right' : 'arrow-left'}}">《</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品列表区域 -->
|
|
<view class="goods-section">
|
|
<scroll-view
|
|
class="goods-list"
|
|
id="goodsScrollView"
|
|
bindscrolltolower="onReachBottom"
|
|
bindscroll="onScroll"
|
|
scroll-y="true"
|
|
refresher-enabled="{{true}}"
|
|
refresher-triggered="{{isRefreshing}}"
|
|
refresher-default-style="black"
|
|
refresher-background="transparent"
|
|
bindrefresherrefresh="onPullDownRefresh"
|
|
bindrefresherrestore="onRestore"
|
|
>
|
|
<view class="goods-list-container">
|
|
<!-- 功能按钮区域 -->
|
|
<view class="function-buttons">
|
|
<view class="function-btn" bindtap="navigateToSettlement">
|
|
<text class="function-btn-icon">🏠</text>
|
|
<text class="function-btn-text">入驻</text>
|
|
</view>
|
|
<view class="function-btn" bindtap="navigateToCooperation">
|
|
<text class="function-btn-icon">📣</text>
|
|
<text class="function-btn-text">招商</text>
|
|
</view>
|
|
<view class="function-btn" bindtap="navigateToGoods">
|
|
<text class="function-btn-icon">📊</text>
|
|
<text class="function-btn-text">管理</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告走马灯轮播图 -->
|
|
<view class="ad-carousel">
|
|
<swiper
|
|
class="ad-swiper"
|
|
indicator-dots="{{true}}"
|
|
autoplay="{{true}}"
|
|
interval="3000"
|
|
duration="500"
|
|
circular="{{true}}"
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
indicator-active-color="#ffffff"
|
|
>
|
|
<swiper-item wx:for="{{adCarouselList}}" wx:key="index">
|
|
<image
|
|
class="ad-image"
|
|
src="{{item.imageUrl}}"
|
|
mode="aspectFill"
|
|
bindtap="onAdClick"
|
|
data-ad="{{item}}"
|
|
data-index="{{index}}"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 网格布局 -->
|
|
<view class="grid-container">
|
|
<view
|
|
class="grid-item"
|
|
wx:for="{{filteredGoods}}"
|
|
wx:key="id"
|
|
data-item="{{item}}"
|
|
bindtap="viewGoodsDetail"
|
|
wx:if="{{!item.isAd}}"
|
|
>
|
|
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
|
|
<view class="product-image-wrapper">
|
|
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
|
|
<video
|
|
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
|
|
class="product-media"
|
|
src="{{item.mediaItems[0].url}}"
|
|
mode="aspectFill"
|
|
show-center-play-btn="{{true}}"
|
|
show-play-btn="{{false}}"
|
|
controls="{{true}}"
|
|
autoplay="{{true}}"
|
|
loop="{{true}}"
|
|
muted="{{true}}"
|
|
poster=""
|
|
></video>
|
|
<!-- 图片处理 -->
|
|
<image
|
|
wx:else
|
|
class="product-media"
|
|
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : '/images/default-avatar.png'}}"
|
|
mode="aspectFill"
|
|
lazy-load="true"
|
|
bindload="onImageLoad"
|
|
data-index="{{index}}"
|
|
></image>
|
|
<view wx:if="{{item.supplyStatus === '预售' && item.status !== 'sold_out'}}" class="promo-tag presale">预售</view>
|
|
<view wx:if="{{item.supplyStatus === '现货' && item.status !== 'sold_out'}}" class="promo-tag in-stock">现货</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
|
|
</view>
|
|
<view class="product-info">
|
|
<view class="product-first-row">
|
|
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">
|
|
{{item.sourceType || ''}}
|
|
</view>
|
|
<text class="product-title {{item.isViewed ? 'viewed' : ''}}">{{item.name}}</text>
|
|
<text class="product-description {{item.isViewed ? 'viewed' : ''}}">{{item.description || ''}}</text>
|
|
</view>
|
|
<view class="product-stock-row">
|
|
<view wx:if="{{item.status !== 'sold_out'}}" class="status-tag item-count">库存：{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="status-tag item-count">已售：{{item.originalTotalStock || 0}}件</view>
|
|
</view>
|
|
<view class="product-meta">
|
|
<text class="sales-count">已有{{item.frequency || 0}}人浏览</text>
|
|
<text class="product-location">{{item.region || ''}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view wx:if="{{loadingMore}}" class="loading-more">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 无更多数据 -->
|
|
<view wx:if="{{!hasMoreData && filteredGoods.length > 0}}" class="no-more-data">
|
|
<text>货源正在快马加鞭的赶来</text>
|
|
</view>
|
|
|
|
<!-- 无商品时显示 -->
|
|
<view wx:if="{{filteredGoods.length === 0 && !isLoading}}" class="empty-goods">
|
|
<view class="empty-icon">📦</view>
|
|
<text class="empty-text">暂无商品数据</text>
|
|
<text class="empty-hint">下拉刷新试试</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|