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

feat(租用柜格): 添加不同尺寸格口的SVG图标并更新显示逻辑 

替换原有单一格口图标为不同尺寸的专用图标
添加格口类型判断函数switchCellImage
更新搜索框提示文本和不可租用状态的显示
This commit is contained in:
dzq 2025-12-15 16:05:38 +08:00
parent 727d1afea1
commit 4ec292edb3
7 changed files with 65 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/index/components/renting-cabinet-container.vue
View File

@ -99,6 +99,15 @@ function handleCheckout() {
function showCartDetail() {
showCartPopup.value = true;
}
function switchCellImage(cellType: number) {
switch (cellType) {
case 1: return '/static/svg/product-image-small.svg';
case 2: return '/static/svg/product-image-medium.svg';
case 3: return '/static/svg/product-image-large.svg';
case 4: return '/static/svg/product-image-super-large.svg';
default: return '/static/svg/product-image-unknow.svg';
}
}
</script>
<template>
@ -116,13 +125,13 @@ function showCartDetail() {
<!-- 右侧可租用格口列表 -->
<view class="product-list">
<view class="search-wrapper">
<input v-model="searchQuery" placeholder="搜索格口号或柜机名称" class="search-box" />
<input v-model="searchQuery" placeholder="搜索格口号" class="search-box" />
</view>
<scroll-view scroll-y class="category-section">
<view v-for="cell in filteredRentingCells" :key="cell.cellId" class="product-item">
<view class="product-info-wrapper">
<view class="product-image-wrapper">
<image :src="PLACEHOLDER_IMAGE_URL" class="product-image">
<image :src="switchCellImage(cell.cellType)" class="product-image">
<!-- 已被占用或故障的格口显示 '不可租用' -->
<view v-if="cell.isRented === 1 || cell.usageStatus === 2 || cell.availableStatus === 2" class="sold-out-overlay">
<text class="sold-out-text">不可租用</text>
@ -140,7 +149,10 @@ function showCartDetail() {
<view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="stock-count">
可租用
</view>
<view class="cart-actions">
<view v-else class="stock-count">
不可租用
</view>
<view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="cart-actions">
<!-- 数量减按钮：如果已在购物车，则显示 -->
<button v-if="getRentingCartItemCount(cell.cellId) > 0" size="mini" class="cart-btn minus-btn" @click.stop="handleRemoveFromCart(cell.cellId)">-</button>
<!-- 数量显示：0或1 -->
@ -239,7 +251,6 @@ function showCartDetail() {
}
.search-box {
width: 100%;
padding: 8px 12px;
background: #f5f5f5;
border-radius: 20px;

10
src/static/svg/product-image-large.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">大格</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

10
src/static/svg/product-image-medium.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">中格</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

10
src/static/svg/product-image-small.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">小格</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

10
src/static/svg/product-image-super-large.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">超大格</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

10
src/static/svg/product-image-unknow.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle"></text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 646 B

6
src/static/svg/product-image.svg
View File

@ -1,6 +0,0 @@
<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"
stroke-width="2" />
<text x="50" y="60" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
fill="#2E7D32" text-anchor="middle">空闲</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 473 B