H5_module/promote/sales/sales.vue

<template>
	<view>
		<view class="top ddflex">
			<!-- <view class="ke"><text>5183</text>实际销售额</view> -->
			<view class="datas ddflex fflex">
				<view class="li"><view><text>￥</text>{{count.totalMoney}}</view><text>总销售额</text></view>
				<view class="fuhao"><!-- - --><image src="../static/promote/images/jian.png" mode="widthFix"></image></view>
				<view class="li"><view><text>￥</text>{{count.refundMoney}}</view><text>退款总额</text></view>
				<view class="fuhao">=</view>
				<view class="li"><view><text>￥</text>{{count.actualMoney}}</view><text>实际销售额</text></view>
			</view>
		</view>
		<view class="tab ddflex">
			<view :class="'li' + (tabIndex == -1 ? ' active' : '')" @click="tabClick('',-1)">全部</view>
			<view :class="'li' + (tabIndex == index ? ' active' : '')" v-for="(item,index) in typeList" :key="index" @click="tabClick(item.type,index)">{{item.label}}</view>
		</view>
		<view class="list" v-if="pageList.length > 0">
			<block v-for="(item, index) in pageList" :key="index">
				<view class="li dflex">
					<image :src="item.createAvatar ? item.createAvatar : '../../static/pages/images/userimg.png'"
						mode="aspectFill" class="userimg"></image>
					<view class="fflex">
						<view class="ddflex">
							<view class="fflex">
								<view class="username">{{item.createName}}</view>
								<view class="time" v-if="item.updateDate">{{item.updateDate}}</view>
							</view>
							<view class="money">￥<text>{{item.orderMoney}}</text></view>
						</view>
						<view class="name">
							<text>订单</text>
							{{item.orderId}}
						</view>
						<view class="pro-buy ddflex" v-if="item.productList && item.productList.length > 0">
							<text>购买了</text>
							<view class="pro-list fflex">
								<view class="lis tover" v-for="(it,idx) in item.productList" :key="idx">{{it.title}}
								</view>
							</view>
						</view>
						<view class="opt opts ddflex" v-if="item.state == 3">
							<view class="fail">
								已全额退款
							</view>
						</view>
						<view class="opt ddflex" v-else>
							<view :class="'shifu ddflex' + (item.state==2 ? ' green' : item.state==1 ? ' dai' : '')"><text>佣金</text>￥<text>{{item.money}}</text></view>
							<view class="sta dai" v-if="item.state==1">待结算</view>
							<view class="sta green" v-else-if="item.state==2">已结算</view>
						</view>
						<!-- <block v-else>
						<view class="opt dai" v-if="item.refundMoney > 0">
							退款 ￥{{item.refundMoney}}
						</view>
						</block> -->
					</view>
					<!-- <view class="flex">
					<view class="name">
						<text>订单:</text>
						{{item.orderId}}
					</view>
					<view class="dblock">
						<text class="moneygray"></text>
						<text class="moneygray" v-if="item.orderMoney">   ￥{{item.orderMoney}}</text>
						<text class="moneyred" v-if="item.state==1">待结算</text>
						<text class="moneygray" v-else-if="item.state==2">已结算</text>
						<text class="moneygray" v-else>已取消</text>
					</view>
				</view>
				<view class="money">￥<text>{{item.money}}</text>
					<view>
						<text class="time" v-if="item.updateDate">{{item.updateDate}}</text>
					</view>
				
				</view> -->
				</view>
			</block>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无业绩订单</text>
		</view>
	</view>
</template>

<script>
	// promote/balance/balance.js
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				pageList: [],
				form: {
					page: 1,
					limit: 10
				},
				isLoad: true,
				count: {},
				initTypeList: [
					{
						type: 1,
						label: '直接客户'
					},
					{
						type: 2,
						label: '分销客户'
					},
					{
						type: 3,
						label: '间接客户'
					},
					{
						type: 4,
						label: '自购'
					}
				],
				typeList: [],
				tabIndex: -1,
				type: ''
			};
		},

		components: {},
		props: {},

		async onLoad(options) {
			this.getCount();
			await this.getConfig();
			await this.getData();
		},

		onReachBottom: function() {
			if (this.hasmore) return false;
			this.form.page++;
			this.getData();
		},
		methods: {
			tabClick(type,index){
				if(this.tabIndex == index) return false;
				this.tabIndex = index;
				this.type = type
				this.form.page = 1;
				this.isLoad = true;
				this.getData();
			},
			getCount(){
				req.getRequest('/api/distribution/achievementCount',{},data=>{
					this.count = data;
				})
			},
			getConfig(){
				return new Promise((resolve,reject)=>{
					req.postRequest('/api/distribution/config', {}, res => {
						if(!res.salesStatisticsMethod){
							if(res.distributionIsSubCommission == 1){
								res.salesStatisticsMethod = '1,4'
							}else{
								res.salesStatisticsMethod = '1,2'
							}
						}
						let method = res.salesStatisticsMethod.split(',')
						let arr = []
						this.initTypeList.map(it=>{
							method.map(its=>{
								if(its == it.type){
									arr.push(it)
								}
							})
						})
						this.typeList = arr;
						resolve();
					})
				})
			},
			getData() {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = that.form
				if(that.type){
					form.type = that.type
				}else{
					delete form.type;
				}
				if(form.page == 1){
					uni.showLoading()
				}
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/distribution/distributionOrderList', form, data => {
						// console.log(data);
						if (data && data.length >= 10) that.isLoad = true;
						if (that.form.page > 1) data = that.pageList.concat(data);
						that.pageList = data
						uni.hideLoading();
						resolve();
					});
				})
			}

		}
	};
</script>
<style>
	@import "./sales.css";
</style>