care365/package/packagestat/pages/statinfo/statinfo.vue

<template>
	<view>
		<topnav :title="pagetitle" @tohome='tohome'></topnav>

		<view class="content">
			<emptyListHint v-if="news.length==0" content="暂无数据">

			</emptyListHint>
			<view class="listBox" v-else>
				<block v-for="(item,index) in news">
					<navigator :url="'../../../packageorder/pages/orderinfo/orderinfo?id='+item.order_id">
						<view class="listBoxItem">
							<view class="listBoxItemLeft">
								<view class="leftbg">
									<text class="iconfont icon-details"></text>
								</view>
							</view>
							<view class="listBoxItemRight">
								<text class="listBoxItemRightText">订单编号：{{item.serial}}</text>
								<text class="listBoxItemRightfText">{{item.created_at}}

									<text class="txtge">|</text>
									{{(item.payment_name?item.payment_name:item.payment)}}:￥{{item.money}}
								</text>
							</view>
						</view>
					</navigator>
					<view class="listBoxline"></view>
				</block>
			</view>


		</view>
	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");

	export default {
		data() {
			return {
				news: [],
				currentPage: 1,
				host: "",
				pagetitle: "今日统计",
				detailtype: "recharge",
				duration: "today",
				info: [{
					"type": "today",
					"name": "今日",
					"data": {}
				}, {
					"type": "yesterday",
					"name": "昨日营收",
					"data": {}
				}, {
					"type": "this_week",
					"name": "本周营收",
					"data": {}
				}, {
					"type": "this_month",
					"name": "本月营收",
					"data": {}
				}]
			}
		},
		onLoad: function(option) {
			var type = option.type;
			var obj = this.getJsonObj(option.from)[0];
			console.log(obj)
			this.duration = obj.type;
			this.detailtype = type;
			this.pagetitle = obj.name + (type == "recharge" ? '营收' : '退款');
			this.loadPage(1);
			this.host = util.HOST;
		},
		onReachBottom: function(e) {
			console.log(this.currentPage)
			this.loadPage(this.currentPage + 1);
		},
		onPullDownRefresh: function(e) {
			this.loadPage(1);
		},
		methods: {
			tohome: function() {
				uni.navigateTo({
					url: "../../../../pages/index/index"
				})
			},
			getJsonObj: function(keys) {
				var newArr = this.info.filter(function(p) {
					return p.type == keys;
				});
				return newArr;
			},
			loadPage: function(page) {
				var that = this;
				var currentProject = uni.getStorageSync('currentProject');
				util.request({
					bindThis: that,
					api: 'manager/statistics/by-duration',
					customLoading: false,
					data: {
						page: page,
						project_id: currentProject.id,
						page_size: 12,
						detail_type: that.detailtype,
						duration: that.duration
					},
					utilSuccess: function(r) {
						var res = r.data;
						uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
						console.log(res);
						var hasNoMore = that.news.length < 12 && page > 1;
						if (hasNoMore || res.length == 0 && page > 1) {
							// 已加载到最后一页
							uni.showToast({
								title: '已加载到最后一页',
								icon: 'none'
							});
							return;
						}

						var news = that.news;
						var _res = [];

						if (page == 1) {
							news = res;
						} else {
							news.push(...res);
						}

						that.currentPage = page;
						that.news = news;
					},
					utilFail: function(res) {
						uni.stopPullDownRefresh();

						if (page == 1) {

							that.currentPage = page;
							that.news = [];
						}

						util.alert(res);
					}
				});
			}

		}
	}
</script>

<style>
	page {
		padding-top: 160rpx;
	}

	.listBox {
		background: #FFFFFF;
		padding: 20rpx 30rpx;
	}

	.listBoxItemLeftVideoBox {
		width: 240rpx;
		height: 133rpx;
	}

	.listBoxItemRight {
		flex-direction: column;
		align-items: unset !important;
	}

	.listBoxItemRightText {
		text-align: left;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 600rpx;
		font-family: SourceHanSansCN-Normal;
		font-size: 32rpx;
		color: #333333;
		letter-spacing: 0;
	}

	.listBoxItemRightfText {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #666666;
		letter-spacing: 0;
		text-align: left;
	}


	.txtge {

		color: #666666;
		padding: 0rpx 20rpx;
	}

	.icon-details {
		font-size: 40rpx;
		color: #43C9CF;
	}

	.leftbg {
		background: rgba(19, 169, 135, 0.10);
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>