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

fix: 统计分析页面，统一ui优化完善！

Browse Source
This commit is contained in:
tianyongbao
2025-11-13 00:01:38 +08:00
parent 7bc08b86e9
commit 6231c2494f
21 changed files with 1917 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/index.vue
View File

@@ -15,7 +15,7 @@
</view>
<div class="info-sum">
<div class="title">净资产</div>
<div class="num">{{ (parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) }}<span>元</span></div>
<div class="num">{{ ((parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2) }}<span>元</span></div>
</div>
</div>
<div class="item">
@@ -24,7 +24,7 @@
</view>
<div class="info-sum">
<div class="title">总负债</div>
<div class="num">{{ (parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2)}}<span>元</span></div>
<div class="num">{{ ((parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2)}}<span>元</span></div>
</div>
</div>
</div>
@@ -35,7 +35,7 @@
</view>
<div class="info-sum">
<div class="title">人情欠款</div>
<div class="num">{{ peopleLendHistory }}<span>元</span></div>
<div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
</div>
</div>
<div class="item">
@@ -504,7 +504,7 @@
</view>
<div class="info-sum">
<div class="title">人情欠款</div>
<div class="num">{{ peopleLendHistory }}<span>元</span></div>
<div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
</div>
</div>
</div>
@@ -750,7 +750,7 @@
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="checkmark" size="20" color="#ffffff"></uni-icons>
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">本月投资盈利</div>
@@ -1148,6 +1148,7 @@ onMounted(() => {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.title-text {

418
src/pages/mine.vue
View File

@@ -2,72 +2,107 @@
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
<!--顶部个人信息栏-->
<view class="header-section">
<view class="flex padding justify-between">
<view class="flex align-center">
<view v-if="!avatar" class="cu-avatar xl round bg-white">
<view class="iconfont icon-people text-gray icon"></view>
</view>
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
</image>
<view v-if="!name" @click="handleToLogin" class="login-tip">
点击登录
</view>
<view v-if="name" @click="handleToInfo" class="user-info">
<view class="u_title">
用户名：{{ name }}
<view class="header-content">
<view class="user-section">
<view class="avatar-wrapper" @click="handleToAvatar">
<view v-if="!avatar" class="avatar-placeholder">
<uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
</view>
<image v-if="avatar" :src="avatar" class="user-avatar" mode="aspectFill"></image>
<view class="avatar-badge"></view>
</view>
<view class="user-details">
<view v-if="!name" @click="handleToLogin" class="login-prompt">
<text class="login-text">点击登录</text>
<uni-icons type="right" size="16" color="#ffffff"></uni-icons>
</view>
<view v-if="name" class="user-name-section">
<text class="user-name">{{ name }}</text>
<view class="user-tag">会员</view>
</view>
<view v-if="name" class="user-id">ID: {{ userId }}</view>
</view>
</view>
<view @click="handleToInfo" class="flex align-center">
<text>个人信息</text>
<view class="iconfont icon-right"></view>
<view @click="handleToInfo" class="settings-btn">
<uni-icons type="gear-filled" size="24" color="#ffffff"></uni-icons>
</view>
</view>
</view>
<view class="content-section">
<view class="mine-actions grid col-4 text-center">
<view class="action-item" @click="handleJiaoLiuQun">
<view class="iconfont icon-friendfill text-pink icon"></view>
<text class="text">官方公众号</text>
<view class="quick-actions">
<view class="action-card" @click="handleJiaoLiuQun">
<view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="chat-filled" size="24" color="#ffffff"></uni-icons>
</view>
<text class="action-text">官方公众号</text>
</view>
<view class="action-item" @click="handleService">
<view class="iconfont icon-service text-blue icon"></view>
<text class="text">在线客服</text>
<view class="action-card" @click="handleService">
<view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="email-filled" size="24" color="#ffffff"></uni-icons>
</view>
<text class="action-text">在线客服</text>
</view>
<view class="action-item" @click="handleBuilding">
<view class="iconfont icon-community text-mauve icon"></view>
<text class="text">反馈社区</text>
<view class="action-card" @click="handleBuilding">
<view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="chatbubble-filled" size="24" color="#ffffff"></uni-icons>
</view>
<text class="action-text">反馈社区</text>
</view>
<view class="action-item" @click="handleUs">
<view class="iconfont icon-dianzan text-green icon"></view>
<text class="text">点赞我们</text>
<view class="action-card" @click="handleUs">
<view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="heart-filled" size="24" color="#ffffff"></uni-icons>
</view>
<text class="action-text">点赞我们</text>
</view>
</view>
<view class="menu-list">
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
<view class="menu-item-box">
<view class="iconfont icon-user menu-icon"></view>
<view>编辑资料</view>
<view class="menu-section">
<view class="section-title">账户管理</view>
<view class="menu-card">
<view class="menu-item" @click="handleToEditInfo">
<view class="item-left">
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="person" size="20" color="#ffffff"></uni-icons>
</view>
<text class="menu-text">编辑资料</text>
</view>
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
</view>
<view class="menu-divider"></view>
<view class="menu-item" @click="handleToSetting">
<view class="item-left">
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
</view>
<text class="menu-text">应用设置</text>
</view>
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleHelp">
<view class="menu-item-box">
<view class="iconfont icon-help menu-icon"></view>
<view>常见问题</view>
</view>
<view class="menu-section">
<view class="section-title">帮助与支持</view>
<view class="menu-card">
<view class="menu-item" @click="handleHelp">
<view class="item-left">
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="help" size="20" color="#ffffff"></uni-icons>
</view>
<text class="menu-text">常见问题</text>
</view>
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleAbout">
<view class="menu-item-box">
<view class="iconfont icon-aixin menu-icon"></view>
<view>关于我们</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToSetting">
<view class="menu-item-box">
<view class="iconfont icon-setting menu-icon"></view>
<view>应用设置</view>
<view class="menu-divider"></view>
<view class="menu-item" @click="handleAbout">
<view class="item-left">
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="info" size="20" color="#ffffff"></uni-icons>
</view>
<text class="menu-text">关于我们</text>
</view>
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
</view>
</view>
</view>
@@ -86,20 +121,24 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const name = userStore.name;
const userId = computed(() => userStore.userId || '');
const version = config.appInfo.version;
const baseUrl = config.baseUrl;
const avatar = ref(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar);
const avatar = computed(() => {
if (!userStore.avatar) return '';
// 如果头像路径已经是完整URL，直接返回
if (userStore.avatar.startsWith('http')) return userStore.avatar;
// 否则拼接baseUrl
return baseUrl + userStore.avatar;
});
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const popup = ref(null);
uni.$on('refresh', () => {
avatar.value = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar;
})
function handleToInfo() {
uni.navigateTo({
url: '/pages_mine/pages/info/index'
@@ -186,64 +225,255 @@ function handleUs() {
<style lang="scss">
page {
background-color: #f5f6f7;
background-color: #f5f7fa;
}
.mine-container {
width: 100%;
height: 100%;
min-height: 100vh;
background-color: #f5f7fa;
.header-section {
padding: 15px 15px 45px 15px;
background-color: #3c96f3;
color: white;
.login-tip {
font-size: 18px;
margin-left: 10px;
padding: 60rpx 32rpx 120rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 15s infinite;
}
.cu-avatar {
border: 2px solid #eaeaea;
.icon {
font-size: 40px;
.header-content {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-start;
.user-section {
display: flex;
align-items: center;
flex: 1;
.avatar-wrapper {
position: relative;
margin-right: 24rpx;
.avatar-placeholder {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
border: 4rpx solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}
.user-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
border: 4rpx solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}
.avatar-badge {
position: absolute;
bottom: 4rpx;
right: 4rpx;
width: 24rpx;
height: 24rpx;
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
border-radius: 12rpx;
border: 3rpx solid #ffffff;
}
}
.user-details {
flex: 1;
.login-prompt {
display: flex;
align-items: center;
padding: 16rpx 24rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 40rpx;
backdrop-filter: blur(10rpx);
.login-text {
color: #ffffff;
font-size: 28rpx;
margin-right: 8rpx;
}
}
.user-name-section {
display: flex;
align-items: center;
margin-bottom: 12rpx;
.user-name {
color: #ffffff;
font-size: 36rpx;
font-weight: 600;
margin-right: 12rpx;
}
.user-tag {
padding: 4rpx 16rpx;
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
border-radius: 20rpx;
color: #ffffff;
font-size: 20rpx;
}
}
.user-id {
color: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
}
}
}
}
.user-info {
margin-left: 15px;
.u_title {
font-size: 18px;
line-height: 30px;
.settings-btn {
padding: 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
backdrop-filter: blur(10rpx);
}
}
}
.content-section {
margin-top: -80rpx;
padding: 0 32rpx 32rpx;
position: relative;
top: -50px;
z-index: 2;
.mine-actions {
margin: 15px 15px;
padding: 20px 0px;
border-radius: 8px;
background-color: white;
.action-item {
.icon {
font-size: 28px;
.quick-actions {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
padding: 32rpx 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-around;
margin-bottom: 32rpx;
.action-card {
display: flex;
flex-direction: column;
align-items: center;
.action-icon {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.text {
display: block;
font-size: 13px;
margin: 8px 0px;
.action-text {
color: #2c3e50;
font-size: 24rpx;
}
}
}
.menu-section {
margin-bottom: 32rpx;
.section-title {
color: #7f8c8d;
font-size: 28rpx;
padding: 0 0 20rpx 0;
margin-left: 16rpx;
font-weight: 600;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 28rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.menu-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 24rpx;
transition: background-color 0.3s ease;
&:active {
background-color: rgba(0, 0, 0, 0.02);
}
.item-left {
display: flex;
align-items: center;
.menu-icon-wrapper {
width: 64rpx;
height: 64rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.menu-text {
color: #2c3e50;
font-size: 28rpx;
}
}
}
.menu-divider {
height: 1rpx;
background-color: #e8edf3;
margin: 0 24rpx;
}
}
}
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(180deg);
}
}
</style>

132
src/pages/statistic/accounts/accountDealAnalysis/index.vue
View File

@@ -57,17 +57,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收支差额</div>
<div class="num">{{ account.balance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">工资收益</div>
<div class="num">{{ account.salaryIncome }}<span>元</span></div>
@@ -76,14 +80,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资盈利</div>
<div class="num">{{ account.investIncome}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资亏损</div>
<div class="num">{{ account.investOutcome }}<span>元</span></div>
@@ -92,14 +100,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出总额</div>
<div class="num">{{ account.totalOutcome}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">日常支出</div>
<div class="num">{{ account.dailyExpenses }}<span>元</span></div>
@@ -108,14 +120,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">手续费利息合计</div>
<div class="num">{{ account.notDailyExpenses}}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡分期利息</div>
<div class="num">{{ account.creditInterest}}<span>元</span></div>
@@ -125,14 +141,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="shop-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS机手续费</div>
<div class="num">{{ account.posExpenses }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:onlineLend')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">贷款利息</div>
<div class="num">{{ account.onLineInterest }}<span>元</span></div>
@@ -289,47 +309,73 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -7,68 +7,81 @@
</u-input>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">储蓄账户余额</div>
<div class="num">{{ accountsBalance.debitAllBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">储蓄卡余额</div>
<div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">I类储蓄卡余额</div>
<div class="num">{{ accountsBalance.idebitBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">II类储蓄卡余额</div>
<div class="num">{{ accountsBalance.iidebitBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
<div class="item" >
<img src="@/static/images/one.png" alt="" />
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡可用额度</div>
<div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">信用卡已用额度</div>
<div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
</div>
</div>
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡已用额度</div>
<div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">借贷账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
</div>
</div>
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">借贷账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资账户余额</div>
<div class="num">{{ accountsBalance.investBalance }}<span>元</span></div>
@@ -77,14 +90,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="navigate" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">期货账户余额</div>
<div class="num">{{ accountsBalance.futuresBalance }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">股票账户余额</div>
<div class="num">{{ accountsBalance.stocksBalance }}<span>元</span></div>
@@ -259,59 +276,78 @@
<style lang="scss" scoped>
.app-container {
/* 在App.vue的<style>中或者单独的style文件中 */
.btn-normal {
background-color: #f0f0f0;
color: #333;
}
.btn-selected {
background-color: #007AFF;
color: #fff;
}
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:hover {
border-color: #d0d7de;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

141
src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
View File

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">交易金额</div>
<div class="num">{{ account.amount }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入金额</div>
<div class="num">{{ account.income }}<span>元</span></div>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出金额</div>
<div class="num">{{ account.expenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入笔数</div>
<div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -100,14 +108,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出笔数</div>
<div class="num">{{ account.expensesCount}}<span>笔</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
<uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS刷卡支出</div>
<div class="num">{{ account.posExpenses }}<span>元</span></div>
@@ -116,14 +128,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费支出</div>
<div class="num">{{ account.realExpenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS刷卡笔数</div>
<div class="num">{{ account.posExpensesCount }}<span>笔</span></div>
@@ -132,14 +148,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费笔数</div>
<div class="num">{{ account.realExpensesCount}}<span>笔</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">其他支出笔数</div>
<div class="num">{{ account.otherExpensesCount }}<span>笔</span></div>
@@ -344,47 +364,80 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
img {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

157
src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
View File

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出总额</div>
<div class="num">{{ account.dailyExpenses }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top1Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="star" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top1Name }}</div>
<div class="num">{{ account.top1 }}<span>元</span></div>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top2Name != null">
<div class="item" v-show="account.top2Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top2Name }}</div>
<div class="num">{{ account.top2 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top3Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="cart" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top3Name }}</div>
<div class="num">{{ account.top3 }}<span>元</span></div>
@@ -100,14 +108,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top4Name != null">
<div class="item" v-show="account.top4Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="home" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top4Name }}</div>
<div class="num">{{ account.top4 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top5Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
<uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top5Name }}</div>
<div class="num">{{ account.top5 }}<span>元</span></div>
@@ -116,14 +128,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top6Name != null">
<div class="item" v-show="account.top6Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="car" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top6Name }}</div>
<div class="num">{{ account.top6 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top7Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top7Name }}</div>
<div class="num">{{ account.top7 }}<span>元</span></div>
@@ -132,14 +148,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top8Name != null">
<div class="item" v-show="account.top8Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="book" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top8Name }}</div>
<div class="num">{{ account.top8 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top9Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top9Name }}</div>
<div class="num">{{ account.top9 }}<span>元</span></div>
@@ -148,14 +168,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top10Name != null">
<div class="item" v-show="account.top10Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="phone" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top10Name }}</div>
<div class="num">{{ account.top10 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top11Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
<uni-icons type="bag" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top11Name }}</div>
<div class="num">{{ account.top11 }}<span>元</span></div>
@@ -164,14 +188,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top12Name != null">
<div class="item" v-show="account.top12Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top12Name }}</div>
<div class="num">{{ account.top12 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top13Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
<uni-icons type="navigate" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top13Name }}</div>
<div class="num">{{ account.top13 }}<span>元</span></div>
@@ -180,14 +208,18 @@
</div>
<div class="header-con" ref="searchHeightRef" v-show="account.top14Name != null">
<div class="item" v-show="account.top14Name != null">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top14Name }}</div>
<div class="num">{{ account.top14 }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="account.top15Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ account.top15Name }}</div>
<div class="num">{{ account.top15 }}<span>元</span></div>
@@ -423,47 +455,72 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

173
src/pages/statistic/accounts/debitCardAnalysis/index.vue
View File

@@ -1,16 +1,20 @@
<template>
<view class="container">
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">今日结算次数</div>
<div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">今日收款金额</div>
<div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
@@ -19,14 +23,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近7日结算次数</div>
<div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近7日收款金额</div>
<div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
@@ -35,14 +43,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1月结算次数</div>
<div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1月收款金额</div>
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
@@ -51,14 +63,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近3月结算次数</div>
<div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近3月收款金额</div>
<div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
@@ -67,14 +83,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月结算次数</div>
<div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月收款金额</div>
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
@@ -83,14 +103,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1年结算次数</div>
<div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1年收款金额</div>
<div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
@@ -99,14 +123,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年结算次数</div>
<div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年收款金额</div>
<div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
@@ -115,14 +143,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近5年结算次数</div>
<div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近5年收款金额</div>
<div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
@@ -131,14 +163,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">总结算次数</div>
<div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">总收款金额</div>
<div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
@@ -339,47 +375,80 @@ const secondListData = ref([])
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
img {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

141
src/pages/statistic/accounts/debitDealAnalysis/index.vue
View File

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">交易金额</div>
<div class="num">{{ account.amount }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入金额</div>
<div class="num">{{ account.income }}<span>元</span></div>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出金额</div>
<div class="num">{{ account.expenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入笔数</div>
<div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -100,14 +108,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出笔数</div>
<div class="num">{{ account.expensesCount}}<span>笔</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
<uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS刷卡收入</div>
<div class="num">{{ account.posIncome }}<span>元</span></div>
@@ -116,14 +128,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费支出</div>
<div class="num">{{ account.realExpenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS收入笔数</div>
<div class="num">{{ account.posIncomeCount }}<span>笔</span></div>
@@ -132,14 +148,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费支出笔数</div>
<div class="num">{{ account.realExpensesCount}}<span>笔</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出笔数</div>
<div class="num">{{ account.otherExpensesCount }}<span>笔</span></div>
@@ -339,47 +359,80 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
img {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

124
src/pages/statistic/accounts/investDealAnalysis/index.vue
View File

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收益金额</div>
<div class="num">{{ account.amount }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">交易笔数</div>
<div class="num">{{ account.expensesCount+account.incomeCount}}<span>笔</span></div>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="reload" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">交易次数</div>
<div class="num">{{ account.count }}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">平均收益</div>
<div class="num">{{ account.average }}<span>元</span></div>
@@ -101,14 +109,18 @@
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">盈利金额</div>
<div class="num">{{ account.income }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">盈利笔数</div>
<div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -117,14 +129,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">亏损金额</div>
<div class="num">{{ account.expenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="closeempty" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">亏损笔数</div>
<div class="num">{{ account.expensesCount}}<span>笔</span></div>
@@ -332,47 +348,73 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -57,18 +57,22 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" v-show ="oneCount>0" ref="searchHeightRef">
<div class="item" v-show ="oneCount>0">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ oneName }}</div>
<div class="num">{{ oneCount }}<span>张</span></div>
</div>
</div>
<div class="item" v-show ="twoCount>0">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ twoName }}</div>
<div class="num">{{ twoCount }}<span>张</span></div>
@@ -77,14 +81,18 @@
</div>
<div class="header-con" v-show ="threeCount>0" ref="searchHeightRef">
<div class="item" v-show ="threeCount>0">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{threeName }}</div>
<div class="num">{{ threeCount }}<span>张</span></div>
</div>
</div>
<div class="item" v-show ="fourCount>0">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ fourName }}</div>
<div class="num">{{ fourCount }}<span>张</span></div>
@@ -93,7 +101,9 @@
</div>
<div class="header-con" v-show ="fiveCount>0" ref="searchHeightRef">
<div class="item" v-show ="fiveCount>0">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">{{ fiveName }}</div>
<div class="num">{{ fiveCount }}<span>张</span></div>
@@ -260,47 +270,72 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

177
src/pages/statistic/accounts/posStatics/index.vue
View File

@@ -1,16 +1,20 @@
<template>
<view class="container">
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">今日交易次数</div>
<div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">今日刷卡金额</div>
<div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
@@ -19,14 +23,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近7日交易次数</div>
<div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近7日刷卡金额</div>
<div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
@@ -35,14 +43,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1月交易次数</div>
<div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1月刷卡金额</div>
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
@@ -51,14 +63,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近3月交易次数</div>
<div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近3月刷卡金额</div>
<div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
@@ -67,14 +83,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月交易次数</div>
<div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月刷卡金额</div>
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
@@ -83,14 +103,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1年交易次数</div>
<div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1年刷卡金额</div>
<div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
@@ -99,14 +123,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年交易次数</div>
<div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年刷卡金额</div>
<div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
@@ -115,14 +143,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近5年交易次数</div>
<div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近5年刷卡金额</div>
<div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
@@ -131,14 +163,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">总交易次数</div>
<div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
</div>
</div>
<div class="item" >
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">总刷卡金额</div>
<div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
@@ -338,48 +374,73 @@ function settingCancel() {
<style lang="scss" scoped>
.app-container {
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
.item {
width: 50%;
height: 100%;
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
gap: 12rpx;
.item {
flex: 1;
display: flex;
align-items: center;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {
width: 146rpx;

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

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">使用率</div>
<div class="num">{{ creditObj.creditBillRate }}<span>%</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">总额度</div>
<div class="num">{{ creditObj.creditLimit }}<span>元</span></div>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">已用额度</div>
<div class="num">{{ creditObj.creditBalance}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">可用额度</div>
<div class="num">{{ creditObj.creditAvailableLimit }}<span>元</span></div>
@@ -100,14 +108,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡总数</div>
<div class="num">{{ creditObj.creditCardCount}}<span>张</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">月平均账单金额</div>
<div class="num">{{ creditObj.averageCreditBill }}<span>元</span></div>
@@ -116,7 +128,9 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">累计账单金额</div>
<div class="num">{{ creditObj.actualCreditBill}}<span>元</span></div>
@@ -313,47 +327,73 @@ const start = dayjs(end).add(-11, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -66,17 +66,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清分期</div>
<div class="num">{{ historyObj.unclearedDetailCount }}<span>笔</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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.unClearedDetail }}<span>元</span></div>
@@ -85,14 +89,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清本金</div>
<div class="num">{{ historyObj.unClearedPrincipal }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清利息</div>
<div class="num">{{ historyObj.unClearedInterest }}<span>元</span></div>
@@ -101,14 +109,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">当期应还本息</div>
<div class="num">{{ historyObj.dueDetail}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 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.repaidDetail }}<span>元</span></div>
@@ -117,14 +129,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">当期待还本息</div>
<div class="num">{{ historyObj.leftDetail}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 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.dueInterest }}<span>元</span></div>
@@ -328,47 +344,73 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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>
@@ -289,47 +297,73 @@ const start = dayjs(end).add(-239, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -57,17 +57,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1月硬查询</div>
<div class="num">{{ creditRecord.lastOneMonths }}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2月硬查询</div>
<div class="num">{{ creditRecord.lastTwoMonths }}<span>次</span></div>
@@ -76,14 +80,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近3月硬查询</div>
<div class="num">{{ creditRecord.lastThreeMonths}}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月硬查询</div>
<div class="num">{{ creditRecord.lastSixMonths }}<span>次</span></div>
@@ -92,14 +100,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近1年硬查询</div>
<div class="num">{{ creditRecord.lastOneYears}}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年硬查询</div>
<div class="num">{{ creditRecord.lastTwoYears }}<span>次</span></div>
@@ -108,14 +120,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="person" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近6月个人查询</div>
<div class="num">{{ creditRecord.lastSixMonthPersonalCount}}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">个人查询总数</div>
<div class="num">{{ creditRecord.totalPersonalCount }}<span>次</span></div>
@@ -124,14 +140,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">近2年贷后管理</div>
<div class="num">{{ creditRecord.lastTwoYearsAfterLoan}}<span>次</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">贷后管理总数</div>
<div class="num">{{ creditRecord.totalAfterLoan }}<span>次</span></div>
@@ -287,47 +307,72 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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>
@@ -290,47 +298,72 @@ const start = dayjs(end).add(-59, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -57,17 +57,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="star" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">期货累计收益</div>
<div class="num">{{ futuresStock.accumulateFutures }}<span>元</span></div>
@@ -76,14 +80,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">股票累计收益</div>
<div class="num">{{ futuresStock.accumulateStocks}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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>
@@ -92,7 +100,9 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 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>
@@ -289,47 +299,72 @@ const start = dayjs(end).add(-59, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -66,17 +66,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清贷款</div>
<div class="num">{{ historyObj.unclearedDetailCount }}<span>笔</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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.unClearedDetail }}<span>元</span></div>
@@ -85,14 +89,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清本金</div>
<div class="num">{{ historyObj.unClearedPrincipal }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">未结清利息</div>
<div class="num">{{ historyObj.unClearedInterest }}<span>元</span></div>
@@ -101,14 +109,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">当期应还本息</div>
<div class="num">{{ historyObj.dueDetail}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 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.repaidDetail }}<span>元</span></div>
@@ -117,14 +129,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">当期待还本息</div>
<div class="num">{{ historyObj.leftDetail}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 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.dueInterest }}<span>元</span></div>
@@ -329,47 +345,73 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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>
@@ -290,47 +298,73 @@ const start = dayjs(end).add(-239, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

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

@@ -65,17 +65,21 @@
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 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>
@@ -84,14 +88,18 @@
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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>
@@ -290,47 +298,72 @@ const start = dayjs(end).add(-59, 'months')
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {

3
src/store/modules/user.ts
View File

@@ -17,6 +17,7 @@ const useUserStore = defineStore("user", {
avatar: "",
roles: Array(),
permissions: [],
userId: "",
}),
actions: {
// 登录
@@ -57,6 +58,7 @@ const useUserStore = defineStore("user", {
}
this.name = user.userName;
this.avatar = avatar;
this.userId = user.userId || "";
resolve(res);
})
.catch((error) => {
@@ -74,6 +76,7 @@ const useUserStore = defineStore("user", {
this.permissions = [];
this.name = "";
this.avatar = "";
this.userId = "";
removeToken();
resolve(null);
})