fix sku style
This commit is contained in:
Timi
+131
-178
@@ -18,84 +18,75 @@
|
||||
@left-button-click="close"
|
||||
>
|
||||
<div class="popup">
|
||||
<div class="products">
|
||||
<div class="search-wrap">
|
||||
<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
|
||||
</div>
|
||||
<div class="items">
|
||||
<t-collapse
|
||||
v-if="visibleProductList.length"
|
||||
v-model="expandedProductKeyList"
|
||||
class="collapse"
|
||||
theme="card"
|
||||
:expand-mutex="true"
|
||||
@change="handleProductChange"
|
||||
<div class="search-wrap">
|
||||
<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
|
||||
</div>
|
||||
<div class="items">
|
||||
<t-collapse
|
||||
v-if="visibleProductList.length"
|
||||
v-model="expandedProductKeyList"
|
||||
class="collapse"
|
||||
theme="card"
|
||||
:expand-mutex="true"
|
||||
@change="handleProductChange"
|
||||
>
|
||||
<t-collapse-panel
|
||||
class="item"
|
||||
v-for="(product, productIndex) in visibleProductList"
|
||||
:key="getProductKey(product, productIndex)"
|
||||
:value="getProductKey(product, productIndex)"
|
||||
placement="bottom"
|
||||
>
|
||||
<t-collapse-panel
|
||||
v-for="(product, productIndex) in visibleProductList"
|
||||
:key="getProductKey(product, productIndex)"
|
||||
:value="getProductKey(product, productIndex)"
|
||||
class="panel"
|
||||
placement="bottom"
|
||||
>
|
||||
<template #header>
|
||||
<div class="product-header">
|
||||
<t-image
|
||||
v-if="getProductPhotoURL(product)"
|
||||
:src="getProductPhotoURL(product)"
|
||||
:alt="product.name || '产品图片'"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
|
||||
<div class="product-info">
|
||||
<strong v-text="product.name || '未命名产品'" />
|
||||
<span v-text="`${product.code || '-'} · ${product.skuList?.length || 0} 个 SKU`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="isExpandedProduct(product, productIndex)" class="selection">
|
||||
<div v-if="specList.length" class="specs">
|
||||
<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
|
||||
<strong v-text="spec.name" />
|
||||
<div class="values">
|
||||
<t-button
|
||||
v-for="value in enabledValues(spec)"
|
||||
:key="value.id"
|
||||
size="extra-small"
|
||||
:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
|
||||
:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
|
||||
:content="value.name"
|
||||
@click="selectSpecValue(spec.id || '', value.id || '')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="matchedSku" class="sku-card">
|
||||
<div class="sku-title">
|
||||
<strong v-text="matchedSku.name || matchedSku.specSummary || '默认 SKU'" />
|
||||
<span v-if="matchedSku.code" v-text="matchedSku.code" />
|
||||
</div>
|
||||
<div class="units">
|
||||
<t-button
|
||||
v-for="unit in saleableUnits(matchedSku)"
|
||||
:key="unit.id"
|
||||
size="small"
|
||||
:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
|
||||
:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
|
||||
@click="selectUnit(matchedSku, unit.id || '')"
|
||||
>
|
||||
<span v-text="unit.name" />
|
||||
<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<t-image
|
||||
v-if="getProductPhotoURL(product)"
|
||||
:src="getProductPhotoURL(product)"
|
||||
:alt="product.name || '产品图片'"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
|
||||
<strong class="clip-text" v-text="product.name || '未命名产品'" />
|
||||
</div>
|
||||
</t-collapse-panel>
|
||||
</t-collapse>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="isExpandedProduct(product, productIndex)" class="selection">
|
||||
<div v-if="specList.length" class="specs">
|
||||
<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
|
||||
<strong v-text="spec.name" />
|
||||
<div class="values">
|
||||
<t-button
|
||||
v-for="value in enabledValues(spec)"
|
||||
:key="value.id"
|
||||
size="extra-small"
|
||||
:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
|
||||
:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
|
||||
:content="value.name"
|
||||
@click="selectSpecValue(spec.id || '', value.id || '')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="matchedSku" class="sku-card">
|
||||
<div class="units">
|
||||
<t-button
|
||||
v-for="unit in saleableUnits(matchedSku)"
|
||||
:key="unit.id"
|
||||
size="small"
|
||||
:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
|
||||
:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
|
||||
@click="selectUnit(matchedSku, unit.id || '')"
|
||||
>
|
||||
<span v-text="unit.name" />
|
||||
<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
|
||||
</div>
|
||||
</t-collapse-panel>
|
||||
</t-collapse>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
|
||||
</div>
|
||||
</div>
|
||||
</bottom-popup>
|
||||
@@ -253,128 +244,90 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
|
||||
|
||||
.popup {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 1rem 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
|
||||
.selection {
|
||||
overflow-y: auto;
|
||||
.search-wrap {
|
||||
z-index: 1;
|
||||
padding: 0 0 .75rem;
|
||||
|
||||
.specs {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.search {
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
.spec {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.values,
|
||||
.units {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-card {
|
||||
padding: .75rem;
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
margin: 0 1rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
|
||||
.sku-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.units {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .75rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.price {
|
||||
margin-left: .25rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
height: 100%;
|
||||
.items {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
|
||||
.search-wrap {
|
||||
z-index: 1;
|
||||
padding: 0 0 .75rem;
|
||||
.collapse {
|
||||
margin: 0;
|
||||
|
||||
.search {
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
.item {
|
||||
--td-collapse-content-padding: .25rem 1rem .75rem 1rem;
|
||||
|
||||
margin: 0 1rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
|
||||
.collapse {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-header {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
gap: .25rem;
|
||||
.header {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
strong,
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: .75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: .7;
|
||||
.selection {
|
||||
overflow-y: auto;
|
||||
|
||||
.specs {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.spec {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.values,
|
||||
.units {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-card {
|
||||
padding: .5rem;
|
||||
border: 1px dashed var(--td-brand-color);
|
||||
margin-top: .5rem;
|
||||
border-radius: .875rem;
|
||||
|
||||
.units {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.price {
|
||||
margin-left: .25rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user