qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 记账账户统计，功能优化。

Browse Source
This commit is contained in:
tianyongbao
2025-05-14 11:24:36 +08:00
parent b16af51232
commit e80c83c9b0
1 changed files with 102 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/pages/statistic/accounts/accountsBalance/index.vue
View File

@@ -12,26 +12,61 @@
<div class="item"> <div class="item">
<img src="@/static/images/one.png" alt="" /> <img src="@/static/images/one.png" alt="" />
<div class="info-sum"> <div class="info-sum">
<div class="title">储蓄卡可用余额</div> <div class="title">储蓄账户余额</div>
<div class="num">{{ accountsBalance.debitAllBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">储蓄卡余额</div>
<div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div> <div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div>
</div> </div>
</div> </div>
<div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">信用卡可用额度</div>
<div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
</div>
</div>
</div> </div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list','invest:creditCard')" ref="searchHeightRef"> <div class="header-con" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:creditCard')"> <div class="item">
<img src="@/static/images/one.png" alt="" /> <img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">I类储蓄卡余额</div>
<div class="num">{{ accountsBalance.idebitBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">II类储蓄卡余额</div>
<div class="num">{{ accountsBalance.iidebitBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">信用卡可用额度</div>
<div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum"> <div class="info-sum">
<div class="title">信用卡已用额度</div> <div class="title">信用卡已用额度</div>
<div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div> <div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
</div> </div>
</div> </div>
</div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list','invest:creditCard')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">借贷账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')"> <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" /> <img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum"> <div class="info-sum">
@@ -40,17 +75,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef"> <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list','invest:creditCard')" ref="searchHeightRef">
<div class="item"> <div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/one.png" alt="" /> <img src="@/static/images/one.png" alt="" />
<div class="info-sum"> <div class="info-sum">
<div class="title">借贷账户余额</div> <div class="title">期货账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div> <div class="num">{{ accountsBalance.futuresBalance }}<span>元</span></div>
</div> </div>
</div> </div>
</div> <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">股票账户余额</div>
<div class="num">{{ accountsBalance.stocksBalance }}<span>元</span></div>
</div>
</div>
</div>
</div> </div>
<div style="margin:8px" v-show="listData.length>0"> <div style="margin:8px" v-show="listData.length>0">
<button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">账户余额</button> <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">账户余额</button>
@@ -60,7 +103,7 @@
<u-list-item v-for="(item, index) in listData" :key="index"> <u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item"> <view class="list-item">
<view class="item-header"> <view class="item-header">
<u--text lines="2" <u--text lines="2"
:text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text> :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
</view> </view>
@@ -73,7 +116,7 @@
<u-list-item v-for="(item, index) in secondListData" :key="index"> <u-list-item v-for="(item, index) in secondListData" :key="index">
<view class="list-item"> <view class="list-item">
<view class="item-header"> <view class="item-header">
<u--text lines="2" <u--text lines="2"
:text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text> :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
</view> </view>
@@ -91,7 +134,7 @@
<suspend></suspend> <suspend></suspend>
<refresh></refresh> <refresh></refresh>
</template> </template>
<script setup> <script setup>
import { getAccountsAnalysis } from '@/api/invest/statisticAnalysis' import { getAccountsAnalysis } from '@/api/invest/statisticAnalysis'
import { getDicts } from '@/api/system/dict/data.js' import { getDicts } from '@/api/system/dict/data.js'
@@ -128,17 +171,17 @@
time: null, time: null,
dataType: null, dataType: null,
id: null id: null
} }
}) })
const { filterPanel, queryParams} = toRefs(data) const { filterPanel, queryParams} = toRefs(data)
const windowHeight = computed(() => { const windowHeight = computed(() => {
uni.getSystemInfoSync().windowHeight - 50 uni.getSystemInfoSync().windowHeight - 50
}) })
onLoad(() => { onLoad(() => {
getDict() getDict()
getList() getList()
}); });
onShow(() => { onShow(() => {
if (isShow.value) { if (isShow.value) {
listData.value=[] listData.value=[]
@@ -160,9 +203,9 @@
function getDict() { function getDict() {
// 记账类型类型 // 记账类型类型
getDicts('account_type').then(res => { getDicts('account_type').then(res => {
accountTypeList.value =[res.data] accountTypeList.value =[res.data]
}) })
} }
function btFirstClick() { function btFirstClick() {
@@ -175,7 +218,7 @@
secondType.value="primary" secondType.value="primary"
firstType.value="default" firstType.value="default"
tabShow.value=true tabShow.value=true
} }
function settingConfirm(e) { function settingConfirm(e) {
queryParams.value.settingId = e.value[0].settingId queryParams.value.settingId = e.value[0].settingId
@@ -212,7 +255,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container { .app-container {
@@ -222,7 +265,7 @@
background-color: #f0f0f0; background-color: #f0f0f0;
color: #333; color: #333;
} }
.btn-selected { .btn-selected {
background-color: #007AFF; background-color: #007AFF;
color: #fff; color: #fff;
@@ -279,7 +322,7 @@
display:float; display:float;
text-align: center; text-align: center;
} }
.search-view { .search-view {
padding: 12rpx 32rpx; padding: 12rpx 32rpx;
background-color: #ffffff; background-color: #ffffff;
@@ -287,36 +330,36 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative; position: relative;
.search-input { .search-input {
background: #F5F5F5; background: #F5F5F5;
color: #333333; color: #333333;
margin-right: 36rpx; margin-right: 36rpx;
} }
.filter-panel { .filter-panel {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 96rpx; top: 96rpx;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content { .filter-panel-content {
background-color: #ffff; background-color: #ffff;
padding: 0 30rpx 30rpx; padding: 0 30rpx 30rpx;
.filter-title { .filter-title {
color: #000000; color: #000000;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
padding: 30rpx 0; padding: 30rpx 0;
} }
.state-list { .state-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
.state-item { .state-item {
width: 210rpx; width: 210rpx;
height: 72rpx; height: 72rpx;
@@ -328,14 +371,14 @@
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
} }
.active { .active {
background-color: rgba(222, 241, 255, 1); background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1); border: 1rpx solid rgba(22, 119, 255, 1);
} }
} }
} }
.btn-box { .btn-box {
display: flex; display: flex;
padding: 24rpx 30rpx; padding: 24rpx 30rpx;
@@ -344,18 +387,18 @@
} }
} }
} }
.list-item { .list-item {
margin: 0 24rpx 24rpx; margin: 0 24rpx 24rpx;
padding: 32rpx; padding: 32rpx;
background-color: #fff; background-color: #fff;
.item-header { .item-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 16rpx; padding-bottom: 16rpx;
.status { .status {
.status-item { .status-item {
width: 120rpx; width: 120rpx;
@@ -365,60 +408,60 @@
border-radius: 4rpx; border-radius: 4rpx;
font-size: 24rpx; font-size: 24rpx;
} }
.status1 { .status1 {
background: #F0F0F0; background: #F0F0F0;
color: #8C8C8C; color: #8C8C8C;
} }
.status2 { .status2 {
background: rgba(38, 129, 255, 0.2); background: rgba(38, 129, 255, 0.2);
color: #2681FF; color: #2681FF;
} }
.status3 { .status3 {
background: #F7F7F7; background: #F7F7F7;
color: #2681FF; color: #2681FF;
} }
.status4 { .status4 {
background: rgba(255, 85, 51, 0.2); background: rgba(255, 85, 51, 0.2);
color: #FF5533; color: #FF5533;
} }
.status5 { .status5 {
background: #F7F7F7; background: #F7F7F7;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.status7 { .status7 {
background: rgba(255, 129, 51, 0.2); background: rgba(255, 129, 51, 0.2);
color: #FF8133; color: #FF8133;
} }
.status8 { .status8 {
background: rgba(65, 217, 165, 0.2); background: rgba(65, 217, 165, 0.2);
color: #41D9A5; color: #41D9A5;
} }
} }
} }
.item-row { .item-row {
padding: 16rpx 0; padding: 16rpx 0;
.row-label { .row-label {
color: rgba(0, 0, 0, 0.55); color: rgba(0, 0, 0, 0.55);
} }
.row-value { .row-value {
color: rgba(0, 0, 0, 0.85) color: rgba(0, 0, 0, 0.85)
} }
} }
.operate { .operate {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.btn { .btn {
width: 146rpx; width: 146rpx;
height: 56rpx; height: 56rpx;
@@ -427,13 +470,13 @@
margin-left: 5rpx; margin-left: 5rpx;
text-align: center; text-align: center;
} }
.circulation { .circulation {
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
margin-right: 24rpx; margin-right: 24rpx;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.filling { .filling {
background: #2681FF; background: #2681FF;
border-radius: 8rpx; border-radius: 8rpx;
@@ -441,4 +484,4 @@
} }
} }
} }
</style> </style>