H5_module/promote/performance/index/index.vue

<template>
	<view v-if="isShowPage">
		<view :class="'top' + (isScroll ? ' top-background' : '')" :style="'height:' + systems.barHeight + 'rpx;'">
			<view class="top-nav ddflex"
				:style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator open-type="navigateBack" hover-class="none" class="back ddflex">
					<image src="../../../static/images/back.png"></image>
				</navigator>
				<view class="top-nav-title fflex" :style="'line-height:' + systems.navigationHeight + 'rpx;'">销售业绩
				</view>
			</view>
		</view>
		<view class="head">
			<image :src="picUrlss+'blue/yeji_bg.png'" class="bg"></image>
			<view class="userinfo ddflex">
				<image :src="params.avatar ? params.avatar : '../../../static/pages/images/userimg.png'"
					mode="aspectFill" class="userimg"></image>
				<view class="fflex">
					<view class="username">{{params.nickName}}</view>
					<view class="job">
						<block v-if="params.deptName">部门<text>{{params.deptName}}</text></block>
						<block v-if="params.titleName">职级<text>{{params.titleName}}</text></block>
					</view>
				</view>
				<view class="date">
					<picker :range="dateList" range-key="label" @change="changeDate">
						<view>{{dateList[dateIndex].label}}</view>
						<image src="../../../static/pages/images/bico_white.png" class="bico"></image>
					</picker>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="tit ddflex">我的收益<text>/ 元</text></view>
			<view class="yugu">
				<view class="yugu-money">{{toDecimal(params.estimate)}}</view>
				<view class="yugu-text ddflex">
					<image :src="picUrlss+'blue/yeji_bag.png'"></image>预估收入
				</view>
			</view>
			<view class="yeji-datas ddflex" v-for="(item,index) in params.saleTypeIndexResponses" :key="index" v-if="params.saleTypeIndexResponses&&params.saleTypeIndexResponses.length > 0">
				<view class="li">
					{{toDecimal(item.personal)}}
					<view class="ddflex" @click="jumpPromoteUrl(item.scaleType)">
						{{getSaleType(item.scaleType) + '业绩'}}
						<image src="../../../static/pages/images/more.png"></image>
					</view>
				</view>
				<view class="li"><!-- @click="jumpPromoteListUrl(item.scaleType)" -->
					{{toDecimal(item.estimate)}}
					<view class="ddflex">{{item.scaleType == 1 ? '佣金' : getSaleType(item.scaleType) + '提成'}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="box">
			<view class="tit ddflex">团队业绩<text>/ 元</text></view>
			<view class="yeji-datas ddflex">
				<view class="li">
					{{toDecimal(params.teamPersonal)}}
					<view class="ddflex" @click="jumpUrl('/promote/performance/team/index')">团队销售<image
							src="../../../static/pages/images/more.png"></image>
					</view>
				</view>
				<view class="li">
					{{toDecimal(params.teamEstimate)}}
					<view class="ddflex">团队提成</view>
				</view>
			</view>
		</view> -->
		<view class="box">
			<view class="tit ddflex">
				<view class="fflex">数据统计</view>
				<view class="date data">
					<picker :range="dataRules" range-key="label" @change="changeDataRule">
						<view>{{dataRules[dataRulesIndex].label}}</view>
						<image src="../../../static/pages/images/bico.png" class="bico1"></image>
					</picker>
				</view>
			</view>
			<view class="statistics">
				<qiun-data-charts type="column" canvasId="scrollevent" :opts="chartOpts" :ontouch="true" :canvas2d="true" :chartData="dataCharts" />
			</view>
		</view>
	</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 {
				isShowPage: false,
				picUrlss: req.public.picUrls,
				isScroll: false, //是否滚动
				systems: {},
				params: {},
				dateIndex: 2,
				dateList: [{
						label: '今天',
						value: 1
					},
					{
						label: '本周',
						value: 2
					},
					{
						label: '本月',
						value: 3
					},
					{
						label: '季度',
						value: 4
					},
					{
						label: '今年',
						value: 5
					}
				],
				dataRulesIndex: 1,
				dataRules: [{
						label: '按日',
						value: 1
					},
					{
						label: '按月',
						value: 3
					},
				],
				dataCharts: '',
				chartOpts: {
					color: ["#13C685", "#FF6E52"],
					padding: [15, 0, 0, 5],
					legend: {
						float: 'right',
						padding: 20,
						fontColor: '#9297A2'
					},
					enableScroll: true,
					xAxis: {
						axisLineColor: '#f4f4f4',
						itemCount: 4,
						disableGrid: true,
						scrollShow: true,
						scrollAlign: 'right',
						fontSize: 12,
						fontColor: '#2F3440',
					},
					yAxis: {
						gridColor: "#f4f4f4",
						data: [{
							min: 0,
							axisLineColor: '#00000000',
							fontSize: 12,
							fontColor: '#999999',
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 6,
							seriesGap: 4,
							barBorderCircle: true,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
						}
					}
				}
			}
		},
		onLoad() {
			this.getPramas()
			this.getChart();
		},
		onShow() {},
		onHide() {},
		onReachBottom() {},
		methods: {
			toDecimal(num) {
				return util.toDecimal(num);
			},
			getSaleType(type){
				var text = '';
				switch (type) {
					case 1:
						text = '合伙人';
						break;
					case 2:
						text = '服务';
						break;
					case 3:
						text = '个人';
						break;
					case 4:
						text = '团队';
						break;
					case 5:
						text = '直播间';
						break;
					case 5:
						text = '公会';
						break;
				}
				return text;
			},
			getPramas() {
				req.getRequest(api.perfomance_statistics, {
					dayType: this.dateList[this.dateIndex].value
				}, data => {
					this.params = data;
					this.isShowPage = true;
				})
			},
			changeDate(e){
				this.dateIndex = e.detail.value;
				this.getPramas();
			},
			getServerData(data) {
				let res = {
					categories: data.timeList,
					series: [{
							name: "销量",//data.totalList
							data: data.totalList
						},
						{
							name: "销售额",//data.moneyList
							data: data.moneyList
						}
					]
				};
				console.log(res.categories)
				return res;
			},
			getChart() {
				req.getRequest(api.perfomance_statistics_charts, {
					dayType: this.dataRules[this.dataRulesIndex].value
				}, data => {
					this.dataCharts = this.getServerData(data)
				})
			},
			changeDataRule(e){
				this.dataRulesIndex = e.detail.value;
				this.getChart();
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			jumpPromoteUrl(type){
				let url = '';
				switch (type){
					case 1:
						url = '/promote/team/team';
						break;
					case 3:
						url = '/promote/performance/personal/index';
						break;
					case 4:
						url = '/promote/performance/team/index';
						break;
				}
				this.jumpUrl(url);
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll(e) {
			const systemInfo = uni.getSystemInfoSync();
			let height = systemInfo.statusBarHeight + 44
			if (e.scrollTop > height) {
				this.isScroll = true
			} else {
				this.isScroll = false
			}
		}
	}
</script>

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