digitalMen/pages/user/commission/commission-log.vue

<!-- 佣金明细 -->
<template>
	<view>
		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">佣金明细</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
	<z-paging ref="paging" refresher-complete-delay="200" v-model="rewardLog" @query="queryList">
		<view slot="top" class="z_tabs" :style="{marginTop: tobheight+'px'}"></view>
	<view class="commission-log-wrap">
		<!-- 钱包卡片 -->
		<view class="wallet-wrap">
			<view class="wallet-card">
				<view class="head-box u-flex">
					<view class="head-title">累计收入</view>
					<button class="u-reset-button look-btn" @tap="showMoney = !showMoney">
						<!-- <view class="u-iconfont" :class="showMoney ? 'uicon-eye-fill' : 'uicon-eye-off'" style="color: #fff;font-size: 50rpx;"></view> -->
						<u-icon :name="showMoney ? 'eye-fill':'eye-off'" color="#fff" size="22"></u-icon>
					</button>
				</view>
				<view class="card-num">{{ showMoney ? money_total || '0.00' : '***' }}</view>
				<view class="card-bottom u-flex u-row-left">
					<view class="card-item u-flex-1">
						<view class="item-title">待入账佣金</view>
						<view class="item-value">{{ showMoney ? on_cashout_money || '0.00' : '***' }}</view>
					</view>
					<view class="card-item u-flex-1">
						<view class="item-title">可提现佣金</view>
						<view class="item-value">{{ showMoney ? money || '0.00' : '***' }}</view>
					</view>
				</view>
				<button class="u-reset-button draw-btn" @tap="jump('/pages/user/commission/withdraw')">提现</button>
			</view>
		</view>

		<!-- 筛选 -->
		

		<view class="item-box">
			<!-- 佣金明细列表 -->
			<view class="log-item u-flex u-row-between" v-for="item in rewardLog" :key="item.id">
				
				<view class="item-left u-flex">
					
					<view class="item-notice">
						
						<view class="log-mark">{{ item.mark }}</view>
						<view v-if="item.buy_userinfo" class="u-flex" style="margin-bottom: 12rpx;">
							<image class="log-img" :src="item.buy_userinfo.avatar?item.buy_userinfo.avatar:'/static/images/head.jpg'" mode="aspectFill"></image>
							<view class="log-name">{{item.buy_userinfo.nickname+'/'+item.buy_userinfo.id_number}}</view>
						</view>
						<view class="log-notice">{{ item.create_time }}</view>
					</view>
				</view>
				<view class="item-right">
					<!-- <view class="log-num" :style="{ color: classType[item.status] }">{{ item.status < 0 ? '-' : '+' }} {{ item.commission }}</view> -->
					<view class="log-num" :style="{ color: '#05C3A1' }">{{'+'+ item.money }}</view>
					<view class="log-date"></view>
				</view>
			</view>
			
		<!-- 日期选择 -->
		
	</view>
	
	
	
	</view>
	</z-paging>
	<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			isLoading:true,
			tobheight:45,
			platform: this.$platform.get(),
			stateCurrent: 'all', //默认
			stateMap: {
				all: '全部收入',
				waiting: '待入账',
				accounted: '已入账',
				back: '已退回',
				cancel: '已取消'
			},
			classType: {
				'-1': '#EB2B3D',
				'0': '#05C3A1',
				'1': '#7063D2',
				'-2': '#EEEEEE'
			},
			statusList: [
				{
					name: '全部',
					value: 'all'
				},
				{
					name: '待入账',
					value: 'waiting'
				},
				{
					name: '已入账',
					value: 'accounted'
				},
				// {
				// 	name: '已退回',
				// 	value: 'back'
				// },
				// {
				// 	name: '已取消',
				// 	value: 'cancel'
				// }
			],
			incomeLog:[],
			showMoney: true, //是否显示金额
			//日期选择
			showCalendar: false,
			selDateText: '',
			rewardLog: [
				{}
			], //佣金记录
			propsDate: '', //日期参数
			totalMoney: '', //收入
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			isEmpty: false,
			on_cashout_money:'0.00',
			money_total:'0.00',
			money:'0.00'
		};
	},
	computed: {
		...mapGetters(['appInfo','isLogin', 'userInfo'])
	},
	onLoad() {
		const that = this;
		if(this.platform == 'wxMiniProgram'){
		var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
		var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
		this.tobheight = (menumtop+paddingtop+uni.getMenuButtonBoundingClientRect().height)
		}
		this.getToday();
		
		this.getCommissionLog();
	},
	onShow() {
		this.getCheck()
	},
	
	methods: {
		queryList(pageNo, pageSize) {
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			const params = {
				page: pageNo,
				limit: pageSize,
				// level: this.level,
			};
			this.$http('commission.incomeLog', params).then(res => {
				if (res.code == 0) {
					
					this.$refs.paging.complete(res.data.data);
					
				}
			});
		},
		getCheck(){
			var that = this;
			that.$http('commission.auth').then(res => {
				if(res.code == 0){
					uni.setNavigationBarTitle({
						title: this.appInfo.site_name
					});
					that.on_cashout_money = res.data.on_cashout_money>0?res.data.on_cashout_money:'0.00'
					that.money_total = res.data.money_total>0?res.data.money_total:'0.00'
					that.money = res.data.money
					that.isLoading = false
				}
			})
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 切换分类
		onTab(state) {
			if (this.stateCurrent !== state) {
				this.rewardLog = [];
				this.currentPage = 1;
				this.lastPage = 1;
				this.stateCurrent = state;
				this.getCommissionLog();
			}
		},

		//  今日
		getToday() {
			let now = new Date();
			this.selDateText = `${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`;
			let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
			this.propsDate = `${dateText}-${dateText}`;
		},

		// 选择日期
		selDate(e) {
			this.rewardLog = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.selDateText = `${e.startYear}.${e.startMonth}.${e.startDay}-${e.endYear}.${e.endMonth}.${e.endDay}`;
			let dateText = `${e.startYear}/${e.startMonth}/${e.startDay}-${e.endYear}/${e.endMonth}/${e.endDay}`;
			this.propsDate = dateText;
			this.getCommissionLog();
			this.$refs.uCalendar.init();
		},

		// 佣金明细
		getCommissionLog() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http(
				'commission.incomeLog',
				{
					// date: that.propsDate,
					// type: that.stateCurrent,
					page: that.currentPage
				},
				'加载中...'
			).then(res => {
				uni.stopPullDownRefresh();
				if (res.code === 0) {
					// that.totalMoney = res.data.total_money;
					that.rewardLog = [...that.rewardLog, ...res.data.data];
					that.lastPage = res.data.last_page;
					that.isEmpty = !that.rewardLog.length;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getCommissionLog();
			}
		}
	}
};
</script>

<style lang="scss">
// 分类
.state-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-bottom: 1rpx solid rgba(#999, 0.5);
	.state-title {
		color: #666;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 90rpx;
	}
	.title-active {
		color: #333;
	}
	.underline {
		display: block;
		width: 68rpx;
		height: 4rpx;
		background: #fff;
		border-radius: 2rpx;
	}
	.underline-active {
		background: #5e49c3;
		display: block;
		width: 68rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}
}
// 钱包卡片
.wallet-wrap {
	background-color: #fff;
	padding: 30rpx;
}
.wallet-card {
	width: 690rpx;
	height: 301rpx;
	background: url('http://file.shopro.top/imgs/commission/commission_card_bg.png') no-repeat;
	background-size: 100% 100%;
	border-radius: 20rpx;
	padding: 30rpx;
	position: relative;
	box-shadow: 1rpx 5rpx 16rpx 0px rgba(94, 73, 195, 0.81);
	.head-box {
		margin-bottom: 20rpx;
		.head-title {
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
		}
		.look-btn {
			color: #fff;
			font-size: 30rpx;
			background: none;
			padding: 0;
			margin-left: 20rpx;
		}
	}
	.card-num {
		font-size: 40rpx;
		font-weight: 500;
		color: #fefefe;
		margin-bottom: 30rpx;
	}
	.card-bottom {
		.card-item {
			.item-title {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				margin-bottom: 10rpx;
			}
			.item-value {
				font-size: 30rpx;
				font-weight: 500;
				color: #fefefe;
			}
		}
	}
	.draw-btn {
		position: absolute;
		top: 35rpx;
		right: 35rpx;
		width: 121rpx;
		line-height: 58rpx;
		background: #ffffff;
		border-radius: 29rpx;
		padding: 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #5848c4;
	}
}

// 表头
.head_box {
	height: 120rpx;
	padding: 0 30rpx;
	background-color: #f6f6f6;
	.date-btn {
		background-color: #fff;
		line-height: 54rpx;
		border-radius: 27rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.total-box {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
}
// 佣金明细列表
.item-box {
	margin: 20rpx 0;
}
.log-item {
	// height: 142rpx;
	background-color: #fff;
	padding: 0 60rpx;
	border-bottom: 1rpx solid #eee;
	.item-left {
		
		.item-notice{
			// width: 80%;
			.log-img {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			.log-name{
				font-size: 24rpx;
				    color: #9E9E9E
			}
			.log-mark {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 12rpx;
			}
			.log-notice {
				font-size: 22rpx;
				font-weight: 500;
				color: #c0c0c0;
			}
		}
		
	}
	.item-right {
		.log-num {
			font-size: 28rpx;
			font-weight: 500;
			color: #05c3a1;
		}
		.log-date {
			font-size: 24rpx;
			font-weight: 400;
			color: #c0c0c0;
		}
	}
}
</style>