111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import Panel from "@/components/common/Panel.vue";
|
|
import {onMounted, ref} from "vue";
|
|
import {getThisWeek} from "@/utils/dateUtils.ts";
|
|
import {post} from "@/utils/request.ts";
|
|
|
|
onMounted(() => {
|
|
getRevenueOverview()
|
|
})
|
|
const payTypeRevenue = ref<any>([
|
|
{
|
|
name: '医保支付',
|
|
totalRevenue: 0,
|
|
},
|
|
{
|
|
name: '微信支付',
|
|
totalRevenue: 0,
|
|
},
|
|
{
|
|
name: '支付宝',
|
|
totalRevenue: 0,
|
|
},
|
|
{
|
|
name: '现金支付',
|
|
totalRevenue: 0,
|
|
},
|
|
{
|
|
name: '其他支付',
|
|
totalRevenue: 0,
|
|
}
|
|
]);
|
|
const background = ref<any>([
|
|
'#F0F4FD',
|
|
'#ECF8FE',
|
|
'#FFF5EC',
|
|
'#FFEEEE',
|
|
'#E5F9FF'
|
|
]);
|
|
const getRevenueOverview = () => {
|
|
const thisWeek = getThisWeek();
|
|
post("statistics/getRevenueOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
|
|
if (res.payTypeRevenue.length === 0) return
|
|
payTypeRevenue.value = res.payTypeRevenue
|
|
})
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Panel title="支付明细" class="detail-price">
|
|
<div class="detail-price-content">
|
|
<div class="detail-price-content-item" v-for="(item,index) in payTypeRevenue"
|
|
:style="`background:${background[index]}`">
|
|
<img class="detail-price-content-item-image" :src="`/static/images/home/${index+1}.png`" :alt="item.name">
|
|
<div class="detail-price-content-item-text">
|
|
<div class="detail-price-content-item-text-name">{{ item.name }}</div>
|
|
<div class="detail-price-content-item-text-price">￥<span class="price">{{ item.totalRevenue }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.detail-price {
|
|
height: 194px;
|
|
|
|
&-content {
|
|
padding: 0 24px;
|
|
display: flex;
|
|
|
|
&-item {
|
|
flex: 1;
|
|
height: 110px;
|
|
border-radius: 32px;
|
|
margin-right: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&-image {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 16px 0 24px;
|
|
}
|
|
|
|
&-text {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
font-style: normal;
|
|
margin-right: 24px;
|
|
|
|
&-price {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |