|
@@ -6,8 +6,8 @@
|
|
|
<selectTypesVue activeSelect="2"></selectTypesVue>
|
|
|
<!-- 拼读区 -->
|
|
|
<view>
|
|
|
- <view v-for="item in data.list">
|
|
|
- <view></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>
|
|
|
<!-- 解释区 -->
|
|
@@ -17,9 +17,15 @@
|
|
|
<!-- 音标区 -->
|
|
|
<view></view>
|
|
|
<!-- 图片区 -->
|
|
|
- <view></view>
|
|
|
+ <view @click="handleReset">
|
|
|
+ {{data.result ? '正确': '错误'}}
|
|
|
+ </view>
|
|
|
<!-- 选择区 -->
|
|
|
- <view></view>
|
|
|
+ <view>
|
|
|
+ <view v-for="item in data.randomList" :class="{active: isSelect(item)}" @click="handleSelect(item)">
|
|
|
+ <view>内容:{{item}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -30,6 +36,14 @@
|
|
|
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,
|
|
@@ -41,32 +55,79 @@
|
|
|
|
|
|
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 initList() {
|
|
|
- data.selectList.forEach((item, index) => {
|
|
|
- data.list[index] = ''
|
|
|
+ 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.list.find(item => item == word)) {
|
|
|
- data.list[data.list.findIndex(item => item == 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.list.forEach((item, index) => {
|
|
|
+ data.selectList.forEach((item, index) => {
|
|
|
// 无值 无修改
|
|
|
if (!item && !status) {
|
|
|
// 第一项空值覆盖
|
|
|
- data.list[index] = word;
|
|
|
+ data.selectList[index] = word;
|
|
|
// 以有控制覆盖
|
|
|
status = true;
|
|
|
}
|
|
@@ -86,9 +147,19 @@
|
|
|
}
|
|
|
|
|
|
function noticeBackDb() {
|
|
|
-
|
|
|
+ if (userCode == 'Visitor') {
|
|
|
+ // 游客不更新后台
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ httpApi.getWordZhangwo({
|
|
|
+ type: 1,
|
|
|
+ wordId: props.activeWord.id
|
|
|
+ })
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</style>
|