|
|
|
@@ -18,6 +18,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Card View -->
|
|
|
|
<!-- Card View -->
|
|
|
|
<div v-if="viewMode === 'card'" class="detail-card-view">
|
|
|
|
<div v-if="viewMode === 'card'" class="detail-card-view">
|
|
|
|
|
|
|
|
<div class="volume-controls" style="margin-bottom:12px">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
v-for="(drops, ml) in volumeOptions"
|
|
|
|
|
|
|
|
:key="ml"
|
|
|
|
|
|
|
|
class="volume-btn"
|
|
|
|
|
|
|
|
:class="{ active: selectedVolume === ml }"
|
|
|
|
|
|
|
|
@click="selectedVolume = ml"
|
|
|
|
|
|
|
|
>{{ ml === '单次' ? '单次' : ml + 'ml' }}</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div ref="cardRef" class="export-card">
|
|
|
|
<div ref="cardRef" class="export-card">
|
|
|
|
<div class="export-card-name">{{ recipe.name }}</div>
|
|
|
|
<div class="export-card-name">{{ recipe.name }}</div>
|
|
|
|
<div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
|
|
|
|
<div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
|
|
|
|
@@ -32,7 +41,7 @@
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="(ing, i) in recipe.ingredients" :key="i">
|
|
|
|
<tr v-for="(ing, i) in scaledIngredients" :key="i">
|
|
|
|
<td>{{ ing.oil }}</td>
|
|
|
|
<td>{{ ing.oil }}</td>
|
|
|
|
<td>{{ ing.drops }}</td>
|
|
|
|
<td>{{ ing.drops }}</td>
|
|
|
|
<td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
|
|
|
|
<td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
|
|
|
|
@@ -124,7 +133,7 @@
|
|
|
|
class="volume-btn"
|
|
|
|
class="volume-btn"
|
|
|
|
:class="{ active: selectedVolume === ml }"
|
|
|
|
:class="{ active: selectedVolume === ml }"
|
|
|
|
@click="selectedVolume = ml"
|
|
|
|
@click="selectedVolume = ml"
|
|
|
|
>{{ ml }}ml</button>
|
|
|
|
>{{ ml === '单次' ? '单次' : ml + 'ml' }}</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -175,13 +184,26 @@ const ui = useUiStore()
|
|
|
|
const viewMode = ref('card')
|
|
|
|
const viewMode = ref('card')
|
|
|
|
const cardRef = ref(null)
|
|
|
|
const cardRef = ref(null)
|
|
|
|
const showTagPicker = ref(false)
|
|
|
|
const showTagPicker = ref(false)
|
|
|
|
const selectedVolume = ref('5')
|
|
|
|
const selectedVolume = ref('单次')
|
|
|
|
|
|
|
|
|
|
|
|
const volumeOptions = VOLUME_DROPS
|
|
|
|
const volumeOptions = VOLUME_DROPS
|
|
|
|
|
|
|
|
|
|
|
|
// Source recipe
|
|
|
|
// Source recipe
|
|
|
|
const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
|
|
|
|
const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
|
|
|
|
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
|
|
|
|
|
|
|
|
|
|
|
|
function scaleIngredients(ingredients, volume) {
|
|
|
|
|
|
|
|
const targetDrops = VOLUME_DROPS[volume]
|
|
|
|
|
|
|
|
if (!targetDrops) return ingredients // 单次:不缩放
|
|
|
|
|
|
|
|
const totalDrops = ingredients.reduce((sum, ing) => sum + (ing.drops || 0), 0)
|
|
|
|
|
|
|
|
if (totalDrops === 0) return ingredients
|
|
|
|
|
|
|
|
return ingredients.map(ing => ({
|
|
|
|
|
|
|
|
...ing,
|
|
|
|
|
|
|
|
drops: Math.round(ing.drops * targetDrops / totalDrops),
|
|
|
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const scaledIngredients = computed(() => scaleIngredients(recipe.value.ingredients, selectedVolume.value))
|
|
|
|
|
|
|
|
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledIngredients.value))
|
|
|
|
|
|
|
|
|
|
|
|
// Editable copies
|
|
|
|
// Editable copies
|
|
|
|
const editName = ref('')
|
|
|
|
const editName = ref('')
|
|
|
|
@@ -189,7 +211,9 @@ const editNote = ref('')
|
|
|
|
const editTags = ref([])
|
|
|
|
const editTags = ref([])
|
|
|
|
const editIngredients = ref([])
|
|
|
|
const editIngredients = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const editPriceInfo = computed(() => oilsStore.fmtCostWithRetail(editIngredients.value.filter(i => i.oil)))
|
|
|
|
const editPriceInfo = computed(() =>
|
|
|
|
|
|
|
|
oilsStore.fmtCostWithRetail(scaleIngredients(editIngredients.value.filter(i => i.oil), selectedVolume.value))
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
const r = recipe.value
|
|
|
|
const r = recipe.value
|
|
|
|
|