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-11-20 18:59:07 +08:00
parent 73a5a75f30
commit 0b18117b61
9 changed files with 1126 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/pages/statistic/bill/creditBillAnalysis/index.vue
View File

@@ -118,53 +118,62 @@
</view>
</view>
</u-sticky>
<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="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 筛选面板 -->
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">账单时间</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -759,70 +768,123 @@ page {
color: #667eea;
}
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
.filter-title {
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 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.btn-box {
.state-list {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
.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;
}
}
}
}

264
src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
View File

@@ -128,54 +128,62 @@
</view>
</view>
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">还款日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">还款日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -775,67 +783,123 @@ page {
color: #667eea;
}
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
.filter-title {
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 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.btn-box {
.state-list {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
.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;
}
}
}
}

259
src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
View File

@@ -90,52 +90,59 @@
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">分期时间</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<view class="filter-title">分期时间</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -729,67 +736,123 @@ page {
color: #667eea;
}
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
.filter-title {
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 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.btn-box {
.state-list {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
.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;
}
}
}
}

82
src/pages/statistic/bill/creditRecordAnalysis/index.vue
View File

@@ -176,22 +176,30 @@
</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"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
<qiun-data-charts
@@ -728,17 +736,20 @@ page {
line-height: 1;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
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: #2c3e50;
@@ -786,11 +797,52 @@ page {
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
flex: 1;
height: 80rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
transition: all 0.3s ease;
text {
font-size: 28rpx;
font-weight: 500;
line-height: 1;
}
&:active {
transform: scale(0.98);
opacity: 0.8;
}
}
.btn-reset {
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
text {
color: #ffffff;
}
}
}
}
}
.list-item {

175
src/pages/statistic/bill/futuresAnalysis/index.vue
View File

@@ -91,52 +91,59 @@
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<view class="select-header">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -756,13 +763,15 @@ page {
color: #667eea;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
@@ -793,22 +802,32 @@ page {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
line-height: 68rpx;
font-size: 28rpx;
color: #000000;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
@@ -819,9 +838,51 @@ page {
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 16rpx;

173
src/pages/statistic/bill/investAnalysis/index.vue
View File

@@ -96,52 +96,59 @@
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<view class="select-header">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -754,13 +761,15 @@ page {
color: #667eea;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
@@ -791,22 +800,32 @@ page {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
line-height: 68rpx;
font-size: 28rpx;
color: #000000;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
@@ -817,9 +836,51 @@ page {
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 16rpx;

177
src/pages/statistic/bill/onlineLendAnalysis/index.vue
View File

@@ -131,53 +131,60 @@
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">还款日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<view class="select-header">还款日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -779,13 +786,15 @@ page {
color: #667eea;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
@@ -816,22 +825,32 @@ page {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
line-height: 68rpx;
font-size: 28rpx;
color: #000000;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
@@ -842,8 +861,50 @@ page {
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 {

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

@@ -123,21 +123,29 @@
</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"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
<qiun-data-charts
@@ -727,17 +735,20 @@ page {
line-height: 1;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
top: 180rpx;
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: #2c3e50;
@@ -785,12 +796,53 @@ page {
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
flex: 1;
height: 80rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
transition: all 0.3s ease;
text {
font-size: 28rpx;
font-weight: 500;
line-height: 1;
}
&:active {
transform: scale(0.98);
opacity: 0.8;
}
}
.btn-reset {
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 0 24rpx 16rpx;

175
src/pages/statistic/bill/stocksAnalysis/index.vue
View File

@@ -91,52 +91,59 @@
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="filter-title">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<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>
</view>
</u-transition>
<view class="select-header">统计日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</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>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
<!-- 日期选择器 -->
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="year-month"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -751,13 +758,15 @@ page {
color: #667eea;
}
}
}
.filter-panel {
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
@@ -788,22 +797,32 @@ page {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
line-height: 68rpx;
font-size: 28rpx;
color: #000000;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
@@ -814,8 +833,50 @@ page {
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 {