mirror of
https://github.com/r-ca/kidshift-web.git
synced 2024-10-25 16:34:01 +00:00
chatGPTno
This commit is contained in:
parent
2746ae0df2
commit
99f1e785aa
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user