timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ProductDetail.vue SKU Detail style

Browse Source
This commit is contained in:
Timi
2026-09-21 16:30:42 +08:00
parent 2fed94a25c
commit 52a4a2844f
1 changed files with 125 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/ProductDetail.vue
+125 -190
View File
@@ -83,38 +83,13 @@
<bottom-popup
v-model="skuDetailVisible"
title="SKU 详情"
height="min(88vh, 48rem)"
height="min(80vh, 48rem)"
left-button-text="关闭"
right-button-text=""
@left-button-click="closeSkuDetail"
>
<div v-if="selectedSku" class="sku-popup">
<div class="sku-popup-header">
<div class="sku-heading">
<strong v-text="getSkuTitle(selectedSku)" />
<span class="code" v-text="selectedSku.code || '无 SKU 编码'" />
</div>
<t-tag
size="small"
variant="light-outline"
:theme="selectedSku.status === 'ACTIVE' ? 'success' : 'warning'"
:content="selectedSku.status === 'ACTIVE' ? '启用' : '停用'"
/>
</div>
<div class="sku-spec-panel">
<div class="section-title">
<strong>销售规格</strong>
<span v-if="selectedSku.specSummary" v-text="`摘要：${selectedSku.specSummary}`" />
</div>
<div v-if="skuSpecEntries.length" class="sku-spec-list">
<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="sku-spec-item">
<span class="spec-name" v-text="entry.specName" />
<strong v-text="entry.valueName" />
</div>
</div>
<div v-else class="sku-spec-empty" v-text="product?.specList?.length ? '暂无匹配的规格值' : '无多规格产品，使用默认 SKU'" />
</div>
<t-cell-group title="基本信息" theme="card">
<t-cell-group>
<t-cell title="明细名称" :note="selectedSku.name || '未命名 SKU'" />
<t-cell title="SKU 编码" :note="selectedSku.code || '无编码'" />
<t-cell v-if="selectedSku.barcode" title="SKU 条码" :note="selectedSku.barcode" />
@@ -123,31 +98,80 @@
<t-cell v-if="selectedSku.stockEnabled" title="最低库存" :note="`${getProductQuantityText(selectedSku.minStockQuantity)} 基础单位`" />
<t-cell v-if="selectedSku.remark" title="备注" :note="Text.display(selectedSku.remark)" />
</t-cell-group>
<media-selector
v-if="skuPhotoItemList.length"
:model-value="skuPhotoUrlList"
:photo-items="skuPhotoItemList"
title="SKU 图片"
:show-add="false"
:show-remove="false"
:show-viewer-actions="false"
/>
<div class="unit-section">
<div class="unit-heading">
<div class="media-wrap">
<media-selector
v-if="skuPhotoItemList.length"
:model-value="skuPhotoUrlList"
:photo-items="skuPhotoItemList"
title="SKU 图片"
:show-add="false"
:show-remove="false"
:show-viewer-actions="false"
/>
</div>
<div class="unit">
<div class="header">
<strong>销售单位</strong>
<span>采购、销售和库存操作共用</span>
</div>
<div v-if="selectedSku.unitList?.length" class="unit-list">
<div v-for="unit in selectedSku.unitList" :key="unit.id || unit.name" class="unit-item">
<div class="unit-name">
<strong v-text="unit.name || '未命名单位'" />
<t-tag v-if="unit.isBase" size="small" theme="primary" variant="light-outline" content="基础" />
</div>
<div class="unit-meta" v-text="getUnitSummary(unit)" />
</div>
</div>
<div v-else class="unit-empty" v-text="'暂无销售单位'" />
<t-cell-group
v-if="selectedSku.unitList?.length"
class="items empty-cell-title-margin"
theme="card"
>
<t-cell
class="item"
v-for="unit in selectedSku.unitList"
:key="unit.id || unit.name"
>
<template #title>
<div class="title">
<strong v-text="unit.name || '未命名单位'" />
<div class="transfer" v-text="getUnitDescription(unit, selectedSku)" />
</div>
</template>
<template #description>
<div class="description">
<t-tag
v-if="unit.isBase"
size="small"
theme="primary"
variant="light-outline"
content="基础"
/>
<t-tag
size="small"
variant="light-outline"
:theme="unit.allowSale ? 'success' : 'default'"
:content="unit.allowSale ? '可销售' : '停售'"
/>
<t-tag
size="small"
variant="light-outline"
:theme="unit.allowPurchase ? 'primary' : 'default'"
:content="unit.allowPurchase ? '可采购' : '禁采购'"
/>
</div>
</template>
<template #note>
<div class="note">
<span
v-if="unit.salePrice !== null && unit.salePrice !== undefined"
class="price"
v-text="`￥${formatProductAmount(unit.salePrice)}`"
/>
<t-tag
v-else
size="small"
theme="warning"
variant="light-outline"
content="未定价"
/>
</div>
</template>
</t-cell>
</t-cell-group>
<div v-else class="center-tips" v-text="'暂无销售单位'" />
</div>
</div>
</bottom-popup>
@@ -171,7 +195,6 @@ import {
formatProductAmount,
getProductPhotoURL,
getProductQuantityText,
getProductSkuSpecEntries,
getProductStatusText
} from "@/utils/product";
import { Message } from "@/utils/message";
@@ -197,7 +220,6 @@ const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmen
url: getAttachmentReadURL(item.id || "", 90)
})));
const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
const skuSpecEntries = computed(() => getProductSkuSpecEntries(selectedSku.value || { specValueIdList: [] }, product.value?.specList || []));
const skuPhotoItemList = computed<PhotoItem[]>(() => (selectedSku.value?.attachmentList || [])
.filter(item => !!item.id)
.map(item => ({
@@ -264,12 +286,12 @@ function closeSkuDetail(): void {
skuDetailVisible.value = false;
}
function getUnitSummary(unit: ProductSkuUnit): string {
const quantityText = unit.isBase ? "基础单位" : `1 ${unit.name || "单位"} = ${getProductQuantityText(unit.baseQuantityPerUnit)} 基础单位`;
const priceText = unit.salePrice === null || unit.salePrice === undefined ? "未定价" : `￥${formatProductAmount(unit.salePrice)}`;
const saleText = unit.allowSale ? "可销售" : "停售";
const purchaseText = unit.allowPurchase ? "可采购" : "禁采购";
return `${quantityText} · ${priceText} · ${saleText} · ${purchaseText}`;
function getUnitDescription(unit: ProductSkuUnit, sku: ProductSku): string {
if (unit.isBase) {
return "";
}
const baseUnitName = sku.unitList?.find(item => item.isBase)?.name || "基础单位";
return `1 ${unit.name || "单位"} = ${getProductQuantityText(unit.baseQuantityPerUnit)} ${baseUnitName}`;
}
function getCurrentRouteDepth(): number {
@@ -358,153 +380,66 @@ onUnmounted(() => navBarStore.clearRight());
}
.sku-popup {
max-height: 100%;
padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
max-height: 100%;
overflow-y: auto;
.sku-popup-header {
gap: .75rem;
display: flex;
padding: 0 1rem .75rem;
align-items: center;
justify-content: space-between;
.media-wrap {
margin: 0 1rem;
}
.sku-heading {
gap: .5rem;
min-width: 0;
display: flex;
flex-direction: column;
strong {
font-size: 1.125rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.code {
color: var(--td-text-color-secondary);
font-size: .75rem;
}
}
.sku-spec-panel {
margin: 0 .75rem .75rem;
padding: .75rem;
background: var(--td-bg-color-secondarycontainer);
border-radius: .875rem;
}
.section-title {
gap: .5rem;
display: flex;
align-items: baseline;
justify-content: space-between;
span {
color: var(--td-text-color-secondary);
font-size: .75rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.sku-spec-list {
gap: .5rem;
display: grid;
margin-top: .625rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sku-spec-item {
gap: .375rem;
min-width: 0;
display: flex;
padding: .5rem .625rem;
align-items: baseline;
background: var(--td-bg-color-container);
border-radius: .625rem;
.spec-name {
color: var(--td-text-color-secondary);
font-size: .75rem;
flex: none;
}
strong {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.sku-spec-empty,
.unit-empty {
color: var(--td-text-color-secondary);
font-size: .75rem;
}
.sku-spec-empty {
margin-top: .5rem;
}
:deep(.t-cell-group) {
margin: 0 0 .75rem;
}
:deep(.media-selector) {
margin: 0 .75rem .75rem;
}
.unit-section {
.unit {
margin-top: .75rem;
border-top: 1px solid var(--td-component-border);
}
.unit-heading {
gap: .5rem;
display: flex;
padding: .75rem 1rem .5rem;
align-items: baseline;
justify-content: space-between;
.header {
gap: .5rem;
display: flex;
padding: .75rem 1rem .5rem;
align-items: baseline;
justify-content: space-between;
span {
color: var(--td-text-color-secondary);
font-size: .75rem;
text-align: right;
span {
color: var(--td-text-color-secondary);
font-size: .75rem;
text-align: right;
}
}
}
.unit-list {
gap: .5rem;
display: flex;
padding: 0 1rem .75rem;
flex-direction: column;
}
.items {
.unit-item {
gap: .375rem;
display: flex;
padding: .625rem .75rem;
background: var(--td-bg-color-secondarycontainer);
border-radius: .75rem;
flex-direction: column;
}
:deep(.t-cell-group) {
margin: 0;
}
.unit-name {
gap: .5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.item {
.unit-meta {
color: var(--td-text-color-secondary);
font-size: .75rem;
line-height: 1.5;
.title {
gap: .5rem;
display: flex;
align-items: center;
.transfer {
color: var(--td-text-color-secondary);
font-size: .75rem;
line-height: 1.5;
}
}
}
.note {
.price {
color: var(--td-error-color);
font-weight: 600;
}
}
.description {
gap: .5rem;
display: flex;
}
}
}
}