Default User
2 months ago
14 changed files with 1202 additions and 44 deletions
@ -0,0 +1,333 @@ |
|||
// pages/goods/index.js
|
|||
const API = require('../../utils/api.js') |
|||
|
|||
Page({ |
|||
// 分享给朋友/群聊
|
|||
onShareAppMessage() { |
|||
return { |
|||
title: '内部货源管理 - 鸡蛋贸易平台', |
|||
path: '/pages/goods/index', |
|||
imageUrl: '/images/你有好蛋.png' |
|||
} |
|||
}, |
|||
|
|||
// 分享到朋友圈
|
|||
onShareTimeline() { |
|||
return { |
|||
title: '内部货源管理 - 鸡蛋贸易平台', |
|||
query: '', |
|||
imageUrl: '/images/你有好蛋.png' |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
goodsList: [], |
|||
isLoading: false, |
|||
isRefreshing: false, // 下拉刷新状态
|
|||
currentPage: 1, |
|||
pageSize: 100, |
|||
hasMore: true, |
|||
searchKeyword: '', |
|||
activeFilter: 'all', // 当前筛选条件：all, small, large
|
|||
filterConfig: { |
|||
small: ['何佳芹', '李真音'], // 小品种创建者
|
|||
large: ['吴海燕', '陈骏', '刘琴', '汤敏'] // 大贸易创建者
|
|||
}, |
|||
total: 0 // 总数据条数
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
this.loadGoodsList() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
// 这里的onPullDownRefresh是页面级的，但我们使用的是scroll-view内置的下拉刷新，所以不需要实现这个方法
|
|||
}, |
|||
|
|||
/** |
|||
* scroll-view下拉刷新事件处理 |
|||
*/ |
|||
onRefresherRefresh() { |
|||
this.setData({ |
|||
isRefreshing: true, |
|||
currentPage: 1, |
|||
goodsList: [], |
|||
hasMore: true |
|||
}) |
|||
this.loadGoodsList() |
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
if (this.data.hasMore && !this.data.isLoading) { |
|||
this.setData({ |
|||
currentPage: this.data.currentPage + 1 |
|||
}) |
|||
this.loadGoodsList() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 处理搜索输入 |
|||
*/ |
|||
onSearchInput(e) { |
|||
this.setData({ |
|||
searchKeyword: e.detail.value |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 执行搜索 |
|||
*/ |
|||
searchGoods() { |
|||
this.setData({ |
|||
currentPage: 1, |
|||
goodsList: [], |
|||
hasMore: true |
|||
}) |
|||
this.loadGoodsList() |
|||
}, |
|||
|
|||
/** |
|||
* 清除搜索 |
|||
*/ |
|||
clearSearch() { |
|||
this.setData({ |
|||
searchKeyword: '', |
|||
currentPage: 1, |
|||
goodsList: [], |
|||
hasMore: true |
|||
}) |
|||
this.loadGoodsList() |
|||
}, |
|||
|
|||
/** |
|||
* 筛选条件改变 |
|||
*/ |
|||
onFilterChange(e) { |
|||
const filter = e.currentTarget.dataset.filter |
|||
this.setData({ |
|||
activeFilter: filter, |
|||
currentPage: 1, |
|||
goodsList: [], |
|||
hasMore: true |
|||
}) |
|||
this.loadGoodsList() |
|||
}, |
|||
|
|||
/** |
|||
* 根据筛选条件过滤数据 |
|||
*/ |
|||
filterGoodsList(goodsList) { |
|||
const { activeFilter, filterConfig } = this.data |
|||
|
|||
if (activeFilter === 'all') { |
|||
return goodsList |
|||
} |
|||
|
|||
const allowedCreators = filterConfig[activeFilter] || [] |
|||
return goodsList.filter(item => { |
|||
return allowedCreators.includes(item.creatorName) |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 格式化时间 |
|||
*/ |
|||
formatDateTime(dateString) { |
|||
if (!dateString) return '未知时间' |
|||
|
|||
// 检查是否已经是格式化好的字符串（如：2026-01-03 10:04:29）
|
|||
if (typeof dateString === 'string' && /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) { |
|||
// 直接返回格式化好的字符串，只保留到分钟
|
|||
return dateString.slice(0, 16) |
|||
} |
|||
|
|||
// 检查是否是其他格式的字符串
|
|||
const date = new Date(dateString) |
|||
if (isNaN(date.getTime())) { |
|||
// 如果转换失败，直接返回原字符串
|
|||
return dateString |
|||
} |
|||
|
|||
const year = date.getFullYear() |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|||
const day = date.getDate().toString().padStart(2, '0') |
|||
const hours = date.getHours().toString().padStart(2, '0') |
|||
const minutes = date.getMinutes().toString().padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hours}:${minutes}` |
|||
}, |
|||
|
|||
/** |
|||
* 加载货源列表 |
|||
*/ |
|||
async loadGoodsList() { |
|||
if (this.data.isLoading) return |
|||
|
|||
this.setData({ |
|||
isLoading: true |
|||
}) |
|||
|
|||
console.log('开始加载货源列表，参数:', { |
|||
page: this.data.currentPage, |
|||
pageSize: this.data.pageSize, |
|||
keyword: this.data.searchKeyword, |
|||
activeFilter: this.data.activeFilter |
|||
}) |
|||
|
|||
// 调用API获取货源列表
|
|||
try { |
|||
const res = await API.getGoodsList({ |
|||
page: this.data.currentPage, |
|||
pageSize: this.data.pageSize, |
|||
keyword: this.data.searchKeyword |
|||
}) |
|||
|
|||
console.log('API返回结果:', res) |
|||
|
|||
// 检查API返回的状态
|
|||
if (res.success) { |
|||
console.log('API调用成功，products:', res.products) |
|||
console.log('products长度:', res.products.length) |
|||
console.log('API返回total:', res.total) |
|||
|
|||
// 更新总数据条数
|
|||
const total = res.total || 0 |
|||
|
|||
if (res.products && res.products.length > 0) { |
|||
// 显示第一个产品的详细信息
|
|||
console.log('第一个产品:', res.products[0]) |
|||
console.log('第一个产品的seller:', res.products[0].seller) |
|||
console.log('第一个产品的seller.nickName:', res.products[0].seller?.nickName) |
|||
console.log('第一个产品的seller.name:', res.products[0].seller?.name) |
|||
console.log('第一个产品的seller完整结构:', JSON.stringify(res.products[0].seller)) |
|||
|
|||
let newGoodsList = res.products || [] |
|||
|
|||
// 格式化创建时间并处理创建者信息
|
|||
newGoodsList = newGoodsList.map((item, index) => { |
|||
// 详细日志，查看每个产品的seller信息
|
|||
console.log(`产品${index}的seller信息:`) |
|||
console.log(`- seller对象:`, item.seller) |
|||
console.log(`- seller.nickName:`, item.seller?.nickName) |
|||
console.log(`- seller.name:`, item.seller?.name) |
|||
console.log(`- seller完整结构:`, JSON.stringify(item.seller)) |
|||
|
|||
// 确定creatorName - 只使用nickName，不使用name字段
|
|||
const creatorName = item.seller?.nickName || '未知' |
|||
console.log(`- 最终确定的creatorName:`, creatorName) |
|||
|
|||
return { |
|||
...item, |
|||
formattedCreatedAt: this.formatDateTime(item.created_at || item.createTime), |
|||
creatorName: creatorName |
|||
} |
|||
}) |
|||
|
|||
// 应用筛选条件
|
|||
const originalList = [...newGoodsList] |
|||
const filteredList = this.filterGoodsList(newGoodsList) |
|||
|
|||
console.log('处理并筛选后的产品列表:', filteredList) |
|||
console.log('筛选前后数量对比:', originalList.length, '->', filteredList.length) |
|||
|
|||
// 处理分页逻辑
|
|||
const updatedGoodsList = this.data.currentPage === 1 ? filteredList : [...this.data.goodsList, ...filteredList] |
|||
|
|||
// 判断是否还有更多数据
|
|||
// 正确逻辑：如果API返回的原始数据数量小于pageSize，说明没有更多数据
|
|||
// 即使筛选后的数据量小于pageSize，只要API返回的原始数据数量等于pageSize，就应该继续尝试加载更多数据
|
|||
const hasMore = res.products.length >= this.data.pageSize |
|||
|
|||
console.log('分页判断:', { |
|||
updatedGoodsListLength: updatedGoodsList.length, |
|||
originalDataLength: res.products.length, |
|||
pageSize: this.data.pageSize, |
|||
hasMore: hasMore |
|||
}) |
|||
|
|||
this.setData({ |
|||
goodsList: updatedGoodsList, |
|||
hasMore: hasMore, |
|||
total: total |
|||
}) |
|||
|
|||
// 如果是第一页，且筛选后的数据不足，尝试加载下一页
|
|||
if (this.data.currentPage === 1 && hasMore && filteredList.length < this.data.pageSize) { |
|||
console.log('筛选后数据不足，继续加载下一页') |
|||
this.setData({ |
|||
currentPage: this.data.currentPage + 1 |
|||
}) |
|||
// 递归调用loadGoodsList，继续加载下一页
|
|||
this.loadGoodsList() |
|||
return |
|||
} |
|||
} else { |
|||
console.log('没有产品数据返回') |
|||
this.setData({ |
|||
goodsList: [], |
|||
hasMore: false, |
|||
total: 0 |
|||
}) |
|||
} |
|||
} else { |
|||
console.error('API调用失败:', res.message) |
|||
wx.showToast({ |
|||
title: res.message || '获取货源列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (err) { |
|||
console.error('获取货源列表失败:', err) |
|||
wx.showToast({ |
|||
title: '获取货源列表失败: ' + err.message, |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
// 结束下拉刷新和加载状态
|
|||
this.setData({ |
|||
isLoading: false, |
|||
isRefreshing: false |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"navigationBarTitleText": "内部货源管理", |
|||
"navigationBarBackgroundColor": "#ffffff", |
|||
"navigationBarTextStyle": "black", |
|||
"backgroundColor": "#f5f5f5" |
|||
} |
|||
@ -0,0 +1,133 @@ |
|||
<view class="container"> |
|||
<!-- 页面标题 --> |
|||
<view class="page-title"> |
|||
<text>内部货源管理</text> |
|||
</view> |
|||
|
|||
<!-- 搜索框 --> |
|||
<view class="search-container"> |
|||
<view class="search-box"> |
|||
<input |
|||
class="search-input" |
|||
placeholder="搜索货源名称或创建人" |
|||
bindinput="onSearchInput" |
|||
bindconfirm="searchGoods" |
|||
value="{{searchKeyword}}" |
|||
/> |
|||
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 筛选按钮 --> |
|||
<view class="filter-container"> |
|||
<view class="filter-buttons"> |
|||
<view |
|||
class="filter-btn {{activeFilter === 'all' ? 'active' : ''}}" |
|||
bindtap="onFilterChange" |
|||
data-filter="all" |
|||
> |
|||
全部 |
|||
</view> |
|||
<view |
|||
class="filter-btn {{activeFilter === 'small' ? 'active' : ''}}" |
|||
bindtap="onFilterChange" |
|||
data-filter="small" |
|||
> |
|||
小品种 |
|||
</view> |
|||
<view |
|||
class="filter-btn {{activeFilter === 'large' ? 'active' : ''}}" |
|||
bindtap="onFilterChange" |
|||
data-filter="large" |
|||
> |
|||
大贸易 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 骨架屏加载 --> |
|||
<view wx:if="{{isLoading && goodsList.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" |
|||
bindscrolltolower="onReachBottom" |
|||
scroll-y="true" |
|||
refresher-enabled="{{true}}" |
|||
refresher-triggered="{{isRefreshing}}" |
|||
refresher-default-style="black" |
|||
refresher-background="transparent" |
|||
bindrefresherrefresh="onRefresherRefresh" |
|||
> |
|||
<view class="goods-list-container"> |
|||
<!-- 网格布局 --> |
|||
<view class="grid-container"> |
|||
<view |
|||
class="grid-item" |
|||
wx:for="{{goodsList}}" |
|||
wx:key="id" |
|||
data-item="{{item}}" |
|||
> |
|||
<view class="product-card"> |
|||
<view class="product-image-wrapper"> |
|||
<image |
|||
class="product-image" |
|||
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" |
|||
mode="aspectFill" |
|||
lazy-load="true" |
|||
></image> |
|||
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view> |
|||
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view> |
|||
</view> |
|||
<view class="product-info"> |
|||
<view class="product-title-row"> |
|||
<view class="product-title">{{item.name}}</view> |
|||
<view class="stock-count">库存：{{item.quantity || item.minOrder || '充足'}}</view> |
|||
</view> |
|||
<view class="product-spec">{{item.specification || item.spec || '无'}}<text wx:if="{{item.yolk}}"> | {{item.yolk}}</text></view> |
|||
<view class="product-meta"> |
|||
<text class="product-price">¥{{item.costprice}}</text> |
|||
<text class="product-location">{{item.region || ''}}</text> |
|||
</view> |
|||
<view class="product-description">{{item.description || ''}}</view> |
|||
<view class="creator-info"> |
|||
<text class="creator-name">{{item.creatorName || '未知'}}</text> |
|||
<text class="create-time">{{item.formattedCreatedAt || item.created_at || '未知'}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多 --> |
|||
<view wx:if="{{isLoading && goodsList.length > 0}}" class="loading-more"> |
|||
<view class="loading-spinner"></view> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 无更多数据 --> |
|||
<view wx:if="{{!hasMore && goodsList.length > 0}}" class="no-more-data"> |
|||
<text>货源正在快马加鞭的赶来</text> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view wx:if="{{goodsList.length === 0 && !isLoading}}" class="empty-container"> |
|||
<text class="empty-text">暂无货源数据</text> |
|||
<text class="empty-hint">下拉刷新试试</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,492 @@ |
|||
.container { |
|||
width: 100%; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.page-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
text-align: center; |
|||
margin: 20rpx 0 30rpx; |
|||
} |
|||
|
|||
/* 搜索框样式 */ |
|||
.search-container { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.search-box { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: white; |
|||
border-radius: 40rpx; |
|||
padding: 0 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 筛选样式 */ |
|||
.filter-container { |
|||
margin: 0 auto 24rpx; |
|||
padding: 0 30rpx; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
} |
|||
|
|||
.filter-buttons { |
|||
display: flex; |
|||
background-color: white; |
|||
border-radius: 50rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); |
|||
border: 2rpx solid transparent; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.filter-btn { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 18rpx 0; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
background-color: transparent; |
|||
border: none; |
|||
cursor: pointer; |
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|||
position: relative; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.filter-btn.active { |
|||
color: #1677ff; |
|||
font-weight: bold; |
|||
background: linear-gradient(135deg, #e6f0ff 0%, #f0f7ff 100%); |
|||
box-shadow: inset 0 2rpx 8rpx rgba(22, 119, 255, 0.15); |
|||
} |
|||
|
|||
.filter-btn::after { |
|||
content: ''; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 2rpx; |
|||
height: 48rpx; |
|||
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%); |
|||
} |
|||
|
|||
.filter-btn:last-child::after { |
|||
display: none; |
|||
} |
|||
|
|||
.filter-btn:active { |
|||
opacity: 0.8; |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
/* 第一个和最后一个按钮特殊样式 */ |
|||
.filter-btn:first-child { |
|||
border-radius: 50rpx 0 0 50rpx; |
|||
} |
|||
|
|||
.filter-btn:last-child { |
|||
border-radius: 0 50rpx 50rpx 0; |
|||
} |
|||
|
|||
/* 激活状态下的按钮动画效果 */ |
|||
.filter-btn.active::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 10rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 12rpx; |
|||
height: 6rpx; |
|||
background: #1677ff; |
|||
border-radius: 3rpx; |
|||
animation: pulse 1.5s infinite; |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0%, 100% { |
|||
opacity: 1; |
|||
transform: translateX(-50%) scale(1); |
|||
} |
|||
50% { |
|||
opacity: 0.7; |
|||
transform: translateX(-50%) scale(1.1); |
|||
} |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.search-input::placeholder { |
|||
color: #999; |
|||
} |
|||
|
|||
.clear-icon { |
|||
font-size: 30rpx; |
|||
color: #999; |
|||
padding: 10rpx; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 加载中样式 */ |
|||
.loading-container { |
|||
text-align: center; |
|||
padding: 60rpx 0; |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 货源列表样式 - 网格布局 */ |
|||
.goods-section { |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
height: calc(100vh - 300rpx); /* 设置容器高度，确保scroll-view能正常滚动 */ |
|||
} |
|||
|
|||
/* 滚动视图样式 */ |
|||
.goods-list { |
|||
height: 100%; /* 设置scroll-view高度为100%，确保能正常滚动 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.goods-list-container { |
|||
width: 100%; |
|||
padding: 0 10rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 网格容器 */ |
|||
.grid-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 网格商品项 */ |
|||
.grid-item { |
|||
width: calc((100% - 20rpx) / 2); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 商品卡片样式 */ |
|||
.product-card { |
|||
background-color: white; |
|||
border: 2rpx solid #e0e0e0; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
transition: all 0.3s ease; |
|||
padding: 16rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-card:active { |
|||
transform: scale(0.98); |
|||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 商品图片区域 */ |
|||
.product-image-wrapper { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background: #f5f5f5; |
|||
border-radius: 12rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.product-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
object-fit: cover; |
|||
object-position: center; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
/* 促销标签 */ |
|||
.promo-tag { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
padding: 6rpx 12rpx; |
|||
font-size: 20rpx; |
|||
color: #fff; |
|||
border-radius: 0 0 12rpx 0; |
|||
z-index: 1; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.promo-tag.presale { |
|||
background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); |
|||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.3); |
|||
} |
|||
|
|||
.promo-tag.in-stock { |
|||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); |
|||
box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); |
|||
} |
|||
|
|||
/* 商品信息区域 */ |
|||
.product-info { |
|||
padding: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
/* 商品标题行 - 包含商品名称和库存 */ |
|||
.product-title-row { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
width: 100%; |
|||
flex-wrap: wrap; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
/* 商品标题 */ |
|||
.product-title { |
|||
font-size: 26rpx; |
|||
color: #000000; |
|||
line-height: 1.4; |
|||
height: auto; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
/* 库存计数 */ |
|||
.stock-count { |
|||
font-size: 20rpx; |
|||
padding: 2rpx 10rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(82, 196, 26, 0.15); |
|||
color: #389e0d; |
|||
border: 1rpx solid rgba(82, 196, 26, 0.5); |
|||
font-weight: 600; |
|||
align-self: center; |
|||
margin-top: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
/* 商品规格 */ |
|||
.product-spec { |
|||
font-size: 22rpx; |
|||
color: #333333; |
|||
height: auto; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
line-height: 1.3; |
|||
margin-bottom: 2rpx; |
|||
margin-top: 2rpx; |
|||
} |
|||
|
|||
/* 商品元信息 */ |
|||
.product-meta { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin: 2rpx 0 4rpx; |
|||
padding: 0; |
|||
} |
|||
|
|||
.product-price { |
|||
font-size: 28rpx; |
|||
color: #ff4d4f; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.product-location { |
|||
font-size: 20rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 商品描述 */ |
|||
.product-description { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
margin: 6rpx 0; |
|||
background: #fafafa; |
|||
padding: 6rpx; |
|||
border-radius: 8rpx; |
|||
border: 1rpx solid #f0f0f0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
min-height: 50rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* 创建人信息 */ |
|||
.creator-info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 8rpx; |
|||
padding-top: 12rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
/* 加载更多样式 */ |
|||
.loading-more { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 40rpx 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
border: 3rpx solid #e5e5e5; |
|||
border-top-color: #1677ff; |
|||
border-radius: 50%; |
|||
animation: spin 0.8s linear infinite; |
|||
margin-right: 12rpx; |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
/* 无更多数据 */ |
|||
.no-more-data { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 40rpx 0; |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.no-more-data::before, |
|||
.no-more-data::after { |
|||
content: ''; |
|||
flex: 1; |
|||
height: 1rpx; |
|||
background: #e5e5e5; |
|||
max-width: 80rpx; |
|||
} |
|||
|
|||
/* 空状态样式 */ |
|||
.empty-container { |
|||
text-align: center; |
|||
padding: 100rpx 0; |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 骨架屏样式 */ |
|||
.skeleton-container { |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.skeleton-grid { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
width: 100%; |
|||
padding: 0 10rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.skeleton-grid-item { |
|||
width: calc((100% - 20rpx) / 2); |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
padding: 16rpx; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
.skeleton-image { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); |
|||
background-size: 200% 100%; |
|||
animation: skeleton-loading 1.5s infinite; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.skeleton-title { |
|||
height: 32rpx; |
|||
margin-bottom: 12rpx; |
|||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); |
|||
background-size: 200% 100%; |
|||
animation: skeleton-loading 1.5s infinite; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.skeleton-title.short { |
|||
width: 60%; |
|||
height: 24rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.skeleton-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.skeleton-price { |
|||
width: 80rpx; |
|||
height: 28rpx; |
|||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); |
|||
background-size: 200% 100%; |
|||
animation: skeleton-loading 1.5s infinite; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
@keyframes skeleton-loading { |
|||
0% { |
|||
background-position: 200% 0; |
|||
} |
|||
100% { |
|||
background-position: -200% 0; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue