kidshift/kidshift-web
3
0
Fork 0
mirror of https://github.com/r-ca/kidshift-web.git synced 2024-10-25 16:34:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chatGPTno

Browse Source
This commit is contained in:
rca 2024-07-22 02:52:26 +09:00
parent 2746ae0df2
commit 99f1e785aa
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/TotalComponent.vue
View File

@ -1,32 +1,37 @@
<template> <template>
<QCard class="q-ma-md"> <q-card class="q-pa-md q-mb-md q-elevation-2" style="max-width: 400px; margin: auto;">
<QCardSection> <q-card-section class="row items-center">
<div class="text-h5"> <q-icon name="attach_money" class="text-primary q-mr-md" size="42px" />
支払予定額: {{ amount }} 円 <div>
<div class="text-h6">支払予定額</div>
<div class="text-h5 text-bold">{{ formattedAmount }} 円</div>
</div> </div>
</QCardSection> </q-card-section>
</QCard> </q-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { HistoryItem } from 'src/models/internal';
import { computed } from 'vue'; import { computed } from 'vue';
import { HistoryItem } from 'src/models/internal';
interface Props { interface Props {
histories: HistoryItem[]; histories: HistoryItem[];
} }
// Props の取得
const props = defineProps<Props>(); const props = defineProps<Props>();
const amount = computed(() => { const amount = computed(() => {
return props.histories.reduce((acc, history) => acc + history.reward, 0); return props.histories.reduce((acc, history) => acc + history.reward, 0);
}); });
const formattedAmount = computed(() => {
return amount.value.toLocaleString();
});
</script> </script>
<style scoped> <style scoped>
/* 必要に応じてスタイルを追加 */ .text-bold {
font-weight: bold;
}
</style> </style>