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

fix ProductStockSkuList.vue style

Browse Source
This commit is contained in:
Timi
2026-09-07 13:32:58 +08:00
parent aa2cacf88e
commit 4aef5bddc7
1 changed files with 90 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/ProductStockSkuList.vue
+90 -117
View File
@@ -1,10 +1,5 @@
<template> <template>
<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list"> <div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
<div class="product-context">
<strong v-text="product?.name || '产品 SKU'" />
<span v-text="product?.code || productId" />
</div>
<div class="search bg-white"> <div class="search bg-white">
<t-input <t-input
v-model="keyword" v-model="keyword"
@@ -15,7 +10,6 @@
placeholder="搜索 SKU 名称、编码或规格" placeholder="搜索 SKU 名称、编码或规格"
/> />
</div> </div>
<t-pull-down-refresh <t-pull-down-refresh
class="list-wrap empty-cell-title-margin" class="list-wrap empty-cell-title-margin"
v-model="isRefreshing" v-model="isRefreshing"
@@ -23,48 +17,50 @@
@refresh="refresh" @refresh="refresh"
@scrolltolower="loadMore" @scrolltolower="loadMore"
> >
<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line"> <div class="content">
<t-cell <t-cell-group theme="card">
v-for="(item, index) in skuStockList" <t-cell title="产品" :note="product?.name" />
:key="item.skuId || item.id" </t-cell-group>
arrow <t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
hover <t-cell
class="item" v-for="(item, index) in skuStockList"
v-entrance-transition="index * 30" :key="item.skuId || item.id"
@click="toDetail(item)" arrow
> hover
<template #leftIcon> class="item"
<div class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" /> v-entrance-transition="index * 30"
</template> @click="toDetail(item)"
<template #title> >
<div class="title"> <template #leftIcon>
<strong v-text="item.sku?.name || '未命名 SKU 明细'" /> <div class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" />
<t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" /> </template>
</div> <template #title>
</template> <div class="title">
<template #note> <strong v-text="item.sku?.name || '未命名 SKU 明细'" />
<span class="sku-spec" v-text="getSkuSpecText(item)" /> <t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" />
</template> </div>
<template #description> </template>
<div class="stock"> <template #description>
<div class="stock">
<span class="on-hand"> <span class="on-hand">
<span>库存</span> <span>库存</span>
<strong v-text="getProductQuantityText(item.onHandQuantity)" /> <strong v-text="getProductQuantityText(item.onHandQuantity)" />
</span> </span>
<span class="available"> <span class="available">
<span>可用</span> <span>可用</span>
<strong v-text="getProductQuantityText(item.availableQuantity)" /> <strong v-text="getProductQuantityText(item.availableQuantity)" />
</span> </span>
<span class="reserved"> <span class="reserved">
<span>预占</span> <span>预占</span>
<strong v-text="getProductQuantityText(item.reservedQuantity)" /> <strong v-text="getProductQuantityText(item.reservedQuantity)" />
</span> </span>
</div> </div>
</template> </template>
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</div>
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
@@ -75,7 +71,7 @@ import ProductAPI from "@/api/ProductAPI";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
import type { Product, ProductStock } from "@/types/Product"; import type { Product, ProductStock } from "@/types/Product";
import { getErrorMessage } from "@/utils/error"; import { getErrorMessage } from "@/utils/error";
import { getProductQuantityText, getProductSkuSpecEntries } from "@/utils/product"; import { getProductQuantityText } from "@/utils/product";
import { Message } from "@/utils/message"; import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission"; import { permissionCodes } from "@/utils/permission";
@@ -110,15 +106,6 @@ let keywordTimer: number | undefined;
let requestToken = 0; let requestToken = 0;
let suppressKeywordFetch = false; let suppressKeywordFetch = false;
function getSkuSpecText(item: ProductStock): string {
const sku = item.sku;
if (!sku) {
return "未配置规格";
}
const entries = getProductSkuSpecEntries(sku, product.value?.specList || []);
return entries.length ? entries.map(entry => `${entry.specName}：${entry.valueName}`).join(" · ") : sku.specSummary || "无多规格";
}
function getCurrentRouteDepth(): number { function getCurrentRouteDepth(): number {
const transitionDepth = Array.isArray(route.query.transitionDepth) const transitionDepth = Array.isArray(route.query.transitionDepth)
? route.query.transitionDepth[0] ? route.query.transitionDepth[0]
@@ -250,26 +237,6 @@ onUnmounted(() => {
.product-stock-sku-list { .product-stock-sku-list {
padding: var(--app-nav-height) 0 1rem; padding: var(--app-nav-height) 0 1rem;
.product-context {
gap: .25rem;
display: flex;
padding: .75rem 1rem;
background: var(--td-bg-color-container);
flex-direction: column;
strong,
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span {
color: var(--td-text-color-secondary);
font-size: .75rem;
}
}
.search { .search {
top: var(--app-nav-height); top: var(--app-nav-height);
z-index: 10; z-index: 10;
@@ -288,67 +255,73 @@ onUnmounted(() => {
.list-wrap { .list-wrap {
min-height: 70vh; min-height: 70vh;
padding-top: .75rem;
.list { .content {
padding-top: .75rem; gap: 1rem;
display: flex;
flex-direction: column;
.item { .list {
padding: 10px;
.avatar { .item {
width: 3.5rem; padding: 10px;
height: 3.5rem;
}
.fallback { .avatar {
color: var(--td-brand-color); width: 3.5rem;
display: flex; height: 3.5rem;
align-items: center; }
justify-content: center;
background: var(--td-brand-color-1);
border-radius: .75rem;
font-size: 1.5rem;
font-weight: 700;
}
.title { .fallback {
gap: .5rem; color: var(--td-brand-color);
min-width: 0; display: flex;
flex: 1; align-items: center;
display: flex; justify-content: center;
align-items: center; background: var(--td-brand-color-1);
justify-content: space-between; border-radius: .75rem;
font-size: 1.5rem;
font-weight: 700;
}
strong { .title {
gap: .5rem;
min-width: 0; min-width: 0;
overflow: hidden; flex: 1;
white-space: nowrap; display: flex;
text-overflow: ellipsis; align-items: center;
justify-content: space-between;
strong {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
}
.sku-spec { .sku-spec {
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
}
.stock {
gap: .5rem;
display: flex;
margin-top: .5rem;
flex-wrap: wrap;
strong {
display: inline-block;
margin-left: .25rem;
} }
}
.reserved { .stock {
color: var(--td-warning-color); gap: .5rem;
} display: flex;
margin-top: .5rem;
flex-wrap: wrap;
.available { strong {
color: var(--td-success-color); display: inline-block;
margin-left: .25rem;
}
}
.reserved {
color: var(--td-warning-color);
}
.available {
color: var(--td-success-color);
}
} }
} }
} }