fix: 统一优化统计分析界面，图标样式等！
This commit is contained in:
tianyongbao
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
|
||||
@@ -231,7 +232,7 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" 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">
|
||||
@@ -9,56 +9,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -190,6 +141,55 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -214,7 +214,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -295,7 +295,11 @@
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 50, 5],
|
||||
enableScroll: false,
|
||||
@@ -311,10 +315,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -345,6 +350,7 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
@@ -362,6 +368,9 @@
|
||||
maxValue = maxValue + range * 0.2
|
||||
}
|
||||
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
@@ -376,10 +385,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -522,7 +532,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -604,6 +617,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -665,13 +679,13 @@ function searchSubmit() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 600rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.dataTypeName" border="false" type="select" @click="handleAccountType" placeholder="请选择账户类型" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -112,7 +111,6 @@
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
<view class="title-decorator"></view>
|
||||
<text class="title-text">余额统计</text>
|
||||
@@ -150,6 +148,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
<!-- 图表布局 -->
|
||||
<view class="balance-display-container" v-if="listData.length>0 && (viewMode === 'line' || viewMode === 'column')">
|
||||
@@ -180,7 +179,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 储蓄账户列表展示 -->
|
||||
<u-list v-show="viewMode === 'list'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'list'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -200,7 +199,7 @@
|
||||
</u-list>
|
||||
|
||||
<!-- 信用卡余额列表展示 -->
|
||||
<u-list v-show="viewMode === 'credit'" :spaceHeight="200">
|
||||
<u-list v-show="viewMode === 'credit'" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in secondListData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -269,9 +268,13 @@
|
||||
const { filterPanel, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 50, 5],
|
||||
padding: [15, 15, 10, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -280,7 +283,7 @@
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disabled: true
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -312,6 +315,7 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
@@ -329,16 +333,19 @@
|
||||
maxValue = maxValue + range * 0.2
|
||||
}
|
||||
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 10, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disabled: true
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -419,11 +426,14 @@
|
||||
accountsBalance.value = { ...res.data }
|
||||
secondListData.value=[]
|
||||
listData.value=[]
|
||||
// 只保留账户名称中包含"储蓄账户"的数据
|
||||
// 只保留账户名称中包含"储蓄账户"的数据，并移除"储蓄账户-"前缀
|
||||
const filteredData = res.data.accountsBalancesList ?
|
||||
res.data.accountsBalancesList.filter(item =>
|
||||
item.account && item.account.includes('储蓄账户')
|
||||
) : []
|
||||
).map(item => ({
|
||||
...item,
|
||||
account: item.account.replace('储蓄账户-', '')
|
||||
})) : []
|
||||
listData.value = listData.value.concat(filteredData)
|
||||
secondListData.value = secondListData.value.concat(res.data.creditBalancesList)
|
||||
}).catch(() => {
|
||||
@@ -486,7 +496,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -573,6 +586,7 @@
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -652,7 +666,7 @@
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
height: 850rpx;
|
||||
height: 550rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -17,56 +14,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -197,6 +145,55 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -221,7 +218,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -313,7 +310,11 @@
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 5],
|
||||
enableScroll: false,
|
||||
@@ -330,10 +331,11 @@
|
||||
axisLineColor: '#CCCCCC',
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -363,6 +365,7 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
@@ -380,6 +383,9 @@
|
||||
maxValue = maxValue + range * 0.2
|
||||
}
|
||||
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
@@ -394,10 +400,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -576,7 +583,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -665,6 +675,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -726,13 +737,13 @@ function searchSubmit() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 20rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 470rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -17,56 +15,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -148,7 +97,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef" v-show="account.top8Name != null">
|
||||
<!-- <div class="header-con" ref="searchHeightRef" v-show="account.top8Name != null">
|
||||
<div class="item" v-show="account.top8Name != null">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
|
||||
<uni-icons type="book" size="24" color="#ffffff"></uni-icons>
|
||||
@@ -167,8 +116,8 @@
|
||||
<div class="num">{{ account.top9 }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef" v-show="account.top10Name != null">
|
||||
</div> -->
|
||||
<!-- <div class="header-con" ref="searchHeightRef" v-show="account.top10Name != null">
|
||||
<div class="item" v-show="account.top10Name != null">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);">
|
||||
<uni-icons type="phone" size="24" color="#ffffff"></uni-icons>
|
||||
@@ -227,20 +176,13 @@
|
||||
<div class="num">{{ account.top15 }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div></div>
|
||||
</div>
|
||||
<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 === 'date' }]"
|
||||
@click="viewMode = 'date'; btClassClick()"
|
||||
>
|
||||
<uni-icons type="calendar" size="16" :color="viewMode === 'date' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>日期</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'category' }]"
|
||||
@click="viewMode = 'category'; btDayClick()"
|
||||
@@ -248,6 +190,13 @@
|
||||
<uni-icons type="list" size="16" :color="viewMode === 'category' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>分类</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'date' }]"
|
||||
@click="viewMode = 'date'; btClassClick()"
|
||||
>
|
||||
<uni-icons type="calendar" size="16" :color="viewMode === 'date' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>日期</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
||||
@click="viewMode = 'line'"
|
||||
@@ -264,6 +213,55 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -288,7 +286,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list v-show="viewMode === 'date'" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'date'" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -308,13 +306,13 @@
|
||||
<view>
|
||||
</view>
|
||||
</u-list>
|
||||
<u-list v-show="viewMode === 'category'" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'category'" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in secondListData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
<view class="header-left">
|
||||
<view class="time-badge">
|
||||
<uni-icons type="list" size="16" color="#667eea"></uni-icons>
|
||||
<uni-icons type="list" size="16" color="#ffffff"></uni-icons>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -362,7 +360,7 @@
|
||||
const tabShow = ref(false)
|
||||
const classType = ref("primary")
|
||||
const dayType = ref("default")
|
||||
const viewMode = ref('date') // 'date' 或 'category' 或 'line' 或 'column'
|
||||
const viewMode = ref('category') // 'category' 或 'date' 或 'line' 或 'column'
|
||||
|
||||
const account = ref({
|
||||
amount: '',
|
||||
@@ -394,10 +392,15 @@
|
||||
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
// 曲线图配置 - 根据数据量动态调整X轴显示
|
||||
const lineChartOpts = computed(() => {
|
||||
const currentData = viewMode.value === 'category' ? secondListData.value : listData.value
|
||||
const dataLength = currentData ? currentData.length : 0
|
||||
const showXAxisLabel = dataLength <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -411,10 +414,12 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
// 大于10天时隐藏X轴标签
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -446,11 +451,15 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const currentData = viewMode.value === 'category' ? secondListData.value : listData.value
|
||||
const dataLength = currentData ? currentData.length : 0
|
||||
const showXAxisLabel = dataLength <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -466,7 +475,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -478,10 +487,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -619,7 +629,10 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
|
||||
secondListData.value=[]
|
||||
listData.value=[]
|
||||
listData.value = listData.value.concat(res.data.tableAccountsDateList)
|
||||
secondListData.value = secondListData.value.concat(res.data.accountsList)
|
||||
// 过滤掉前7项（已在统计卡片中显示），如果数据不足7项则显示全部
|
||||
const accountsList = res.data.accountsList || []
|
||||
const filteredList = accountsList.length > 7 ? accountsList.slice(7) : accountsList
|
||||
secondListData.value = secondListData.value.concat(filteredList)
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
@@ -675,7 +688,10 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -756,6 +772,7 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -817,13 +834,13 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 550rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" 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">
|
||||
@@ -238,6 +238,10 @@ function getDict() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<!-- <div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
|
||||
@@ -20,7 +21,7 @@
|
||||
<div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
@@ -220,6 +221,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -244,7 +246,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 结算卡列表展示 -->
|
||||
<u-list v-show="viewMode === 'cardList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'cardList'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -336,7 +338,7 @@
|
||||
</u-list>
|
||||
|
||||
<!-- 近6月收款金额列表展示 -->
|
||||
<u-list v-show="viewMode === 'amountList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'amountList'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in secondListData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -395,6 +397,9 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = secondListData.value ? secondListData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -419,7 +424,7 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -433,9 +438,9 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
disabled: true,
|
||||
fontSize: 0,
|
||||
fontColor: '#999999',
|
||||
disabled: !showXAxisLabel,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
},
|
||||
@@ -476,6 +481,9 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = secondListData.value ? secondListData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -500,7 +508,7 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -512,9 +520,9 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
disabled: true,
|
||||
fontSize: 0,
|
||||
fontColor: '#999999',
|
||||
disabled: !showXAxisLabel,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
},
|
||||
@@ -640,7 +648,10 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -794,6 +805,7 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -855,13 +867,13 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 720rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择储蓄账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -17,56 +14,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -198,6 +146,55 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -222,7 +219,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -309,7 +306,11 @@
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 5],
|
||||
enableScroll: false,
|
||||
@@ -326,10 +327,11 @@
|
||||
axisLineColor: '#CCCCCC',
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -359,10 +361,14 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -390,10 +396,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -572,7 +579,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -661,6 +671,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -722,13 +733,13 @@ function searchSubmit() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 30rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 480rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择投资账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -17,56 +15,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -181,6 +130,55 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -205,7 +203,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -293,6 +291,9 @@
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -308,7 +309,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -322,10 +323,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -362,6 +364,9 @@
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -390,7 +395,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -402,10 +407,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -593,7 +599,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -675,6 +684,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -736,13 +746,13 @@ function searchSubmit() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 650rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" 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">
|
||||
@@ -9,62 +9,7 @@
|
||||
<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="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>
|
||||
<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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
|
||||
<div class="header-con" v-show ="oneCount>0" ref="searchHeightRef">
|
||||
@@ -147,6 +92,61 @@
|
||||
</view>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -171,7 +171,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="116" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -261,6 +261,9 @@
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -276,7 +279,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -290,10 +293,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -330,6 +334,9 @@
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -352,7 +359,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -364,10 +371,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -528,7 +536,10 @@ function getList() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -613,6 +624,7 @@ function getList() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -674,13 +686,13 @@ function getList() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 950rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择POS机" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -17,6 +14,79 @@
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡金额</div>
|
||||
<div class="num">{{ pos.amount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡手续费</div>
|
||||
<div class="num">{{ pos.commission }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">入账金额</div>
|
||||
<div class="num">{{ pos.actualAmount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
|
||||
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡次数</div>
|
||||
<div class="num">{{ pos.count }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
<view class="title-decorator"></view>
|
||||
<text class="title-text">POS刷卡统计</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>
|
||||
</u-sticky>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
@@ -65,79 +135,6 @@
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡金额</div>
|
||||
<div class="num">{{ pos.amount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡手续费</div>
|
||||
<div class="num">{{ pos.commission }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">入账金额</div>
|
||||
<div class="num">{{ pos.actualAmount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
|
||||
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">刷卡次数</div>
|
||||
<div class="num">{{ pos.count }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
<view class="title-decorator"></view>
|
||||
<text class="title-text">POS机刷卡统计</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'">
|
||||
@@ -162,7 +159,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -248,6 +245,9 @@
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -263,7 +263,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -277,10 +277,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -317,6 +318,9 @@
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -339,7 +343,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -351,10 +355,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -537,7 +542,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -618,6 +626,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -679,7 +688,7 @@ function searchSubmit() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
border-radius: 16rpx;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<!-- <div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
|
||||
@@ -20,7 +21,7 @@
|
||||
<div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
@@ -202,7 +203,7 @@
|
||||
@click="viewMode = 'amountList'"
|
||||
>
|
||||
<uni-icons type="wallet" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
|
||||
<text>近6月刷卡金额</text>
|
||||
<text>近6月刷卡</text>
|
||||
</view>
|
||||
<view
|
||||
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
||||
@@ -220,6 +221,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -244,7 +246,7 @@
|
||||
</view>
|
||||
|
||||
<!-- POS机列表展示 -->
|
||||
<u-list v-show="viewMode === 'posList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'posList'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -336,7 +338,7 @@
|
||||
</u-list>
|
||||
|
||||
<!-- 近6月刷卡金额统计列表展示 -->
|
||||
<u-list v-show="viewMode === 'amountList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
|
||||
<u-list v-show="viewMode === 'amountList'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in secondListData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -395,6 +397,9 @@ const { filterPanel, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = secondListData.value ? secondListData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -419,7 +424,7 @@ const lineChartOpts = computed(() => {
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -433,9 +438,9 @@ const lineChartOpts = computed(() => {
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
disabled: true,
|
||||
fontSize: 0,
|
||||
fontColor: '#999999',
|
||||
disabled: !showXAxisLabel,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
},
|
||||
@@ -474,6 +479,9 @@ const lineChartOpts = computed(() => {
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = secondListData.value ? secondListData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -505,7 +513,7 @@ const columnChartOpts = computed(() => {
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -517,9 +525,9 @@ const columnChartOpts = computed(() => {
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
disabled: true,
|
||||
fontSize: 0,
|
||||
fontColor: '#999999',
|
||||
disabled: !showXAxisLabel,
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
},
|
||||
@@ -640,7 +648,10 @@ function settingCancel() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -809,6 +820,7 @@ function settingCancel() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -20rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -870,13 +882,13 @@ function settingCancel() {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 700rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -250,6 +250,10 @@ function selectType(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,55 +15,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -168,6 +117,54 @@
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -192,7 +189,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="720" 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">
|
||||
@@ -275,9 +272,13 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -291,10 +292,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -326,10 +328,14 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -352,7 +358,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -364,10 +370,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -546,7 +553,10 @@ const start = dayjs(end).add(-11, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -628,6 +638,7 @@ const start = dayjs(end).add(-11, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -689,13 +700,13 @@ const start = dayjs(end).add(-11, 'months')
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 650rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,56 +16,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -178,6 +127,55 @@
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -202,7 +200,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -288,9 +286,13 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -304,10 +306,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -339,10 +342,14 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -365,7 +372,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -377,10 +384,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -562,7 +570,10 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -644,6 +655,7 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -705,13 +717,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 650rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,6 +16,79 @@
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清分期</div>
|
||||
<div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本息）</div>
|
||||
<div class="num">{{ historyObj.clearedTotal }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本金）</div>
|
||||
<div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清利息</div>
|
||||
<div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</u-sticky>
|
||||
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
@@ -65,78 +136,6 @@
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清分期</div>
|
||||
<div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本息）</div>
|
||||
<div class="num">{{ historyObj.clearedTotal }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本金）</div>
|
||||
<div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清利息</div>
|
||||
<div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<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'">
|
||||
@@ -161,7 +160,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -245,9 +244,13 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -261,10 +264,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -296,10 +300,14 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -322,7 +330,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -334,10 +342,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -515,7 +524,10 @@ const start = dayjs(end).add(-24, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -597,6 +609,7 @@ const start = dayjs(end).add(-24, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -658,7 +671,7 @@ const start = dayjs(end).add(-24, 'months')
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
border-radius: 16rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
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">
|
||||
@@ -9,56 +10,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -189,6 +141,56 @@
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -213,7 +215,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -291,9 +293,13 @@
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -307,10 +313,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -339,10 +346,14 @@
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -365,7 +376,7 @@
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -377,10 +388,11 @@
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -516,7 +528,10 @@ function searchSubmit() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -597,6 +612,7 @@ function searchSubmit() {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -664,7 +680,7 @@ function searchSubmit() {
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
width: calc(100% - 48rpx);
|
||||
height: 850rpx;
|
||||
height: 560rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择期货账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,6 +17,79 @@
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">累计收益</div>
|
||||
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">平均收益</div>
|
||||
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大收益</div>
|
||||
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
|
||||
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大亏损</div>
|
||||
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</u-sticky>
|
||||
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
@@ -65,79 +137,6 @@
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">累计收益</div>
|
||||
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">平均收益</div>
|
||||
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大收益</div>
|
||||
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
|
||||
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大亏损</div>
|
||||
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<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'">
|
||||
@@ -162,7 +161,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -248,6 +247,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -263,7 +265,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -277,10 +280,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -317,6 +321,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -345,7 +352,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -357,10 +365,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -543,7 +552,10 @@ const start = dayjs(end).add(-12, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -624,6 +636,7 @@ const start = dayjs(end).add(-12, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -685,13 +698,13 @@ const start = dayjs(end).add(-12, 'months')
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 800rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -10,55 +11,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -111,7 +64,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
@@ -141,6 +93,55 @@
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -165,7 +166,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -250,6 +251,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -265,7 +269,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -279,10 +284,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -319,6 +325,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -347,7 +356,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -359,10 +369,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -539,7 +550,10 @@ const start = dayjs(end).add(-12, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -620,6 +634,7 @@ const start = dayjs(end).add(-12, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -681,13 +696,13 @@ const start = dayjs(end).add(-12, 'months')
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 750rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择贷款机构" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,56 +17,7 @@
|
||||
<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="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>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
@@ -149,8 +99,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<view class="section-title" v-show="listData.length>0">
|
||||
<view class="title-decorator"></view>
|
||||
<text class="title-text">贷款待还统计</text>
|
||||
@@ -178,6 +128,56 @@
|
||||
</view>
|
||||
</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="date"
|
||||
:minDate="-2209017600000"
|
||||
@close="openOrCloseDate"
|
||||
@cancel="openOrCloseDate"
|
||||
@confirm="confirm"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
|
||||
<!-- 曲线图展示 -->
|
||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||
@@ -202,7 +202,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -289,7 +289,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
enableScroll: false,
|
||||
@@ -305,10 +309,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -340,10 +345,14 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -366,7 +375,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -378,10 +388,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -562,7 +573,10 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -644,6 +658,7 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -705,13 +720,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 650rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择贷款机构" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,6 +17,79 @@
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清贷款</div>
|
||||
<div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本息）</div>
|
||||
<div class="num">{{ historyObj.clearedTotal }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本金）</div>
|
||||
<div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清利息</div>
|
||||
<div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</u-sticky>
|
||||
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
@@ -65,78 +137,6 @@
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清贷款</div>
|
||||
<div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本息）</div>
|
||||
<div class="num">{{ historyObj.clearedTotal }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清（本金）</div>
|
||||
<div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<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">
|
||||
<div class="title">已结清利息</div>
|
||||
<div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<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'">
|
||||
@@ -161,7 +161,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -244,7 +244,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = ref({
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 35, 5],
|
||||
enableScroll: false,
|
||||
@@ -260,10 +264,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -295,10 +300,14 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
animation: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -321,7 +330,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -333,10 +343,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -514,7 +525,10 @@ const start = dayjs(end).add(-24, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
@@ -596,6 +610,7 @@ const start = dayjs(end).add(-24, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<u-sticky offsetTop="0rpx"
|
||||
customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择股票账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
</u-input>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -18,6 +17,79 @@
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">累计收益</div>
|
||||
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">平均收益</div>
|
||||
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大收益</div>
|
||||
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
|
||||
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大亏损</div>
|
||||
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</u-sticky>
|
||||
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
@@ -65,79 +137,6 @@
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<div class="app-container">
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
|
||||
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">累计收益</div>
|
||||
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
|
||||
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">平均收益</div>
|
||||
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
|
||||
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大收益</div>
|
||||
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
|
||||
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<div class="info-sum">
|
||||
<div class="title">最大亏损</div>
|
||||
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<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'">
|
||||
@@ -162,7 +161,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表展示 -->
|
||||
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
|
||||
<u-list :spaceHeight="700" 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">
|
||||
@@ -248,6 +247,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 曲线图配置
|
||||
const lineChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -263,7 +265,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [20, 15, 60, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
@@ -277,10 +280,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -317,6 +321,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
// 柱状图配置
|
||||
const columnChartOpts = computed(() => {
|
||||
const dataCount = listData.value ? listData.value.length : 0
|
||||
const showXAxisLabel = dataCount <= 10
|
||||
|
||||
// 计算数据范围以动态设置Y轴
|
||||
let minValue = 0
|
||||
let maxValue = 0
|
||||
@@ -345,7 +352,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
|
||||
return {
|
||||
color: ['#667eea'],
|
||||
padding: [15, 15, 80, 15],
|
||||
padding: [15, 15, 30, 5],
|
||||
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
@@ -357,10 +365,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||||
axisLine: false,
|
||||
scrollShow: true,
|
||||
itemCount: 5,
|
||||
fontSize: 10,
|
||||
fontColor: '#999999',
|
||||
fontSize: showXAxisLabel ? 10 : 0,
|
||||
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
||||
rotateLabel: true,
|
||||
rotateAngle: 30
|
||||
rotateAngle: 30,
|
||||
disabled: !showXAxisLabel
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@@ -538,7 +547,10 @@ const start = dayjs(end).add(-12, 'months')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
padding: 8rpx 0;
|
||||
@@ -619,6 +631,7 @@ const start = dayjs(end).add(-12, 'months')
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
margin-top: -10rpx;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
@@ -680,13 +693,13 @@ const start = dayjs(end).add(-12, 'months')
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin: 16rpx 24rpx 160rpx;
|
||||
margin: 16rpx 24rpx 60rpx;
|
||||
padding: 16rpx;
|
||||
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: 850rpx;
|
||||
height: 800rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
{ path: '/pages/statistic/accounts/creditCardDealAnalysis/index', text: '信用卡收支统计', icon: 'vip-filled', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄账户统计', icon: 'paperplane', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'star', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'invest:debitCardAnalysis:list' },
|
||||
{ path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posStatics:list' },
|
||||
{ path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/statistic/accounts/posAnalysis/index', text: 'POS刷卡统计', icon: 'scan', color: 'linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%)', permission: 'invest:posStatics:list' },
|
||||
{ path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'eye-slash-filled', color: 'linear-gradient(135deg, #636e72 0%, #2d3436 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'gift-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/statistic/accounts/dailyLiabilities/index', text: '每日净资产统计', icon: 'bars', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'invest:dailyLiabilities:list' },
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.accountName" border="false" placeholder="请选择记账账户" class="search-input"
|
||||
@click="handleAccount" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -79,7 +80,7 @@
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -425,8 +426,8 @@ function selectAccountType(item) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
@@ -569,25 +570,38 @@ page {
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
flex: 1;
|
||||
background: #f5f7fa;
|
||||
color: #666666;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
|
||||
text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 2;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
flex: 1;
|
||||
background: #667eea;
|
||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -288,6 +288,10 @@ function selectType(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.accountName" border="false" placeholder="请选择记账账户" class="search-input"
|
||||
@click="handleAccount" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -332,8 +333,8 @@ function selectType(item) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.creditCardName" border="false" type="select" @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -77,7 +79,8 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -329,7 +332,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -351,8 +355,7 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.accountName" border="false" placeholder="请选择储蓄账户" class="search-input"
|
||||
@click="handleAccount" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -72,7 +74,8 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -353,7 +356,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -375,8 +379,8 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入投资账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -76,7 +78,8 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -334,7 +337,8 @@ function selectAccountType(item) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -356,8 +360,7 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入投资账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -77,7 +79,8 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -307,7 +310,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -329,8 +333,8 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入借贷账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -302,7 +303,7 @@ function dictStr(val, arr) {
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.creditCardName" border="false" type="select" @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -77,7 +79,8 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="252" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
@@ -376,7 +379,8 @@ function settingCancel() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -398,8 +402,7 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.creditCardName" border="false" type="select" @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -9,7 +11,8 @@
|
||||
<text>清空</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="80" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header">
|
||||
@@ -310,15 +313,18 @@ function settingCancel() {
|
||||
display:float;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入信用卡名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -275,8 +276,8 @@ function formatCardCode(code) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.btnAdd {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -282,8 +282,8 @@ function selectStatus(item) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入理财账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -224,8 +225,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入期货账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -224,8 +225,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -249,8 +249,8 @@ function selectType(value) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sticky-container {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入POS机名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -247,8 +248,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入股票账户名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -213,8 +214,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -218,7 +218,8 @@ onLoad((option) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -269,7 +269,8 @@ function dictStr(val, arr) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -289,8 +290,8 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.creditCardName" border="false" type="select" @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
|
||||
@@ -293,7 +294,8 @@ function selectStatus(value) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.name" border="false" disabled ="false" type="select" v-show="true" class="search-input">
|
||||
</u-input>
|
||||
@@ -215,6 +216,10 @@ function handleUpdateInterest() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.onlineLendName" border="false" type="select" @click="handleOnlineLend" placeholder="请选择信用卡" suffixIcon="search"
|
||||
@@ -276,6 +277,10 @@ function selectStatus(value) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.queryInstitution" border="false" placeholder="请输入" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -278,6 +279,10 @@ function selectStatus(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
|
||||
@@ -199,6 +200,10 @@ function dictStr(val, arr) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.sticky-container {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.futureStocksName" border="false" type="select" @click="handleFutureStocks" placeholder="请选择期货账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -244,6 +245,10 @@ function selectStatus(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.name" border="false" disabled ="false" type="select" v-show="true" class="search-input">
|
||||
</u-input>
|
||||
@@ -216,6 +217,10 @@ function handleUpdateInterest() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.onlineLendName" border="false" type="select" @click="handleOnlineLend" placeholder="请选择贷款机构" suffixIcon="search"
|
||||
@@ -283,6 +284,10 @@ function selectStatus(value) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.onlineLendName" border="false" type="select" @click="handleOnlineLend" placeholder="请选择人情借贷" suffixIcon="search"
|
||||
@@ -269,7 +270,10 @@ function selectStatus(val) {
|
||||
.container {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="sticky-container">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
|
||||
@@ -203,7 +204,10 @@ function dictStr(val, arr) {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u-input v-model="queryParams.futureStocksName" border="false" type="select" @click="handleFutureStocks" placeholder="请选择股票账户" suffixIcon="search"
|
||||
suffixIconStyle="color: #909399" class="search-input">
|
||||
@@ -237,6 +238,10 @@ function selectStatus(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入标题" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -242,6 +243,10 @@ function selectStatus(item) {
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
@@ -384,25 +389,38 @@ function selectStatus(item) {
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
flex: 1;
|
||||
background: #f5f7fa;
|
||||
color: #666666;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
|
||||
text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 2;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
flex: 1;
|
||||
background: #667eea;
|
||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||
border: none;
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.name" border="false" placeholder="请输入商品名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -253,7 +254,7 @@ function selectStatus(item) {
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.kind" border="false" placeholder="请输入商品名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
@@ -318,7 +319,7 @@ function selectStatus(item) {
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
Reference in New Issue
Block a user