uniProject/components/points/uni-points.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(255, 255, 255, 0.6);">
		<view class="exam-score-dialog" :class="getDialogClass">
			<view class="score-content-box">
				<view>答对:<text class="text-red">{{data.right}}</text>题  答错:<text class="text-red">{{data.wrong}}</text>题</view>
				<view class="text-score" v-if="!studyFlag">{{data.jifen}}</view>
			</view>
			<view class="score-btn-box">
				<view @click="checkAnswer" class="ckst-btn"></view>
				<view @click="goStudyContinue"  class="jxxx-btn" v-if="isLastZhang"></view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	
	const props = defineProps({
		isLastZhang: {
			type: Boolean,
			default: true
		},
		// 当前是否已答过试题 0未答，1已答
		studyFlag: {
			type: Number,
			default: 0
		}
	})
	
	const popupRef = ref(null)
	const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】

	const emits = defineEmits(['checkAnswer', 'goStudy']);

	const data = reactive({
		right: 0,
		wrong: 0,
		jifen: 0
	})

	// 切换成绩
	function showPopup({
		right,
		wrong,
		jifen
	}) {
		data.right = right;
		data.wrong = wrong;
		data.jifen = jifen;
		popupRef.value.open()
	}

	function getDialogClass(){
		if(props.studyFlag === 0){
			return 'score-study-dialog';
		}else{
			return 'score-finish-dialog';
		}
	}
	function closePopup() {
		popupRef.value.close()
	}

	// 查看答案
	function checkAnswer() {
		emits('checkAnswer');
		closePopup();
	}
	// 继续学习
	function goStudyContinue() {
		emits('goStudy');
		closePopup();
	}

	defineExpose({
		showPopup
	})
</script>

<style>

</style>