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

fix: 统计页面，统一ui优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-19 13:17:11 +08:00
parent d1fd0a4d1d
commit 7c4c20e67c
24 changed files with 8762 additions and 2589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
View File

@@ -14,13 +14,15 @@
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
<u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
<view class="filter-btn" @click="filterPanel = !filterPanel">
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
<text>筛选</text>
</view>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="select-header">还款时间</view>
<view class="filter-title">还款时间</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
@@ -68,7 +70,7 @@
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
<uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
@@ -77,7 +79,7 @@
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
@@ -88,7 +90,7 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
@@ -97,7 +99,7 @@
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
@@ -108,20 +110,79 @@
</div>
<div></div>
</div>
<div style="margin:8px" v-show="listData.length>0">
<button type="primary" style="margin-right:5px" size=mini>贷款已还统计</button>
</div>
<u-list :spaceHeight="116" lowerThreshold="100">
<view class="section-title" v-show="listData.length>0">
<view class="title-decorator"></view>
<text class="title-text">贷款已还统计</text>
<view class="view-switch">
<view
:class="['switch-item', { 'active': viewMode === 'list' }]"
@click="viewMode = 'list'"
>
<uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
<text>列表</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'line' }]"
@click="viewMode = 'line'"
>
<uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
<text>曲线图</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'column' }]"
@click="viewMode = 'column'"
>
<uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
<text>柱状图</text>
</view>
</view>
</view>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
<qiun-data-charts
type="line"
canvasId="lendSettledLineChart"
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
/>
</view>
<!-- 柱状图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
<qiun-data-charts
type="column"
canvasId="lendSettledColumnChart"
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
/>
</view>
<!-- 列表展示 -->
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
<u--text lines="2"
:text="item.time+' 借款金额（本息）：'+item.value" size="30rpx" color="#333333" ></u--text>
<view class="header-left">
<view class="time-badge">
<uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
<text>{{ item.time }}</text>
</view>
</view>
<view class="header-right">
<text class="amount-label">借款金额（本息）：</text>
<text class="amount-value">{{ item.value }}元</text>
</view>
</view>
<view class="item-body">
<view class="detail-label">
<uni-icons type="info" size="14" color="#667eea"></uni-icons>
<text>借款金额明细</text>
</view>
<view class="detail-value">{{ formatMultiLineData(item.detail) }}</view>
</view>
<view class="item-row">
<text class="row-label">借款金额明细：</text><br>
<text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
</view>
</view>
</u-list-item>
<view>
@@ -132,9 +193,8 @@
<u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
@confirm="handleAccountConfirm"></u-picker>
</view>
<!-- 悬停按钮返回工作台-->
<suspend></suspend>
<refresh></refresh>
<!-- 悬停按钮返回统计分析-->
<statisticBtn></statisticBtn>
</template>
<script setup>
@@ -157,6 +217,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const timeShow= ref(false)
const time =ref( Number(new Date()))
const flag= ref(true)
const viewMode = ref('list') // 'list', 'line' 或 'column'
const historyObj = ref({
clearedCount: '',
clearedPrincipal: '',
@@ -181,6 +242,140 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
color: ['#667eea'],
padding: [20, 15, 35, 5],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
dataPointShape: true,
legend: {
show: false
},
xAxis: {
disableGrid: true,
boundaryGap: 'justify',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
fontColor: '#999999',
rotateLabel: true,
rotateAngle: 30
},
yAxis: {
gridType: 'dash',
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
}
})
// 柱状图配置
const columnChartOpts = ref({
color: ['#667eea'],
padding: [20, 15, 35, 5],
enableScroll: false,
dataLabel: false,
legend: {
show: false
},
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
fontColor: '#999999',
rotateLabel: true,
rotateAngle: 30
},
yAxis: {
gridType: 'dash',
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
type: 'group',
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
barBorderCircle: true,
seriesGap: 2
}
}
})
// 图表数据
const chartData = computed(() => {
if (!listData.value || listData.value.length === 0) {
return {
categories: [],
series: []
}
}
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...listData.value].reverse()
return {
categories: reversedData.map(item => item.time || ''),
series: [
{
name: '借款金额',
data: reversedData.map(item => {
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
}
]
}
})
const windowHeight = computed(() => {
uni.getSystemInfoSync().windowHeight - 50
})
@@ -231,7 +426,7 @@ function searchSubmit() {
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-239, 'months')
const start = dayjs(end).add(-60, 'months')
queryParams.value.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -248,7 +443,7 @@ function searchSubmit() {
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-239, 'months')
const start = dayjs(end).add(-60, 'months')
queryParams.value.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -375,6 +570,80 @@ const start = dayjs(end).add(-239, 'months')
display:float;
text-align: center;
}
.section-title {
display: flex;
align-items: center;
padding: 24rpx 32rpx 16rpx;
background-color: #f5f7fa;
.title-decorator {
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
}
.title-text {
font-size: 28rpx;
font-weight: 600;
color: #2c3e50;
line-height: 1;
flex: 1;
}
}
.view-switch {
display: flex;
align-items: center;
gap: 4rpx;
background: #ffffff;
border-radius: 12rpx;
padding: 4rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
.switch-item {
display: flex;
align-items: center;
gap: 4rpx;
padding: 6rpx 12rpx;
border-radius: 8rpx;
transition: all 0.3s ease;
cursor: pointer;
text {
font-size: 22rpx;
color: #999999;
line-height: 1;
}
&.active {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
text {
color: #667eea;
font-weight: 600;
}
}
&:active {
transform: scale(0.95);
}
}
}
.chart-container {
margin: 16rpx 24rpx 24rpx;
padding: 16rpx 16rpx 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 600rpx;
overflow: hidden;
position: relative;
}
.search-view {
padding: 12rpx 32rpx;
@@ -386,9 +655,39 @@ const start = dayjs(end).add(-239, 'months')
.search-input {
background: #F5F5F5;
background: rgba(102, 126, 234, 0.08);
color: #333333;
margin-right: 36rpx;
flex: 1;
margin-right: 16rpx;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 500;
line-height: 1;
}
}
.filter-panel {
@@ -403,10 +702,23 @@ const start = dayjs(end).add(-239, 'months')
padding: 0 30rpx 30rpx;
.filter-title {
color: #000000;
font-size: 30rpx;
font-weight: 500;
padding: 30rpx 0;
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.state-list {
@@ -443,98 +755,83 @@ const start = dayjs(end).add(-239, 'months')
}
.list-item {
margin: 0 24rpx 24rpx;
padding: 32rpx;
margin: 0 24rpx 16rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.status {
.status-item {
width: 120rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border-radius: 4rpx;
padding: 20rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.header-left {
flex: 1;
.time-badge {
display: inline-flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 12rpx;
text {
font-size: 28rpx;
color: #ffffff;
font-weight: 600;
line-height: 1;
}
}
}
.header-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 8rpx;
.amount-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.85);
line-height: 1;
}
.status1 {
background: #F0F0F0;
color: #8C8C8C;
}
.status2 {
background: rgba(38, 129, 255, 0.2);
color: #2681FF;
}
.status3 {
background: #F7F7F7;
color: #2681FF;
}
.status4 {
background: rgba(255, 85, 51, 0.2);
color: #FF5533;
}
.status5 {
background: #F7F7F7;
color: rgba(0, 0, 0, 0.85);
}
.status7 {
background: rgba(255, 129, 51, 0.2);
color: #FF8133;
}
.status8 {
background: rgba(65, 217, 165, 0.2);
color: #41D9A5;
.amount-value {
font-size: 30rpx;
color: #ffffff;
font-weight: 700;
line-height: 1;
}
}
}
.item-row {
padding: 16rpx 0;
.row-label {
color: rgba(0, 0, 0, 0.55);
.item-body {
padding: 20rpx 24rpx;
.detail-label {
display: flex;
align-items: center;
gap: 6rpx;
margin-bottom: 12rpx;
text {
font-size: 24rpx;
color: #667eea;
font-weight: 600;
line-height: 1;
}
}
.row-value {
color: rgba(0, 0, 0, 0.85)
}
}
.operate {
display: flex;
justify-content: flex-end;
.btn {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
margin-left: 5rpx;
text-align: center;
}
.circulation {
background: rgba(0, 0, 0, 0.04);
margin-right: 24rpx;
color: rgba(0, 0, 0, 0.85);
}
.filling {
background: #2681FF;
border-radius: 8rpx;
color: #FFFFFF;
.detail-value {
font-size: 26rpx;
color: #2c3e50;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
}
}
}