uniProject/pages/newEnglish/components/selectPage.vue

<template>
	<!-- 单词最多16个字母 选项最多两行 tx---不要删除 -->
	<view class="words-xuan-box">
		<!-- 单词区 -->
		<!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
		<!-- 显示区 -->
		<selectTypesVue activeSelect="4"></selectTypesVue>
		<view class="xuan-body-box">
			<!-- 单词区 -->
			<view class="show-words-box"> {{data.name}} </view>
			<!--  音标区  -->
			<view class="yb-play-box">
				<text>{{activeWord.yinbiao}}</text>
				<!-- active -->
				<!-- 播放未播放互斥控制 大哥看这里-->
				<icon class="yb-play-btn"></icon>
				<icon class="yb-playing-btn" v-if="false"></icon>
			</view>
		</view>
		<!-- 图片区 -->
		<!-- <view>
			{{ data.result ?'正确':'错误' }}
		</view> -->
		<!-- 选择区 -->
		<!-- 选中选项正确class select-right 选中选项错误 class select-error  大哥看这里-->
		<view class="select-change-box">
			<view class="select-item" :class="{active: data.answer == 'A'}" @click="handleSelect('A')"><text>{{data.opa}}</text></view>
			<view class="select-item" :class="{active: data.answer == 'B'}" @click="handleSelect('B')"><text>{{data.opb}}</text></view>
			<view class="select-item" :class="{active: data.answer == 'C'}" @click="handleSelect('C')"><text>{{data.opc}}</text></view>
			<view class="select-item" :class="{active: data.answer == 'D'}" @click="handleSelect('D')"><text>{{data.opd}}</text></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>