H5_QiCaiYao/page_salesman_index/my_commission/my_commission.vue

<template>
	<view class="my_commission">
		<z-paging ref="paging" v-model="dataList" @query="queryList" refresher-enabled>

			<template slot="top">
				<div class="sum"
					:style="{background:`url(${$util.img('/upload/weapp/pageSalesman/yj.png')}) no-repeat`}">
					<div>累计佣金（元）</div>
					<div class="money">{{broke_money}}</div>
				</div>
			</template>
			<div class="list">
				<div class="top">
					<div class="time" @click="show=true">{{day_time}} <u-icon name="arrow-down" color="#666666"
							size="12"></u-icon>
					</div>
					<div class="income">收入：{{total}}</div>
				</div>

				<div class="item" v-for="(item,index) in list" :key="index"
					:style="{borderBottom:index==dataList.length-1?'none':''}">
					<div>
						<div class="name">{{item.title}}</div>
						<div>订单编号：{{item.order_no}}</div>
						<div>时间：{{item.create_time}}</div>
					</div>
					<div class="price">{{item.change_num}}</div>
				</div>
			</div>

		</z-paging>
		<u-datetime-picker :show="show" @confirm="confirm" @cancel="show=false" v-model="time" mode="year-month"
			confirmColor="#21BBF3" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: '',
				show: false,
				dataList: [{}, {}, {}],
				broke_money: '',
				total: '',
				day_time: '',
				list: []
			};
		},
		onShow() {
			let timestamp = Date.parse(new Date());
			this.time = timestamp
			this.day_time = this.times(timestamp)

		},
		methods: {
			queryList(pageNo, pageSize) {
				// this.$refs.paging.complete(this.dataList);
				this.$api.sendRequest({
					url: '/api/salasman/getBroke',
					data: {
						page: pageNo,
						page_size: pageSize,
						month_time: this.day_time
					},
					success: res => {
						console.log(res.data, '我的佣金');
						this.broke_money = res.data.broke_money
						this.total = res.data.total
						// this.list = res.data.list
						this.$refs.paging.complete(res.data.list);
						

						// this.statisticsList[5].label=res.data.today_member_hy_num.name
					}
				})
			},
			confirm(value) {
				console.log(value);
				this.day_time = this.times(value.value)
				this.$api.sendRequest({
					url: '/api/salasman/getBroke',
					data: {
						month_time: this.day_time
					},
					success: res => {
						console.log(res.data, '我的佣金');
						this.broke_money = res.data.broke_money
						this.total = res.data.total
						this.list = res.data.list
					}
				})
				this.show = false
			},
			times(num) {
				let now = new Date(Number(num))
				let n = now.getFullYear()
				let y = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : 0 + '' + (now.getMonth() + 1);
				// let r =now.getDate();
				return n + '-' + y
			}
		},

	}
</script>

<style lang="scss">
	.my_commission {
		padding: 32rpx;

		.list {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx 32rpx 0;
			margin-top: 32rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				border-bottom: #E8E8E8 solid 1px;
				padding: 28rpx 0;

				.price {
					font-size: 36rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
				}

				.name {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;
				}
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 12rpx 0;

				.income {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #F33B50;
				}

				.time {
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.sum {
			box-sizing: border-box;
			height: 208rpx;

			background-size: 100% 208rpx !important;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding: 40rpx 0 0 48rpx;

			.money {
				font-size: 64rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				line-height: 100rpx;
			}
		}
	}
</style>