gzh_chuanyuan/pages/user/rebate.vue

<template>
	<view class="rebate">
		<u-navbar fixed title="我的佣金" :placeholder="true" :titleStyle="{'color':'#fff'}" title-color="#fff"
			:border="false" :bgColor="scrollTop?'#2080f9':'transparent'" leftIconColor="#ffffff"
			:autoBack="true"></u-navbar>
		<view class="rebate-top">
			<view class="a">可提现金额（元）</view>
			<view class="b">{{userInfo.balance?userInfo.balance:0}}</view>
			<view class="btn" @click="toTixian()">
				去提现
			</view>
		</view>
		<view class="rebate-menu">
			<view class="a">
				<view>累计收益</view>
				<text>{{userInfo.commission_price?userInfo.commission_price:0}}</text>
			</view>
			<view class="a">
				<view>提现中</view>
				<text>{{userInfo.withdrawal_ing?userInfo.withdrawal_ing:0}}</text>
			</view>
			<view class="a">
				<view>已提现</view>
				<text>{{userInfo.withdrawal_complete?userInfo.withdrawal_complete:0}}</text>
			</view>
		</view>
		<view class="rebate-con">
			<view class="rebate-con-rate">
				<picker mode="date" :value="value1" fields="month" @change="bindDateChange">
					<view class="rate">
						<text>{{value1}}</text><u-icon name="arrow-down" color="#333333" size="14"></u-icon>
					</view>
				</picker>
			</view>
			<view class="rebate-con-hd">
				<view class="item" :class="selectIndex == 1?'item-on':''" @click="tabItem(1)">全部</view>
				<view class="item" :class="selectIndex == 2?'item-on':''" @click="tabItem(2)">收入</view>
				<view class="item" :class="selectIndex == 3?'item-on':''" @click="tabItem(3)">支出</view>
			</view>
			<view class="rebate-con-bd" v-for="(a,index) in list" :key="index">
				<view class="one">
					<view>{{a.remake}}</view>
					<text :class="a.type == 2?'a':'b'">{{a.money}}</text>
				</view>
				<view class="two">
					<view>{{a.created_at}}</view>
					<text>{{a.type == 2?'收入':'支出'}}</text>
				</view>
			</view>
			<view class="empty" style="margin-top: 200rpx;" v-if="total == 0">
				<u-empty mode="data" text="暂无相关信息">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				selectIndex: 1,
				page: 1,
				total: 1,
				value1: new Date().getFullYear()+'-'+((new Date().getMonth()+1)>=10?new Date().getMonth()+1:"0"+(new Date().getMonth()+1)),
				list:[],
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo();
			this.getList();
		},
		onReachBottom() {
			if(this.list.length <= this.total){
				this.page ++
				this.getList();
			}
		},
		methods: {
			toTixian() {
				uni.navigateTo({
					url: "/pages/user/withdrawal"
				})
			},
			bindDateChange(e){
				this.value1 = e.detail.value;
				this.list = [];
				this.page = 1;
				this.getList();
			},
			//获取列表
			async getList() {
				const { code, data } = await this.$api.balanceLogList({
					type: this.selectIndex,
					time: this.value1,
					page: this.page
				})
				if (code == 200) {
					this.list = this.arrayUnique(this.list.concat(data.list),'id');
					this.total = data.total;
				}
			},
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
			//获取用户信息
			async getUserInfo() {
				const { code, data, msg } = await this.$api.loginInfo({})
				if (code == 200) {
					this.userInfo = data;
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			tabItem(i) {
				this.selectIndex = i
				this.list = [];
				this.page = 1;
				this.getList();
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop <= 15) {
				this.isScrollTop = false;
			} else {
				this.isScrollTop = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.rebate {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6 url(/static/user-bg.png) center top no-repeat;
		background-size: 100% auto;
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		box-sizing: border-box;

		&-top {
			margin-top: 35rpx;
			color: #FFFFFF;
			text-align: center;

			.a {
				font-size: 30rpx;
			}

			.b {
				margin-top: 20rpx;
				font-size: 60rpx;
			}

			.btn {
				width: 192rpx;
				margin: 40rpx auto;
				border: 2px solid #FFFFFF;
				border-radius: 35rpx;
				font-size: 30rpx;
				line-height: 68rpx;
				color: #FFFFFF;
			}
		}

		&-menu {
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.a {
				width: 32%;
				text-align: center;
				font-size: 28rpx;
				line-height: 1.5;
				font-weight: 400;
				color: #333333;
				border-right: 1px solid #EAEAEA;
				&:last-child{
					border: none;
				}
				text {
					font-size: 40rpx;
					line-height: 1.8;
				}
			}
		}

		&-con {
			&-rate {
				margin: 40rpx 0 20rpx;

				.rate {
					display: flex;
					align-items: center;
					justify-content: start;
					font-size: 30rpx;
					color: #222222;

					text {
						margin-right: 10rpx
					}
				}
			}

			&-hd {
				width: 80%;
				margin: 0 auto 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					padding: 20rpx 0;
					width: 100rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					position: relative;

					&-on {
						color: #2080F9;
						font-weight: bold;
						font-size: 34rpx;

						&::after {
							content: "";
							width: 52rpx;
							height: 10rpx;
							background: #2080F9;
							border-radius: 10rpx;
							position: absolute;
							left: 50%;
							bottom: 0;
							z-index: 2;
							margin-left: -26rpx;
						}
					}
				}

			}

			&-bd {
				margin-bottom: 20rpx;
				padding: 30rpx 38rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.one {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #222222;
					line-height: 2;
					font-weight: bold;
					.a{
						color: #FFA633;
					}
				}

				.two {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #999999;
					line-height: 1.5;
					.a{
						color: #F01B1B;
					}
				}
			}
		}
	}
</style>