uniProject/pages/xinshuxue/components/unitResult.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(0,0,0, 0.76);" class="ezy-popup-width-all">
		<view class="dycs-dialog">
			<!-- 返回区域 -->
			<view class="icon-title-navBar-box">
				<view @click="handleBack" class="nav-bar-icon"></view>
				<text class="nav-bar-title">单元测试</text>
			</view>
			<view class="ezy-page-body dycs-body">
				<view class="dycs-img"></view>
				<view class="dycs-tip">单元测试已完成</view>
				
				<view class="dycs-fenshu-box">
					<view class="fenshu-item-box">
						<view class="item-number">{{data.right}}</view>
						<view>正确</view>
					</view>
					<view class="item-line"></view>
					<view class="fenshu-item-box">
						<view class="item-number red-number">{{data.wrong}}</view>
						<view>错误</view>
					</view>
				</view>
				
				<view class="dycs-btn-box">
					<view @click="handleRestart" class="cxcs-btn">重新测试</view>
					<view @click="handleCheckAnswer" class="ckda-btn">查看答案</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";

	const popupRef = ref(null)
	const data = reactive({
		right: 0,
		wrong: 0,
	})

	const emits = defineEmits(['check-answer', 'do-replay'])

	function handleRestart() {
		emits('do-replay')
	}

	function handleCheckAnswer() {
		emits('check-answer')
	}

	function showPopup(options) {
		data.right = options.right;
		data.wrong = options.wrong;

		popupRef.value.open();
	}

	function closePopup() {
		popupRef.value.close();
	}

	function handleBack() {
		closePopup();
	}


	defineExpose({
		showPopup,
		closePopup
	})
</script>

<style>
</style>