Browse Source

修改语法错误

master
王泽彦 9 months ago
parent
commit
3315f46a50
  1. 8
      pages.json
  2. 21
      pages/market/data/index.vue
  3. 340
      pages/market/data/statistics.vue
  4. 2
      pages/market/reimbursement/detail.vue
  5. 2
      pages/market/reimbursement/list.vue

8
pages.json

@ -618,6 +618,14 @@
"navigationBarBackgroundColor": "#292929", "navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},
{
"path": "pages/market/data/statistics",
"style": {
"navigationBarTitleText": "市场数据统计",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
} }

21
pages/market/data/index.vue

@ -4,6 +4,9 @@
<!--自定义导航栏--> <!--自定义导航栏-->
<view class="navbar_section"> <view class="navbar_section">
<view class="title">数据</view> <view class="title">数据</view>
<view class="statistics-btn" @click="goToStatistics">
<text>统计表格</text>
</view>
</view> </view>
<!-- 市场人员展示--> <!-- 市场人员展示-->
@ -334,6 +337,13 @@ export default {
this.init() this.init()
}, },
methods: { methods: {
//
goToStatistics() {
uni.navigateTo({
url: '/pages/market/data/statistics'
});
},
async init(){ async init(){
await this.getUserInfo() await this.getUserInfo()
await this.getPerformance() await this.getPerformance()
@ -604,6 +614,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #292929; background: #292929;
position: relative;
.title{ .title{
padding: 40rpx 0rpx; padding: 40rpx 0rpx;
@ -615,6 +626,16 @@ export default {
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
} }
.statistics-btn {
position: absolute;
right: 20rpx;
background-color: #29D3B4;
padding: 10rpx 20rpx;
border-radius: 30rpx;
font-size: 24rpx;
color: #fff;
}
} }

340
pages/market/data/statistics.vue

@ -0,0 +1,340 @@
<!--市场数据统计页面-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="title">市场数据统计</view>
</view>
<!-- 顶部筛选 -->
<view class="filter-section">
<view class="filter-item">
<view class="label">统计时间</view>
<picker mode="date" fields="month" :value="currentDate" @change="dateChange">
<view class="picker-value">{{currentDate}}</view>
</picker>
</view>
</view>
<!-- 市场人员资源量统计 -->
<view class="table-section">
<view class="table-title">市场人员资源量统计</view>
<view class="table-container">
<view class="table-header">
<view class="th th-person">人员</view>
<view class="th th-week">周数量</view>
<view class="th th-month">月数量</view>
<view class="th th-year">年数量</view>
</view>
<view class="table-body">
<view class="table-row" v-for="(item, index) in staffData" :key="index">
<view class="td td-person">{{item.name}}</view>
<view class="td td-week">{{item.weekCount}}</view>
<view class="td td-month">{{item.monthCount}}</view>
<view class="td td-year">{{item.yearCount}}</view>
</view>
</view>
</view>
</view>
<!-- 校区人员资源渠道量 -->
<view class="table-section">
<view class="table-title">{{currentMonth}} - 年度校区人员资源渠道量</view>
<view class="table-container">
<view class="table-header">
<view class="th th-channel" style="width: 100px;">渠道</view>
<view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view>
<view class="th th-total">渠道合计</view>
</view>
<view class="table-body">
<view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index">
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
<view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex">
{{channel.schools[school.id] || 0}}
</view>
<view class="td td-total">{{channel.total}}</view>
</view>
</view>
</view>
</view>
<!-- 市场人员资源渠道统计 -->
<view class="table-section">
<view class="table-title">{{currentMonth}} - 年度市场人员资源渠道统计</view>
<view class="table-container">
<view class="table-header">
<view class="th th-channel" style="width: 100px;">渠道</view>
<view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view>
<view class="th th-total">资源合计</view>
</view>
<view class="table-body">
<view class="table-row" v-for="(channel, index) in channelStaffData" :key="index">
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
<view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex">
{{channel.staffs[staff.id] || 0}}
</view>
<view class="td td-total">{{channel.total}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import apiRoute from '@/api/apiRoute.js';
export default {
data() {
return {
currentDate: this.formatDate(new Date()),
currentMonth: new Date().getMonth() + 1,
//
staffData: [
{ name: 'A', weekCount: 0, monthCount: 0, yearCount: 0 },
{ name: 'B', weekCount: 0, monthCount: 0, yearCount: 0 },
{ name: 'C', weekCount: 0, monthCount: 0, yearCount: 0 },
{ name: 'D', weekCount: 0, monthCount: 0, yearCount: 0 },
{ name: 'E', weekCount: 0, monthCount: 0, yearCount: 0 }
],
//
schoolList: [
{ id: 1, name: '校区1' },
{ id: 2, name: '校区2' },
{ id: 3, name: '校区3' },
{ id: 4, name: '校区4' },
{ id: 5, name: '校区5' }
],
//
channelList: [
{ id: 1, name: '地推' },
{ id: 2, name: '转介绍' },
{ id: 3, name: '美团/大众' },
{ id: 4, name: '抖音' },
{ id: 5, name: '小红书' },
{ id: 6, name: '其他' }
],
//
marketStaffList: [
{ id: 'A', name: 'A' },
{ id: 'B', name: 'B' },
{ id: 'C', name: 'C' },
{ id: 'D', name: 'D' }
],
//
channelSchoolData: [],
//
channelStaffData: []
}
},
onLoad() {
this.initData();
},
methods: {
// YYYY-MM
formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return `${year}-${month}`;
},
//
dateChange(e) {
this.currentDate = e.detail.value;
const [year, month] = this.currentDate.split('-');
this.currentMonth = parseInt(month);
this.initData();
},
//
initData() {
// API
this.getStaffStatistics();
this.getChannelSchoolStatistics();
this.getChannelStaffStatistics();
},
//
getStaffStatistics() {
// API
// apiRoute.getStaffStatistics({date: this.currentDate}).then(res => {})
//
this.staffData = this.staffData.map(staff => {
const monthCount = Math.floor(Math.random() * 100);
return {
...staff,
weekCount: Math.floor(Math.random() * 30),
monthCount: monthCount,
yearCount: monthCount + Math.floor(Math.random() * 200)
}
});
},
//
getChannelSchoolStatistics() {
// API
this.channelSchoolData = this.channelList.map(channel => {
const schools = {};
let total = 0;
this.schoolList.forEach(school => {
const count = Math.floor(Math.random() * 50);
schools[school.id] = count;
total += count;
});
return {
id: channel.id,
name: channel.name,
schools,
total
}
});
},
//
getChannelStaffStatistics() {
// API
this.channelStaffData = this.channelList.map(channel => {
const staffs = {};
let total = 0;
this.marketStaffList.forEach(staff => {
const count = Math.floor(Math.random() * 40);
staffs[staff.id] = count;
total += count;
});
return {
id: channel.id,
name: channel.name,
staffs,
total
}
});
}
}
}
</script>
<style lang="scss" scoped>
.main_box {
min-height: 100vh;
background-color: #1a1a1a;
color: #ffffff;
padding-bottom: 30rpx;
}
.navbar_section {
background-color: #1a1a1a;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.title {
font-size: 36rpx;
font-weight: bold;
}
}
.filter-section {
padding: 20rpx;
background-color: #222222;
margin: 20rpx;
border-radius: 10rpx;
.filter-item {
display: flex;
align-items: center;
.label {
font-size: 28rpx;
margin-right: 10rpx;
}
.picker-value {
padding: 10rpx 20rpx;
background-color: #333333;
border-radius: 6rpx;
font-size: 28rpx;
}
}
}
.table-section {
margin: 30rpx 20rpx;
background-color: #222222;
border-radius: 10rpx;
overflow: hidden;
.table-title {
font-size: 32rpx;
font-weight: bold;
padding: 20rpx;
border-bottom: 1px solid #333333;
}
.table-container {
width: 100%;
overflow-x: auto;
}
.table-header {
display: flex;
background-color: #333333;
.th {
padding: 15rpx 10rpx;
font-size: 26rpx;
text-align: center;
flex: 1;
min-width: 100rpx;
font-weight: bold;
}
}
.table-body {
.table-row {
display: flex;
border-bottom: 1px solid #333333;
&:last-child {
border-bottom: none;
}
.td {
padding: 15rpx 10rpx;
font-size: 26rpx;
text-align: center;
flex: 1;
min-width: 100rpx;
}
}
}
.th-person, .td-person {
min-width: 80rpx;
flex: 0.8;
}
.th-week, .td-week,
.th-month, .td-month,
.th-year, .td-year {
flex: 1;
}
.th-channel, .td-channel {
flex: 1.2;
text-align: left;
padding-left: 20rpx;
}
.th-total, .td-total {
flex: 1.2;
font-weight: bold;
}
}
</style>

2
pages/market/reimbursement/detail.vue

@ -22,7 +22,7 @@
</view> </view>
<view class="row"> <view class="row">
<view class="label">状态</view> <view class="label">状态</view>
<view class="value status-{{detail.status}}">{{ statusMap[detail.status] || detail.status }}</view> <view :class="['value', 'status-' + detail.status]">{{ statusMap[detail.status] || detail.status }}</view>
</view> </view>
<view class="row"> <view class="row">
<view class="label">创建时间</view> <view class="label">创建时间</view>

2
pages/market/reimbursement/list.vue

@ -32,7 +32,7 @@
</view> </view>
<view class="row"> <view class="row">
<view class="label">状态</view> <view class="label">状态</view>
<view class="value status-{{item.status}}">{{ statusMap[item.status] || item.status }}</view> <view :class="['value', 'status-' + item.status]">{{ statusMap[item.status] || item.status }}</view>
</view> </view>
<view class="row"> <view class="row">
<view class="label">创建时间</view> <view class="label">创建时间</view>

Loading…
Cancel
Save