webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: design, icons, calculation

Browse source 
Implemented new design for PriceCards, added some icons for visuals, added calculation per price card
This commit is contained in:
Fiona Lena Urban 2025-02-13 21:21:56 +01:00
parent 878b7e06e8
commit aa9c936f80
11 changed files with 180 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

61
app/components/Pp/PriceCard.vue
View file

@ -1,13 +1,32 @@
<template>
<form class="PriceCard">
<div class="wrapper">
<PpFormInput label="Name" id="n" :uid="uid" type="text" />
<PpFormInput label="Preis" id="p" :uid="uid" type="number" :min="0.01" />
<form class="PriceCard card">
<div class="padding bg-blue flex-col">
<div class="wrapper">
<PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />
<PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
</div>
<div class="wrapper">
<PpFormInput v-model="roles" label="Rollen" id="r" :uid="uid" type="number" :max="150" @blur="calculate" />
<PpFormInput v-model="sheets" label="Blätter" id="b" :uid="uid" type="number" :max="500" @blur="calculate" />
<PpFormInput v-model="layers" label="Lagen" id="l" :uid="uid" type="number" :max="10" @blur="calculate" />
</div>
</div>
<div class="wrapper">
<PpFormInput label="Rollen" id="r" :uid="uid" type="number" :max="150" />
<PpFormInput label="Blätter" id="b" :uid="uid" type="number" :max="500" />
<PpFormInput label="Lagen" id="l" :uid="uid" type="number" :max="10" />
<div class="wrapper padding bg-white">
<div class="info flex-col">
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
<span class="price">{{ intl.format(ppr) }}</span>
<span class="pro">Pro 1</span>
</div>
<div class="info flex-col">
<Icon class="icon" name="uil:file-landscape" mode="svg" />
<span class="price">{{ intl.format(ppr) }}</span>
<span class="pro">Pro 10</span>
</div>
<div class="info flex-col">
<Icon class="icon" name="uil:layer-group" mode="svg" />
<span class="price">{{ intl.format(ppl) }}</span>
<span class="pro">Pro 100</span>
</div>
</div>
</form>
</template>
@ -18,4 +37,30 @@ type Props = {
}
const { uid } = defineProps<Props>()
const name = ref('')
const price = ref(0)
const roles = ref(0)
const sheets = ref(0)
const layers = ref(0)
const ppr = ref(0)
const pps = ref(0)
const ppl = ref(0)
const intl = Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
})
const calculate = () => {
if (!price.value || !roles.value) return
ppr.value = price.value / roles.value
if (!sheets.value) return
pps.value = (ppr.value / sheets.value) * 10
if(!layers.value) return
ppl.value = (pps.value / layers.value) * 100
}
</script>