feat: 非精油产品显示份、新增护肤品价目 #30

Merged
hera merged 28 commits from fix/next-batch-4 into main 2026-04-13 19:26:58 +00:00
3 changed files with 28 additions and 13 deletions
Showing only changes of commit 9f072e48f8 - Show all commits

View File

@@ -170,7 +170,7 @@
<div class="editor-section">
<table class="editor-table">
<thead>
<tr><th>精油</th><th>滴数</th><th>单价/</th><th>小计</th><th></th></tr>
<tr><th>成分</th><th>用量</th><th>单价</th><th>小计</th><th></th></tr>
</thead>
<tbody>
<tr v-for="(ing, i) in editEoIngredients" :key="'eo-'+i">
@@ -180,8 +180,13 @@
<option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
</select>
</td>
<td><input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" /></td>
<td class="ing-ppd">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil)) : '-' }}</td>
<td>
<div class="drops-with-unit">
<input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" />
<span class="unit-hint">{{ oilsStore.unitLabel(ing.oil) }}</span>
</div>
</td>
<td class="ing-ppd">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil)) : '-' }}/{{ oilsStore.unitLabel(ing.oil) }}</td>
<td class="ing-cost">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '-' }}</td>
<td><button class="remove-row-btn" @click="editIngredients.splice(editIngredients.indexOf(ing), 1)"></button></td>
</tr>
@@ -1703,6 +1708,8 @@ async function saveRecipe() {
.editor-drops:focus {
border-color: var(--sage, #7a9e7e);
}
.drops-with-unit { display: flex; align-items: center; gap: 2px; }
.unit-hint { font-size: 11px; color: #b0aab5; white-space: nowrap; }
.ing-ppd {
font-size: 12px;

View File

@@ -146,9 +146,9 @@
<div v-if="getMeta(name)?.retailPrice" class="oil-retail-line">¥{{ getMeta(name).retailPrice }}/</div>
</template>
<template v-else>
<div class="oil-price-line">¥{{ oils.pricePerDrop(name).toFixed(2) }}<span class="oil-price-unit">{{ name === '植物空胶囊' ? '/颗' : '/滴' }}</span></div>
<div class="oil-price-line">¥{{ oils.pricePerDrop(name).toFixed(2) }}<span class="oil-price-unit">/{{ oils.unitLabel(name) }}</span></div>
<div v-if="getMeta(name)?.retailPrice && getMeta(name)?.dropCount" class="oil-retail-line">
¥{{ (getMeta(name).retailPrice / getMeta(name).dropCount).toFixed(2) }}{{ name === '植物空胶囊' ? '/' : '/' }}
¥{{ (getMeta(name).retailPrice / getMeta(name).dropCount).toFixed(2) }}/{{ oils.unitLabel(name) }}
</div>
</template>
</div>
@@ -172,7 +172,7 @@
<div class="oil-card-price-info" v-if="getMeta(activeCardName)">
¥ {{ (getMeta(activeCardName).bottlePrice || 0).toFixed(2) }}
<span v-if="oils.pricePerDrop(activeCardName)">
&middot; ¥ {{ oils.pricePerDrop(activeCardName).toFixed(4) }}/
&middot; ¥ {{ oils.pricePerDrop(activeCardName).toFixed(4) }}/{{ oils.unitLabel(activeCardName) }}
</span>
</div>
</div>
@@ -231,18 +231,18 @@
<span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">总滴数</span>
<span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}</span>
<span class="detail-label">{{ oils.isMlUnit(selectedOilName) ? '总容量' : '总滴数' }}</span>
<span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}{{ oils.isMlUnit(selectedOilName) ? 'ml' : '' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">价格</span>
<span class="detail-label">{{ oils.unitLabel(selectedOilName) }}价格</span>
<span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(4)) : '--' }}</span>
</div>
<div class="detail-row" v-if="getMeta(selectedOilName)?.retailPrice">
<span class="detail-label">零售价</span>
<span class="detail-value">¥ {{ getMeta(selectedOilName).retailPrice.toFixed(2) }}</span>
</div>
<div class="detail-row">
<div v-if="!oils.isMlUnit(selectedOilName)" class="detail-row">
<span class="detail-label">每ml价格</span>
<span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + (oils.pricePerDrop(selectedOilName) * DROPS_PER_ML).toFixed(2)) : '--' }}</span>
</div>
@@ -474,6 +474,7 @@ for (const [ml, drops] of Object.entries(VOLUME_OPTIONS)) {
function volumeLabel(dropCount, name) {
if (dropCount === 160) return '160颗'
if (oils.isMlUnit(name)) return dropCount + 'ml'
return DROPS_TO_VOLUME[dropCount] || (dropCount + '滴')
}

View File

@@ -271,7 +271,7 @@
<div class="editor-section">
<table class="editor-table">
<thead>
<tr><th>精油</th><th>滴数</th><th>单价/</th><th>小计</th><th></th></tr>
<tr><th>成分</th><th>用量</th><th>单价</th><th>小计</th><th></th></tr>
</thead>
<tbody>
<tr v-for="(ing, i) in formEoIngredients" :key="'eo-'+i">
@@ -296,8 +296,13 @@
</div>
</div>
</td>
<td><input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" /></td>
<td class="ing-ppd">{{ ing.oil ? oils.fmtPrice(oils.pricePerDrop(ing.oil)) : '-' }}</td>
<td>
<div class="drops-with-unit">
<input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" />
<span class="unit-hint">{{ oils.unitLabel(ing.oil) }}</span>
</div>
</td>
<td class="ing-ppd">{{ ing.oil ? oils.fmtPrice(oils.pricePerDrop(ing.oil)) : '-' }}/{{ oils.unitLabel(ing.oil) }}</td>
<td class="ing-cost">{{ ing.oil && ing.drops ? oils.fmtPrice(oils.pricePerDrop(ing.oil) * ing.drops) : '-' }}</td>
<td><button class="remove-row-btn" @click="removeEoRow(i)"></button></td>
</tr>
@@ -2081,6 +2086,8 @@ watch(() => recipeStore.recipes, () => {
.editor-table td { padding: 6px 4px; border-bottom: 1px solid #f5f5f5; }
.editor-drops { width: 65px; padding: 6px 8px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; text-align: center; outline: none; font-family: inherit; }
.editor-drops:focus { border-color: #7ec6a4; }
.drops-with-unit { display: flex; align-items: center; gap: 2px; }
.unit-hint { font-size: 11px; color: #b0aab5; white-space: nowrap; }
.editor-input { padding: 8px 10px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; outline: none; font-family: inherit; width: 100%; box-sizing: border-box; }
.editor-input:focus { border-color: #7ec6a4; }
.editor-textarea { width: 100%; padding: 8px 10px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; box-sizing: border-box; }