hera/oil-formula-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 精油详情面板重排 — 总容量(5ml/93滴)+会员每滴+零售每滴
All checks were successful
PR Preview / teardown-preview (pull_request) Has been skipped
Details
Test / unit-test (push) Successful in 5s
Details
Test / build-check (push) Successful in 4s
Details
PR Preview / test (pull_request) Successful in 5s
Details
PR Preview / deploy-preview (pull_request) Successful in 12s
Details
Test / e2e-test (push) Successful in 52s
Details

Browse Source 
精油: 总容量(Xml/X滴) → 会员价 → 每滴价格 → 零售价 → 零售每滴价格
ml产品: 总容量(Xml) → 会员价 → 每ml价格
配方列表单位跟随产品类型

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hera Zhao
2026-04-13 15:19:32 +00:00
parent 7abc219659
commit 395e837de8
1 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/views/OilReference.vue
View File

@@ -226,32 +226,50 @@
<button class="btn-close" @click="selectedOilName = null">✕</button>
</div>
<div class="detail-body">
<div class="detail-row">
<span class="detail-label">会员价</span>
<span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
</div>
<div class="detail-row">
<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">每{{ 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 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>
<!-- 精油（非ml产品） -->
<template v-if="!oils.isMlUnit(selectedOilName)">
<div class="detail-row">
<span class="detail-label">总容量</span>
<span class="detail-value">{{ volumeWithDrops(selectedOilName) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">会员价</span>
<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">{{ 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" v-if="getMeta(selectedOilName)?.retailPrice && getMeta(selectedOilName)?.dropCount">
<span class="detail-label">每滴价格</span>
<span class="detail-value">¥ {{ (getMeta(selectedOilName).retailPrice / getMeta(selectedOilName).dropCount).toFixed(4) }}</span>
</div>
</template>
<!-- ml产品 -->
<template v-else>
<div class="detail-row">
<span class="detail-label">总容量</span>
<span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}ml</span>
</div>
<div class="detail-row">
<span class="detail-label">会员价</span>
<span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">每ml价格</span>
<span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(2)) : '--' }}</span>
</div>
</template>
<h4 style="margin:16px 0 8px">含此精油的配方</h4>
<h4 style="margin:16px 0 8px">含此{{ oils.isMlUnit(selectedOilName) ? '产品' : '精油' }}的配方</h4>
<div v-if="recipesWithOil.length" class="detail-recipes">
<div v-for="r in recipesWithOil" :key="r._id" class="detail-recipe-item">
<span class="dr-name">{{ r.name }}</span>
<span class="dr-drops">{{ getDropsForOil(r, selectedOilName) }}滴</span>
<span class="dr-drops">{{ getDropsForOil(r, selectedOilName) }}{{ oils.unitLabel(selectedOilName) }}</span>
</div>
</div>
<div v-else class="empty-hint">暂无使用此精油的配方</div>
@@ -472,6 +490,15 @@ for (const [ml, drops] of Object.entries(VOLUME_OPTIONS)) {
DROPS_TO_VOLUME[drops] = ml + 'ml'
}
function volumeWithDrops(name) {
const meta = getMeta(name)
if (!meta || !meta.dropCount) return '--'
if (name === '植物空胶囊') return meta.dropCount + '颗'
const ml = DROPS_TO_VOLUME[meta.dropCount]
if (ml) return `${ml}/${meta.dropCount}滴`
return meta.dropCount + '滴'
}
function oilPriceUnit(name) {
if (oils.isMlUnit(name)) return 'ml'
if (name === '植物空胶囊') return '颗'