uniProject/pages/newEnglish/components/pinPage.vue

<template>
	<view class="words-pin-box">
		<!-- 显示区 -->
		<selectTypesVue activeSelect="2"></selectTypesVue>
		<!-- 拼读区 -->
		<!-- 单词字母多余6个需要追加 class：pin-small-words-box  -->
		<view class="pin-words-box"
			:class="{'pin-small-words-box': wordLength > 6, 'isAll': data.isAll, 'pin-right-words-box':  data.isAll && data.result, 'pin-error-words-box':  data.isAll && !data.result}">
			<view class="words-item" v-for="item in data.selectList">{{item}}</view>
		</view>
		<view class="pin-body-box">
			<!-- 清空按钮 -->
			<view class="clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></view>
			<!-- 提示 -->
			<view class="pin-tip" v-else>提示：请点击页面下方字母，选择正确答案。</view>
			<!-- 解释区-->
			<view class="pin-words-explain-box">
				<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
			</view>
			<audioOneVue @play-audio="handlePlay" :activeWord="activeWord"></audioOneVue>
		</view>
		<!-- 选择区 -->
		<view class="pin-words-box pin-words-change-box" :class="{'pin-small-words-box': wordLength>6}">
			<view class="words-item words-change-item" v-for="item in data.randomList" :key="item"
				:class="{disabled:  isSelect(item)}" @click="handleSelect(item)">{{item}}</view>
		</view>
	</view>
</template>

<script setup>
	import selectTypesVue from './selectTypes.vue';
	import audioOneVue from './audioOne.vue';
	import {
		reactive,
		computed,
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/word.js"
	import {
		getUserIdentity,
	} from "@/utils/common.js"

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

	const userCode = getUserIdentity();

	const props = defineProps({
		activeWord: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})

	function handlePlay(opt) {
		emits('play-audio', opt)
	}

	const data = reactive({
		list: [],
		randomList: [],
		selectList: [],
		result: false, // 正确性
		isAll: false, // 是否全答
	})

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

	const wordLength = computed(() => props.activeWord.name.length)
	const isAlreadyAnswer = computed(() => {
		return data.selectList.some(item => item != '')
	})

	function isSelect(item) {
		return data.selectList.some(ite => ite == item)
	}

	function handleReset() {
		data.list.forEach((item, index) => {
			data.selectList[index] = ''
		})

		data.result = false;
		data.isAll = false;
	}

	function shuffleArray(array) {
		for (let i = array.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[array[i], array[j]] = [array[j], array[i]]; // ES6解构赋值交换元素
		}
		return array;
	}

	function randomClone(arr) {
		const clone = [...arr];
		return shuffleArray(clone); // 复用方法一的洗牌算法
	}

	// 初始化 单词列表
	function initItem() {

		data.list = props.activeWord.chaifen;
		data.randomList = randomClone(data.list);
		data.list.forEach((item, index) => {
			data.selectList[index] = ''
		})
	}

	function handleSelect(word) {
		// 覆盖状态
		let status = false;
		data.selectList.forEach((item, index) => {
			// 无值 无修改
			if (!item && !status) {
				// 第一项空值覆盖
				data.selectList[index] = word;
				// 以有控制覆盖
				status = true;
			}
		})
		// 校验正确性
		checkIsRight();

		if (data.selectList.some(item => item == '')) {
			data.isAll = false;
		} else {
			data.isAll = true;
		}

	}

	function checkIsRight() {
		if (data.list.join('') === data.selectList.join('')) {
			// 正确
			data.result = true;
			noticeBackDb();
		} else {
			data.result = false;
		}
	}

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

<style lang="scss" scoped>



</style>