You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
342 lines
10 KiB
Vue
342 lines
10 KiB
Vue
<template>
|
|
<!-- 业绩提成 -->
|
|
<view>
|
|
|
|
<scroll-view scroll-x class="bg-white nav text-center">
|
|
<view class="cu-item light flex-sub" :class="[TabCur==2?'bg-red cur text-white':'']" @tap="tabSelect"
|
|
:data-id="2">
|
|
今天
|
|
</view>
|
|
<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red cur text-white':'']" @tap="tabSelect"
|
|
:data-id="1">
|
|
昨天
|
|
<view class="cu-item light flex-sub" :class="[TabCur==3?'bg-red cur text-white':'']" @tap="tabSelect"
|
|
:data-id="3">
|
|
本月
|
|
</view>
|
|
</view>
|
|
<view class="cu-item light flex-sub" :class="[TabCur==0?'bg-red cur text-white':'']" @tap="tabSelect"
|
|
:data-id="0">
|
|
上月
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
<view v-if='TabCur == 1 '>
|
|
<!-- 昨天 -->
|
|
<view v-if="lastodaylist.length==0">
|
|
<view class='empty cuIcon-info'></view>
|
|
<view class='empty-text text-gray'>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item,index) in lastodaylist " :key='index'>
|
|
<view class="module-button">
|
|
<navigator url="classify/classify?type=lastDay" class="sort-button button bg-red">分类</navigator>
|
|
<navigator url="detail/detail?dateType=lastDay" class="detail-button button bg-red">单据明细</navigator>
|
|
</view>
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>总业绩</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 卡付：
|
|
<text class='text-red'>￥{{item.cardAchi==null?0:item.cardAchi}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 现付：
|
|
<text class='text-red'>￥{{item.cashAchi==null?0:item.cashAchi}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>总提成</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 卡付：
|
|
<text class='text-red'>￥{{item.cardComm==null?0:item.cardComm}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 现付：
|
|
<text class='text-red'>￥{{item.cashComm==null?0:item.cashComm}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if='TabCur == 2 '>
|
|
<!-- 今天 -->
|
|
<view v-if="todaylist.length==0">
|
|
<view class='empty cuIcon-info'></view>
|
|
<view class='empty-text text-gray'>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item,index) in todaylist " :key='index'>
|
|
<view class="module-button">
|
|
<navigator url="classify/classify?type=today" class="sort-button button bg-red">分类</navigator>
|
|
<navigator url="detail/detail?dateType=today" class="detail-button button bg-red">单据明细</navigator>
|
|
</view>
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>总业绩</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 卡付：
|
|
<text class='text-red'>￥{{item.cardAchi==null?0:item.cardAchi}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 现付：
|
|
<text class='text-red'>￥{{item.cashAchi==null?0:item.cashAchi}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>总提成</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 卡付：
|
|
<text class='text-red'>￥{{item.cardComm==null?0:item.cardComm}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 现付：
|
|
<text class='text-red'>￥{{item.cashComm==null?0:item.cashComm}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if='TabCur == 3 '>
|
|
<!-- 本月 -->
|
|
<view v-if="monthList.length==0">
|
|
<view class='empty cuIcon-info'></view>
|
|
<view class='empty-text text-gray'>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item,index) in monthList " :key='index'>
|
|
<navigator :url="'./sales-month/sales-month?item='+ JSON.stringify(item)">
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>{{item.date}}</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 业绩：
|
|
<text class='text-red'>￥{{(item.achievementAmount)}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 提成：
|
|
<text class='text-red'>￥{{item.commissionAmount}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view v-if="monthList.length!=0" class="cu-bar bg-white margin-top">
|
|
<view class='action ' style="width: 100%;">
|
|
<view style="width:50%">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-red'>总业绩: {{monthlistAchi}}</text>
|
|
|
|
</view>
|
|
<view style="width:50%">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-red'>总提成: {{monthlistComm}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view v-if='TabCur == 0 '>
|
|
<!-- 上月 -->
|
|
<view v-if="lastMonth.length==0">
|
|
<view class='empty cuIcon-info'></view>
|
|
<view class='empty-text text-gray'>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item,index) in lastMonth " :key='index'>
|
|
<navigator :url="'./last-month/last-month?item='+ JSON.stringify(item)">
|
|
<view class="cu-bar bg-white margin-top">
|
|
<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
|
|
<view class="text-header">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-black'>{{item.date}}</text>
|
|
</view>
|
|
<view class="text-main">
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 业绩：
|
|
<text class='text-red'>￥{{item.achievementAmount}}</text>
|
|
</view>
|
|
<view>
|
|
<text class="cuIcon-title text-red"></text> 提成：
|
|
<text class='text-red'>￥{{item.commissionAmount}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view v-if="lastMonth.length!=0" class="cu-bar bg-white margin-top">
|
|
<view class='action' style="width: 100%;">
|
|
<view style="width:50%">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-red'>总业绩: {{lastMonthAchi}}</text>
|
|
</view>
|
|
<view style="width:50%">
|
|
<text class='cuIcon-titles text-orange'></text>
|
|
<text class='text-red'>总提成: {{lastMonthComm}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
TabCur: 2,
|
|
scrollLeft: 0,
|
|
salesDay: 0,
|
|
userInfo: null,
|
|
todaylist: [],
|
|
lastodaylist: [],
|
|
monthList: [],
|
|
monthlistAchi: 0,
|
|
monthlistComm: 0,
|
|
lastMonth: [],
|
|
lastMonthAchi: 0,
|
|
lastMonthComm: 0,
|
|
lastDayDate: null,
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
tabSelect(e) {
|
|
this.TabCur = e.currentTarget.dataset.id * 1;
|
|
this.achiCommList()
|
|
},
|
|
achiCommList() {
|
|
var form = {
|
|
storeId: this.userInfo.storeId,
|
|
staffId: this.userInfo.id,
|
|
type: this.TabCur,
|
|
}
|
|
this.$api.achiCommList(form).then(res => {
|
|
if (res.code == '000000') {
|
|
if (this.TabCur == 0) {
|
|
/**上月数据*/
|
|
res.rows.forEach(item => {
|
|
this.lastMonthAchi += item.achievementAmount
|
|
this.lastMonthComm += item.commissionAmount
|
|
})
|
|
this.lastMonthComm = this.lastMonthComm.toFixed(2) * 1
|
|
this.lastMonthAchi = this.lastMonthAchi.toFixed(2) * 1
|
|
this.lastMonth = res.rows
|
|
} else if (this.TabCur == 1) {
|
|
//昨天的数据
|
|
this.lastodaylist = res.rows
|
|
} else if (this.TabCur == 2) {
|
|
//今天的数据
|
|
this.todaylist = res.rows
|
|
} else {
|
|
//本月的数据+
|
|
res.rows.forEach(item => {
|
|
this.monthlistAchi += item.achievementAmount
|
|
this.monthlistComm += item.commissionAmount
|
|
})
|
|
this.monthlistComm = this.monthlistComm.toFixed(2) * 1
|
|
this.monthlistAchi = this.monthlistAchi.toFixed(2) * 1
|
|
this.monthList = res.rows
|
|
}
|
|
} else {
|
|
this.monthList = []
|
|
this.todaylist = []
|
|
this.lastodaylist = []
|
|
this.lastMonth = []
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
onShow: function() {
|
|
this.userInfo = uni.getStorageSync('userInfo')
|
|
this.achiCommList()
|
|
//console.log(new Date());
|
|
var day1 = new Date();
|
|
//console.log(day1.toISOString());
|
|
//console.log(new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000));
|
|
this.lastDayDate = new Date(new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000)).toISOString();
|
|
//console.log(Date("2021-01-29"));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: inline-block;
|
|
}
|
|
|
|
.text-main {
|
|
/* display: flex;
|
|
justify-content: space-around; */
|
|
width: 60%;
|
|
display: inline-block;
|
|
font-size: 28upx;
|
|
}
|
|
|
|
.text-main view {
|
|
/* width: 40%; */
|
|
}
|
|
|
|
.text-header {
|
|
width: 40%;
|
|
}
|
|
|
|
.module-button {
|
|
margin: 20rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 10%;
|
|
}
|
|
|
|
.module-button .button {
|
|
width: 40%;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
font-size: 28rpx !important;
|
|
font-weight: 550;
|
|
border-radius: 20rpx;
|
|
}
|
|
</style>
|