H5_module/promote/performance/team/index.vue

<template>
	<view>
		<view class="date ddflex">
			<picker :range="dateList" range-key="label" @change="changeDate">
				<view>{{dateList[dateIndex].label}}</view>
				<image :src="picUrlss+'blue/yeji_rico.png'" class="rico"></image>
			</picker>
			<view class="department ddflex" @click="switchDepartment()" v-if="departmentList&&departmentList.length>0">部门<image src="../../../static/images/n_bico.png"></image></view>
			
			<!-- <view class="filters">
				<view class="point ddflex" @click="showFilters"><text></text><text></text><text></text></view>
				<view class="rules" v-if="isFilter">
					<view :class="'li' + (filterIndex == index ? ' active':'')" v-for="(item,index) in filterList" :key="index">{{item.label}}</view>
				</view>
			</view>
			<view class="ceng" v-if="isFilter" @click="hideFilters"></view> -->
		</view>
		<view class="total" v-if="totalPerfomance&&totalPerfomance.name">
			<view class="name">{{totalPerfomance.name}}</view>
			<view class="money">{{toDecimal(totalPerfomance.money)}}</view>
			<view class="team ddflex" @click="jumpUrl('/promote/performance/person/index?deptId=' + totalPerfomance.deptId + '&deptName='+totalPerfomance.name + '&dateIndex=' + dateIndex)">团队业绩<image src="../../../static/pages/images/more.png"></image></view>
			<view class="total-datas ddflex">
				<view class="li">
					<view>{{toDecimal(totalPerfomance.estimate)}}</view>团队奖励
				</view>
				<view class="li">
					<view :class="toDecimal(totalPerfomance.bl)>=0?'green':''">{{toDecimal(totalPerfomance.bl)}}%</view>较上月增长
				</view>
			</view>
		</view>
		<view class="filter ddflex">
			<view class="li" @click="switchDefault()">默认</view>
			<view class="li ddflex" @click="switchSaleType()">业绩<image :src="picUrlss+'blue/'+ (saleSort == 1 ? 'down.png' : saleSort == 2 ? 'up.png':'sort.png')"></image></view>
			<view class="li ddflex" @click="switchCommissionType()">奖励<image :src="picUrlss+'blue/'+ (commissionSort == 3 ? 'down.png' : commissionSort == 4 ? 'up.png':'sort.png')"></image></view>
		</view>
		<view class="list" v-if="pageList&&pageList.length>0">
			<view class="li" v-for="(item,index) in pageList" :key="index" @click="jumpUrl('/promote/performance/person/index?deptId=' + item.deptId + '&deptName='+item.name + '&dateIndex=' + dateIndex)">
				<view class="tit">{{item.name}}</view>
				<view class="datas ddflex">
					<view class="lis">
						<view>{{toDecimal(item.money)}}</view>团队业绩
					</view>
					<view class="lis spe">
						<view :class="toDecimal(item.bl)>=0?'green':''">{{toDecimal(item.bl)}}%</view>较上月增长
					</view>
					<view class="lis">
						<view>{{toDecimal(item.estimate)}}</view>团队奖励
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无业绩</text>
		</view>
		<block v-if="isShowPop">
		<view class="ceng" @click="hidePop"></view>
		<view class="popup">
			<view class="pop-tit">团队业绩</view>
			<view class="pop-con">
				<view class="pop-list ddflex">
					<view :class="'li' + (teamIndex == index ? ' active':'')" @click="switchTeam(item,index)" v-for="(item,index) in departmentList" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="pop-btn ddflex">
				<view class="pop-cancel" @click="hidePop">取消</view>
				<view class="pop-confirm" @click="confirmSwitchTeam">确认</view>
			</view>
		</view>
		</block>
	</view>
</template>

<script>
	const app = getApp();
	const req = require('../../../utils/request.js');
	const api = require('../../../utils/api.js');
	const util = require('../../../utils/util.js');
	export default {
		components: {
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				dateIndex: 2,
				dateList: [{
						label: '今天',
						value: 1
					},
					{
						label: '本周',
						value: 2
					},
					{
						label: '本月',
						value: 3
					},
					{
						label: '季度',
						value: 4
					},
					{
						label: '今年',
						value: 5
					}
				],
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				saleSort: '',
				commissionSort: '',
				isShowPop: false,
				teamIndex: 0,
				departmentList: [],
				totalPerfomance: {},
				deptId: ''
			}
		},
		onLoad() {
			this.getPageList()
			this.getDepartment()
		},
		onShow() {
		},
		onHide() {
		},
		onReachBottom() {
			this.form.page++
			this.getPageList()
		},
		methods: {
			changeDate(e){
				this.dateIndex = e.detail.value
				this.saleSort = ''
				this.commissionSort = ''
				this.form.page = 1
				this.isLoad = true
				this.getPageList();
			},
			switchDepartment(){
				this.isShowPop = true
			},
			hidePop(){
				this.isShowPop = false
			},
			switchTeam(item,index){
				if(this.teamIndex == index) return false
				this.teamIndex = index
				this.deptId = item.id
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
				this.hidePop()
			},
			confirmSwitchTeam(){
				this.hidePop()
			},
			switchSaleType(){
				this.commissionSort = ''
				console.log('saleSort==',this.saleSort)
				if(this.saleSort == '') this.saleSort = 1
				else if(this.saleSort == 1) this.saleSort = 2
				else this.saleSort = 1
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
			},
			switchCommissionType(){
				this.saleSort = ''
				if(this.commissionSort == '') this.commissionSort = 3
				else if(this.commissionSort == 3) this.commissionSort = 4
				else this.commissionSort = 3
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
			},
			switchDefault(){
				this.commissionSort = ''
				this.saleSort = ''
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
			},
			toDecimal(num) {
				return util.toDecimal(num);
			},
			getPageList(){
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = that.form
				form.dayType = that.dateList[that.dateIndex].value
				if(this.saleSort) form.sort = this.saleSort
				if(this.commissionSort) form.sort  =this.commissionSort
				if(this.deptId) form.deptId = this.deptId
				else form.deptId
				if(form.page == 1){
					uni.showLoading()
				}
				req.getRequest(api.team_achievementList,form,data=>{
					if (data && data.length >= 10) that.isLoad = true;
					if (that.form.page > 1) data = that.pageList.concat(data);
					if(data&&data.length>0){
						data.map(it=>{
							if(it.isTotal == 1){
								this.totalPerfomance = it
							}
						})
						let datas = data.filter(it=> it.isTotal == 0)
						that.pageList = datas
					}
					uni.hideLoading();
				})
			},
			getDepartment(){
				req.getRequest(api.team_nextDept,{},data=>{
					this.departmentList = data
				})
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>