baiyuApp/pages/course/components/answerFloatBox.vue

<template>
	<view class="complaintViewClass">
		<image src="/static/image/hall/baoxiang_icon.png" mode="aspectFill"></image>
		<view class="complaintViewTextClass">
			<view v-if="~~typeNum === 1" class="pointsOkTextClass">
				已得<text class="pointsNumTextClass">{{ pointsNum }}</text>积分
			</view>
			<view v-if="~~typeNum === 2" class="pointsOkTowTextClass" @tap="handleShowTomorrowTip">
				<text>未答对\n明天再来</text>
			</view>
			<view v-if="~~typeNum === 3" class="pointsOkTowTextClass">
				<text>未答对\n继续答题</text>
				<view class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
			</view>
			<view v-if="~~typeNum === 4" class="pointsOkTowTextClass">
				<text>
					<text v-if="remainSeconds > 0">再观看{{ formatTime(remainSeconds) }}\n</text>答题得奖励
				</text>
				<view class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		typeNum: {
			type: Number,
			default: 1, //悬浮框类型：1、已得积分，2、未答对明天再来，3、未答对继续答题，4、答题得奖励
		},
		pointsNum: {
			type: Number,
			default: 0, //已得积分数量
		},
		// 父组件传：剩余秒数
		remainSeconds: {
			type: Number,
			default: 0
		},
	},
	methods: {
		handleShowAnswerMethods() {
			this.$emit('handleShowAnswer')
		},
		handleShowTomorrowTip() {
			this.$emit('showTomorrowTipMethods')
		},
		// 秒数 → 分:秒 格式
		formatTime(seconds) {
			if (seconds <= 0) {
				return '00:00'
			}
			const m = Math.floor(seconds / 60)
			const s = seconds % 60
			return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
		},
	}
}
</script>

<style scoped lang="scss">
@mixin u-flex($flexD, $alignI, $justifyC) {
	display: flex;
	flex-direction: $flexD;
	align-items: $alignI;
	justify-content: $justifyC;
}

.complaintViewClass {
	@include u-flex(column, center, center);
	position: fixed;
	right: 34rpx;
	bottom: 400rpx;

	image {
		width: 210rpx;
		height: 90rpx;
	}

	.complaintViewTextClass {
		@include u-flex(column, center, center);
		margin-top: -15rpx;
		z-index: 10;
		width: 210rpx;
		min-height: 120rpx;
		background: linear-gradient(180deg, #FFF9DC 0%, #FFDC97 100%);
		border-radius: 20rpx;
		border: 2rpx solid linear-gradient(180deg, rgba(255, 228, 105, 1), rgba(255, 178, 30, 1));
		padding: 10rpx 10rpx 20rpx;
		box-sizing: border-box;
		text-align: center;
		overflow: hidden;
	}
}

.pointsOkTextClass {
	font-weight: 400;
	font-size: 28rpx;
	color: #FF2E3F;
	line-height: 40rpx;
}

.pointsNumTextClass {
	font-weight: 600;
	font-size: 56rpx;
	color: #FF2E3F;
}

.pointsOkTowTextClass {
	@include u-flex(column, center, center);
	font-weight: 600;
	font-size: 32rpx;
	color: #FF2E3F;
}

.answerBtnClass {
	width: 150rpx;
	height: 60rpx;
	background: linear-gradient(135deg, #FF515F 0%, #F72234 100%);
	border-radius: 30rpx;
	margin-top: 10rpx;
	font-weight: 600;
	font-size: 32rpx;
	color: #FFF2C3;
	line-height: 55rpx;
	text-align: center;
}
</style>