guosen-ldt-shop/pages/my-bills/comps/channel-point-bill.vue

<template>
	<view class="" style="height: 100vh;">
		<view class="head_box u-flex u-row-center u-col-center">
			<view class="card-box">
				<view class="card-head u-flex u-col-center">
					<view class="card-title u-m-r-10">账单应收（元）</view>
					<view class="u-iconfont uicon-eye" style="color: #fff;font-size: 50rpx;"></view>
				</view>
				<view class="money-num u-p-t-50">{{dataInfo.charge}}</view>

				<view class="padding-top-40 text-white text-df">
					<text class="price">总收益：{{dataInfo.totalCharge}}</text>
					<text class="margin-left-30 price">今日收益：{{dataInfo.todayCharge}}</text>
				</view>
			</view>
		</view>

		<view @click.stop="showTime = true" class="flex justify-between" style="font-size: 24rpx;color: #666666;background-color: #f6f6f6;">
			
			<view class="flex">
				<view class="bg-white cu-btn round margin-30 sm">
					<text>{{defaultTime}}</text>
					<text class="cuIcon-triangledownfill text-gray" style="font-size: 50rpx;"></text>
				</view>
				<!-- <view class="total-box">收入￥0.00 支出￥0.00</view> -->
			</view>
			
			<!-- <view class="center margin-right-30">
				统计
				<text class="cuIcon-right"></text>
			</view> -->
		</view>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==stateCurrent?'text-base cur text-xl text-bold ':'text-lg'"
					v-for="(item,index) in statusList" :key="index" @tap="onTab(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<u-sticky v-if="stateCurrent==0" offset-top="0" :enable="true">
			<view class="flex bg-white u-border-top " style="padding: 30rpx">
				<view style="width: 51%;margin-left: 60rpx;">
					来源
				</view>
				<view class="text-center" style="width: 25%;">
					折扣
				</view>
				<view class="text-right" style="width: 24%;margin-right: 20rpx;">
					金额
				</view>
			</view>
		</u-sticky>

		<view v-show="stateCurrent==0" class="bg-white safe-area-inset-bottom tabsClass" style="height: 100%;">
			<mescroll :down="downOption" :up="upOption" @up="upCallback" :fixed="false" @down="downCallback"
				@init="mescrollInit">
				<navigator :url="'/pages/my-bills/bills-detail?id='+item.id+'&type=all'" class="u-border-bottom flex" v-for="(item,index) in list" :key="index">
					<view class="area1">
						<image :src="item.avatar?item.avatar:'/static/icon/avatar.png'" mode=""></image>
						<view>
							<text>{{item.nickName || '用户支付'}}</text>
							<text>{{item.createTime}}</text>
						</view>
					</view>
					<view class="area2">
						<text>{{item.discount==-1 || item.discount==0?'无折扣':item.discount +'折'}}</text>
					</view>
					<view class="area3">
						<text class="text-base price plus">{{item.pointNum || 0}}</text>
					</view>
				</navigator>
			</mescroll>
		</view>
		
		<view class="center flex-direction" style="width: 100%;margin-top: 180rpx;" v-show="stateCurrent==1">
			<u-empty text="暂无数据" src="/static/icon/empty5.png" icon-size="260"></u-empty>
		</view>
		
		<u-picker confirm-color="#EF9944" v-model="showTime" mode="time" :params="params"  @confirm="confirmTime">
		</u-picker>
	</view>
</template>

<script>
	import mescroll from '@/components/mescroll-body/mescroll-uni.vue'
	export default {
		components: {
			mescroll
		},
		props: {
			type: Number,
			dataInfo:Object
		},
		data() {
			return {
				stateCurrent: 0, //默认
				statusList: [{
						name: '收入',
						value: 0
					},
					{
						name: '支出',
						value: 1
					}
				],
				//时间
				showTime: false,
				params: {
					year: true,
					month: true,
				},
				defaultTime: '',
				//数据
				list: [],
				mescroll: null,
				upOption: {
					noMoreSize: 5,
					auto: false,
				},
				// 下拉配置参数
				downOption: {
					use: false,
					auto: false
				},
			};
		},
		watch: {
			type() {
				if (!this.isInit && this.type === 3) {
					this.mescroll.resetUpScroll()
				}
			}
		},
		mounted() {
			if (!this.isInit && this.type === 3) {
				this.mescroll.resetUpScroll()
			}
		},
		created() {
			this.defaultTime = this.$dateTime.format(new Date(), 'YYYY-mm')
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			onTab(index) {
				this.stateCurrent = index
				this.mescroll.resetUpScroll();
			},
			confirmTime(e) {
				this.defaultTime = e.year + '-' + e.month
				this.mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				console.log("balance");
				let params = {
					receiveId: this.vuex_shopId,
					current: mescroll.num,
					size: mescroll.size,
					payStatus: this.$global.PAY_STATUS.SUCCESS,
					billType:'pointNum'
				}
				if (this.defaultTime) {
					params.createTime = this.$dateTime.format(new Date(this.defaultTime))
				} else {
					params.createTime = this.$dateTime.format(new Date())
				}
				try {
					this.$api.bills.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 500)
			},
		}
	};
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.area1 {
		$img-width: 70rpx;
		width: 54%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		align-items: center;

		image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: $img-width;
			height: $img-width;
			border-radius: 50%;
		}

		view {
			width: calc(100% - $img-width);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 10rpx;
		}

		text:first-child {
			margin-bottom: 8rpx;
		}

		text:last-child {
			margin-top: 8rpx;
			color: #999;
		}
	}

	.area2 {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 22%;
		margin-top: 10rpx;
		font-weight: 300;
		color: #666;
	}

	.area3 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 24%;
		font-size: 32rpx;
		margin-top: 10rpx;
	}



	.head_box {
		font-weight: 300;
		background-color: #fff;
		padding: 30rpx 0;

		.card-box {
			width: 700rpx;
			min-height: 300rpx;
			padding: 40rpx 40rpx 0rpx;
			background-color: #ff9201;
			box-shadow: 1rpx 5rpx 16rpx 0 rgba(255, 148, 71, .6);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;

			.card-head {
				color: #fff;
				font-size: 30rpx;
			}

			.money-num {
				font-size: 70rpx;
				line-height: 70rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.reduce-num {
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}

			.withdraw-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #ff9201;
				position: absolute;
				right: 30rpx;
				top: 40rpx;
			}
		}
	}

	.total-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
</style>