cashier_desktop/src/views/member/components/add.vue

91 lines
2.2 KiB
Vue

<template>
<div class="box">
<div class="dialog_footer" v-for="(item, index) in props.flowingwater.list" :key="index">
<div class="dialog_footer_left">
<span>{{ item.biz_name }}</span>
<span>{{ dayjs(item.create_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
</div>
<div class="dialog_footer_right">
<span :class="{ active: item.type == '+' }">
<template v-if="item.type == '+'">+</template>
<template v-else>-</template>
¥{{ formatDecimal(item.amount) }}
</span>
<span>余额:¥{{ formatDecimal(item.balance) }}</span>
</div>
</div>
<el-empty description="暂无数据" v-if="!props.flowingwater.list.length" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'
import { formatDecimal } from '@/utils/index'
const props = defineProps({
flowingwater: {
type: Object,
default: {}
}
})
</script>
<style scoped lang="scss">
.box {
height: 400px;
overflow: auto;
.dialog_footer:nth-child(1) {
margin-top: 0;
}
.dialog_footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ececec;
padding-bottom: 6px;
.dialog_footer_left {
display: flex;
flex-direction: column;
align-items: flex-start;
span:nth-child(1) {
font-size: 18px;
font-weight: 500;
}
span:nth-child(2) {
margin-top: 10px;
color: #999;
font-size: 12px;
}
}
.dialog_footer_right {
display: flex;
flex-direction: column;
align-items: flex-end;
span:nth-child(1) {
font-size: 16px;
&.active {
color: #fc3d3d;
}
}
span:nth-child(2) {
margin-top: 10px;
font-size: 14px;
color: #999;
}
}
}
}
</style>