545 lines
12 KiB
Vue
545 lines
12 KiB
Vue
<template>
|
||
<view class="detail-container">
|
||
<view class="top">
|
||
<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">
|
||
<view class="section-list">
|
||
<view class="section-card" v-for="(sKey, idx) in statsData" :key="idx">
|
||
<view class="section-header" @click="goList(sKey.selectType)">
|
||
<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.children" :key="i"
|
||
@click="goList(sKey.selectType,item.repairType)">
|
||
<view class="kv-number">{{ item.count }}</view>
|
||
<view class="kv-label">{{ dictData[item.repairType] }}</view>
|
||
</view>
|
||
</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(otherInfo.receivableAmount || 0) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{otherInfo.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(otherInfo.receivedAmount) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{otherInfo.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(otherInfo.pendingAmount) : '*****' }}</text>
|
||
<view class="fin-bottom">
|
||
<view class="fin-count">{{otherInfo.pendingCount}}台次</view>
|
||
<image src="../images/money_three.png" mode="widthFix" class="tap_icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request';
|
||
import {
|
||
formatCurrency,
|
||
getDictByCode,
|
||
getDateRange
|
||
} from '@/utils/utils';
|
||
import {
|
||
checkPermi,
|
||
checkRole
|
||
} from "@/utils/permission"; // 权限判断函数
|
||
|
||
export default {
|
||
name: 'DetailPage',
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
queryParams: {
|
||
dateRange: [],
|
||
},
|
||
tapList: [{
|
||
label: "本日",
|
||
value: "day",
|
||
},
|
||
{
|
||
label: "本月",
|
||
value: "month",
|
||
},
|
||
{
|
||
label: "全部",
|
||
value: "all",
|
||
},
|
||
],
|
||
statsData: {},
|
||
financeVisibility: {
|
||
receivable: false,
|
||
collected: false,
|
||
pending: false
|
||
},
|
||
dictData: undefined,
|
||
otherInfo: {}
|
||
};
|
||
},
|
||
async mounted() {
|
||
await this.setCurrentMonthRange()
|
||
this.getDict()
|
||
this.loadFinanceVisibility() // 从缓存加载显示设置
|
||
this.loadData();
|
||
},
|
||
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);
|
||
}
|
||
},
|
||
|
||
// 切换财务信息显示/隐藏并保存到缓存
|
||
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(selectType, repairType) {
|
||
if (repairType) {
|
||
uni.navigateTo({
|
||
url: `/pages-business/statistics/statistics?selectType=${selectType}&repairType=${repairType}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages-business/statistics/statistics?selectType=${selectType}`
|
||
})
|
||
}
|
||
},
|
||
goListByPayStatus(payStatus) {
|
||
uni.navigateTo({
|
||
url: `/pages-business/statistics/statistics?payStatus=${payStatus}`
|
||
})
|
||
},
|
||
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.loadData();
|
||
}
|
||
}
|
||
};
|
||
</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); //给组件加个上边距
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style> |