guosen-ldt-shop/pages/my-bills/comps/bills.vue

<template>
	<mescroll :down="downOption" :up="upOption" @up="upCallback" :fixed="false" @down="downCallback"
		@init="mescrollInit">
		<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.totalAssets || 0}}</view>

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

		<view class="flex justify-between" style="font-size: 24rpx;color: #666666;background-color: #f6f6f6;">
			<view class="flex" @click.stop="showTime = true">
				<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 @click="$jump('/pages/statistics/statistics')" class="center margin-right-30">
				统计
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view v-if="stateCurrent==0">
			<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>
		</view>
		<view class="bg-white safe-area-inset-bottom" style="height: 100%;">

			<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 v-if="$isNotEmpty(item.avatar)" :src="item.avatar"></image>
					<block v-else>
						<image v-if="item.payWay=='WECHAT'" src="@/static/icon/wx.png"></image>
						<image v-else-if="item.payWay=='ALIPAY'" src="@/static/icon/ALIPAY.png"></image>
						<image v-else-if="item.payWay=='UNIONPAY'" src="@/static/icon/UNIONPAY.png"></image>
						<image v-else-if="item.payWay=='APPLEPAY'" src="@/static/icon/apple.png"></image>
						<image v-else src="@/static/icon/avatar.png"></image>
					</block>
					<view>
						<text class="text-cut-2" v-if="$isNotEmpty(item.nickName)">{{item.nickName}}</text>
						<block v-else>
							<text v-if="item.payWay=='WECHAT'">微信用户</text>
							<text v-else-if="item.payWay=='ALIPAY'">支付宝用户</text>
							<text v-else-if="item.payWay=='UNIONPAY'">银联用户</text>
							<text v-else-if="item.payWay=='APPLEPAY'">苹果用户</text>
							<text v-else>用户昵称</text>
						</block>
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<view class="area2">
					<text>{{discount(item.discount)}}</text>
				</view>
				<view class="area3">
					<text class="text-base price" v-if="$isNotEmpty(item.receiveNumTotal)">{{item.receiveNumTotal}}</text>
					<text class="text-base price" v-else>{{item.cost || 0}}</text>
				</view>
			</navigator>
		</view>
		<u-picker confirm-color="#EF9944" v-model="showTime" mode="time" :params="params" @confirm="confirmTime">
		</u-picker>
	</mescroll>
</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 === 0) {
					this.mescroll.resetUpScroll()
				}
			}
		},
		mounted() {
			if (!this.isInit && this.type === 0) {
				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) {
				let params = {
					receiveId: this.vuex_shopId,
					current: mescroll.num,
					size: mescroll.size,
					payStatus: this.$global.PAY_STATUS.SUCCESS,
				}
				if (this.defaultTime) {
					params.format = this.defaultTime
				}
				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;
		padding-left: 30rpx;
		justify-content: flex-start;
		align-items: center;

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

		view {
			width: 80%;
			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>