115 lines
2.7 KiB
Vue
115 lines
2.7 KiB
Vue
<template>
|
||
<div class="mistake-view common-view">
|
||
<div class="view-header">
|
||
<div class="view-content">
|
||
<h2 class="view-title">错题本</h2>
|
||
<p class="view-subtitle">回顾错题，查漏补缺</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mistake-record">
|
||
<div v-if="mistakeStore.mistakeList.length" class="mistake-list">
|
||
<el-card v-for="item in mistakeStore.mistakeList"
|
||
:key="item.id" class="mistake-card" shadow="never">
|
||
<div class="library">
|
||
<el-tag type="primary" effect="dark">{{ item.subject }} · {{ item.module }}</el-tag>
|
||
<el-button type="success" size="small" @click="deleteClick(item.id)">已掌握</el-button>
|
||
</div>
|
||
|
||
<div class="question">{{ item.question }}</div>
|
||
|
||
<div class="option-list">
|
||
<div v-for="(opt, index) in item.options" :key="index" class="option"
|
||
:class="optionClass(item, index)">
|
||
{{ optLetter(index) }}．{{ opt }}
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
<el-empty v-else description="暂无数据"></el-empty>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted } from 'vue'
|
||
import { useMistakeStore } from '@/stores/mistake.ts'
|
||
import { optLetter } from '@/utils/practiceUtil.ts'
|
||
import type { IMistake } from '@/types/mistake.ts'
|
||
import { ElMessageBox } from 'element-plus'
|
||
|
||
const mistakeStore = useMistakeStore()
|
||
|
||
onMounted(async () => {
|
||
await mistakeStore.queryMistakeList()
|
||
})
|
||
|
||
const optionClass = (item: IMistake, index: number) => {
|
||
const letters = ['A', 'B', 'C', 'D']
|
||
const isCorrect = item.answer.includes(letters[index])
|
||
return {
|
||
correct: isCorrect
|
||
}
|
||
}
|
||
|
||
const deleteClick = (id: number) => {
|
||
ElMessageBox.confirm('确定已掌握该错题？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
await mistakeStore.deleteMistakeById(id)
|
||
await mistakeStore.queryMistakeList()
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mistake-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
background: #f7f8fa;
|
||
}
|
||
|
||
.mistake-card {
|
||
.el-card__body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.library {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.question {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.option-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
.option {
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e5e6eb;
|
||
font-size: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.option.correct {
|
||
border-color: #52c41a;
|
||
background: #f6ffed;
|
||
color: #389e0d;
|
||
}
|
||
}
|
||
}
|
||
</style>
|