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">{{ pointsNum }}</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、答题次数用完
		},
		pointsNum: {
			type: Number,
			default: 0, // 积分数量
		}
	},
	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>