H5_module/promote/settleDetail/settleDetail.vue

<template>
	<view>
		<view class="tops">
			<view class="top ddflex" v-if="timeIndex != 5">
				<picker class="picker" :range="timeData" @change="changeTimePicker">
					<view>{{timeData[timeIndex]}}</view>
					<image src="../static/promote/images/bico.png" class="bico"></image>
				</picker>
				<!-- <view class="tab ddflex">
					<view :class="'li' + (tabIndex == 0 ? ' active' : '')" @click="tabClick(0)">全部</view>
					<view :class="'li' + (tabIndex == 1 ? ' active' : '')" @click="tabClick(1)">待结算</view>
					<view :class="'li' + (tabIndex == 2 ? ' active' : '')" @click="tabClick(2)">已结算</view>
				</view> -->
			</view>
			<view class="total ddflex">总计<view><text>￥</text>{{money ? money : 0.00}}</view></view>
		</view>
		<view style="height: 170rpx;"></view>
		<view class="list" v-if="pageList&&pageList.length>0">
			<view class="li ddflex" v-for="(item,index) in pageList" :key="index">
				<image :src="item.avatar ? item.avatar : '../../static/images/userimg.png'" mode="aspectFill" class="userimg"></image>
				<view class="fflex">
					<view class="ddflex">
						<view class="fflex">
							<view class="username">{{item.nickName}}</view>
							<view class="time">{{item.orderCreateDate}}</view>
						</view>
						<view class="money">¥<text>{{item.orderMoney}}</text></view>
					</view>
					<view class="des ddflex tover">
						购买了
						<view class="fflex">
							<view class="tover" v-for="(it,idx) in item.products" :key="idx">{{it.productName}}</view>
						</view>
					</view>
					<!-- <view class="money ddflex">奖励<view><text>￥</text>{{item.commission}}</view></view> -->
					<view class="opt ddflex">
						<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>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无记录</text>
		</view>
	</view>
</template>

<script>
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			timeIndex: 0,
			timeData: [
				'全部',
				'今天',
				'昨天',
				'近7天',
				'近30天'
			],
			pageList: [],
			form: {
				page: 1,
				limit: 12
			},
			isLoad: true,
			money: '',
			state: 1
		};
	},

	onLoad(options) {
		this.state = options.state
		this.timeIndex = options.timeIndex
		if(options.timeIndex == 5){
			uni.setNavigationBarTitle({
				title:'本月收入'
			})
		}else{
			if(options.state == 1){
				uni.setNavigationBarTitle({
					title:'待结算'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'可提现'
				})
			}
		}
		this.getMoney();
		this.getData();
	},
	onReachBottom: function() {
		this.form.page++;
		this.getData();
	},

	methods: {
		changeTimePicker(e){
			this.timeIndex = e.detail.value;
			this.getMoney();
			this.isLoad = true;
			this.form.page = 1;
			this.getData();
		},
		getMoney(){
			let params = {
				state: this.state,
			}
			if(this.timeIndex == 0){
				delete params.timeType;
			}else if(this.timeIndex == 1){//今天
				params.timeType = 0;
			}else if(this.timeIndex == 2){//昨天
				params.timeType = -1;
			}else if(this.timeIndex == 3){//近7天
				params.timeType = -7;
			}else if(this.timeIndex == 4){//近30天
				params.timeType = -30;
			}else if(this.timeIndex == 5){//本月
				params.timeType = 1;
			}
			req.getRequest('/api/distribution/incomeCountMoney',params,data=>{
				this.money = data.data
			})
		},
		getData() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let that = this;
			let form = that.form;
			form.state = that.state;
			if(that.timeIndex == 0){
				delete form.timeType;
			}else if(that.timeIndex == 1){
				form.timeType = 0;
			}else if(that.timeIndex == 2){
				form.timeType = -1;
			}else if(that.timeIndex == 3){
				form.timeType = -7;
			}else if(that.timeIndex == 4){
				form.timeType = -30;
			}else if(that.timeIndex == 5){//本月
				form.timeType = 1;
			}
			req.getRequest('/api/distribution/incomeV2', form, data => {
				// console.log(data);
				if(data&&data.length > 0){
					data.map(it=>{
						it.products = JSON.parse(it.products)
						return it;
					})
				}
				if (data && data.length >= 10) that.isLoad = true;
				if (that.form.page > 1) data = that.pageList.concat(data);
				that.pageList = data;
				// that.money = data.money > 0 ? data.money.toFixed(2) : '0.00'
			});
		}
	}
};
</script>

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