156 lines
3.6 KiB
Vue
156 lines
3.6 KiB
Vue
<template>
|
||
<view class="account">
|
||
<view class="account-total">
|
||
<view class="total-text">
|
||
总资产：
|
||
</view>
|
||
<view class="total-number">
|
||
{{ totalAssets | moneyFilter }}
|
||
</view>
|
||
</view>
|
||
<view class="account-list">
|
||
<view class="account-part" v-for="item in accountInfoList" :key="item.dictValue">
|
||
<view class="account-title">
|
||
<view class="left-line"></view>
|
||
<view class="account-label">{{ item.dictLabel }}</view>
|
||
<view class="account-balance">资产：{{ $arraySum(item.accountList, 'balance') | moneyFilter }}</view>
|
||
</view>
|
||
<uni-card
|
||
v-for="account in item.accountList"
|
||
:key="account.id"
|
||
:title="account.accountName"
|
||
:extra="account.balance | moneyFilter"
|
||
class="account-card"
|
||
@click="$tab.navigateTo('/pages_life/bookkeeping/account/details?accountId='+account.id)"
|
||
>
|
||
<text class="uni-body">
|
||
<view class="account-remark">
|
||
{{ account.remark }}
|
||
</view>
|
||
<uni-icons type="right" size="16"></uni-icons>
|
||
</text>
|
||
</uni-card>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listAccount } from "@/api/px/life/bookkeeping/account";
|
||
import { getDicts } from "@/api/system/dict/data";
|
||
import { moneyFilter } from "@/utils/filters";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 账户合计
|
||
totalAssets: [],
|
||
// 账户信息列表
|
||
accountInfoList: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getAccountList();
|
||
},
|
||
onNavigationBarButtonTap(val) {
|
||
this.$tab.navigateTo('/pages_life/bookkeeping/account/maintenance')
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取账户列表信息
|
||
*/
|
||
getAccountList() {
|
||
let accountList = [];
|
||
this.totalAssets = 0;
|
||
listAccount().then(res => {
|
||
accountList = res.rows;
|
||
getDicts('px_bookkeeping_account_type').then(response => {
|
||
const accountInfo = response.data.map(r => {
|
||
return {
|
||
...r,
|
||
accountList: [],
|
||
}
|
||
});
|
||
accountList.forEach(item => {
|
||
this.totalAssets += parseInt(item.balance);
|
||
accountInfo.find(a => {
|
||
return a.dictValue === item.accountType
|
||
}).accountList.push(item)
|
||
});
|
||
this.accountInfoList = accountInfo;
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.account {
|
||
padding: 1rem;
|
||
.account-total {
|
||
padding: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
height: 10rem;
|
||
background-image: url("https://pnkx.cloud:8866/ftp/2022/04/02/71537678-0fd7-4521-a96f-5354b3f126b1.jpg");
|
||
background-size: 100% 100%;
|
||
color: $uni-text-color-inverse;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
border-radius: 0.5rem;
|
||
.total-number {
|
||
margin-top: 0.5rem;
|
||
}
|
||
}
|
||
.account-list {
|
||
::v-deep .account-part {
|
||
&:first-child {
|
||
.account-title {
|
||
margin-top: 1rem;
|
||
}
|
||
}
|
||
.account-title {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 2rem;
|
||
color: #008080;
|
||
.left-line {
|
||
margin-right: 0.5rem;
|
||
width: 0.2rem;
|
||
height: 1rem;
|
||
background-color: #00CED1;
|
||
border-radius: 0.5rem;
|
||
}
|
||
.account-balance {
|
||
margin-left: 1rem;
|
||
}
|
||
}
|
||
.account-card {
|
||
margin: 1rem 0 !important;
|
||
.uni-card__header {
|
||
.uni-card__header-extra-text {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.uni-card__content {
|
||
.uni-body span {
|
||
display: flex;
|
||
.account-remark {
|
||
width: calc(100% - 1.5rem);
|
||
}
|
||
.uni-icons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
width: 1.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|