uniProject/pages/chaojidanci/newEnglish/components/selectPage.vue

<!-- 单词区 && 音标区：最多16位，超过换行   选项最多两行超出省略-->
<!-- 单音节最长：swimming 多音节最长：transportation -->
<template>
	<!-- 显示区 -->
<!--	<selectTypesVue activeSelect="4"></selectTypesVue>-->
	<view class="ezy-border-body">
		<view class="words-xuan-box">
			
			<view class="xuan-body-box">
				<!-- 单词区 -->
				<view class="show-words-box"> {{data.name}} </view>
				<!--  音标区  -->
				<view class="yb-play-box">
					<!-- <text>{{activeWord.yinbiao}}</text> -->
					<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
					<!-- active -->
					<audioTwoVue @play-audio="handlePlay" :active-word="activeWord"></audioTwoVue>
				</view>
			</view>
			<!-- 选择区 -->
			<view class="select-change-box">
				<view class="select-item"
					:class="{active: data.answer == 'A', 'select-error': data.answer =='A' && !data.result, 'select-right':data.answer =='A' && data.result}"
					@click="handleSelect('A')"><text>{{data.opa}}</text></view>
				<view class="select-item"
					:class="{active: data.answer == 'B', 'select-error':  data.answer =='B' && !data.result, 'select-right':data.answer =='B' && data.result}"
					@click="handleSelect('B')"><text>{{data.opb}}</text></view>
				<view class="select-item"
					:class="{active: data.answer == 'C', 'select-error':  data.answer =='C' && !data.result, 'select-right':data.answer =='C' && data.result}"
					@click="handleSelect('C')"><text>{{data.opc}}</text></view>
				<view class="select-item"
					:class="{active: data.answer == 'D', 'select-error':  data.answer =='D' && !data.result, 'select-right':data.answer =='D' && data.result}"
					@click="handleSelect('D')"><text>{{data.opd}}</text></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import audioTwoVue from './audioTwo.vue';
	import * as httpApi from "@/api/chaojidanci.js"
	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
	} from 'vue';
  import {resultAudioPlayer} from "./useAudioRightWrong"

  const resultAudioPlayerD = new resultAudioPlayer();

	const emits = defineEmits(['play-audio'])

	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 handlePlay(opt) {
		emits('play-audio', opt)
	}

	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;
      resultAudioPlayerD.play('right','select')
			noticeBackDb()
		} else {
			data.result = false;
      resultAudioPlayerD.play('wrong','select')
		}
	}

	function noticeBackDb() {
		httpApi.getWordZhangwo({
			type: 2,
			wordId: props.activeWord.id
		})
	}
</script>