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

617
src/pages/statistic/accounts/openCardStatics/index.vue
View File

@@ -1,12 +1,14 @@
<template>
<view class="container">
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<view class="search-view">
<u-input v-model="queryParams.time" border="false" type="select" placeholder="" 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>
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
<view class="search-view">
<u-input v-model="queryParams.time" border="false" type="select" placeholder="" suffixIcon="calendar"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
<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">
@@ -40,8 +42,14 @@
</view>
</view>
<view class="btn-box">
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
<view class="btn-reset" @click="resetQuery()">
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
<text>重置</text>
</view>
<view class="btn-confirm" @click="searchSubmit()">
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
<text>确定</text>
</view>
</view>
<u-datetime-picker
:closeOnClickOverlay="true"
@@ -112,29 +120,89 @@
</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="openCardLineChart"
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
/>
</view>
<!-- 柱状图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
<qiun-data-charts
type="column"
canvasId="openCardColumnChart"
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
/>
</view>
<!-- 列表展示 -->
<u-list :spaceHeight="116" 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="list" size="14" color="#667eea"></uni-icons>
<text>开卡明细</text>
</view>
<view class="detail-content">
<text>{{ formatMultiLineData(item.detail) || '-' }}</text>
</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>
</view>
</u-list>
</view>
<!-- 悬停按钮返回工作台-->
<suspend></suspend>
<refresh></refresh>
<!-- 悬停按钮返回统计分析-->
<statisticBtn></statisticBtn>
</template>
<script setup>
@@ -149,6 +217,7 @@
const isShow = ref(false)
const accountsList = ref([])
const timeShow= ref(false)
const viewMode = ref('list') // 'list', 'line', 'column'
const oneName= ref("")
const oneCount= ref(0)
const twoName= ref("")
@@ -189,11 +258,141 @@
})
const { filterPanel, 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) => {
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) => {
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
})
onLoad(() => {
getDict()
getList()
console.log('页面加载完成')
});
onShow(() => {
@@ -236,11 +435,18 @@ function searchSubmit() {
function resetQuery() {
queryParams.value.id = ''
queryParams.value.type = '2'
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-23, '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)
queryParams.value.startTime = ''
queryParams.value.time = ''
queryParams.value.endTime = ''
}
function getList() {
function getList() {
getOpenCardList({...queryParams.value }).then(res => {
account.value = { ...res.data }
listData.value = listData.value.concat(res.data.tableDebitList)
@@ -261,39 +467,53 @@ function searchSubmit() {
fourName.value= accountsList.value[3].name
fourCount.value= accountsList.value[3].count
}
console.log('listData:', listData.value)
console.log('chartData:', chartData.value)
}).catch(() => {
})
}
function getDict() {
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-23, '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)
}
</script>
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
padding: 0;
overflow: visible;
.header-con {
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
flex: 1;
display: flex;
align-items: center;
padding: 24rpx 20rpx;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
opacity: 0.9;
}
.item-icon {
@@ -303,8 +523,8 @@ function searchSubmit() {
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
@@ -347,6 +567,80 @@ function searchSubmit() {
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 160rpx;
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;
background-color: #ffffff;
@@ -354,11 +648,46 @@ function searchSubmit() {
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
.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: 600;
}
uni-icons {
color: #667eea;
}
}
.filter-panel {
@@ -367,16 +696,31 @@ function searchSubmit() {
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffff;
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.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 {
@@ -405,106 +749,141 @@ function searchSubmit() {
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.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;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
}
}
.item-row {
padding: 16rpx 0;
.row-label {
color: rgba(0, 0, 0, 0.55);
.item-body {
padding: 24rpx;
.detail-label {
display: flex;
align-items: center;
gap: 6rpx;
margin-bottom: 12rpx;
text {
font-size: 26rpx;
color: #667eea;
font-weight: 600;
}
}
.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-content {
padding: 16rpx;
background: #f8f9fb;
border-radius: 12rpx;
border-left: 4rpx solid #667eea;
text {
font-size: 26rpx;
color: #333333;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-all;
}
}
}
}