his_user_miniapp/pages_course/components/treasureChest.vue

<template>
	<cover-view key="treasureBox" class="treasure-box" :style="{display: showBox&&isfull?'flex':'none'}"
		:class="[{opening}, {fadeOut}, {dropIn},{swing}]" @click="open">
		<cover-image :class="opening ? 'box-img openingGif' : 'box-img boxPng'"
			:src="currentIdx >=0 ? opening ? boxList[currentIdx].openChestUrl : boxList[currentIdx].closeChestUrl :''"></cover-image>
		<cover-view class="countdown" v-if="!opening">{{count}}s</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
			boxList: {
				type: Array,
				default: []
			},
			isfull: {
				type: Boolean,
				default: false
			},
			onHide: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showBox: false, // 控制宝箱显隐
				opening: false, // 是否正在打开
				fadeOut: false, // 控制自动消失的动画类
				dropIn: false,
				swing: false,
				count: 20, // 倒计时
				timer: null, // 倒计时句柄
				timeout: null, // 20s 未点击自动消失句柄
				currentIdx: -1,
				flagTime: 0
			}
		},
		watch: {
			onHide(val) {
				if (!this.showBox) return
				if (val) { // 暂停
					clearInterval(this.timer)
					clearTimeout(this.timeout)
					this.timer = null
					this.timeout = null
				} else { // 继续
					if (!this.opening) {
						const flag = this.boxList.some(item => this.flagTime >= item.time && this.flagTime <= item.time + 20);
						if(flag) {
							this.countDown()
							this.setAutoHide() // 重新计算剩余时长
						} else {
							this.count = 20
							clearInterval(this.timer)
							clearTimeout(this.timeout)
							this.timer = null
							this.timeout = null
						}
					}
				}
			},
		},
		methods: {
			close() {
				this.swing = false
				this.opening = true
				this.showBox = false
			},
			showTreasure(flagTime) {
				this.flagTime = flagTime
				const idx = this.boxList.findIndex(v => v.time == flagTime && v.status == 0)
				if (idx == -1) return

				this.currentIdx = idx
				this.showBox = true
				this.opening = false
				this.swing = false
				this.fadeOut = false
				this.dropIn = true
				this.count = 20

				clearInterval(this.timer)
				clearTimeout(this.timeout)
				this.countDown()
				this.setAutoHide()
			},

			/* 倒计时 */
			countDown() {
				clearInterval(this.timer) // 防止重复启动
				this.timer = setInterval(() => {
					if (this.count > 0) {
						this.count--
					} else {
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			},

			/* 用户点击宝箱 */
			open() {
				if (this.opening || this.swing) return
				clearTimeout(this.timeout)
				clearInterval(this.timer)
				this.swing = true
				this.claim(1)
			},
			claimSuccess(status) {
				setTimeout(()=>{
					this.swing = false
					this.opening = true
				},400)
				this.boxList[this.currentIdx].status = status
				setTimeout(() => {
					this.showBox = false
				}, 3000)
			},
			/* 设置/重置 autoHide 定时器 */
			setAutoHide() {
				clearTimeout(this.timeout)
				const remainMs = this.count * 1000
				if (remainMs <= 0) { // 已经过期
					this.autoHide()
					return
				}
				this.timeout = setTimeout(() => this.autoHide(), remainMs)
			},
			/* 20s 未点击，自动消失 */
			autoHide() {
				clearInterval(this.timer)
				this.fadeOut = true

				// 标记已打开
				this.claim(2)
				setTimeout(() => {
					this.showBox = false
				}, 600)
			},
			claim(status) {
				this.$emit('claimFun', {
					rewardId: this.boxList[this.currentIdx].rewardVideoRelation.rewardId,
					status: status,
					time: this.boxList[this.currentIdx].time
				})
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)
			clearTimeout(this.timeout)
		}
	}
</script>


<style lang="scss" scoped>
	@keyframes dropIn {
		0% {
			opacity: 0;
			transform: translateY(-160px);
		}

		60% {
			opacity: 1;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.treasure-box.dropIn {
		animation: dropIn 0.7s cubic-bezier(.25, .85, .45, 1.25) forwards,
			pulse 1s ease-in-out infinite 0.7s;
	}

	@keyframes swing {
		20% {
			transform: rotate(-8deg);
		}

		40% {
			transform: rotate(8deg);
		}

		60% {
			transform: rotate(-6deg);
		}

		80% {
			transform: rotate(6deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.treasure-box.swing {
		animation: swing 0.4s ease-in-out infinite forwards; 
	}

	/* 宝箱 */
	.treasure-box {
		position: fixed;
		left: 100px;
		bottom: 80px;
		width: 192px;
		/* 128 × 1.5 */
		height: 138px;
		/* 92 × 1.5 */
		animation: pulse 0.4s ease-in-out infinite;
		// z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.openingGif {
		width: 192px;
		/* 128 × 1.5 */
		height: 138px;
		/* 92 × 1.5 */
	}

	.boxPng {
		width: 135px;
		height: 96px;
		margin-left: 20px;
	}

	.countdown {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	}

	/* 动画 */
	@keyframes pulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.15);
		}
	}

	/* 打开后停止 pulse */
	.treasure-box.opening {
		animation: none;
	}

	/* 自动消失 */
	.treasure-box.fadeOut {
		animation: fadeOutUp .6s ease-out forwards;
	}

	@keyframes fadeOutUp {
		to {
			opacity: 0;
			transform: translate(-50%, -40px);
		}
	}
</style>