uniProject/components/points/uni-points.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(51, 137, 217, 0.65);">
		<view class="exam-score-dialog" :class="getDialogClass()">
			<view class="score-content-box">
				<view class="right-error-row">
					<icon class="right-icon"></icon><text class="text-red">{{data.right}}</text>题
					<icon class="error-icon"></icon><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(){
    const rate = Number(data.right)/(Number(data.right)+Number(data.wrong))
    if(props.studyFlag === 0){
      if (rate>0.5) {
        // 高兴鹅
        return 'score-happy-study-dialog'
      } else {
        // 沮丧鹅
        return 'score-unhappy-study-dialog'
      }
			// return 'score-study-dialog';
		}else{
      if (rate>0.5) {
        // 高兴鹅
        return 'score-finish-happy-study-dialog'
      } else {
        // 沮丧鹅
        return 'score-finish-unhappy-study-dialog'
      }
			// return 'score-finish-dialog';
		}
	}
	function closePopup() {
		popupRef.value.close()
	}

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

	defineExpose({
		showPopup
	})
</script>

<style>

</style>