|
|
|
@ -1,27 +1,71 @@ |
|
|
|
<view class="container"> |
|
|
|
<!-- 标题 --> |
|
|
|
<view class="title">专业的鸡蛋现货交易平台</view> |
|
|
|
|
|
|
|
<!-- 搜索区域 --> |
|
|
|
<view class="search-section"> |
|
|
|
<view class="search-bar"> |
|
|
|
<view class="search-input-wrapper"> |
|
|
|
<!-- 将地区选择器放在最左边 --> |
|
|
|
<view class="region-selector" bindtap="toggleRegionPicker"> |
|
|
|
<text>{{selectedRegion || '全国'}}</text> |
|
|
|
<text class="region-arrow">▼</text> |
|
|
|
<!-- 导航栏区域,根据showNavBar状态控制显示/隐藏 --> |
|
|
|
<view wx:if="{{showNavBar}}" class="nav-bar"> |
|
|
|
<!-- 标题 --> |
|
|
|
<view class="title">专业的鸡蛋现货交易平台</view> |
|
|
|
|
|
|
|
<!-- 搜索区域 --> |
|
|
|
<view class="search-section"> |
|
|
|
<view class="search-bar"> |
|
|
|
<view class="search-input-wrapper"> |
|
|
|
<!-- 将地区选择器放在最左边 --> |
|
|
|
<view class="region-selector" bindtap="toggleRegionPicker"> |
|
|
|
<text>{{selectedRegion || '全国'}}</text> |
|
|
|
<text class="region-arrow">▼</text> |
|
|
|
</view> |
|
|
|
<!-- 搜索图标和输入框 --> |
|
|
|
<text class="search-icon">🔍</text> |
|
|
|
<input |
|
|
|
class="search-input" |
|
|
|
placeholder="搜索商品名称或地区" |
|
|
|
placeholder-class="search-placeholder" |
|
|
|
value="{{searchKeyword}}" |
|
|
|
bindinput="onSearchInput" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
<button class="search-button" bindtap="searchGoods">搜索</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 品种筛选区域 --> |
|
|
|
<view class="category-section"> |
|
|
|
<view class="category-scroll"> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '全部' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="全部" |
|
|
|
> |
|
|
|
<view class="egg-inner">全部</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '粉壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="粉壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">粉壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '红壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="红壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">红壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '绿壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="绿壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">绿壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '白壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="白壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">白壳</view> |
|
|
|
</view> |
|
|
|
<!-- 搜索图标和输入框 --> |
|
|
|
<text class="search-icon">🔍</text> |
|
|
|
<input |
|
|
|
class="search-input" |
|
|
|
placeholder="搜索商品名称或地区" |
|
|
|
placeholder-class="search-placeholder" |
|
|
|
value="{{searchKeyword}}" |
|
|
|
bindinput="onSearchInput" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
<button class="search-button" bindtap="searchGoods">搜索</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -44,47 +88,6 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 品种筛选区域 --> |
|
|
|
<view class="category-section"> |
|
|
|
<view class="category-scroll"> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '全部' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="全部" |
|
|
|
> |
|
|
|
<view class="egg-inner">全部</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '粉壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="粉壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">粉壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '红壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="红壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">红壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '绿壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="绿壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">绿壳</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="egg-item {{selectedCategory === '白壳' ? 'active' : ''}}" |
|
|
|
bindtap="selectCategory" |
|
|
|
data-category="白壳" |
|
|
|
> |
|
|
|
<view class="egg-inner">白壳</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 侧边栏按钮 --> |
|
|
|
<view |
|
|
|
class="sidebar-btn" |
|
|
|
@ -136,30 +139,88 @@ |
|
|
|
<view |
|
|
|
wx:for="{{filteredGoods}}" |
|
|
|
wx:key="id" |
|
|
|
class="goods-item" |
|
|
|
class="card" |
|
|
|
data-item="{{item}}" |
|
|
|
bindtap="viewGoodsDetail" |
|
|
|
> |
|
|
|
<!-- 商品图片 --> |
|
|
|
<view class="goods-image-container"> |
|
|
|
<image |
|
|
|
class="goods-image" |
|
|
|
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" |
|
|
|
mode="aspectFill" |
|
|
|
bindtap="previewImage" |
|
|
|
data-item="{{item}}" |
|
|
|
data-index="0" |
|
|
|
></image> |
|
|
|
<view class="goods-tag">{{item.supplyStatus || '现货'}}</view> |
|
|
|
</view> |
|
|
|
<!-- 商品信息 --> |
|
|
|
<view class="goods-info"> |
|
|
|
<view class="goods-name">{{item.name}}</view> |
|
|
|
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view> |
|
|
|
<view class="goods-price">¥{{item.price}}</view> |
|
|
|
<view class="goods-footer"> |
|
|
|
<view class="goods-region">{{item.region}}</view> |
|
|
|
<view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view> |
|
|
|
<!-- 图片和信息2:3比例并排显示,整体高度固定 --> |
|
|
|
<view style="display: flex; width: 100%; height: 200rpx; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;"> |
|
|
|
<!-- 左侧图片区域 40%宽度(2/5),高度固定 --> |
|
|
|
<view style="width: 40%; position: relative; height: 200rpx;"> |
|
|
|
<!-- 第一张图片 --> |
|
|
|
<view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="width: 100%; height: 100%;"> |
|
|
|
<image src="{{item.imageUrls[0]}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-item="{{item}}" data-index="0"></image> |
|
|
|
</view> |
|
|
|
<view wx:else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999;"> |
|
|
|
<text>暂无图片</text> |
|
|
|
</view> |
|
|
|
<!-- 剩余图片可滑动区域 --> |
|
|
|
<view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> |
|
|
|
<swiper |
|
|
|
class="image-swiper" |
|
|
|
style="width: 100%; height: 100%;" |
|
|
|
current="{{item.currentImageIndex || 0}}" |
|
|
|
bindchange="swiperChange" |
|
|
|
data-item-id="{{index}}"> |
|
|
|
<block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx"> |
|
|
|
<swiper-item> |
|
|
|
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-item="{{item}}" data-index="{{idx}}"></image> |
|
|
|
</swiper-item> |
|
|
|
</block> |
|
|
|
</swiper> |
|
|
|
<!-- 显示页码指示器 --> |
|
|
|
<view style="position: absolute; bottom: 10rpx; right: 10rpx; background-color: rgba(0,0,0,0.5); color: white; padding: 5rpx 10rpx; border-radius: 15rpx; font-size: 20rpx;"> |
|
|
|
{{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 右侧信息区域 60%宽度(3/5),相应调整 --> |
|
|
|
<view style="width: 60%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;"> |
|
|
|
<!-- 上半部分商品信息区域(60%高度),可点击查看详情 --> |
|
|
|
<view style="flex: 0.6; padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer;" bindtap="showGoodsDetail" data-item="{{item}}"> |
|
|
|
<view> |
|
|
|
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;"> |
|
|
|
<view style="display: flex; align-items: center; flex: 1;"> |
|
|
|
<view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: {{item.supplyStatus === '现货' ? 'rgba(76, 175, 80, 0.8)' : 'rgba(218, 165, 32, 0.8)'}}; padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">{{item.supplyStatus || '暂无状态'}}</view> |
|
|
|
<text style="font-size: 36rpx; font-weight: bold;">{{item.name}}</text> |
|
|
|
<span style="vertical-align: middle; font-size: 12rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 10rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span> |
|
|
|
</view> |
|
|
|
<!-- 隐藏列表页价格显示,只在详情页显示 --> |
|
|
|
</view> |
|
|
|
<view style="font-size: 28rpx; color: #555; font-weight: 600; margin-top: 30rpx;"> |
|
|
|
{{item.specification || '无'}} | {{item.yolk || '无'}} | {{item.minOrder || item.quantity || 1}}件 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 下半部分按钮区域(40%高度) --> |
|
|
|
<view style="flex: 0.4; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;"> |
|
|
|
<!-- 收藏人数显示,与buyer页面保持一致 --> |
|
|
|
<view style="display: flex; align-items: center;"> |
|
|
|
<text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-right: 8rpx;">已有</text> |
|
|
|
<text style="color: #d865d8ff; font-size: 28rpx; font-weight: bold;">{{item.reservedCount || 0}}</text> |
|
|
|
<text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-left: 8rpx;">人收藏</text> |
|
|
|
</view> |
|
|
|
<!-- 根据是否已收藏显示不同的按钮 --> |
|
|
|
<button |
|
|
|
wx:if="{{item.isFavorite}}" |
|
|
|
style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);" |
|
|
|
bindtap="cancelFavorite" |
|
|
|
data-item="{{item}}" |
|
|
|
> |
|
|
|
已收藏 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
wx:else |
|
|
|
style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #1677ff; background: rgba(22, 119, 255, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);" |
|
|
|
bindtap="addFavorite" |
|
|
|
data-item="{{item}}" |
|
|
|
> |
|
|
|
收藏 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -168,6 +229,11 @@ |
|
|
|
<view wx:if="{{filteredGoods.length === 0}}" class="empty-goods"> |
|
|
|
<text>暂无商品数据</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 搜索结果后添加半页空白区域 --> |
|
|
|
<view class="half-page-blank" style="display: flex; justify-content: center; align-items: flex-start; padding-top: 20rpx;"> |
|
|
|
<text style="color: #999; font-size: 26rpx; opacity: 0.8;">{{hasMore ? '下拉加载更多' : '已加载全部商品'}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|