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

feat: 商品管理增加分类侧栏，商品卡片显示分类
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-04-01 15:01:29 +00:00
parent e040f6d93b
commit 826973f42a
1 changed files with 156 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/pages/product/manage.vue
View File

@@ -1,51 +1,70 @@
<template>
<view class="page">
<!-- 搜索栏 -->
<view class="search-bar">
<input
class="search-input"
v-model="keyword"
placeholder="搜索商品名称"
@confirm="search"
/>
<button class="search-btn" @click="search">搜索</button>
<button class="add-btn" @click="addProduct">+</button>
<view class="search-section">
<view class="search-bar">
<input
class="search-input"
v-model="keyword"
placeholder="搜索商品名称"
@confirm="search"
/>
<button class="add-btn" @click="addProduct">+</button>
</view>
</view>
<!-- 商品列表 -->
<view class="product-list">
<view
v-for="item in products"
:key="item.productId"
class="product-item"
>
<view class="product-info" @click="editProduct(item)">
<text class="product-name">{{ item.name }}</text>
<text class="product-spec">{{ item.spec || '-' }}</text>
<view class="product-price">
<text class="price">¥{{ item.price }}</text>
<text class="unit">/{{ item.unit }}</text>
<!-- 分类侧栏 + 商品列表 -->
<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"
>
<view class="product-info" @click="editProduct(item)">
<view class="product-header">
<text class="product-name">{{ item.name }}</text>
<text class="product-category" v-if="item.categoryName">{{ item.categoryName }}</text>
</view>
<text class="product-spec">{{ item.spec || '-' }}</text>
<view class="product-price">
<text class="price">¥{{ item.price }}</text>
<text class="unit">/{{ item.unit }}</text>
</view>
<view class="product-status">
<text :class="['status', item.status === 1 ? 'on' : 'off']">
{{ item.status === 1 ? '上架' : '下架' }}
</text>
</view>
</view>
<view class="product-actions">
<view class="action-btn" @click="toggleStatus(item)">
{{ item.status === 1 ? '下架' : '上架' }}
</view>
<view class="action-btn delete" @click="deleteProduct(item)">
删除
</view>
</view>
</view>
<view class="product-status">
<text :class="['status', item.status === 1 ? 'on' : 'off']">
{{ item.status === 1 ? '上架' : '下架' }}
</text>
<!-- 空状态 -->
<view v-if="productList.length === 0" class="empty">
<text>暂无商品</text>
</view>
</view>
<view class="product-actions">
<view class="action-btn" @click="toggleStatus(item)">
{{ item.status === 1 ? '下架' : '上架' }}
</view>
<view class="action-btn delete" @click="deleteProduct(item)">
删除
</view>
</view>
</view>
<!-- 空状态 -->
<view v-if="products.length === 0" class="empty">
<text>暂无商品</text>
</view>
</scroll-view>
</view>
<!-- 商品表单弹窗 -->
@@ -119,7 +138,8 @@ export default {
data() {
return {
keyword: '',
products: [],
categoryId: '',
productList: [],
categories: [],
showModal: false,
isEdit: false,
@@ -176,14 +196,19 @@ export default {
try {
const res = await productApi.getProducts({
keyword: this.keyword,
categoryId: this.categoryId,
page: 1,
pageSize: 100
})
this.products = res.records || []
this.productList = res.records || []
} catch (e) {
console.error(e)
}
},
selectCategory(id) {
this.categoryId = id
this.loadProducts()
},
search() {
this.loadProducts()
},
@@ -292,6 +317,81 @@ export default {
<style>
.page {
display: flex;
flex-direction: column;
height: 100vh;
}
/* 搜索区域 */
.search-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20rpx;
}
.search-bar {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 50rpx;
padding: 0 20rpx;
height: 70rpx;
}
.search-input {
flex: 1;
font-size: 28rpx;
color: #333;
}
.add-btn {
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
background: #3cc51f;
color: #fff;
border: none;
border-radius: 50%;
font-size: 36rpx;
margin-left: 16rpx;
}
/* 内容区域：侧栏+列表 */
.content-wrapper {
display: flex;
flex: 1;
overflow: hidden;
}
/* 分类侧栏 */
.category-sidebar {
width: 160rpx;
background: #fff;
flex-shrink: 0;
border-right: 1rpx solid #eee;
}
.category-item {
padding: 28rpx 16rpx;
font-size: 26rpx;
color: #666;
text-align: center;
border-left: 6rpx solid transparent;
}
.category-item.active {
background: #f8f9fa;
color: #667eea;
font-weight: bold;
border-left-color: #667eea;
}
/* 商品列表 */
.product-scroll {
flex: 1;
background: #f8f9fa;
}
.product-list {
padding: 20rpx;
}
@@ -355,6 +455,20 @@ export default {
display: block;
}
.product-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-category {
font-size: 22rpx;
color: #667eea;
background: #f0f0ff;
padding: 4rpx 12rpx;
border-radius: 4rpx;
}
.product-spec {
font-size: 24rpx;
color: #999;