WeChatAppH5/pages/game/popup/Winning.vue

<template>
	<view class="">
		<uni-popup ref="WinningRef" :maskClick="false" maskBg="rgba(0, 0, 0,.7)">
			<view class="winning-box" :style="{height:showBtn ? '720rpx' : '644rpx'}" v-if="prizeInfo">
				<view class="close-winning-icon" @click.stop="onClose()">
					<image src="@/static/Lottery/close.png" mode="aspectFit"></image>
				</view>
				<view class="winning-title">
					<template v-if="prizeInfo.prizeGrade === 20">
						<image class="regret" src="@/static/Lottery/regret.png" mode="aspectFit"></image>
					</template>
					<template v-else>
						<image class="success" src="@/static/Lottery/Winning-title.png" mode="aspectFit"></image>
					</template>
				</view>
				<view class="winning-level">
					{{prizeInfo.prizeChinese}}
				</view>
				<view class="winning-img">
					<image :src="prizeInfo.imageUrl" mode="aspectFit"></image>
				</view>
				<view class="winning-btn">
					<text @click.stop="onClose()">知道了</text>
					<text v-if="showBtn" @click.stop="setAwardInformation()">填写领奖信息</text>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			activityJoinRecordId: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				prizeInfo: null,
				showBtn: false
			}
		},
		created() {
			// console.log('111')
		},
		mounted() {
			// this.onWinning()
			// this.$refs.WinningRef.open()
		},
		methods: {
			onWinning(prizeVal) {
				this.prizeInfo = prizeVal;
				this.$refs.WinningRef.open();
				this.showBtn = [3, 4].includes(prizeVal.prizeType);
			},
			onClose() {
				this.$refs.WinningRef.close();
			},
			setAwardInformation(item) {
				this.onClose()
				uni.navigateTo({
					url: `/pages/game/award-information?activityJoinRecordId=${this.activityJoinRecordId}&prizeType=${this.prizeInfo.prizeType}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.winning-box {
		width: 633rpx;
		// height: 644rpx;
		// height: 720rpx;
		padding: 94rpx 40rpx 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		background: url("@/static/Lottery/Winning.png") no-repeat top center;
		background-size: 633rpx 720rpx;
		position: relative;

		.close-winning-icon {
			position: absolute;
			left: 50%;
			top: -65rpx;
			width: 65rpx;
			height: 65rpx;
			transform: translateX(-50%);

			image {
				width: 65rpx;
				height: 65rpx;
			}
		}

		.winning-title {
			width: 302rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			.success {
				width: 302rpx;
				height: 80rpx;
			}
			.regret{
				width: 188rpx;
				height: 80rpx;
			}
		}

		.winning-level {
			width: 334rpx;
			height: 50rpx;
			background: linear-gradient(90deg, rgba(222, 28, 64, 0.00) 11%, #b10424 48%, rgba(222, 28, 64, 0.00) 89%);
			text-align: center;
			font-size: 38rpx;
			// font-family: .PingFang SC, .PingFang SC-Light;
			font-weight: 300;
			color: #ffffff;
			line-height: 50rpx;
			letter-spacing: 5.32rpx;
			margin: 10rpx 0 20rpx;
		}

		.winning-img {
			width: 188rpx;
			height: 188rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.winning-btn {

			width: 345rpx;
			// padding-top: 36rpx;
			margin: 36rpx auto;

			text {
				display: block;
				width: 345rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #f7dea4, #d8a759);
				border-radius: 30rpx;
				margin-bottom: 15rpx;

				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
				color: #721202;
				line-height: 60rpx;
			}

		}

		// .winning-title {
		// 	padding: 20rpx;
		// 	font-weight: 600;
		// 	font-size: 32rpx;
		// }

		// .winning-level {
		// 	padding-bottom: 30rpx;
		// }

		// .winning-img {
		// 	width: 300rpx;
		// 	height: 300rpx;

		// 	image {
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }

		// .winning-name {
		// 	padding: 30rpx;
		// }

		// .winning-btn {
		// 	width: 100%;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;

		// 	text {
		// 		width: 70%;
		// 		height: 60rpx;
		// 		text-align: center;
		// 		line-height: 60rpx;
		// 		margin-bottom: 40rpx;
		// 	}
		// }
	}
</style>