H5_QiCaiYao/page_salesman_index/income/income.vue

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

		<template slot="top">
			<div class="sum" :style="{background:`url(${$util.img('/upload/weapp/pageSalesman/sr.png')}) no-repeat`}">

				<div>我的额度（元）</div>
				<div class="money">{{balance_money}}</div>
			</div>
		</template>
		<div class="list">
			<div class="top">
				<div class="income">额度使用记录</div>
				<div class="time" @click="show=true">{{day_time}} <u-icon name="arrow-down" color="#666666" size="12"></u-icon>
				</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: [{}, {}, {}],
				balance_money:'',
				total:'',
				day_time:'',
				list:[]
			};
		},
		methods:{
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.dataList);
			},
			confirm(value){
				console.log(value);
				this.day_time = this.times(value.value)
				this.$api.sendRequest({
					url: '/api/salasman/getBalance',
					data: {
						month_time : this.day_time
					},
					success: res => {
						console.log(res.data, '我的额度');
						this.balance_money=res.data.balance_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
			}
		},
		onShow() {
			let timestamp = Date.parse(new Date());
			this.time=timestamp
			this.day_time = this.times(timestamp)
			this.$api.sendRequest({
				url:'/api/salasman/getBalance',
				data:{
					month_time : this.day_time
				},
				success:res=>{
					console.log(res.data,'我的额度');
					this.balance_money=res.data.balance_money
					this.total=res.data.total
					this.list=res.data.list
					// this.statisticsList[5].label=res.data.today_member_hy_num.name
				}
			})
		}
	}
</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: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					font-weight: bold;

				}

				.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>