todo-frontend/src/pages/product/select.vue

<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"
        />
      </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)">
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <text class="product-spec">{{ item.spec || '-' }}</text>
            </view>
            <view class="product-price">
              <text class="price">¥{{ item.price }}</text>
              <text class="unit">{{ item.unit || '个' }}</text>
            </view>
          </view>
          
          <view v-if="productList.length === 0" class="empty">
            <Icon name="product" :size="80" color="#ccc" />
            <text class="empty-text">暂无商品</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import productApi from '@/api/product'

export default {
  data() {
    return {
      keyword: '',
      categoryId: '',
      categories: [],
      productList: [],
      page: 1,
      pageSize: 50,
      loading: false
    }
  },
  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
        })
        this.productList = res.records || []
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        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)
      uni.navigateBack()
    }
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background: #f8f9fa;
}

.search-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30rpx 30rpx 10rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 80rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
}

.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 {
  padding: 20rpx;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.product-info {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.product-spec {
  font-size: 24rpx;
  color: #999;
}

.product-price {
  text-align: right;
}

.price {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4d4f;
}

.unit {
  font-size: 24rpx;
  color: #999;
}

.empty {
  padding: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style>