uniProject/components/zhuapaiConfirm/submitScore.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false" type="bottom"
		mask-background-color="rgba(0, 0, 0, 0.4);">
		<view class="exam-score-dialog">
			<view class="icon-title-bjcolor-navBar-box">
				<view @click="handleClose" class="nav-bar-icon"></view>
				<text class="nav-bar-title">{{title}}</text>
			</view>

			<view class="score-content-box">
				<view class="score-content-name">{{data.ksName}}</view>
				<view class="score-content-text">{{labelName}}：{{data.ksScore}}</view>
				<view class="score-content-text">及格分数：{{data.okScore}}</view>
				<view class="score-content-text">正确数量：{{data.rightCount}}</view>
				<view class="score-content-text">试题总数：{{data.shitiTotal}}</view>
				<view class="score-content-text">用户得分：{{data.userScore}}</view>
			</view>

			<c-progress-circle :progress='data.userAccuracy/100' color='#3ec3c1' size='200rpx'
				boderWidth="200rpx"></c-progress-circle>
			<button type="default" class="phone-green-btn score-dialog-btn" @click="handleCheckSj">查看成绩</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	const popupRef = ref(null)
	const data = reactive({
		ksName: '',
		ksScore: '',
		okScore: '',
		rightCount: '',
		shitiTotal: '',
		userScore: '',
	})

	defineProps({
		title: {
			type: String,
			default: '考试得分'
		},
		labelName: {
			type: String,
			default: '考试总分'
		}
	})

	const emits = defineEmits(['confirm', 'close'])

	function handleClose() {
		emits('close');
		popupRef.value.close()
	}

	function handleCheckSj() {
		emits('confirm', data);
		popupRef.value.close()
	}

	function showDialog(options) {
		data.ksName = options.ksName;
		data.ksScore = options.ksScore;
		data.okScore = options.okScore;
		data.rightCount = options.rightCount;
		data.shitiTotal = options.shitiTotal;
		data.userScore = options.userScore;
		data.userAccuracy = options.userAccuracy;
		popupRef.value.open()
	}

	defineExpose({
		showDialog
	})
</script>

<style lang="scss">
	 .content{
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        padding-top: 20rpx;
	        font-size: 28rpx;
	    }
	    .btnBox{
	        width: 100%;
	        display: flex;
	        align-items: center;
	        margin-top:30rpx;
	    }
</style>