You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
427 lines
8.9 KiB
427 lines
8.9 KiB
<template>
|
|
<view class="assemble">
|
|
<view style="height: 20rpx;"></view>
|
|
<!-- 时间筛选 -->
|
|
<view class="filter-section">
|
|
<picker mode="date" fields="month" :value="currentDate" @change="onDateChange">
|
|
<view class="date-picker">
|
|
<text>{{currentDate}}</text>
|
|
<image class="drop-image" :src="$util.img('/static/images/drop.png')" mode="aspectFit"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 本月提成卡片 -->
|
|
<view class="commission-card">
|
|
<view class="card-title">本月提成</view>
|
|
<view class="commission-amount">¥{{totalCommission}}</view>
|
|
</view>
|
|
|
|
<!-- 续费体测记录 -->
|
|
<view class="record-card">
|
|
<view class="card-title">续费提成</view>
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="th">时间</view>
|
|
<view class="th">到期数</view>
|
|
<view class="th">续费数</view>
|
|
<view class="th">续费率</view>
|
|
<view class="th">提成</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="tr" v-for="(item, index) in renewalRecords" :key="index">
|
|
<view class="td">{{item.time}}</view>
|
|
<view class="td">{{item.expireCount}}</view>
|
|
<view class="td">{{item.renewCount}}</view>
|
|
<view class="td">{{item.renewRate}}%</view>
|
|
<view class="td">¥{{item.commission}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 新招课包 -->
|
|
<view class="record-card">
|
|
<view class="card-title">新招课包</view>
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="th">成交数</view>
|
|
<view class="th">提成</view>
|
|
<view class="th">合计</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="tr">
|
|
<view class="td">{{newPackageCount}}</view>
|
|
<view class="td">¥{{newPackageCommission}}</view>
|
|
<view class="td">¥{{newPackageTotal}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 私教课包 -->
|
|
<view class="record-card">
|
|
<view class="card-title">私教课包</view>
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="th">数量</view>
|
|
<view class="th">提成</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="tr">
|
|
<view class="td">{{privatePackageCount}}</view>
|
|
<view class="td">¥{{privatePackageCommission}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间卡 -->
|
|
<view class="record-card">
|
|
<view class="card-title">时间卡</view>
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="th">时间卡</view>
|
|
<view class="th">数量</view>
|
|
<view class="th">提成</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="tr">
|
|
<view class="td">{{timeCardCount}}</view>
|
|
<view class="td">{{timeCardAmount}}</view>
|
|
<view class="td">¥{{timeCardCommission}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 其他提成 -->
|
|
<view class="record-card">
|
|
<view class="card-title">其他提成</view>
|
|
<view class="table">
|
|
<view class="table-header">
|
|
<view class="th">项目</view>
|
|
<view class="th">金额</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="tr" v-for="(item, index) in otherCommissions" :key="index">
|
|
<view class="td">{{item.project}}</view>
|
|
<view class="td">¥{{item.amount}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentDate: this.formatDate(new Date()),
|
|
totalCommission: 0,
|
|
renewalRecords: [],
|
|
newPackageCount: 0,
|
|
newPackageCommission: 0,
|
|
newPackageTotal: 0,
|
|
privatePackageCount: 0,
|
|
privatePackageCommission: 0,
|
|
timeCardCount: 0,
|
|
timeCardAmount: 0,
|
|
timeCardCommission: 0,
|
|
otherCommissions: []
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getStatisticsData()
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
return `${year}-${month}`
|
|
},
|
|
onDateChange(e) {
|
|
this.currentDate = e.detail.value
|
|
this.getStatisticsData()
|
|
},
|
|
async getStatisticsData() {
|
|
try {
|
|
const res = await apiRoute.xs_statisticsMarketData({
|
|
date: this.currentDate
|
|
})
|
|
if (res && res.code === 1) {
|
|
const data = res.data
|
|
this.totalCommission = data.totalCommission || 0
|
|
this.renewalRecords = data.renewalRecords || []
|
|
this.newPackageCount = data.newPackageCount || 0
|
|
this.newPackageCommission = data.newPackageCommission || 0
|
|
this.newPackageTotal = data.newPackageTotal || 0
|
|
this.privatePackageCount = data.privatePackageCount || 0
|
|
this.privatePackageCommission = data.privatePackageCommission || 0
|
|
this.timeCardCount = data.timeCardCount || 0
|
|
this.timeCardAmount = data.timeCardAmount || 0
|
|
this.timeCardCommission = data.timeCardCommission || 0
|
|
this.otherCommissions = data.otherCommissions || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取统计数据失败:', error)
|
|
uni.showToast({
|
|
title: '获取数据失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
//自定义导航栏
|
|
.navbar_section {
|
|
border: 1px solid #23262F;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #23262F;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
|
|
|
|
.title {
|
|
padding: 40rpx 0rpx;
|
|
// #ifdef MP-WEIXIN
|
|
padding: 80rpx 0rpx;
|
|
// #endif
|
|
font-size: 30rpx;
|
|
color: #F5F6FA;
|
|
font-weight: bold;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
|
|
.assemble {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #181A20;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.div-style {
|
|
width: 92%;
|
|
height: 85vh;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: auto;
|
|
}
|
|
|
|
.coach-message {
|
|
width: 92%;
|
|
margin: 10rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.drop-image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #F5F6FA;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.left1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.right1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
|
|
.statistics_box {
|
|
margin: auto;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
width: 90rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: 328rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6rpx;
|
|
background: #f5f5f5;
|
|
position: relative;
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 0;
|
|
transition: height 0.3s ease;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.ratio {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: -0rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 5rpx;
|
|
padding: 0;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.this_month {
|
|
width: 100%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.drop-image-x {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.title-x {
|
|
font-size: 28rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.title-x1 {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-left: 60rpx;
|
|
}
|
|
|
|
.filter-section {
|
|
padding: 20rpx 30rpx;
|
|
background: #23262F;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
|
|
|
|
.date-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #F5F6FA;
|
|
|
|
.drop-image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-left: 10rpx;
|
|
filter: brightness(0.8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.commission-card {
|
|
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
|
margin: 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
color: #fff;
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.25);
|
|
|
|
.card-title {
|
|
font-size: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.commission-amount {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.record-card {
|
|
background: #23262F;
|
|
margin: 20rpx;
|
|
padding: 20rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
|
|
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
color: #F5F6FA;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
|
|
.table-header {
|
|
display: flex;
|
|
background: #181A20;
|
|
padding: 20rpx 0;
|
|
border-radius: 8rpx 8rpx 0 0;
|
|
|
|
.th {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #A0A3B1;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.table-body {
|
|
.tr {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1px solid #33343A;
|
|
transition: background 0.2s;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.td {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #F5F6FA;
|
|
font-weight: 400;
|
|
}
|
|
&:hover {
|
|
background: #23262F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 其他细节样式
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|