uniProject/components/zhuapaiConfirm/submitScore.vue

<template>
	<uni-popup ref="popupRef" background-color="#fff" :animation="false" :is-mask-click="false" :mask-click="false">
		<view class="exam-score-popup">
			<customNavbarVue class="exam-score-navBar-box" title="考试得分"></customNavbarVue>
			<view class="score-content-box">
			  <view class="score-content-name">{{data[nameKey]}}</view>
			  <view class="content-score-box">
					<view>
						<view class="score-content-text">正确数量：{{data.rightCount}}</view>
						<view class="score-content-text">试题总数：{{data.shitiTotal}}</view>
						<view class="score-content-text">及格分数：{{data.okScore}}</view>
						<view class="score-content-text">{{labelName}}：{{data.ksScore}}</view>
					</view>
					<view class="score-content-text"><text>{{data.userScore}}</text>分</view>
				</view>
			</view>

			<view class="progress-text-btn-box">
				<text class="progress-text">正确率</text>
				<c-progress-circle :progress='data.userAccuracy/100' color='#0856e6' size='280rpx'
					boderWidth="280rpx" class="progress-circle-box"></c-progress-circle>
				<view class="score-dialog-btn" @click="handleCheckSj">查看成绩</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	import {
		ref,
		reactive
	} from "vue";
	const popupRef = ref(null)
	const data = reactive({
		ksName: '',
    lxName: '',
		ksScore: '',
		okScore: '',
		rightCount: '',
		shitiTotal: '',
		userScore: '',
	})

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

	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.lxName = options.lxName;
		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>