H5_module/promote/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">
				<view class="fflex">
					<view class="ddflex">
						<image :src="params.avatar ? params.avatar : '../../static/pages/images/userimg.png'" mode="aspectFill" class="userimg"></image>
						<view class="username">{{params.nickName}}</view>
					</view>
					<view class="dept ddflex">
						<view class="hhr-tag ddflex">
							<image :src="picUrlss+'hhr_bg_l.png'"></image>
							<view>金牌合伙人</view>
						</view>
						<view class="job ddflex">
							<view v-if="params.deptName">{{params.deptName}}</view>
							<view v-if="params.titleName">{{params.titleName}}</view>
						</view>
					</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 qian" :style="'height:' + styleCss">
			<view class="tit ddflex">累计收益</text></view>
			<view class="yugu ddflex">
				<view class="fflex">
					<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="tx-btn" @click="jumpUrl('/promote/withdrawal/index/index')">立即提现</view>
			</view>
			<view class="m-datas ddflex">
				<view class="li" @click="jumpUrl('/promote/settleDetail/settleDetail?tabIndex=' + 1 + '&timeIndex=' + 0 + '&state=1')">
					<view>{{toDecimal(params.settled)}}</view>待结算
				</view>
				<view class="li" @click="jumpUrl('/promote/settleDetail/settleDetail?tabIndex=' + 1 + '&timeIndex=' + 0 + '&state=2')">
					<view>{{toDecimal(params.withdrawal)}}</view>可提现
				</view>
				<view class="li" @click="jumpUrl('/promote/withdrawal/record/record')">
					<view>{{toDecimal(params.accumulatedWithdrawal)}}</view>累计提现
				</view>
			</view>
			<view class="more-datas">
				<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">{{getSaleTypeText(item.scaleType)}}</view>
					</view>
				</view>
			</view>
			<view class="colle">
				<view :class="'colle-c ddflex' + (isCollapse?' active':'')" @click="collapse"><image src="../static/promote/images/colle.png"></image></view>
			</view>
		</view>
		<view class="box">
			<view class="tit ddflex">我的客户</view>
			<view class="box-datas ddflex">
				<view class="li">
					<view>{{ customerCensus.shareCount }}</view>
					分享次数
				</view>
				<view class="li">
					<view>{{ customerCensus.browseCount }}</view>
					贡献流量
				</view>
				<view class="li" @click="jumpUrl('/promote/teamList/teamList?tab=0&IS_secondary_members=' + IS_secondary_members)">
					<view>{{ customerCensus.customerCount }}</view>
					分享锁客
				</view>
				<!-- <view class="li" @click="jumpUrl('promote/products/products')">
					<view>{{ customerCensus.validCount }}</view>
					分销商品
				</view> -->
				<!-- <view class="li" @click="jump('/clue/index/index')">
					<view>{{ customerCensus.validCount }}</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 data-box">
			<view class="tit ddflex">
				<view class="fflex">推广数据分析</view>
				<view class="date data">
					<picker :range="dataRules" range-key="label" @change="changeMarketRule">
						<view>{{dataRules[marketRulesIndex].label}}</view>
						<image src="../../static/pages/images/bico.png" class="bico1"></image>
					</picker>
				</view>
			</view>
			<view class="statistics">
				<qiun-data-charts
					type="line"
					:opts="marketChartOpts"
					:ontouch="true"
					:chartData="marketCharts"
				/>
				<!-- <qiun-data-charts type="line" canvasId="scrollevent" :opts="marketChartOpts" :ontouch="true" :canvas2d="true" :chartData="marketCharts" /> -->
			</view>
		</view>
		<view class="box data-box" v-if="params.deptName || params.titleName">
			<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: {},
				styleCss: '333rpx',
				isCollapse: false,
				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: 15,
						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,
						}
					}
				},
				IS_secondary_members: 0,
				customerCensus: {},
				marketRulesIndex: 1,
				marketCharts: '',
				marketChartOpts: {
					color: ["#5F50E6", "#FF7D00","#64C1D7"],
					padding: [15, 0, 0, 5],
					legend: {
						float: 'right',
						padding: 15,
						fontColor: '#9297A2'
					},
					enableScroll: true,
					xAxis: {
					  itemCount: 5, disableGrid: true, scrollShow: true, scrollAlign: 'right'
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2
						}
					}
				},
			}
		},
		onLoad() {
			this.getPramas();
			this.getCustomer();
			this.getChart();
			this.getMarketChart();
		},
		onShow() {
			if (JSON.parse(req.getStorage('configRes')).IS_secondary_members) {
				let IS_secondary_members = JSON.parse(req.getStorage('configRes')).IS_secondary_members;
				this.IS_secondary_members= IS_secondary_members
			}
		},
		onHide() {},
		onReachBottom() {},
		methods: {
			collapse(){
				if(this.isCollapse){
					this.styleCss = '333rpx'
				}else{
					this.styleCss = 'auto'
				}
				this.isCollapse = !this.isCollapse
			},
			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;
			},
			getSaleTypeText(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;
				})
			},
			getCustomer() {
				req.getRequest(api.commission_customer, {
					dayType: this.dateList[this.dateIndex].value
				}, data => {
					this.customerCensus = data;
				})
			},
			changeDate(e){
				this.dateIndex = e.detail.value;
				this.getPramas();
				this.getCustomer();
			},
			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 => {
					if(data&&data.length > 0){
						this.dataCharts = this.getServerData(data)
					}
				})
			},
			getMarketData(data) {
				let res = {
					categories: data.timeList,
					series: [
						{
							name: "分享次数",//data.shareList
							data: data.shareList
						},
						{
							name: "贡献流量",//data.browseList
							data: data.browseList
						},
						{
							name: "分享锁客",//data.customerList
							data: data.customerList
						}
					]
				};
				return res;
			},
			getMarketChart() {
				req.getRequest(api.commission_marketChart, {
					dayType: this.dataRules[this.marketRulesIndex].value
				}, data => {
					this.marketCharts = this.getMarketData(data)
				})
			},
			changeDataRule(e){
				this.dataRulesIndex = e.detail.value;
				this.getChart();
			},
			changeMarketRule(e){
				this.marketRulesIndex = e.detail.value;
				this.getMarketChart();
			},
			jumpUrl(url) {
				console.log('url==',url)
				uni.navigateTo({
					url: url
				})
			},
			jumpPromoteUrl(type){
				let url = '';
				switch (type){
					case 1:
						url = '/promote/sales/sales';
						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>