mz/pages/wallet/commission.vue

<template>
	<view class="content">
		<view class="content-money">
			<!-- 提现 -->
			<view class="withdraw"><text class="withdraw-text" @click="ToTixan">提现</text></view>
			<view class="money-box">
				<view class="money_name">我的余额(元)</view>
				<view class="money_name money_num">{{ money || 0.0 }}</view>
			</view>
			<view class="flex buttom-box">
				<view class="buttom">
					<view class="money">{{ extracted || 0.0 }}</view>
					<text class="text">已结算（元）</text>
				</view>
				<view class="interval"></view>
				<view class="buttom">
					<view class="money">{{ extracting || 0.0 }}</view>
					<text class="text">待结算（元）</text>
				</view>
			</view>
		</view>
		<view class="swiper-box">
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="commission">
				<!-- <view class="nodata" v-if="list.length == 0"><view class="text">暂时没有数据哦！</view></view> -->
				<view v-for="(item, index) in list" class="list-box">
					<view class="list-left">
						<view class="list-name">{{ item.mark }}</view>
						<view class="list-time">{{ item.add_time }}</view>
					</view><!-- {{ (item.pm == 0 ? '-' : '+') + item.number }} -->
					<view class="list-right">
						<text class="jian" v-if="item.pm == 1">+{{item.number}}</text>
						<text class="jia" v-if="item.pm == 0">-{{item.number}}</text>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { withdraw_info, order_income } from '@/api/wallet.js';
import { getTime } from '@/utils/rocessor.js';
export default {
	components: {},
	data() {
		return {
			limit: 10, //每次加载数据条数
			page: 1, //当前页数
			loadingType: 'more', //加载更多状态
			loading: 0, //判断是否为点击搜索按钮跳转加载
			money: '', //佣金金额
			extracting: '', //待结算佣金金额
			extracted: '', //已结算佣金金额
			extract_bank: '', //银行卡信息
			list: []
		};
	},
	onLoad(options) {
		this.loadData();
		this.commission();
	},
	onShow() {},
	onPullDownRefresh() {
		this.page = 1;
		this.commission('refresh');
	},
	onUnload(){
		uni.switchTab({
			url: '/pages/user/user'
		});
	},
	methods: {
		//获取佣金信息
		loadData() {
			let obj = this;
			withdraw_info({})
				.then(({ data }) => {
					obj.money = data.brokerage_price;
					obj.extracting = data.extracting;
					obj.extracted = data.extracted;
					obj.extract_bank = JSON.parse(data.extract_bank);
					// console.log(obj.extract_bank)
				})
				.catch(e => {});
		},
		//获取佣金收支列表
		commission(type) {
			let obj = this;
			//这里是将订单挂载到tab列表下
			if (type !== 'refresh') {
				//没有更多数据直接跳出方法
				if (obj.loadingType === 'nomore') {
					return;
				} else {
					// 设置当前为数据载入中
					obj.loadingType = 'loading';
				}
			} else {
				//当重新加载数据时更新状态为可继续添加数据
				obj.loadingType = 'more';
			}
			order_income({
				page: obj.page,
				limit: obj.limit
			})
				.then(({ data }) => {
					if (type === 'refresh') {
						obj.list = [];
					}
					let arr = data.brokerage_list.map(e => {
						e.add_time = getTime(e.add_time);
						return e;
					});
					obj.list = obj.list.concat(arr);
					//判断是否还有下一页，有是more  没有是nomore
					if (obj.limit == obj.list.length) {
						obj.page++;
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'nomore';
					}
					// 判断是否为刷新数据
					if (type === 'refresh') {
						// 判断是否为点击搜索按钮跳转加载
						if (obj.loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		// 页面跳转
		ToTixan() {
			uni.navigateTo({
				url: '/pages/wallet/withdrawal'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.content {
	height: 100%;
	.swiper-box {
		padding-top: 25rpx;
		height: calc(100% - 220px);
		background-color: #ffffff;
		.list-scroll-content {
			height: 100%;
		}
	}
}
.nodata{
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	padding-top: 20rpx;
}
.content-money {
	padding-bottom: 30rpx;
	position: relative;
	.buttom-box {
		background-color: #ffffff;
		text-align: center;
		margin: 0 30rpx;
		padding: 30rpx 0;
		border-radius: $border-radius-sm;
		margin-top: -60rpx;
		z-index: 100;
		.buttom {
			font-size: $font-lg;
			flex-grow: 1;
			.money {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.text {
			color: #666666;
			font-size: 26rpx;
			font-weight: 400;
		}
		.interval {
			width: 2rpx;
			height: 60rpx;
			background-color: #eeeeee;
		}
		.icon {
			height: 50rpx;
			width: 48rpx;
			margin: 0 auto;
			.icon-img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.money-box {
	padding-top: 100rpx;
	background: linear-gradient(52deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));
	height: 400rpx;
	color: #ffffff;
	text-align: center;
	// 全部
	.top {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 25rpx 60rpx;
		.top-left {
			width: 127rpx;
			height: 40rpx;
			border: 1rpx solid rgba(255, 255, 255, 1);
			border-radius: 20px;
			line-height: 40rpx;
			.top-left-text {
				width: 127rpx;
				// height:40rpx;
				font-size: $font-sm;

				font-weight: 400;
				color: rgba(255, 255, 255, 1);

				text-align: center;
				.top-left-text1 {
					margin-right: 5rpx;
				}
				.iconfont {
					// height: 40rpx;
					line-height: 100%;
				}
			}
		}
		.top-right {
			font-size: $font-sm;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			text {
				font-size: $font-base + 2rpx;
			}
		}
	}

	.money_name {
		width: 100%;
		text-align: center;
		padding-bottom: 25rpx;
		font-size: $font-sm + 2rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
	.money_num {
		font-size: 60rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
	.forms {
		text-decoration: underline;
	}
}

// 提现
.withdraw {
	position: absolute;
	top: 165rpx;
	right: 0;
	width: 160rpx;
	height: 64rpx;
	background: rgba(255, 255, 255, 1);
	border: 2px solid rgba(255, 255, 255, 1);
	border-radius: 32px 0px 0px 32px;
	text-align: center;
	.withdraw-text {
		font-size: $font-base + 2rpx;
		font-weight: bold;
		color: rgba(130, 152, 253, 1);
		line-height: 60rpx;
		letter-spacing: 2rpx;
	}
}
// 详情
.list-box {
	margin: 0 30rpx;
	padding: 25rpx 0rpx;
	border-bottom: 1px solid #eeeeee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.list-left {
		.list-name {
			max-width: 400rpx;
			font-size: $font-base;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.list-time {
			margin-top: 16rpx;
			font-size: $font-sm - 2rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}
	.list-right {
		min-width: 220rpx;
		font-size: $font-base + 2rpx;
		text-align: right;
		letter-spacing: 1px;
		font-weight: bold;
		.jia{
			color: rgba(51, 51, 51, 1);
		}
		.jian{
			color: rgba(252, 42, 63, 1);
		}
	}
}
</style>