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.
303 lines
12 KiB
303 lines
12 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 wx:if="{{showAdvancedFilter}}" class="advanced-filter-overlay" bindtap="closeAdvancedFilter">
|
|
<view class="advanced-filter-container" catchtap="stopPropagation">
|
|
<!-- 筛选标题 -->
|
|
<view class="advanced-filter-header">
|
|
<text class="advanced-filter-title">高级筛选</text>
|
|
<view class="advanced-filter-actions">
|
|
<text class="reset-btn" bindtap="resetAdvancedFilter">重置</text>
|
|
<text class="confirm-btn" bindtap="applyAdvancedFilter">确定</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选内容区域 - 底部弹出式布局 -->
|
|
<view class="advanced-filter-content">
|
|
<!-- 左侧筛选分类列表 -->
|
|
<view class="filter-category-list">
|
|
<view
|
|
wx:for="{{filterCategories}}"
|
|
wx:key="value"
|
|
class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
|
|
bindtap="selectFilterCategory"
|
|
data-category="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧筛选选项区域 -->
|
|
<view class="filter-options-list">
|
|
<!-- 地区筛选 -->
|
|
<view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-options">
|
|
<view
|
|
wx:for="{{regionOptions}}"
|
|
wx:key="value"
|
|
class="filter-option-item {{advancedFilters.region === item.value ? 'active' : ''}}"
|
|
catchtap="selectAdvancedRegion"
|
|
data-region="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 蛋壳颜色筛选 -->
|
|
<view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-options">
|
|
<view
|
|
wx:for="{{shellColorOptions}}"
|
|
wx:key="value"
|
|
class="filter-option-item {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
|
|
catchtap="selectShellColor"
|
|
data-color="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品名称筛选 -->
|
|
<view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-options">
|
|
<view
|
|
wx:for="{{productNameOptions}}"
|
|
wx:key="value"
|
|
class="filter-option-item {{advancedFilters.productName === item.value ? 'active' : ''}}"
|
|
catchtap="selectProductName"
|
|
data-name="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规格筛选 -->
|
|
<view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-options specification-options">
|
|
<view
|
|
wx:for="{{specificationOptions}}"
|
|
wx:key="value"
|
|
class="filter-option-item {{advancedFilters.specification === item.value ? 'active' : ''}}"
|
|
catchtap="selectSpecification"
|
|
data-spec="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 蛋黄类型筛选 -->
|
|
<view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-options">
|
|
<view
|
|
wx:for="{{yolkTypeOptions}}"
|
|
wx:key="value"
|
|
class="filter-option-item {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
|
|
catchtap="selectYolkType"
|
|
data-yolk="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品列表区域 -->
|
|
<view class="goods-section">
|
|
<scroll-view
|
|
class="goods-list"
|
|
id="goodsScrollView"
|
|
bindscrolltolower="onReachBottom"
|
|
bindscroll="onScroll"
|
|
scroll-y="true"
|
|
scroll-top="{{scrollTop}}"
|
|
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="navigateToCooperation">
|
|
<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' : ''}}" style="position: relative;">
|
|
<!-- 售空商品白色覆盖层 - 覆盖整个卡片 -->
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
|
|
<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
|
|
class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}"
|
|
bindtap="scrollToTop"
|
|
>
|
|
<text class="back-to-top-text">top</text>
|
|
</view>
|
|
</view>
|
|
</view>
|