feat: 库存管理前端页面

src/api/stock.js

@@ -0,0 +1,41 @@
+import api from './index'
+
+/**
+ * 库存相关API
+ */
+export default {
+  /**
+   * 获取库存列表
+   */
+  getStockList(params) {
+    return api.request('/stock', 'GET', params)
+  },
+
+  /**
+   * 获取单商品库存
+   */
+  getStock(productId) {
+    return api.request(`/stock/${productId}`, 'GET')
+  },
+
+  /**
+   * 入库
+   */
+  stockIn(data) {
+    return api.request('/stock/in', 'POST', null, data)
+  },
+
+  /**
+   * 库存调整
+   */
+  adjustStock(data) {
+    return api.request('/stock/adjust', 'POST', null, data)
+  },
+
+  /**
+   * 获取库存流水
+   */
+  getStockFlow(params) {
+    return api.request('/stock/flow', 'GET', params)
+  }
+}

src/pages.json

@@ -35,6 +35,24 @@
       "style": {
         "navigationBarTitleText": "订单列表"
       }
+    },
+    {
+      "path": "pages/stock/list",
+      "style": {
+        "navigationBarTitleText": "库存管理"
+      }
+    },
+    {
+      "path": "pages/stock/in",
+      "style": {
+        "navigationBarTitleText": "入库"
+      }
+    },
+    {
+      "path": "pages/stock/flow",
+      "style": {
+        "navigationBarTitleText": "库存流水"
+      }
     }
   ],
   "globalStyle": {
@@ -57,6 +75,10 @@
         "pagePath": "pages/product/list",
         "text": "商品"
       },
+      {
+        "pagePath": "pages/stock/list",
+        "text": "库存"
+      },
       {
         "pagePath": "pages/order/list",
         "text": "订单"

src/pages/stock/flow.vue

@@ -0,0 +1,252 @@
+<template>
+  <view class="stock-flow">
+    <!-- 筛选 -->
+    <view class="filter-bar">
+      <picker 
+        mode="selector" 
+        :range="typeOptions" 
+        range-key="label" 
+        @change="onTypeChange"
+      >
+        <view class="filter-picker">
+          {{ selectedTypeLabel }}
+        </view>
+      </picker>
+      <picker 
+        mode="selector" 
+        :range="productList" 
+        range-key="name" 
+        @change="onProductChange"
+      >
+        <view class="filter-picker">
+          {{ selectedProduct ? selectedProduct.name : '全部商品' }}
+        </view>
+      </picker>
+    </view>
+
+    <!-- 流水列表 -->
+    <scroll-view scroll-y class="flow-scroll">
+      <view 
+        v-for="item in flowList" 
+        :key="item.flowId" 
+        class="flow-item"
+      >
+        <view class="flow-left">
+          <text class="flow-type" :class="item.type === 1 ? 'in' : 'out'">
+            {{ item.type === 1 ? '入库' : item.type === 2 ? '出库' : '调整' }}
+          </text>
+          <text class="flow-product">{{ item.productName || '商品' + item.productId }}</text>
+          <text class="flow-time">{{ formatTime(item.createdAt) }}</text>
+        </view>
+        <view class="flow-right">
+          <text class="flow-quantity" :class="item.type === 1 ? 'in' : 'out'">
+            {{ item.type === 1 ? '+' : '-' }}{{ item.quantity }}
+          </text>
+          <text class="flow-remark" v-if="item.remark">{{ item.remark }}</text>
+        </view>
+      </view>
+
+      <view v-if="flowList.length === 0" class="empty">
+        <text>暂无流水记录</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import stockApi from '@/api/stock'
+import productApi from '@/api/product'
+
+export default {
+  data() {
+    return {
+      typeOptions: [
+        { label: '全部类型', value: null },
+        { label: '入库', value: 1 },
+        { label: '出库', value: 2 },
+        { label: '调整', value: 3 }
+      ],
+      selectedType: null,
+      selectedTypeLabel: '全部类型',
+      productList: [],
+      selectedProduct: null,
+      flowList: [],
+      page: 1,
+      pageSize: 20,
+      loading: false
+    }
+  },
+  onLoad() {
+    this.getProducts()
+    this.getFlowList()
+  },
+  onPullDownRefresh() {
+    this.page = 1
+    Promise.all([this.getProducts(), this.getFlowList()]).then(() => {
+      uni.stopPullDownRefresh()
+    })
+  },
+  onReachBottom() {
+    if (!this.loading) {
+      this.page++
+      this.getFlowList(true)
+    }
+  },
+  methods: {
+    async getProducts() {
+      try {
+        const res = await productApi.getProducts({ page: 1, pageSize: 100 })
+        if (res.code === 0) {
+          this.productList = [{ productId: '', name: '全部商品' }, ...(res.data.records || [])]
+        }
+      } catch (e) {
+        console.error('加载商品失败', e)
+      }
+    },
+    async getFlowList(append = false) {
+      this.loading = true
+      try {
+        const params = {
+          page: this.page,
+          pageSize: this.pageSize
+        }
+        if (this.selectedType) {
+          params.type = this.selectedType
+        }
+        if (this.selectedProduct && this.selectedProduct.productId) {
+          params.productId = this.selectedProduct.productId
+        }
+        
+        const res = await stockApi.getStockFlow(params)
+        if (res.code === 0) {
+          this.flowList = append ? [...this.flowList, ...res.data.records] : res.data.records
+        }
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      } finally {
+        this.loading = false
+      }
+    },
+    onTypeChange(e) {
+      const item = this.typeOptions[e.detail.value]
+      this.selectedType = item.value
+      this.selectedTypeLabel = item.label
+      this.page = 1
+      this.getFlowList()
+    },
+    onProductChange(e) {
+      this.selectedProduct = this.productList[e.detail.value]
+      this.page = 1
+      this.getFlowList()
+    },
+    formatTime(time) {
+      if (!time) return ''
+      const date = new Date(time)
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stock-flow {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.filter-bar {
+  display: flex;
+  padding: 20rpx;
+  background: #fff;
+}
+
+.filter-picker {
+  flex: 1;
+  height: 64rpx;
+  line-height: 64rpx;
+  text-align: center;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  margin: 0 10rpx;
+  font-size: 28rpx;
+}
+
+.flow-scroll {
+  height: calc(100vh - 180rpx);
+}
+
+.flow-item {
+  display: flex;
+  justify-content: space-between;
+  margin: 20rpx;
+  padding: 24rpx;
+  background: #fff;
+  border-radius: 12rpx;
+}
+
+.flow-left {
+  flex: 1;
+}
+
+.flow-type {
+  display: inline-block;
+  padding: 4rpx 12rpx;
+  font-size: 24rpx;
+  border-radius: 4rpx;
+  margin-right: 16rpx;
+}
+
+.flow-type.in {
+  background: #e6f7e6;
+  color: #3cc51f;
+}
+
+.flow-type.out {
+  background: #fff0e6;
+  color: #ff6600;
+}
+
+.flow-product {
+  display: block;
+  font-size: 28rpx;
+  margin-top: 8rpx;
+}
+
+.flow-time {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+}
+
+.flow-right {
+  text-align: right;
+}
+
+.flow-quantity {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.flow-quantity.in {
+  color: #3cc51f;
+}
+
+.flow-quantity.out {
+  color: #ff6600;
+}
+
+.flow-remark {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+  max-width: 200rpx;
+}
+
+.empty {
+  text-align: center;
+  padding: 100rpx;
+  color: #999;
+}
+</style>

src/pages/stock/in.vue

@@ -0,0 +1,162 @@
+<template>
+  <view class="stock-in">
+    <view class="form">
+      <view class="form-item">
+        <text class="label">商品</text>
+        <picker 
+          mode="selector" 
+          :range="productList" 
+          range-key="name" 
+          @change="onProductChange"
+        >
+          <view class="picker">
+            {{ selectedProduct ? selectedProduct.name : '请选择商品' }}
+          </view>
+        </picker>
+      </view>
+
+      <view class="form-item">
+        <text class="label">入库数量</text>
+        <input 
+          class="input" 
+          v-model="quantity" 
+          type="number" 
+          placeholder="请输入数量" 
+        />
+      </view>
+
+      <view class="form-item">
+        <text class="label">备注</text>
+        <input 
+          class="input" 
+          v-model="remark" 
+          placeholder="可选填写" 
+        />
+      </view>
+    </view>
+
+    <view class="btn-area">
+      <button class="submit-btn" @click="submit" :disabled="submitting">
+        {{ submitting ? '提交中...' : '确认入库' }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+import stockApi from '@/api/stock'
+import productApi from '@/api/product'
+
+export default {
+  data() {
+    return {
+      productList: [],
+      selectedProduct: null,
+      quantity: '',
+      remark: '',
+      submitting: false
+    }
+  },
+  onLoad() {
+    this.getProducts()
+  },
+  methods: {
+    async getProducts() {
+      try {
+        const res = await productApi.getProducts({ page: 1, pageSize: 100 })
+        if (res.code === 0) {
+          this.productList = res.data.records || []
+        }
+      } catch (e) {
+        uni.showToast({ title: '加载商品失败', icon: 'none' })
+      }
+    },
+    onProductChange(e) {
+      this.selectedProduct = this.productList[e.detail.value]
+    },
+    async submit() {
+      if (!this.selectedProduct) {
+        uni.showToast({ title: '请选择商品', icon: 'none' })
+        return
+      }
+      if (!this.quantity || this.quantity <= 0) {
+        uni.showToast({ title: '请输入有效数量', icon: 'none' })
+        return
+      }
+
+      this.submitting = true
+      try {
+        const res = await stockApi.stockIn({
+          productId: this.selectedProduct.productId,
+          quantity: parseInt(this.quantity),
+          remark: this.remark
+        })
+        if (res.code === 0) {
+          uni.showToast({ title: '入库成功', icon: 'success' })
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1500)
+        } else {
+          uni.showToast({ title: res.message || '入库失败', icon: 'none' })
+        }
+      } catch (e) {
+        uni.showToast({ title: '入库失败', icon: 'none' })
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stock-in {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.form {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 12rpx;
+  padding: 0 30rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #eee;
+}
+
+.form-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  width: 160rpx;
+  font-size: 30rpx;
+}
+
+.picker, .input {
+  flex: 1;
+  font-size: 30rpx;
+}
+
+.btn-area {
+  padding: 40rpx 30rpx;
+}
+
+.submit-btn {
+  height: 88rpx;
+  line-height: 88rpx;
+  background: #3cc51f;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 8rpx;
+}
+
+.submit-btn[disabled] {
+  background: #ccc;
+}
+</style>

src/pages/stock/list.vue

@@ -0,0 +1,229 @@
+<template>
+  <view class="stock-list">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <input 
+        class="search-input" 
+        v-model="keyword" 
+        placeholder="搜索商品名称" 
+        @confirm="search"
+      />
+      <button class="search-btn" @click="search">搜索</button>
+    </view>
+
+    <!-- 库存列表 -->
+    <scroll-view scroll-y class="stock-scroll">
+      <view 
+        v-for="item in stockList" 
+        :key="item.stockId" 
+        class="stock-item"
+        @click="goToDetail(item)"
+      >
+        <view class="stock-info">
+          <text class="product-name">{{ item.productName || '商品' + item.productId }}</text>
+          <text class="warehouse">仓库: {{ item.warehouseId || '默认' }}</text>
+        </view>
+        <view class="stock-num">
+          <text class="quantity">{{ item.quantity || 0 }}</text>
+          <text class="label">库存</text>
+          <text class="locked" v-if="item.lockedQuantity > 0">锁定: {{ item.lockedQuantity }}</text>
+        </view>
+      </view>
+      
+      <view v-if="stockList.length === 0" class="empty">
+        <text>暂无库存数据</text>
+      </view>
+    </scroll-view>
+
+    <!-- 底部操作 -->
+    <view class="bottom-action">
+      <button class="action-btn primary" @click="goToIn">入库</button>
+      <button class="action-btn" @click="goToFlow">流水</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import stockApi from '@/api/stock'
+
+export default {
+  data() {
+    return {
+      keyword: '',
+      stockList: [],
+      page: 1,
+      pageSize: 20,
+      loading: false
+    }
+  },
+  onLoad() {
+    this.getStockList()
+  },
+  onPullDownRefresh() {
+    this.page = 1
+    this.getStockList().then(() => {
+      uni.stopPullDownRefresh()
+    })
+  },
+  onReachBottom() {
+    if (!this.loading) {
+      this.page++
+      this.getStockList(true)
+    }
+  },
+  methods: {
+    async getStockList(append = false) {
+      this.loading = true
+      try {
+        const res = await stockApi.getStockList({
+          keyword: this.keyword,
+          page: this.page,
+          pageSize: this.pageSize
+        })
+        if (res.code === 0) {
+          this.stockList = append ? [...this.stockList, ...res.data.records] : res.data.records
+        }
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      } finally {
+        this.loading = false
+      }
+    },
+    search() {
+      this.page = 1
+      this.getStockList()
+    },
+    goToDetail(item) {
+      uni.navigateTo({
+        url: `/pages/stock/detail?productId=${item.productId}`
+      })
+    },
+    goToIn() {
+      uni.navigateTo({
+        url: '/pages/stock/in'
+      })
+    },
+    goToFlow() {
+      uni.navigateTo({
+        url: '/pages/stock/flow'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stock-list {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 100px;
+}
+
+.search-bar {
+  display: flex;
+  padding: 20rpx;
+  background: #fff;
+}
+
+.search-input {
+  flex: 1;
+  height: 72rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+}
+
+.search-btn {
+  margin-left: 20rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  font-size: 28rpx;
+  background: #3cc51f;
+  color: #fff;
+}
+
+.stock-scroll {
+  height: calc(100vh - 280rpx);
+}
+
+.stock-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20rpx;
+  padding: 30rpx;
+  background: #fff;
+  border-radius: 12rpx;
+}
+
+.stock-info {
+  flex: 1;
+}
+
+.product-name {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 500;
+  margin-bottom: 8rpx;
+}
+
+.warehouse {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.stock-num {
+  text-align: right;
+}
+
+.quantity {
+  display: block;
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #3cc51f;
+}
+
+.label {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.locked {
+  display: block;
+  font-size: 24rpx;
+  color: #ff9900;
+  margin-top: 8rpx;
+}
+
+.empty {
+  text-align: center;
+  padding: 100rpx;
+  color: #999;
+}
+
+.bottom-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 20rpx;
+  background: #fff;
+  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 30rpx;
+  margin: 0 10rpx;
+  border-radius: 8rpx;
+}
+
+.action-btn.primary {
+  background: #3cc51f;
+  color: #fff;
+}
+</style>