<template>
|
<div class="money-record">
|
<van-nav-bar
|
:placeholder="true"
|
:safe-area-inset-top="true"
|
:title="$t('资金记录')"
|
left-arrow
|
@click-left="$router.go(-1)"
|
/>
|
|
<div class="record-list" v-if="recordList.length > 0">
|
<div class="record-item" v-for="(item, index) in recordList" :key="index">
|
<div class="item-header">
|
<div class="item-type">{{ $t(item.type) }}</div>
|
<div class="item-amount" :class="{ 'positive': parseFloat(item.amount) > 0, 'negative': parseFloat(item.amount) < 0 }">
|
{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
|
</div>
|
</div>
|
<div class="item-time">{{ formatTime(item.createTime) }}</div>
|
</div>
|
</div>
|
|
<div class="empty-state" v-else>
|
<van-empty :description="$t('zwsj')" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import { Toast } from "vant";
|
|
export default {
|
name: "moneyRecord",
|
data() {
|
return {
|
recordList: [],
|
loading: false
|
};
|
},
|
mounted() {
|
this.getMoneyRecord();
|
},
|
methods: {
|
async getMoneyRecord() {
|
if (this.loading) return;
|
this.loading = true;
|
try {
|
const result = await api.moneylogAll({
|
userId: this.$store.state.userInfo.id,
|
pageSize: 9999
|
});
|
if (result.status === 0) {
|
this.recordList = result.data.records || [];
|
} else {
|
Toast(result.msg || this.$t("获取数据失败"));
|
}
|
} catch (error) {
|
Toast(this.$t("获取数据失败"));
|
} finally {
|
this.loading = false;
|
}
|
},
|
formatTime(time) {
|
if (!time) return "";
|
return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green: #c4d600;
|
@red: #ee0a24;
|
@dark_green: #07c160;
|
|
.money-record {
|
width: 100%;
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
font-size: 10vw;
|
padding-bottom: 0.4rem;
|
|
.record-list {
|
padding: 0.2rem 0.25rem;
|
}
|
|
.record-item {
|
background-color: #fff;
|
border-radius: 0.2rem;
|
padding: 0.4rem;
|
margin-bottom: 0.2rem;
|
box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
|
|
.item-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 0.2rem;
|
|
.item-type {
|
font-size: 0.42rem;
|
color: #333;
|
font-weight: 500;
|
flex: 1;
|
}
|
|
.item-amount {
|
font-size: 0.48rem;
|
font-weight: 600;
|
font-family: "DINPro", serif;
|
|
&.positive {
|
color: @dark_green;
|
}
|
|
&.negative {
|
color: @red;
|
}
|
}
|
}
|
|
.item-time {
|
font-size: 0.35rem;
|
color: #999;
|
}
|
}
|
|
.empty-state {
|
padding-top: 2rem;
|
}
|
}
|
|
/deep/ .van-nav-bar__content {
|
height: 65px;
|
}
|
|
/deep/ .van-nav-bar__title {
|
font-family: "DINPro";
|
width: 100%;
|
height: 1.17333rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.48rem;
|
color: #14181f;
|
}
|
</style>
|
