NFT/pages/assets/myPing.vue

<template>
	<view class="center">
		<view class="bg"></view>
		<view class="zong flex">
			<!-- <view class="info">
				<view class="info-num">{{happy || '0.00' }}</view>
				<view class="info-font">福气值</view>
			</view> -->
			<view class="info" v-for="ls in listType">
				<view class="info-num">{{ ls.num || '0.00' }}</view>
				<view class="info-font">昨日{{ ls.name }}分红值</view>
			</view>
			<!-- <view class="info">
				<view class="info-num">{{honor || '0.00' }}</view>
				<view class="info-font">荣誉值</view>
			</view> -->
		</view>
		<!-- <view class="money flex">
			<view class="money-box">
				<view class="money-num">{{usdt || '0.00' }}</view>
				<view class="money-font">昨日USDT分红池</view>
			</view>
			<view class="money-box" >
				<view class="money-num" style="text-align: right;">{{fil || '0.00' }}</view>
				<view class="money-font">昨日FIL分红池</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/pgTip.png" mode="scaleToFill"></image></view>
					<view class="name clamp">{{ item.name }}</view>
					<view class="lun">
						<text>{{ item.lun }}</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">详情</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 {
			// happy: '0.00',
			// luck: '0.00',
			// honor: '0.00',
			// usdt: '0.00',
			// fil: '0.00',
			list: [],
			listType: [], //分红数量
			loadtype: 'loadmore',
			page: 1,
			limit: 10,
			bonus: 0 //分红
		};
	},
	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 => {
					const data = e.data.list.map(ls => {
						const lun = ls.group_num > 0 ? ls.group_num + '轮' : '';
						const time = new Date(ls.pay_time * 1000);
						return {
							name: ls.activity.name,
							lun,
							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);
					// 判断是否还有数据
					if (that.list.length >= that.limit) {
						that.page++;
						that.loadtype = 'loadmore';
					} else {
						that.loadtype = 'nomore';
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		nav(e) {
			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(90deg, #60bab0, #60bab0, #45969b);
	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: center;
	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;
		}
	}
}
.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: #44969d;
			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>