admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(储物柜): 添加库存显示功能 

在储物柜列表中新增库存显示功能，当库存为0时，图片会变为灰度显示，并在图片右下角显示库存数量。此功能帮助用户更直观地了解储物柜的库存情况。
This commit is contained in:
dzq 2025-05-13 10:42:26 +08:00
parent 401d8ac4ca
commit e895e5619c
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/apis/cabinet/type.ts
View File

@ -8,6 +8,7 @@ export interface CabinetDetailDTO {
export interface CellInfoDTO { export interface CellInfoDTO {
cellId: number cellId: number
pinNo: number pinNo: number
stock: number
product?: ProductInfoDTO product?: ProductInfoDTO
} }

33
src/pages/cabinet/index.vue
View File

@ -7,10 +7,15 @@
<div class="product-list"> <div class="product-list">
<van-cell v-for="locker in lockerList" :key="locker.lockerId" class="product-item"> <van-cell v-for="locker in lockerList" :key="locker.lockerId" class="product-item">
<template #icon> <template #icon>
<van-image width="80" height="80" <div class="image-container">
:src="locker.coverImg ? locker.coverImg : `${publicPath}` + 'img/product-image.svg'" fit="cover" <van-image width="80" height="80"
radius="4" class="product-image"> :src="locker.coverImg ? locker.coverImg : `${publicPath}` + 'img/product-image.svg'" fit="cover"
</van-image> radius="4" class="product-image" :style="{ filter: locker.stock === 0 ? 'grayscale(100%)' : 'none' }">
</van-image>
<div v-if="locker.stock >= 0" class="stock-overlay">
库存: {{ locker.stock }}
</div>
</div>
<!-- <div v-else class="status-overlay"> <!-- <div v-else class="status-overlay">
<svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784"
@ -77,6 +82,7 @@ interface CabinetItem {
interface LockerItem { interface LockerItem {
lockerId: number lockerId: number
lockerNumber: number lockerNumber: number
stock: number
status: 0 | 1 status: 0 | 1
statusClass: 'available' | 'occupied' statusClass: 'available' | 'occupied'
goodsName?: string goodsName?: string
@ -109,6 +115,7 @@ const updateLockerList = (cabinet: CabinetDetailDTO) => {
lockerList.value = cabinet.cells.map(cell => ({ lockerList.value = cabinet.cells.map(cell => ({
lockerId: cell.cellId, lockerId: cell.cellId,
lockerNumber: cell.pinNo, lockerNumber: cell.pinNo,
stock: cell.stock,
status: cell.product ? 1 : 0, status: cell.product ? 1 : 0,
statusClass: cell.product ? 'occupied' : 'available', statusClass: cell.product ? 'occupied' : 'available',
goodsName: cell.product?.goodsName, goodsName: cell.product?.goodsName,
@ -152,6 +159,24 @@ loadCabinetDetail()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.stock-overlay {
position: absolute;
right: 4px;
bottom: 4px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
.cabinet-container { .cabinet-container {
display: flex; display: flex;
height: calc(100vh - var(--van-tabbar-height)); height: calc(100vh - var(--van-tabbar-height));