jiuyiUniapp/jiuyi/pages/news/red-envelope/index.vue

<template>
	<view class="top">
		<view class="blessing">
			{{ blessing }}
		</view>
		<view class="money" v-if="randomAmount">
			{{ randomAmount }}
		</view>
		<view class="money" v-else>
			暂无记录
		</view>
		<view class="face" :style="{ 'border-radius': `${radius}` }">
			<image src="/static/img/im/face/face_11.jpg"></image>
		</view>
		<view class="username">
			{{ username }}的红包
		</view>
	</view>
	<view class="info">
		{{ `已领取${receivedNumber}/${SumNumber} 个，共${receivedMoney}/${SumMoney}${sendType == 1 ? '积分' : '元'}` }}
	</view>
	<view class="list" v-if="receivedList.length > 0">
		<view class="row" v-for="(row, index) in receivedList" :key="index">
			<view class="left">
				<image :src="row.face"></image>
			</view>
			<view class="right">
				<view class="r1">
					<view class="username">
						{{ row.userNickname }}
					</view>
					<view class="money">
						{{ `${row.amount}${sendType == 1 ? '积分' : '元'}` }}
					</view>
				</view>
				<view class="r2">
					<view class="time">
						{{ row.createTime }}
					</view>
					<view class="lucky" v-if="row.islucky">
						手气王
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';

	export default {
		inject: ['util'],
		data() {
			return {
				randomAmount: undefined,
				sendType: null,
				blessing: "恭喜发财",
				money: 0.01,
				username: null,
				receivedNumber: 8,
				SumNumber: 10,
				receivedMoney: 5.43,
				SumMoney: 10,
				receivedList: [],
				//动画效果
				radius: '100% 100% 0 0'

			};
		},
		methods: {
			grabredLog() {
				let {
					bagId
				} = this.$route.query;
				api.news.grabredLog({
					bagId
				}).then(res => {
					let index = 0;
					let max = 0;
					res.rows.length > 0 && res.rows.forEach((element, index) => {
						const {
							userNickname,
							userPortrait,
							amount,
							createTime
						} = element
						if (amount > max) {
							max = element.amount
							index = index
						}
						this.receivedList.push({
							userNickname,
							face: this.util.format_url(userPortrait),
							createTime,
							amount,
							islucky: false
						})
					});
					this.receivedList[index].islucky = true
				})
			},
			// 获取他人信息
			getUserinfo(userId) {
				api.video.getUserInfo({
					query: {
						userId
					}
				}).then(res => {
					this.username = res.data.userNickname;

				})
			},
			getRedbag() {
				let {
					bagId
				} = this.$route.query;
				redEnvelope.getRedbag({
					bagId
				}).then(res => {
					// all是总个数   num剩余个数   residue 是剩余金额    scroe是积分  balance余额
					const {
						all,
						num,
						residue,
						score,
						balance,
						sendType,
						userId
					} = res.data
					// 已领取{{ receivedNumber }}/{{ SumNumber }}个，共{{ receivedMoney }}/{{ SumMoney }}元
					this.receivedNumber = all - num
					this.SumNumber = all
					this.randomAmount = res.data?.randomAmount
					this.sendType = sendType
					switch (sendType) {
						case 1:
							this.SumMoney = score
							break;
						case 2:
							this.SumMoney = balance
							break;
						default:
							break;
					}
					this.receivedMoney = this.SumMoney - residue
					this.getUserinfo(userId)
				})
			}
		},
		mounted() {
			this.getRedbag()
			this.grabredLog();
		},
		onPageScroll(e) {
			//e.scrollTop;
			if (e.scrollTop > 100) {
				return;
			}
			let radiusTmp = 100 - e.scrollTop;
			this.radius = radiusTmp + '% ' + radiusTmp + '% 0 0';
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-wrap: wrap;
	}

	.top {
		width: 100%;
		background-color: #cf3c35;
		flex-wrap: wrap;

		.blessing,
		.money {
			width: 100%;
			color: #f8d757;
			padding: 20upx 0;
			justify-content: center;
			font-size: 34rpx;
		}

		.money {
			font-size: 100rpx;
		}

		.face {
			background-color: #fff;
			justify-content: center;
			width: 100%;
			height: 130rpx;
			margin-top: 65rpx;
			border-radius: 100% 100% 0 0;
			transition: border-radius .15s;

			image {
				width: 130rpx;
				height: 130rpx;
				border-radius: 100%;
				margin-top: -65rpx;
			}
		}

		.username {
			width: 100%;
			height: 130rpx;
			justify-content: center;
			background-color: #fff;
			margin-top: -50rpx;
			font-size: 38rpx;
		}
	}

	.info {
		margin-top: 30rpx;
		width: 96%;
		height: 50rpx;
		padding-left: 4%;
		font-size: 28rpx;
		color: #999;
		border-bottom: solid 1upx #dfdfdf;
	}

	.list {
		width: 100%;
		padding-bottom: 200rpx;

		.row {
			width: 92%;
			padding: 0 4%;
			height: 120rpx;
			border-bottom: solid 1upx #dfdfdf;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.left {
				flex-shrink: 0;
				width: 100rpx;
				height: 120rpx;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
			}

			.right {
				width: 100%;
				height: 150rpx;

				.r1 {
					width: 100%;
					height: 75rpx;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
				}

				.r2 {
					width: 100%;
					height: 75rpx;
					justify-content: space-between;
					font-size: 26rpx;

					.time {
						color: #8F8F94;
					}

					.lucky {
						padding: 3upx 8rpx;
						border-radius: 5rpx;
						background-color: #F8D757;
						align-items: center;
						height: 30rpx;
						font-size: 24rpx;
						color: #CF3C35;
					}
				}
			}
		}
	}
</style>