优化商品选择页面：左侧分类栏+右侧商品列表

src/pages/product/select.vue

@@ -1,24 +1,35 @@
 <template>
   <view class="page">
     <!-- 搜索栏 -->
+    <view class="search-section">
       <view class="search-bar">
+        <Icon name="search" :size="32" color="#999" />
         <input 
           class="search-input" 
           v-model="keyword" 
           placeholder="搜索商品名称" 
+          placeholder-class="placeholder"
           @confirm="search"
         />
-      <button class="search-btn" @click="search">搜索</button>
+      </view>
     </view>
 
-    <!-- 商品列表 -->
-    <scroll-view scroll-y class="product-list">
-      <view 
-        v-for="item in productList" 
-        :key="item.productId" 
-        class="product-item"
-        @click="selectProduct(item)"
-      >
+    <!-- 分类 + 商品列表 -->
+    <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)">
             <view class="product-info">
               <text class="product-name">{{ item.name }}</text>
               <text class="product-spec">{{ item.spec || '-' }}</text>
@@ -30,10 +41,13 @@
           </view>
           
           <view v-if="productList.length === 0" class="empty">
-        <text>暂无商品</text>
+            <Icon name="product" :size="80" color="#ccc" />
+            <text class="empty-text">暂无商品</text>
+          </view>
         </view>
       </scroll-view>
     </view>
+  </view>
 </template>
 
 <script>
@@ -43,6 +57,8 @@ export default {
   data() {
     return {
       keyword: '',
+      categoryId: '',
+      categories: [],
       productList: [],
       page: 1,
       pageSize: 50,
@@ -50,14 +66,24 @@ export default {
     }
   },
   onLoad() {
+    this.loadCategories()
     this.getProducts()
   },
   methods: {
+    async loadCategories() {
+      try {
+        const categories = await productApi.getCategories()
+        this.categories = categories || []
+      } catch (e) {
+        console.error(e)
+      }
+    },
     async getProducts() {
       this.loading = true
       try {
         const res = await productApi.getProducts({
           keyword: this.keyword,
+          categoryId: this.categoryId,
           page: this.page,
           pageSize: this.pageSize
         })
@@ -68,12 +94,16 @@ export default {
         this.loading = false
       }
     },
+    selectCategory(id) {
+      this.categoryId = id
+      this.page = 1
+      this.getProducts()
+    },
     search() {
       this.page = 1
       this.getProducts()
     },
     selectProduct(item) {
-      // 返回上一页并传递选中的商品
       const pages = getCurrentPages()
       const prevPage = pages[pages.length - 2]
       prevPage.$vm.addProduct(item)
@@ -83,48 +113,81 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f8f9fa;
+}
+
+.search-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 30rpx 30rpx 10rpx;
 }
 
 .search-bar {
   display: flex;
-  padding: 20rpx;
-  background: #fff;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50rpx;
+  padding: 0 30rpx;
+  height: 80rpx;
 }
 
 .search-input {
   flex: 1;
-  height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-  padding: 0 20rpx;
   font-size: 28rpx;
+  color: #333;
+  margin-left: 16rpx;
 }
 
-.search-btn {
-  margin-left: 20rpx;
-  height: 72rpx;
-  line-height: 72rpx;
-  font-size: 28rpx;
-  background: #3cc51f;
-  color: #fff;
+.placeholder {
+  color: #999;
+}
+
+.content-wrapper {
+  display: flex;
+  height: calc(100vh - 130rpx);
+}
+
+.category-sidebar {
+  width: 180rpx;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.category-item {
+  padding: 28rpx 20rpx;
+  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 {
-  height: calc(100vh - 180rpx);
+  padding: 20rpx;
 }
 
 .product-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 20rpx;
+  margin-bottom: 20rpx;
   padding: 30rpx;
   background: #fff;
-  border-radius: 12rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
 .product-info {
@@ -135,6 +198,7 @@ export default {
   display: block;
   font-size: 30rpx;
   font-weight: 500;
+  color: #333;
   margin-bottom: 8rpx;
 }
 
@@ -151,7 +215,7 @@ export default {
   display: block;
   font-size: 32rpx;
   font-weight: bold;
-  color: #3cc51f;
+  color: #ff4d4f;
 }
 
 .unit {
@@ -160,8 +224,15 @@ export default {
 }
 
 .empty {
-  text-align: center;
   padding: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
   color: #999;
+  margin-top: 20rpx;
 }
 </style>