uniProject/pages/newEnglish/components/pinPage.vue

<template>
	<div>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<!-- 显示区 -->
		<selectTypesVue activeSelect="2"></selectTypesVue>
		<!-- 拼读区 -->
		<view>
			<view v-for="item in data.selectList" :class="{isAll: data.isAll, right:  data.isAll && data.result, wrong:  data.isAll && !data.result}">
				<view>内容：{{item}}</view>
			</view>
		</view>
		<!-- 解释区 -->
		<view>
			{{activeWord.jianyi.join(';')}}
		</view>
		<!-- 音标区 -->
		<view></view>
		<!-- 图片区 -->
		<view @click="handleReset">
			{{data.result ? '正确': '错误'}}
		</view>
		<!-- 选择区 -->
		<view>
			<view v-for="item in data.randomList" :class="{active:  isSelect(item)}" @click="handleSelect(item)">
				<view>内容：{{item}}</view>
			</view>
		</view>
	</div>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.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 userCode = getUserIdentity();
	
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})

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

	setTimeout(() => {
		console.log('activeWord', props.activeWord)
	})

  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) {

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

    // 点击触发取消
		/*if (data.selectList.find(item => item == word)) {
			data.selectList[data.selectList.findIndex(item => item == word)] = '';
			// 校验正确性
			checkIsRight();
			return;
		}*/

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

	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>