911 lines
24 KiB
Vue
911 lines
24 KiB
Vue
<template>
|
||
<view class="detail-container">
|
||
<view class="top">
|
||
<!-- <VNavigationBar title="详情页" background-color="rgba(0,0,0,0)" title-color="#1f2d3d"></VNavigationBar> -->
|
||
<view class="navbar">
|
||
<uni-icons type="left" color="#1f2d3d" size="22" @click="goBack" />
|
||
<text class="navbar-title">业务统计</text>
|
||
</view>
|
||
|
||
<view class="header">
|
||
<!-- 选项卡 -->
|
||
<!-- <view class="tabs">
|
||
<view class="tab" :class="{'active':currentTab == index}" v-for="(item,index) in tapList"
|
||
:key="index" @click="switchTab(index)">
|
||
<view class="">{{item.label || "无"}}</view>
|
||
<view class="tap_img" style="display: block;" v-show="currentTab == index">
|
||
<image src="/static/images/icon_tap.png" mode="widthFix" class="tap_icon"></image>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="">
|
||
<uni-datetime-picker v-model="queryParams.dateRange" type="daterange" @change="loadData()"
|
||
rangeSeparator="至" class="">
|
||
<view class="cont_time">
|
||
<view class="cont_size">{{queryParams.dateRange[0]}}</view>
|
||
<view class="bule_size"></view>
|
||
<view class="cont_size">{{queryParams.dateRange[1]}}</view>
|
||
<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="content">
|
||
<uni-card title="业务渠道" :isFull="false">
|
||
<uni-collapse ref="collapse" v-model="value">
|
||
<uni-collapse-item title="展开|收起">
|
||
<view class="section-list">
|
||
<commonTimeSelect v-model="queryParams.dateRange"
|
||
@subsection-change="selectBusinessStatistics()">
|
||
</commonTimeSelect>
|
||
<u-loading-icon text="加载中" :show="businessStatus" textSize="18"></u-loading-icon>
|
||
<view class="section-card" v-for="(sKey, idx) in businessList" :key="idx"
|
||
v-if="!businessStatus" @click="goList(sKey)">
|
||
<view class="section-header">
|
||
<view class="section-header-left">
|
||
<view class="section-tag">{{ sKey.name }}</view>
|
||
<!-- <view class="section-total">{{ sKey.total }}台次</view> -->
|
||
</view>
|
||
<view class="section-header-right">
|
||
<image src="../images/small.png" mode="widthFix" class="tap_icon" />
|
||
</view>
|
||
</view>
|
||
<view class="section-body">
|
||
<view class="kv" v-for="(item, i) in sKey.data.stats" :key="i">
|
||
<view class="kv-number">{{ item.total }}</view>
|
||
<view class="kv-label">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="finance" v-if="checkPermi(['repair:tick:profit'])">
|
||
<view class="fin-card receivable" @click="goListByPayStatus('receivable')">
|
||
<view class="fin-top">
|
||
<text class="fin-title">应收款</text>
|
||
<uni-icons :type="financeVisibility.receivable ? 'eye' : 'eye-slash'"
|
||
color="#7aa6ff" size="20"
|
||
@click.native.stop="toggleFinance('receivable')" />
|
||
</view>
|
||
<!-- 已收款金额 -->
|
||
<text
|
||
class="fin-amount">{{ financeVisibility.receivable ? formatCurrency(sKey.data.receivableAmount || 0) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{sKey.data.receivableCount}}台次</view>
|
||
<image src="../images/money_one.png" mode="widthFix" class="tap_icon">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="fin-card collected" @click="goListByPayStatus('receivedAmount')">
|
||
<view class="fin-top">
|
||
<text class="fin-title">已收款</text>
|
||
<uni-icons :type="financeVisibility.collected ? 'eye' : 'eye-slash'"
|
||
color="#a896ff" size="20"
|
||
@click.native.stop="toggleFinance('collected')" />
|
||
</view>
|
||
<text
|
||
class="fin-amount">{{ financeVisibility.collected ? formatCurrency(sKey.data.receivedAmount) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{sKey.data.receivedCount}}台次</view>
|
||
<image src="../images/money_two.png" mode="widthFix" class="tap_icon">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="fin-card pending" @click="goListByPayStatus('pendingAmount')">
|
||
<view class="fin-top">
|
||
<text class="fin-title">待收款</text>
|
||
<uni-icons :type="financeVisibility.pending ? 'eye' : 'eye-slash'"
|
||
color="#ffcf7a" size="20"
|
||
@click.native.stop="toggleFinance('pending')" />
|
||
</view>
|
||
<text
|
||
class="fin-amount">{{ financeVisibility.pending ? formatCurrency(sKey.data.pendingAmount) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{sKey.data.pendingCount}}台次</view>
|
||
<image src="../images/money_three.png" mode="widthFix" class="tap_icon">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
|
||
</uni-card>
|
||
|
||
<uni-card title="维修项目" :isFull="false">
|
||
<commonTimeSelect v-model="projectQueryParams.dateRange" @subsection-change="selectProjectStatistics()">
|
||
</commonTimeSelect>
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="4">
|
||
<view class="demo-uni-col dark">排序</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<view class="demo-uni-col dark">名称</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view class="demo-uni-col light">数量</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<u-loading-icon text="加载中" :show="projectStatus" textSize="18"></u-loading-icon>
|
||
<uni-row class="demo-uni-row" v-for="(item, index) in projectList" v-if="!projectStatus">
|
||
<view @click="goDetailList(projectQueryParams.dateRange,item.projectId,null)">
|
||
<uni-col :span="2">
|
||
<view class="demo-uni-col dark">{{index + 1}}</view>
|
||
</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="demo-uni-col dark">{{item.project_name}}</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view class="demo-uni-col light">{{item.item_count}}</view>
|
||
</uni-col>
|
||
</view>
|
||
</uni-row>
|
||
<view v-if="projectList.length == 0 && !projectStatus">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="维修类型" :isFull="false">
|
||
<commonTimeSelect v-model="repairTypeQueryParams.dateRange"
|
||
@subsection-change="selectRepairTypeStatistics"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in repairTypeList" :key="item.value"
|
||
@click="goDetailList(repairTypeQueryParams.dateRange,null,item.repairType)">
|
||
<view>{{ item.name }}</view>
|
||
<view>{{ item.value }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="repairTypeList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="保险|年审登记统计" :isFull="false">
|
||
<commonTimeSelect v-model="insuranceAndAnnualQueryParams.dateRange"
|
||
@subsection-change="selectInsuranceAndAnnualStatistics()"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card">
|
||
<view>保险</view>
|
||
<view>{{ insuranceAndAnnual.insuranceCount }}</view>
|
||
<view>{{ insuranceAndAnnual.insurancePercent }}%</view>
|
||
</view>
|
||
<view class="card">
|
||
<view>年审</view>
|
||
<view>{{ insuranceAndAnnual.inspectionCount }}</view>
|
||
<view>{{ insuranceAndAnnual.inspectionPercent }}%</view>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="保险到期" :isFull="false">
|
||
<commonTimeSelect v-model="insuranceOrAnnualListQueryParams.dateRange" mode="relative"
|
||
@subsection-change="selectInsuranceOrAnnualListStatistics()"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in insuranceOrAnnualList" :key="item.value">
|
||
<view>{{ item.userName }}</view>
|
||
<view>{{ item.userMobile }}</view>
|
||
<view>{{ item.carNo }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="insuranceOrAnnualList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
<uni-card title="年审到期" :isFull="false">
|
||
<commonTimeSelect v-model="annualListQueryParams.dateRange" mode="relative"
|
||
@subsection-change="selectAnnualListStatistics()"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in annualList" :key="item.value">
|
||
<view>{{ item.userName }}</view>
|
||
<view>{{ item.userMobile }}</view>
|
||
<view>{{ item.carNo }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="annualList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="客户承保公司统计" :isFull="false">
|
||
<commonTimeSelect v-model="insuranceCompanyQueryParams.dateRange"
|
||
@subsection-change="selectInsuranceCompanyStatistics()"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in insuranceCompanyList" :key="item.value"
|
||
@click="goDetailList(insuranceCompanyQueryParams.dateRange,null,null,null,null,null,null,item.insuranceCompany)">
|
||
<view>{{ item.insuranceCompany }}</view>
|
||
<view>{{ item.conut }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="insuranceCompanyList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="车辆品牌" :isFull="false">
|
||
<commonTimeSelect v-model="carBrandQueryParams.dateRange"
|
||
@subsection-change="selectcarBrandStatistics()"></commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in carBrandList" :key="item.value"
|
||
@click="goDetailList(carBrandQueryParams.dateRange,null,null,null,null,null,item.carBrandId)">
|
||
<view>{{ item.carBrandName }}</view>
|
||
<view>{{ item.count }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="carBrandList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-card title="车龄" :isFull="false">
|
||
<commonTimeSelect v-model="carYearQueryParams.dateRange" @subsection-change="selectcarYearStatistics()">
|
||
</commonTimeSelect>
|
||
<view class="container">
|
||
<view class="card" v-for="item in carYearList" :key="item.value"
|
||
@click="goDetailList(carYearQueryParams.dateRange,null,null,null,item.type,item.yearRange)">
|
||
<view>{{ item.carYear }}</view>
|
||
<view>{{ item.count }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="carYearList.length == 0">
|
||
<u-empty mode="data">
|
||
</u-empty>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request';
|
||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||
import commonTimeSelect from '@/components/commonTimeSelect.vue'
|
||
import {
|
||
formatCurrency,
|
||
getDictByCode,
|
||
getDateRange
|
||
} from '@/utils/utils';
|
||
import {
|
||
checkPermi,
|
||
checkRole
|
||
} from "@/utils/permission"; // 权限判断函数
|
||
|
||
export default {
|
||
components: {
|
||
VNavigationBar,
|
||
commonTimeSelect
|
||
},
|
||
name: 'DetailPage',
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
queryParams: {
|
||
dateRange: [],
|
||
},
|
||
repairTypeQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
projectQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
insuranceAndAnnualQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
insuranceOrAnnualListQueryParams: {
|
||
dateRange: [],
|
||
type: 'insurance'
|
||
},
|
||
annualListQueryParams: {
|
||
dateRange: [],
|
||
type: 'inspection'
|
||
},
|
||
insuranceCompanyQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
carBrandQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
projectStatus: true,
|
||
businessStatus: true,
|
||
carYearQueryParams: {
|
||
dateRange: [],
|
||
},
|
||
businessList: [],
|
||
projectList: [],
|
||
repairTypeList: [],
|
||
insuranceOrAnnualList: [],
|
||
annualList: [],
|
||
insuranceCompanyList: [],
|
||
carBrandList: [],
|
||
carYearList: [],
|
||
insuranceAndAnnual: {},
|
||
tapList: [{
|
||
label: "本日",
|
||
value: "day",
|
||
},
|
||
{
|
||
label: "本月",
|
||
value: "month",
|
||
},
|
||
{
|
||
label: "全部",
|
||
value: "all",
|
||
},
|
||
],
|
||
statsData: {},
|
||
financeVisibility: {
|
||
receivable: true,
|
||
collected: true,
|
||
pending: true
|
||
},
|
||
dictData: undefined,
|
||
otherInfo: {}
|
||
};
|
||
},
|
||
async mounted() {
|
||
// await this.setCurrentMonthRange()
|
||
// this.getDict()
|
||
// this.loadFinanceVisibility() // 从缓存加载显示设置
|
||
// this.selectBusinessStatistics()
|
||
// this.selectProjectStatistics()
|
||
// this.selectRepairTypeStatistics()
|
||
// this.selectInsuranceAndAnnualStatistics()
|
||
// this.selectAnnualListStatistics()
|
||
// this.selectInsuranceCompanyStatistics()
|
||
// this.selectcarBrandStatistics()
|
||
// this.selectcarYearStatistics()
|
||
},
|
||
methods: {
|
||
checkPermi,
|
||
checkRole,
|
||
async switchTab(tab) {
|
||
if (this.currentTab !== tab) {
|
||
this.currentTab = tab;
|
||
|
||
await this.slectRange(tab)
|
||
}
|
||
},
|
||
slectRange(index) {
|
||
this.selected = index;
|
||
console.log(index, this.selected);
|
||
const {
|
||
value
|
||
} = this.tapList[index];
|
||
console.log(value);
|
||
this.queryParams.dateRange = getDateRange(value);
|
||
},
|
||
showDatePicker() {
|
||
console.log('show date picker');
|
||
},
|
||
// 从本地缓存加载显示设置
|
||
loadFinanceVisibility() {
|
||
try {
|
||
const savedVisibility = uni.getStorageSync('financeVisibility');
|
||
if (savedVisibility) {
|
||
this.financeVisibility = savedVisibility;
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to load finance visibility from storage:', e);
|
||
}
|
||
},
|
||
selectBusinessStatistics() {
|
||
this.businessStatus = true
|
||
request({
|
||
url: "/admin-api/repair/statistics/businseeStatistics",
|
||
params: this.queryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.businessList = res.data
|
||
}).finally(() => {
|
||
this.businessStatus = false
|
||
})
|
||
},
|
||
selectProjectStatistics() {
|
||
this.projectStatus = true
|
||
request({
|
||
url: "/admin-api/repair/statistics/repairProjectStatistics",
|
||
params: this.projectQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.projectList = res.data
|
||
}).finally(() => {
|
||
this.projectStatus = false
|
||
})
|
||
},
|
||
selectRepairTypeStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/repairTypeStatistics",
|
||
params: this.repairTypeQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.repairTypeList = res.data
|
||
})
|
||
},
|
||
selectInsuranceAndAnnualStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/insuranceAndAnnualRegistrationStatistics",
|
||
params: this.insuranceAndAnnualQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.insuranceAndAnnual = res.data
|
||
})
|
||
},
|
||
selectInsuranceOrAnnualListStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/insuranceOrAnnualListStatistics",
|
||
params: this.insuranceOrAnnualListQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.insuranceOrAnnualList = res.data
|
||
})
|
||
},
|
||
selectAnnualListStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/insuranceOrAnnualListStatistics",
|
||
params: this.annualListQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.annualList = res.data
|
||
})
|
||
},
|
||
selectInsuranceCompanyStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/insuranceCompanyStatistics",
|
||
params: this.insuranceCompanyQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.insuranceCompanyList = res.data
|
||
})
|
||
},
|
||
selectcarBrandStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/carBrandStatistics",
|
||
params: this.carBrandQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.carBrandList = res.data
|
||
})
|
||
},
|
||
selectcarYearStatistics() {
|
||
request({
|
||
url: "/admin-api/repair/statistics/carYearStatistics",
|
||
params: this.carYearQueryParams,
|
||
method: 'get'
|
||
}).then(res => {
|
||
this.carYearList = res.data
|
||
})
|
||
},
|
||
|
||
// 切换财务信息显示/隐藏并保存到缓存
|
||
toggleFinance(key) {
|
||
this.financeVisibility[key] = !this.financeVisibility[key];
|
||
|
||
// 保存到本地缓存
|
||
try {
|
||
uni.setStorageSync('financeVisibility', this.financeVisibility);
|
||
} catch (e) {
|
||
console.error('Failed to save finance visibility to storage:', e);
|
||
}
|
||
},
|
||
async getDict() {
|
||
const list = await getDictByCode('repair_type')
|
||
this.dictData = list?.reduce((map, item) => {
|
||
map[item.value] = item.label
|
||
return map
|
||
}, {}) ?? {} // 如果 list 为空或 reduce 返回 undefined，则使用空对象
|
||
console.log('dict', this.dictData)
|
||
},
|
||
/**
|
||
* 列表
|
||
*/
|
||
goList(data) {
|
||
console.log('跳转参数', data);
|
||
uni.navigateTo({
|
||
url: `/pages-business/businessStatistics/detail?dateRange=${JSON.stringify(this.queryParams.dateRange)}&businessId=${data.id}`
|
||
})
|
||
},
|
||
goListByPayStatus(payStatus) {
|
||
uni.navigateTo({
|
||
url: `/pages-business/statistics/statistics?payStatus=${payStatus}`
|
||
})
|
||
},
|
||
goDetailList(dateRange, projectId, repairType, timeType, carYearType, carYearRange, carBrandId,
|
||
insuranceCompany) {
|
||
// 创建 URL 查询参数对象
|
||
let params = {};
|
||
|
||
// 只添加不为 null 的参数
|
||
if (dateRange !== null && dateRange !== undefined) {
|
||
params.dateRange = JSON.stringify(dateRange);
|
||
}
|
||
if (projectId !== null && projectId !== undefined) {
|
||
params.projectId = projectId;
|
||
}
|
||
if (repairType !== null && repairType !== undefined) {
|
||
params.repairType = repairType;
|
||
}
|
||
if (timeType !== null && timeType !== undefined) {
|
||
params.timeType = timeType;
|
||
}
|
||
if (carYearType !== null && carYearType !== undefined) {
|
||
params.carYearType = carYearType;
|
||
}
|
||
if (carYearRange !== null && carYearRange !== undefined) {
|
||
params.carYearRange = carYearRange;
|
||
}
|
||
if (carBrandId !== null && carBrandId !== undefined) {
|
||
params.carBrandId = carBrandId;
|
||
}
|
||
if (insuranceCompany !== null && insuranceCompany !== undefined) {
|
||
params.insuranceCompany = insuranceCompany;
|
||
}
|
||
|
||
// 构建查询字符串
|
||
let queryString = Object.keys(params)
|
||
.map(key => `${key}=${encodeURIComponent(params[key])}`)
|
||
.join('&');
|
||
|
||
// 使用构建好的 URL 查询字符串进行页面跳转
|
||
uni.navigateTo({
|
||
url: `/pages-business/statistics/statistics?${queryString}`
|
||
});
|
||
},
|
||
loadData() {
|
||
request({
|
||
url: '/admin-api/repair/tickets/getBossNumStatistics',
|
||
method: 'get',
|
||
params: this.queryParams
|
||
}).then(res => {
|
||
if (res.code === 200 && res.data) {
|
||
this.statsData = res.data.stats;
|
||
this.otherInfo = res.data
|
||
}
|
||
}).catch(error => {
|
||
console.error('Failed to load stats data:', error);
|
||
});
|
||
},
|
||
formatCurrency(amount) {
|
||
return formatCurrency(amount);
|
||
},
|
||
// toggleFinance(key) {
|
||
// this.financeVisibility[key] = !this.financeVisibility[key];
|
||
// },
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
setCurrentMonthRange() {
|
||
// 直接使用 Date 对象
|
||
const now = new Date();
|
||
|
||
// 创建月初的 Date 对象
|
||
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
|
||
|
||
this.queryParams.dateRange = [
|
||
this.formatDate(now), // 月初
|
||
this.formatDate(now), // 今天
|
||
];
|
||
},
|
||
formatDate(d) {
|
||
// 添加类型检查，确保 d 是 Date 对象
|
||
if (!(d instanceof Date)) {
|
||
console.error("formatDate() 期望接收 Date 对象，但收到:", d);
|
||
d = new Date(d); // 尝试转换为 Date 对象
|
||
if (isNaN(d.getTime())) {
|
||
// 检查是否有效日期
|
||
d = new Date(); // 如果转换失败，使用当前日期
|
||
}
|
||
}
|
||
return `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(
|
||
d.getDate()
|
||
)}`;
|
||
},
|
||
// 补零：1 → 01
|
||
pad(n) {
|
||
return n.toString().padStart(2, "0");
|
||
},
|
||
},
|
||
watch: {
|
||
currentTab() {
|
||
this.selectBusinessStatistics();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail-container {
|
||
/* background: #f2f6ff; */
|
||
min-height: 100vh;
|
||
padding-bottom: 24rpx;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.navbar {
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.top {
|
||
background-image: url('/static/images/table_header.png');
|
||
padding-top: var(--status-bar-height); //给组件加个上边距
|
||
/* z-index: 1; */
|
||
}
|
||
|
||
.navbar-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
color: #1f2d3d;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
margin-right: 44rpx;
|
||
}
|
||
|
||
.header {
|
||
margin: 0 24rpx 24rpx;
|
||
/* background: linear-gradient(180deg, #e8f1ff 0%, #f5f8ff 100%); */
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
/* box-shadow: 0 8rpx 24rpx rgba(88, 131, 255, 0.12); */
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.tab {
|
||
font-size: 28rpx;
|
||
color: #7f8fa4;
|
||
position: relative;
|
||
padding-bottom: 8rpx;
|
||
}
|
||
|
||
.tab.active {
|
||
color: #2a6cff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab.active:after {
|
||
/* content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 48rpx;
|
||
height: 6rpx;
|
||
background: #2a6cff;
|
||
border-radius: 6rpx; */
|
||
}
|
||
|
||
.date-range {
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 18rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #5f6b7a;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.date-text {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.section-list {
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.section-card {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 8rpx 28rpx rgba(31, 45, 61, 0.06);
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 8rpx;
|
||
background: linear-gradient(180deg, #EDF8FF 0%, #FBFEFF 100%);
|
||
}
|
||
|
||
.section-header-left {
|
||
display: flex;
|
||
}
|
||
|
||
.section-header-right {
|
||
image {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
|
||
.section-tag {
|
||
background-image: url('../images/list_title.png');
|
||
color: #2a6cff;
|
||
font-size: 26rpx;
|
||
padding: 10rpx 18rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.section-total {
|
||
padding: 10rpx 18rpx;
|
||
font-size: 28rpx;
|
||
color: #144B7E;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.section-body {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16rpx;
|
||
padding: 8rpx;
|
||
}
|
||
|
||
.kv {
|
||
border-radius: 12rpx;
|
||
padding: 18rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.kv-number {
|
||
color: #1f2d3d;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.kv-label {
|
||
color: #7f8fa4;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.finance {
|
||
padding: 16rpx 24rpx 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.fin-card {
|
||
border-radius: 16rpx;
|
||
padding: 18rpx;
|
||
color: #1f2d3d;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.fin-card.receivable {
|
||
background: linear-gradient(180deg, #eaf3ff, #f3f8ff);
|
||
}
|
||
|
||
.fin-card.collected {
|
||
background: linear-gradient(180deg, #f1ecff, #f7f4ff);
|
||
}
|
||
|
||
.fin-card.pending {
|
||
background: linear-gradient(180deg, #fff3df, #fff8ea);
|
||
}
|
||
|
||
.tap_img {
|
||
height: 3px;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
width: 34rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
|
||
.fin-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.fin-title {
|
||
color: #7f8fa4;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.fin-amount {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.fin-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #7f8fa4;
|
||
font-size: 22rpx;
|
||
|
||
image {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.cont_time {
|
||
background: #F1F4F7;
|
||
border-radius: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0px 30rpx;
|
||
|
||
width: 386rpx;
|
||
height: 56rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 36rpx;
|
||
}
|
||
|
||
.cont_size {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #686C7A;
|
||
}
|
||
|
||
.tap_icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
/* 设置卡片之间的间隙 */
|
||
padding: 10px;
|
||
}
|
||
|
||
.card {
|
||
background-color: #f0f0f0;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
flex: 0 0 calc(33.33% - 10px);
|
||
/* 每行显示3个卡片，减去间隙 */
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.text {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
</style> |