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>
			<!-- 播放和待播放需要写个切换 大哥看这里 -->
			<!-- 待播放 -->
			<view class="audio-play-btn"></view>
			<!-- 播放中 -->
			<view class="audio-playing-btn" v-if="false"></view>
		</view>
		<!-- 选择区 单词字母多余6个需要追加 class：pin-small-words-box -->
		<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 {
		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)
	})
	
	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) {

    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>