baiyuApp/pages/course/components/answerPromptPopup.vue

<template>
	<u-popup :show="showPopup" mode="center" round="30" @close="close">
		<view class="dialog-box">
			<template v-if="~~typeStatus === 1">
				<view class="dialog-title">恭喜你，回答正确</view>
				<view class="points-text">
					获得<text class="red-num">20</text>积分，自动到账
				</view>
			</template>
			<template v-if="~~typeStatus === 2">
				<view class="dialog-title">很遗憾答错了</view>
				<view class="points-text">请继续努力哦</view>
			</template>
			<template v-if="~~typeStatus === 3">
				<view class="dialog-title">今天答题次数已用完</view>
				<view class="points-text">明天再来哦</view>
			</template>
			<view class="tips-text">每节课拥有3次答题机会</view>
			<view v-if="~~typeStatus === 1" class="btn primary-btn">前往积分商城兑换</view>
			<view class="btn outline-btn" @tap="close">继续观看</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			typeStatus: {
				type: Number,
				default: 1, //提示类型：1、回答正确，2、回答错误，3、答题次数用完
			}
		},
		data() {
			return {
				showPopup: false,
			}
		},
		watch: {
			isShow(newVal) {
				this.showPopup = newVal
			}
		},

		methods: {
			// 关闭弹框
			close() {
				this.$emit('closeMethod')
			},
		}
	}
</script>

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

	.dialog-box {
		width: calc(100vw - 160rpx);
		min-height: 440rpx;
		background: #ffffff;
		border-radius: 30rpx;
		padding: 40rpx 40rpx 60rpx;
		box-sizing: border-box;
		@include u-flex(column, center, center);
	}

	/* 标题文字 */
	.dialog-title {
		font-weight: 600;
		font-size: 40rpx;
		color: #000000;
		margin-bottom: 40rpx;
	}

	/* 积分文字行 */
	.points-text {
		font-weight: 600;
		font-size: 36rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 50rpx;
		margin-bottom: 36rpx;
	}

	/* 红色积分数字 */
	.red-num {
		font-weight: 600;
		font-size: 56rpx;
		color: #FF233C;
	}

	/* 底部灰色小字 */
	.tips-text {
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.65);
		margin-bottom: 40rpx;
	}

	/* 按钮通用样式 */
	.btn {
		width: 390rpx;
		height: 84rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 42rpx;
		margin-bottom: 32rpx;
		font-weight: 600;
	}

	/* 红色实心主按钮 */
	.primary-btn {
		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
		color: #ffffff;
	}

	/* 红色边框空心按钮 */
	.outline-btn {
		border: 2rpx solid #FF233C;
		color: #FF233CFF;
		background: transparent;
		margin-bottom: 0;
	}
</style>