WeChatAppH5/pages/game/winning-list.vue

<template>
	<view>
		<nav-bar title="中奖记录" goBack />
		<view class="winning-page">
			<view class="winning-item" v-for="item in winningList">
				<view class="winning-title">
					<text class="title-time">{{item.createTime}}</text>
					<text class="title-level">{{getLevel(item.prizeGrade)}}</text>
				</view>
				<view class="winning-info">
					<image class="winning-img" :src="item.prizeImageUrl" mode="aspectFit"></image>
					<text class="winning-name zw-one-row">{{item.prizeName}}</text>


					<text v-if="[3,4].includes(item.prizeType) && !item.infoComplete" class="winning-btn"
						@click.stop="setAwardInformation(item)">填写领奖信息</text>

					<!-- <text v-else class="winning-btn" @click.stop="setAwardInformation(item)">查看领奖信息</text> -->
				</view>
			</view>
			<view class="empty-data" v-if="loadingStatus && (!winningList || winningList.length === 0) ">
				<EmptyDate />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyWinning
	} from "@/api/Lottery.js"
	import {
		setPrizeLevel
	} from "./common.js"
	export default {
		data() {
			return {
				winningList: [],
				loadingStatus: ''
			}
		},
		onLoad() {
			this.getMyWinningVal()
			// this.gooooooo()
		},
		methods: {
			getMyWinningVal() {
				this.loadingStatus = ''
				getMyWinning().then(res => {
					// console.log(';getMyWinning = ', res)
					this.winningList = res.data || []
				}).finally(() => {
					this.loadingStatus = 'wancheng'
				})
			},
			getLevel(num) {
				console.log('123', )
				return setPrizeLevel(num)
			},
			gooooooo() {
				uni.navigateTo({
					url: `/pages/game/award-information`
				})
				uni.navig
			},
			setAwardInformation(item) {
				uni.navigateTo({
					url: `/pages/game/award-information?activityJoinRecordId=${item.activityJoinRecordId}&prizeType=${item.prizeType}`
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.winning-page {
		width: 100%;
		padding: 25rpx 30rpx;

		.winning-item {
			width: 100%;
			padding: 0 28rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			.winning-title {
				width: 100%;
				height: 88rpx;
				border-bottom: 1rpx solid #e6e6e6;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.title-time {
					font-size: 28rpx;
					// font-weight: 300;
					color: #666666;
				}

				.title-level {
					padding: 4rpx 16rpx;
					background: #edfdfd;
					border-radius: 20rpx 0px;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #3fb9d4;
				}

			}

			.winning-info {
				width: 100%;
				// height: 182rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.winning-img {
					flex-shrink: 0;
					width: 132rpx;
					height: 132rpx;
					border-radius: 20rpx;
				}

				.winning-name {
					flex: 1;
					padding: 0 20rpx;
					font-size: 28rpx;
					// font-family: PingFang SC, PingFang SC-Light;
					// font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 300;
					text-align: left;
					color: #1a1a1a;
				}

				.winning-btn {
					flex-shrink: 0;
					width: 180rpx;
					height: 54rpx;
					background: linear-gradient(75deg, #3cb7d2 10%, #46c8d5 89%);
					border-radius: 20rpx;
					text-align: center;
					line-height: 54rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
				}
			}

		}
	}

	// .winning-item {
	// 	border-radius: 10rpx;
	// 	background-color: rgba(255, 255, 255, 1);
	// 	box-shadow: 0px 0px 3rpx 2rpx rgba(0, 0, 0, 0.11);
	// 	margin-bottom: 20rpx;

	// 	.winning-title {
	// 		padding: 20rpx;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 	}

	// 	.winning-info {
	// 		width: 100%;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 		padding: 20rpx;

	// 		.winning-img {
	// 			flex-shrink: 0;
	// 			width: 80rpx;
	// 			height: 80rpx;
	// 		}
	// 		.winning-name{
	// 			flex: 1;
	// 			padding: 0 20rpx;
	// 		}
	// 		.winning-btn {
	// 			flex-shrink: 0;
	// 			width: 200rpx;
	// 			height: 60rpx;
	// 			background-color: yellowgreen;
	// 			text-align: center;
	// 			line-height: 60rpx;
	// 		}
	// 	}
	// }
</style>