|
|
@@ -1,22 +1,20 @@
|
|
|
<template>
|
|
|
<view class="words-pin-box">
|
|
|
- <!-- 单词区 -->
|
|
|
- <!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
|
|
|
<!-- 显示区 -->
|
|
|
<selectTypesVue activeSelect="2"></selectTypesVue>
|
|
|
- <!-- 拼读区 单词字母多余6个需要追加 class：pin-small-words-box 大哥看这里-->
|
|
|
- <view class="pin-words-box" :class="{isAll: data.isAll, 'pin-right-words-box': data.isAll && data.result, 'pin-error-words-box': data.isAll && !data.result}">
|
|
|
+ <!-- 拼读区 -->
|
|
|
+ <!-- 单词字母多余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"></view>
|
|
|
+ <view class="clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></view>
|
|
|
<!-- 提示 -->
|
|
|
- <view class="pin-tip">提示：请点击页面下方单词，选择正确答案。</view>
|
|
|
- <!-- 解释区 需要分成多行 大哥看这里-->
|
|
|
+ <view class="pin-tip" v-else>提示：请点击页面下方字母，选择正确答案。</view>
|
|
|
+ <!-- 解释区 需要分成多行 -->
|
|
|
<view class="pin-words-explain-box">
|
|
|
- <view class="words-explain-item">{{activeWord.jianyi.join(';')}}</view>
|
|
|
+ <view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
|
|
|
</view>
|
|
|
<!-- 播放和待播放需要写个切换 大哥看这里 -->
|
|
|
<!-- 待播放 -->
|
|
|
@@ -24,19 +22,14 @@
|
|
|
<!-- 播放中 -->
|
|
|
<view class="audio-playing-btn" v-if="false"></view>
|
|
|
</view>
|
|
|
- <!-- 图片区 -->
|
|
|
- <!-- <view @click="handleReset">
|
|
|
- {{data.result ? '正确': '错误'}}
|
|
|
- </view> -->
|
|
|
- <!-- 选择区 单词字母多余6个需要追加 class：pin-small-words-box 大哥看这里-->
|
|
|
- <view class="pin-words-box pin-words-change-box">
|
|
|
- <view class="words-item words-change-item" v-for="item in data.randomList" :class="{disabled: isSelect(item)}" @click="handleSelect(item)">{{item}}</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 selectWordsVue from './selectWords.vue';
|
|
|
import selectTypesVue from './selectTypes.vue';
|
|
|
import {
|
|
|
reactive,
|
|
|
@@ -74,6 +67,11 @@
|
|
|
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)
|
wangxy