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.
464 lines
18 KiB
464 lines
18 KiB
<view class="container">
|
|
<!-- 顶部搜索区域容器 - 始终固定显示 -->
|
|
<view class="top-section-container">
|
|
<!-- 标题 -->
|
|
<view class="title">专业的鸡蛋交易平台</view>
|
|
|
|
<!-- 搜索区域 -->
|
|
<view class="search-section">
|
|
<view class="search-bar" style="width: 693rpx; display: flex; box-sizing: border-box">
|
|
<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>
|
|
|
|
<!-- 地区选择器弹窗 -->
|
|
<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="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
|
|
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 wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
|
|
|
|
<!-- 高级筛选弹出层 -->
|
|
<view wx:if="{{showAdvancedFilter}}" class="sidebar-overlay" bindtap="closeAdvancedFilter"></view>
|
|
|
|
<!-- 回到顶部按钮 -->
|
|
<view
|
|
class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}"
|
|
bindtap="scrollToTop"
|
|
>
|
|
<text class="back-to-top-text">top</text>
|
|
</view>
|
|
<view wx:if="{{showSidebar}}" class="sidebar">
|
|
<view class="sidebar-title">招商合作</view>
|
|
<view class="sidebar-menu">
|
|
<view class="sidebar-item" bindtap="navigateToSettlement">
|
|
<text class="sidebar-item-icon">🏠</text>
|
|
<text class="sidebar-item-text">我要卖蛋</text>
|
|
</view>
|
|
<view class="sidebar-item" bindtap="navigateToCooperation">
|
|
<text class="sidebar-item-icon">📢</text>
|
|
<text class="sidebar-item-text">招商合作</text>
|
|
</view>
|
|
<view wx:if="{{hasGoodsManagePermission}}" class="sidebar-item" bindtap="navigateToGoods">
|
|
<text class="sidebar-item-icon">📦</text>
|
|
<text class="sidebar-item-text">货源管理</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 高级筛选底部弹出层 -->
|
|
<view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">
|
|
<view class="sidebar-title">高级筛选</view>
|
|
|
|
<!-- 地区选择筛选 - 自定义下拉菜单 -->
|
|
<view class="filter-section">
|
|
<view class="filter-title">地区</view>
|
|
<view class="custom-picker">
|
|
<view
|
|
class="custom-picker-trigger"
|
|
bindtap="toggleRegionPicker"
|
|
>
|
|
{{advancedFilters.region === 'all' ? '全国' : advancedFilters.region}}
|
|
<text class="custom-picker-arrow {{showAdvancedRegionPicker ? 'rotate' : ''}}">▼</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{showAdvancedRegionPicker}}"
|
|
class="custom-picker-options"
|
|
>
|
|
<view
|
|
wx:for="{{regionOptions}}"
|
|
wx:key="index"
|
|
class="custom-picker-option {{advancedFilters.region === item.value ? 'active' : ''}}"
|
|
bindtap="selectRegion"
|
|
data-region="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 蛋壳颜色筛选 - 自定义下拉菜单 -->
|
|
<view class="filter-section">
|
|
<view class="filter-title">蛋壳颜色</view>
|
|
<view class="custom-picker">
|
|
<view
|
|
class="custom-picker-trigger"
|
|
bindtap="toggleShellColorPicker"
|
|
>
|
|
{{advancedFilters.shellColor === 'all' ? '全部颜色' : advancedFilters.shellColor}}
|
|
<text class="custom-picker-arrow {{showShellColorPicker ? 'rotate' : ''}}">▼</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{showShellColorPicker}}"
|
|
class="custom-picker-options"
|
|
>
|
|
<view
|
|
wx:for="{{shellColorOptions}}"
|
|
wx:key="index"
|
|
class="custom-picker-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
|
|
bindtap="selectShellColor"
|
|
data-color="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品名称筛选 - 自定义下拉菜单 -->
|
|
<view class="filter-section">
|
|
<view class="filter-title">商品名称</view>
|
|
<view class="custom-picker">
|
|
<view
|
|
class="custom-picker-trigger"
|
|
bindtap="toggleProductNamePicker"
|
|
>
|
|
{{advancedFilters.productName === 'all' ? '全部商品' : advancedFilters.productName}}
|
|
<text class="custom-picker-arrow {{showProductNamePicker ? 'rotate' : ''}}">▼</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{showProductNamePicker}}"
|
|
class="custom-picker-options"
|
|
>
|
|
<view
|
|
wx:for="{{productNameOptions}}"
|
|
wx:key="index"
|
|
class="custom-picker-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
|
|
bindtap="selectProductName"
|
|
data-name="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规格筛选 - 自定义下拉菜单 -->
|
|
<view class="filter-section">
|
|
<view class="filter-title">规格</view>
|
|
<view class="custom-picker">
|
|
<view
|
|
class="custom-picker-trigger"
|
|
bindtap="toggleSpecificationPicker"
|
|
>
|
|
{{advancedFilters.specification === 'all' ? '全部规格' : advancedFilters.specification}}
|
|
<text class="custom-picker-arrow {{showSpecificationPicker ? 'rotate' : ''}}">▼</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{showSpecificationPicker}}"
|
|
class="custom-picker-options"
|
|
>
|
|
<view
|
|
wx:for="{{specificationOptions}}"
|
|
wx:key="index"
|
|
class="custom-picker-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
|
|
bindtap="selectSpecification"
|
|
data-spec="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 蛋黄类型筛选 - 自定义下拉菜单 -->
|
|
<view class="filter-section">
|
|
<view class="filter-title">蛋黄类型</view>
|
|
<view class="custom-picker">
|
|
<view
|
|
class="custom-picker-trigger"
|
|
bindtap="toggleYolkTypePicker"
|
|
>
|
|
{{advancedFilters.yolkType === 'all' ? '全部蛋黄' : advancedFilters.yolkType}}
|
|
<text class="custom-picker-arrow {{showYolkTypePicker ? 'rotate' : ''}}">▼</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{showYolkTypePicker}}"
|
|
class="custom-picker-options"
|
|
>
|
|
<view
|
|
wx:for="{{yolkTypeOptions}}"
|
|
wx:key="index"
|
|
class="custom-picker-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
|
|
bindtap="selectYolkType"
|
|
data-yolk="{{item.value}}"
|
|
>
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="filter-actions">
|
|
<view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>
|
|
<view class="filter-action-btn apply" bindtap="applyAdvancedFilter">应用</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 骨架屏加载 - 只在初始加载时显示，筛选时不显示 -->
|
|
<view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
|
|
<view class="skeleton-grid">
|
|
<view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
|
|
<view class="skeleton-image"></view>
|
|
<view class="skeleton-title"></view>
|
|
<view class="skeleton-title short"></view>
|
|
<view class="skeleton-footer">
|
|
<view class="skeleton-price"></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="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 wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay"></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}}"
|
|
object-fit="fill"
|
|
poster=""
|
|
style="height: 270rpx; display: block; box-sizing: border-box; width: 337rpx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
|
|
</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}}"
|
|
style="height: 270rpx; display: block; box-sizing: border-box; width: 337rpx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;"></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" style="height: 190rpx; display: flex; box-sizing: border-box">
|
|
<view class="product-title" style="height: 38rpx; display: -webkit-box; box-sizing: border-box">{{item.name}}</view>
|
|
<view class="product-spec" style="width: 308rpx; height: 29rpx; display: block; box-sizing: border-box">{{item.displaySpecification}}<text wx:if="{{item.displayYolk}}"> | {{item.displayYolk}}</text></view>
|
|
<view class="product-status-row" style="width: 339rpx; display: block; box-sizing: border-box; height: 60rpx; left: -10rpx; top: 0rpx">
|
|
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
|
|
<view wx:if="{{item.status !== 'sold_out'}}" class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}" style="width: 70rpx; display: inline-block; box-sizing: border-box">{{item.negotiateStatus}}</view>
|
|
<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 wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
|
|
<view class="auth-modal-container">
|
|
<view class="auth-modal-title">授权登录</view>
|
|
<view class="auth-modal-content">授权您的手机号后才能查看商品详情</view>
|
|
<view class="auth-modal-buttons">
|
|
<button
|
|
class="auth-primary-button"
|
|
open-type="getPhoneNumber"
|
|
bindgetphonenumber="onPhoneNumberResult"
|
|
>
|
|
授权手机号
|
|
</button>
|
|
<button
|
|
class="auth-cancel-button"
|
|
bindtap="closeOneKeyLoginModal"
|
|
>
|
|
取消
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 用户信息填写弹窗 -->
|
|
<view wx:if="{{showUserInfoForm}}" class="modal-overlay">
|
|
<view class="modal-container">
|
|
<view class="modal-title">
|
|
<text>完善个人信息</text>
|
|
</view>
|
|
|
|
<!-- 头像选择 -->
|
|
<view class="avatar-section">
|
|
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
|
<image class="avatar" src="{{avatarUrl}}"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 昵称输入 -->
|
|
<form bindsubmit="getUserName">
|
|
<view class="form-group">
|
|
<view class="form-label">昵称</view>
|
|
<input placeholder="请输入昵称" type="nickname" name="name" maxlength="32" class="form-input"></input>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="form-actions">
|
|
<button form-type="submit" class="confirm-button">确定</button>
|
|
</view>
|
|
</form>
|
|
|
|
<!-- 取消按钮 -->
|
|
<view class="modal-buttons">
|
|
<button class="cancel-button" bindtap="cancelUserInfoForm">取消</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图片预览弹窗 -->
|
|
<view wx:if="{{showImagePreview}}" class="image-preview-mask" catchtouchmove="true" bindtap="closeImagePreview">
|
|
<swiper
|
|
class="image-preview-swiper"
|
|
current="{{previewImageIndex}}"
|
|
bindchange="onPreviewImageChange"
|
|
indicator-dots="true"
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
indicator-active-color="#fff"
|
|
autoplay="false"
|
|
duration="300"
|
|
>
|
|
<block wx:for="{{previewImageUrls}}" wx:key="*this">
|
|
<swiper-item>
|
|
<image
|
|
class="preview-image"
|
|
src="{{item}}"
|
|
mode="aspectFit"
|
|
bindtap="closeImagePreview"
|
|
></image>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<view class="image-preview-close" bindtap="closeImagePreview">
|
|
<text class="close-icon">✕</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|