uniProject/pages/newEnglish/components/selectPage.vue

<template>
	<view>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<!-- 显示区 -->
		<selectTypesVue activeSelect="4"></selectTypesVue>
		<!-- 拼读区 -->
		<view>
			{{data.name}}
		</view>
		<!--  音标区  -->
		<view>
			{{activeWord.yinbiao}}
		</view>
		<!-- 图片区 -->
		<view>
			{{ data.result ?'正确':'错误' }}
		</view>
		<!-- 选择区 -->
		<view>
			<view :class="{active: data.answer == 'A'}" @click="handleSelect('A')">{{data.opa}}</view>
			<view :class="{active: data.answer == 'B'}" @click="handleSelect('B')">{{data.opb}}</view>
			<view :class="{active: data.answer == 'C'}" @click="handleSelect('C')">{{data.opc}}</view>
			<view :class="{active: data.answer == 'D'}" @click="handleSelect('D')">{{data.opd}}</view>
		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import * as httpApi from "@/api/word.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		computed
	} from 'vue';
	import {
		getUserIdentity,
	} from "@/utils/common.js"
	
	const userCode = getUserIdentity();
	
	const props = defineProps({
		activeWord: { // 单词数据
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})
	const data = reactive({
		name: [],
		opa: null,
		opb: null,
		opc: null,
		opd: null,
		answer: null, // 已选项
		result: false, // 正确性
	})

	onLoad(() => {
		initItem()
	})

	function initItem() {
		data.name = props.activeWord.name;
		data.opa = props.activeWord.opa;
		data.opb = props.activeWord.opb;
		data.opc = props.activeWord.opc;
		data.opd = props.activeWord.opd;
	}

	function handleSelect(d1) {
		data.answer = d1;
		checkIsRight();
	}

	function checkIsRight() {
		if (data.answer == props.activeWord.daan) {
			// 正确
			data.result = true;
			noticeBackDb()
		} else {
			data.result = false;
		}
	}

	function noticeBackDb() {
		if (userCode == 'Visitor') {
			// 游客不更新后台
			return;
		}
		httpApi.getWordZhangwo({
			type: 2,
			wordId: props.activeWord.id
		})
	}
</script>

<style lang="scss" scoped>
	.active {
		color: red;
	}
</style>