sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化商品列表：左侧分类栏+右侧商品

Browse Source
This commit is contained in:
Agent
2026-03-26 14:27:02 +00:00
parent f8ce079a4b
commit 84e2259be4
1 changed files with 36 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/product/list.vue
View File

@@ -39,41 +39,43 @@
<!-- 右侧商品列表 --> <!-- 右侧商品列表 -->
<scroll-view scroll-y class="product-scroll"> <scroll-view scroll-y class="product-scroll">
<view class="product-list"> <view class="product-list">
<view <view
v-for="item in products" v-for="item in products"
:key="item.productId" :key="item.productId"
class="product-card" class="product-card"
@click="viewDetail(item)" @click="viewDetail(item)"
> >
<view class="product-image"> <view class="product-image">
<text class="product-emoji">📦</text> <Icon name="product" :size="60" color="#fff" />
</view>
<view class="product-content">
<text class="product-name">{{ item.name }}</text>
<text class="product-spec">{{ item.spec || '-' }}</text>
<view class="product-footer">
<view class="price-wrapper">
<text class="price">¥{{ item.price }}</text>
<text class="unit">/{{ item.unit }}</text>
</view> </view>
<view class="stock-badge"> <view class="product-content">
<text class="stock-label">库存</text> <text class="product-name">{{ item.name }}</text>
<text class="stock-value">{{ getStock(item.productId) }}</text> <text class="product-spec">{{ item.spec || '-' }}</text>
<view class="product-footer">
<view class="price-wrapper">
<text class="price">¥{{ item.price }}</text>
<text class="unit">/{{ item.unit }}</text>
</view>
<view class="stock-badge">
<text class="stock-label">库存</text>
<text class="stock-value">{{ getStock(item.productId) }}</text>
</view>
</view>
</view> </view>
</view> </view>
<!-- 空状态 -->
<view v-if="products.length === 0" class="empty">
<Icon name="product" :size="80" color="#ccc" />
<text class="empty-text">暂无商品</text>
</view>
</view> </view>
</view>
<!-- 空状态 --> <!-- 加载更多 -->
<view v-if="products.length === 0" class="empty"> <view v-if="products.length > 0" class="load-more">
<text class="empty-icon">📭</text> <text>{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}</text>
<text class="empty-text">暂无商品</text> </view>
</view> </scroll-view>
</view>
<!-- 加载更多 -->
<view v-if="products.length > 0" class="load-more">
<text>{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}</text>
</view> </view>
</view> </view>
</template> </template>
@@ -159,7 +161,6 @@ export default {
</script> </script>
<style> <style>
/* 全局 */
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f8f9fa; background: #f8f9fa;
@@ -180,15 +181,11 @@ export default {
height: 80rpx; height: 80rpx;
} }
.search-icon {
font-size: 32rpx;
margin-right: 16rpx;
}
.search-input { .search-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-left: 16rpx;
} }
.placeholder { .placeholder {
@@ -198,8 +195,7 @@ export default {
/* 左侧分类 + 右侧商品布局 */ /* 左侧分类 + 右侧商品布局 */
.content-wrapper { .content-wrapper {
display: flex; display: flex;
flex: 1; height: calc(100vh - 130rpx);
overflow: hidden;
} }
/* 左侧分类侧边栏 */ /* 左侧分类侧边栏 */
@@ -228,14 +224,6 @@ export default {
/* 右侧商品列表 */ /* 右侧商品列表 */
.product-scroll { .product-scroll {
flex: 1; flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa;
}
/* 右侧商品列表 */
.product-scroll {
flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa; background: #f8f9fa;
} }
@@ -272,10 +260,6 @@ export default {
justify-content: center; justify-content: center;
} }
.product-emoji {
font-size: 80rpx;
}
.product-content { .product-content {
padding: 20rpx; padding: 20rpx;
} }
@@ -350,14 +334,10 @@ export default {
align-items: center; align-items: center;
} }
.empty-icon {
font-size: 100rpx;
margin-bottom: 20rpx;
}
.empty-text { .empty-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
margin-top: 20rpx;
} }
/* 加载更多 */ /* 加载更多 */