xpl/pages/assets/myPing.vue

<template>
	<view class="center">
		<view class="bg"></view>
		<view class="zongbox flex" style="margin: -150rpx auto 0;">
			<view class="info">
				<view class="num">{{ yesterday.join }}</view>
				<view class="info-font">昨日拼购数</view>
			</view>
			<view class="info">
				<view class="num">{{ month.join }}</view>
				<view class="info-font">月度拼购数</view>
			</view>
			<view class="info">
				<view class="num">{{ history.join }}</view>
				<view class="info-font">累计总拼购数</view>
			</view>
		</view>
		<view class="zongbox flex">
			<view class="info">
				<view class="num">{{ yesterday.bingo }}</view>
				<view class="info-font">昨日拼中数</view>
			</view>
			<view class="info">
				<view class="num">{{ month.bingo }}</view>
				<view class="info-font">月度拼中数</view>
			</view>
			<view class="info">
				<view class="num">{{ history.bingo }}</view>
				<view class="info-font">累计总拼中数</view>
			</view>
		</view>
		<view class="join">
			<view class="xian"></view>
			<view class="join-font">参与记录</view>
		</view>
		<view v-for="(item, index) in list" :key="index" class="box" @click="nav(item)">
			<view class="title flex">
				<view class="flex clamp">
					<view class="log"><image src="../../static/img/index4.png" mode="scaleToFill"></image></view>
					<view class="name clamp">{{ item.name }}</view>
					<view class="lun">
						<text>{{ item.lun }}{{ item.table }}</text>
						<text v-if="item.status == 0">待开团</text>
						<text v-if="item.status == 1">已拼中</text>
						<text v-if="item.status == 2">未拼中</text>
						<text v-if="item.status == 3">已失败</text>
					</view>
				</view>
				<view class="more" v-if="item.status != 0">详情</view>
			</view>
			<view class="main">
				<view class="main-info">
					<view class="main-left">参与份数</view>
					<view class="main-right">{{ item.fen }}人份</view>
				</view>
				<view class="main-info">
					<view class="main-left">参与金额</view>
					<view class="main-right">{{ item.money + item.type }}</view>
				</view>
				<view class="main-info">
					<view class="main-left">参与时间</view>
					<view class="main-right">{{ item.time }}</view>
				</view>
			</view>
		</view>
		<u-loadmore style="margin-top: 10rpx;" :icon="true" icon-type="flower" :status="loadtype" />
	</view>
</template>

<script>
import { pinkLog, systemWallet } from '@/api/finance.js';
export default {
	data() {
		return {
			list: [],
			listType: [], //分红数量
			loadtype: 'loadmore',
			page: 1,
			limit: 10,
			bonus: 0, //分红
			yesterday: '', //昨日
			month: '', //季度
			history: '' //累计
		};
	},
	onReachBottom() {
		this.loadData();
	},
	onLoad() {
		this.loadData();
		this.systemWallet();
	},
	methods: {
		// 获取昨日分红
		systemWallet() {
			systemWallet()
				.then(e => {
					for (let a in e.data.back) {
						const num = +e.data.back[a].money.money;
						if (num > 0) {
							this.listType.push({
								name: e.data.back[a].money.money_type,
								num: num
							});
						}
					}
					console.log(this.listType);
				})
				.catch(e => {
					console.log(e);
				});
		},
		loadData() {
			let that = this;
			if (that.loadtype == 'nomore') {
				return;
			}
			that.loadtype = 'loading';
			pinkLog({
				page: that.page,
				limit: that.limit
			})
				.then(e => {
					this.yesterday = e.data.yesterday;
					this.month = e.data.month;
					this.history = e.data.history;
					console.log(this.yesterday, '1234556');
					const data = e.data.list.map(ls => {
						const lun = ls.group_num > 0 ? '第' + ls.group_num + '轮' : '';
						console.log(ls.table);
						const table = ls.table_id > 0 ? '第' + ls.table_id + '桌' : '';
						const time = new Date(ls.pay_time * 1000);
						return {
							name: ls.activity.name,
							lun,
							table,
							fen: 1,
							money: +ls.cost,
							type: ls.cost_money_type,
							time: time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate(),
							image: ls.activity.background_image,
							id: ls.id,
							status: ls.status
						};
					});
					that.list.push(...data);
					console.log(that.list, 'xiangqing');
					// 判断是否还有数据
					if (that.list.length >= that.limit) {
						that.page++;
						that.loadtype = 'loadmore';
					} else {
						that.loadtype = 'nomore';
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		nav(e) {
			if (e.status == 0) {
			} else {
				uni.navigateTo({
					url: '/pages/assets/teamDetails?id=' + e.id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: 100%;
	background: #f7fbfe;
}
.bg {
	width: 750rpx;
	height: 248rpx;

	background: linear-gradient(30deg, #2e58ff, #33eeff);
	border-bottom-left-radius: 150rpx;
	border-bottom-right-radius: 150rpx;
}
.zong {
	width: 690rpx;
	height: 181rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: -150rpx auto 0;
	justify-content: space-between;
	padding: 0rpx 36rpx;
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		.info-num {
			font-size: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
		.info-font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6d7c88;
		}
	}
}
.money {
	width: 690rpx;
	height: 143rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: 10rpx auto 0;
	justify-content: space-between;
	padding: 0rpx 36rpx;
	.money-box {
		display: flex;
		flex-direction: column;
		.money-num {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
		.money-font {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6d7c88;
		}
	}
}
.zongbox {
	width: 690rpx;
	height: auto;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: 10rpx auto 0;
	justify-content: space-around;
	padding: 36rpx 10rpx;
	position: relative;
	.zongbox-left {
		padding-top: 30rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 50rpx;
		text-align: center;
		height: 100%;
		color: #fff;
		line-height: 1.5;
		background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
}
.info {
	display: flex;
	flex-direction: column;
	align-items: center;
	.num {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
	.info-font {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d7c88;
	}
}
.join {
	margin-top: 44rpx;
	padding-left: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.xian {
		width: 6rpx;
		height: 30rpx;
		background: #0f253a;
		border-radius: 4rpx;
	}
	.join-font {
		padding-left: 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
}
.box:first-child {
	margin-top: 34rpx;
}
.box {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	padding: 26rpx 36rpx 30rpx 30rpx;
	position: relative;
	.title {
		.log {
			width: 48rpx;
			height: 46rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			padding-left: 12rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
			max-width: 100%;
		}
		.lun {
			padding-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6d7c88;
		}
		.more {
			padding-left: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #2E58FF;
			flex-shrink: 0;
		}
	}
	.main {
		margin-top: 26rpx;
		.main-info {
			padding-top: 16rpx;
			display: flex;
			justify-content: space-between;
			.main-left {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6d7c88;
			}
			.main-right {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0f253a;
			}
		}
	}
}
</style>