feat: 选择商品页面显示库存,库存为0不可选中
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -29,13 +29,17 @@
|
||||
<!-- 右侧商品列表 -->
|
||||
<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 v-for="item in productList" :key="item.productId" class="product-item" :class="{ disabled: stocks[item.productId] === 0 }" @click="selectProduct(item)">
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ item.name }}</text>
|
||||
<view class="product-row">
|
||||
<text class="product-spec">{{ item.spec || '-' }}</text>
|
||||
<text class="product-size" v-if="item.length && item.width">{{ item.length }} x {{ item.width }} = {{ item.area }} m²</text>
|
||||
</view>
|
||||
<view class="product-stock">
|
||||
<text class="stock-label">库存:</text>
|
||||
<text class="stock-value" :class="{ 'stock-zero': stocks[item.productId] === 0 }">{{ stocks[item.productId] || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-price">
|
||||
<text class="price">¥{{ item.price }}</text>
|
||||
@@ -85,6 +89,7 @@
|
||||
|
||||
<script>
|
||||
import productApi from '@/api/product'
|
||||
import stockApi from '@/api/stock'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -93,6 +98,7 @@ export default {
|
||||
categoryId: '',
|
||||
categories: [],
|
||||
productList: [],
|
||||
stocks: {}, // 商品库存
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
loading: false,
|
||||
@@ -123,6 +129,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
selectProduct(item) {
|
||||
// 库存为0不可选中
|
||||
if (this.stocks[item.productId] === 0) {
|
||||
uni.showToast({ title: '库存不足', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const pages = getCurrentPages()
|
||||
const prevPage = pages[pages.length - 2]
|
||||
prevPage.$vm.addProduct(item)
|
||||
@@ -152,6 +163,16 @@ export default {
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
this.productList = res.records || []
|
||||
|
||||
// 获取每个商品的库存
|
||||
const stockRes = await stockApi.getStockList({ page: 1, pageSize: 500 })
|
||||
const stockMap = {}
|
||||
if (stockRes.records) {
|
||||
stockRes.records.forEach(s => {
|
||||
stockMap[s.productId] = s.quantity || 0
|
||||
})
|
||||
}
|
||||
this.stocks = stockMap
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
@@ -278,6 +299,11 @@ export default {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.product-item.disabled {
|
||||
opacity: 0.5;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -310,6 +336,27 @@ export default {
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.product-stock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.stock-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stock-value {
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.stock-value.stock-zero {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user