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

fix: 商品种类放左侧，分类侧栏
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-04-01 16:18:59 +00:00
parent 1899ebf226
commit 10b421d682
1 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/product/select.vue
View File

@@ -14,20 +14,22 @@
</view>
</view>
<!-- 分类行 -->
<view class="category-row">
<view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
全部
</view>
<view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
{{ cat.name }}
</view>
</view>
<!-- 分类侧栏 + 商品列表 -->
<view class="content-wrapper">
<!-- 左侧分类 -->
<scroll-view scroll-y class="category-sidebar">
<view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
全部
</view>
<view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
{{ cat.name }}
</view>
</scroll-view>
<!-- 商品列表 -->
<scroll-view scroll-y class="product-scroll">
<view class="product-list">
<view v-for="item in productList" :key="item.productId" class="product-item" @click="selectProduct(item)">
<!-- 右侧商品列表 -->
<scroll-view scroll-y class="product-scroll">
<view class="product-list">
<view v-for="item in productList" :key="item.productId" class="product-item" @click="selectProduct(item)">
<view class="product-info">
<text class="product-name">{{ item.name }}</text>
<view class="product-row">
@@ -47,6 +49,7 @@
</view>
</view>
</scroll-view>
</view>
<!-- 商品详情/选择弹窗 -->
<view class="modal-mask" v-if="showModal" @click="closeModal">
@@ -226,32 +229,37 @@ export default {
color: #999;
}
/* 分类行 */
.category-row {
/* 内容区域：侧栏+列表 */
.content-wrapper {
display: flex;
background: #fff;
padding: 20rpx;
overflow-x: auto;
white-space: nowrap;
height: calc(100vh - 130rpx);
}
.category-row .category-item {
display: inline-block;
padding: 16rpx 32rpx;
/* 分类侧栏 */
.category-sidebar {
width: 160rpx;
background: #fff;
flex-shrink: 0;
border-right: 1rpx solid #eee;
}
.category-sidebar .category-item {
padding: 28rpx 16rpx;
font-size: 26rpx;
color: #666;
border-radius: 30rpx;
margin-right: 16rpx;
background: #f5f5f5;
text-align: center;
border-left: 6rpx solid transparent;
}
.category-row .category-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
.category-sidebar .category-item.active {
background: #f8f9fa;
color: #667eea;
font-weight: bold;
border-left-color: #667eea;
}
.product-scroll {
height: calc(100vh - 260rpx);
flex: 1;
background: #f8f9fa;
}