From 4165ebe94e92af85b093abe264eb404c6a5181e7 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 22 十一月 2024 10:48:08 +0800
Subject: [PATCH] 答题器收藏功能优化
---
src/views/examination/components/list.vue | 165 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 95 insertions(+), 70 deletions(-)
diff --git a/src/views/examination/components/list.vue b/src/views/examination/components/list.vue
index 818d7dc..fa5947c 100644
--- a/src/views/examination/components/list.vue
+++ b/src/views/examination/components/list.vue
@@ -7,12 +7,21 @@
v-show="item.infoList.length"
>
<p class="catalogName" :style="{ color: primaryColor }">
- <span v-if="nindex == 0">涓�銆�</span>
- <span v-if="nindex == 1">浜屻��</span>
- <span v-if="nindex == 2">涓夈��</span>
- <span v-if="nindex == 3">鍥涖��</span>
- <span v-if="nindex == 4">浜斻��</span>
- <span>{{ item.catalogName }}</span>
+ <span class="catalogName-box" >
+ <span v-if="nindex == 0">涓�銆�</span>
+ <span v-if="nindex == 1">浜屻��</span>
+ <span v-if="nindex == 2">涓夈��</span>
+ <span v-if="nindex == 3">鍥涖��</span>
+ <span v-if="nindex == 4">浜斻��</span>
+ <span>{{ item.catalogName }}</span>
+ </span>
+ <img
+ :src="item.isCollect ? isHeart : heart"
+ alt=""
+ class="collect-png"
+ @click="handleCollect(nindex)"
+ v-if="item.type == 'material'"
+ />
</p>
<ul>
<li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id">
@@ -46,7 +55,7 @@
></el-image>
<!-- 鏂囧瓧鍔犲浘鐗� -->
<p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
- <span> {{ value.stem.stemTxt }}</span>
+ <span v-html="value.stem.stemTxt" ></span>
<el-image
:src="getPublicImage(value.stem.stemImage, 150)"
:preview-src-list="[getPublicImage(value.stem.stemImage)]"
@@ -58,14 +67,18 @@
<span v-for="(itemText, indexText) in value.stem" :key="indexText">
<span v-if="typeof itemText == 'string'" v-html="itemText"></span>
<!-- -->
- <input
+ <!-- <input
v-else
type="text"
class="input"
v-model.trim="value.userAnswer[itemText.num]"
:disabled="value.isComplete"
:style="{ backgroundColor: inputBc }"
- />
+ /> -->
+ <math-field v-else @input="onChangeInput($event,nindex,index,indexText)" class="mathField" :menuItems="[]">
+ {{ value.userAnswer[itemText.num] }}
+ </math-field
+ >
<!-- -->
</span>
</p>
@@ -77,14 +90,14 @@
v-cloak
></p>
</div>
+ <!-- 鏀惰棌 -->
<img
:src="value.isCollect ? isHeart : heart"
alt=""
class="collect-png"
@click="handleCollect(nindex, index)"
- v-if="!(hideCollect && value.questionType == 'shortAnswer')"
+ v-if="item.type != 'material'"
/>
- <!-- 鏀惰棌 -->
</div>
<div class="questionContent">
<!-- 鍗曢�� -->
@@ -98,7 +111,7 @@
v-for="content in value.option"
:key="content.value"
:label="content.value"
- @change="onChangeRadio(nindex,index)"
+ @change="onChangeRadio(nindex, index)"
border
:class="
value.optionStyle == 'Image' ||
@@ -118,7 +131,7 @@
:preview-src-list="[getPublicImage(content.img)]"
v-if="isReal"
></el-image>
- <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
+ <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
<el-image
v-else
:src="getPublicImage(content.img, 115)"
@@ -202,7 +215,7 @@
<el-input
:disabled="value.isComplete"
style="width: 94%; margin: 0 auto"
- v-else-if="value.questionType == 'shortAnswer'"
+ v-else-if="value.questionType == 'shortAnswer' ||value.questionType =='formula'"
type="textarea"
:rows="6"
placeholder="璇疯緭鍏ュ唴瀹�"
@@ -217,18 +230,20 @@
value.questionType == 'completion')
"
>
- <el-button @click="onChangeRadio(nindex,index)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
+ <el-button @click="onChangeRadio(nindex, index)" style="margin-top: 10px"
+ >鏌ョ湅瑙ｆ瀽</el-button
+ >
</div>
<!-- 鎻愪氦鍚庤В鏋� -->
<div class="analysis" v-if="value.isComplete">
<ul class="analysis-box">
- <li class="headerConent" style="width:60%">
+ <li class="headerConent" style="width: 60%">
<!-- 姝ｇ‘閿欒鏍囪瘑 -->
- <ul class="mark">
+ <ul class="mark">
<li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
<li v-if="value.isRight == false" class="mark-error">閿欒</li>
- </ul>
- <p :title="arrayToString(value.answer)">
+ </ul>
+ <p :title="arrayToString(value.answer)">
<span>銆愭纭瓟妗堛�戯細</span>
<span v-html="arrayToString(value.answer)" class="correctBox"></span>
</p>
@@ -238,23 +253,22 @@
style="margin-left: 20px"
>
<span>鎮ㄧ殑绛旀锛�</span>
- <span class="errorBox" >{{
+ <span class="errorBox">{{
arrayToString(value.userAnswer) ? arrayToString(value.userAnswer) : '-'
}}</span>
-
</p>
</li>
<li>
<div class="difficulty" v-if="value.difficulty">
- <span style="color: #333">闅惧害绛夌骇锛�</span>
- <el-rate
- v-model="value.difficulty"
- :max="3"
- size="large"
- disabled
- disabled-void-color="#949494"
- />
- </div>
+ <span style="color: #333">闅惧害绛夌骇锛�</span>
+ <el-rate
+ v-model="value.difficulty"
+ :max="3"
+ size="large"
+ disabled
+ disabled-void-color="#949494"
+ />
+ </div>
</li>
</ul>
<el-collapse
@@ -269,11 +283,11 @@
<div class="headerConent sitgBox">
<p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑瑙ｆ瀽</span>
- <img :src="openIcon" alt="" class="analysis-icon">
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
<p v-else>
<span class="analysisColor">鏀惰捣瑙ｆ瀽</span>
- <img :src="closeIcon" alt="" class="analysis-icon">
+ <img :src="closeIcon" alt="" class="analysis-icon" />
</p>
</div>
</div>
@@ -288,13 +302,13 @@
<el-collapse-item :name="value.id" class="objective">
<template #title>
<div class="headerBox">
- <p v-if="!value.isUnfold" class="al-cn">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span>
- <img :src="openIcon" alt="" class="analysis-icon">
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
- <p v-else class="al-cn">
+ <p v-else class="al-cn">
<span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span>
- <img :src="closeIcon" alt="" class="analysis-icon">
+ <img :src="closeIcon" alt="" class="analysis-icon" />
</p>
</div>
</template>
@@ -327,20 +341,20 @@
</template>
<script setup lang="ts">
-import { defineProps, onMounted, ref,reactive } from 'vue'
+import { defineProps, onMounted, ref, reactive } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
import openIcon from '@/assets/images/examination/open.png'
import closeIcon from '@/assets/images/examination/close.png'
const props = defineProps({ cardList: Array, collectList: Array })
-const emits = defineEmits([ 'onChangeRadio','setCollect'])
+const emits = defineEmits(['onChangeRadio', 'setCollect','onChangeInput'])
// const presentId = ref<Number>(props.collectList[0])
onMounted(() => {
// if (props.collectList) presentId.value = props.collectList[0]
})
// 鏁扮粍杞负瀛楃涓叉柟娉�
-const arrayToString = (data:any) => {
+const arrayToString = (data: any) => {
// 妫�鏌ユ槸鍚︿负鏁扮粍
if (Array.isArray(data)) {
// 浣跨敤 join 鏂规硶灏嗘暟缁勮浆鎹负瀛楃涓诧紝榛樿浣跨敤閫楀彿鍒嗛殧
@@ -350,7 +364,7 @@
return data.replace(/<[^>]*>/g, '')
}
}
-const isHaveAnswer = (data:any) => {
+const isHaveAnswer = (data: any) => {
if (typeof data == 'string') {
data = data
.replace(/<[^>]*>/g, '')
@@ -371,18 +385,25 @@
}
}
// 鏀惰棌鎸夐挳
-const handleCollect = (num:number,number:number) => {
- emits('setCollect',num,number)
+const handleCollect = (num: number, number: number) => {
+ emits('setCollect', num, number)
}
// 鍗曢�夋杈撳叆
-const onChangeRadio = (num:number,number:number) => {
- emits('onChangeRadio', num,number)
+const onChangeRadio = (num: number, number: number) => {
+ emits('onChangeRadio', num, number)
+}
+const onChangeInput = (event: any,index:number,cindex:number,dindex:number) => {
+ emits('onChangeInput',event.target.value,index,cindex,dindex)
}
</script>
<style lang="less" scoped>
.catalogName {
+ display: flex;
margin-top: 40px;
+ .catalogName-box {
+ width: 94%;
+ }
}
.collect-png {
cursor: pointer;
@@ -454,7 +475,6 @@
display: flex;
align-items: flex-start;
span {
- height: 24px;
line-height: 24px;
text-align: center;
font-size: 16px;
@@ -542,8 +562,8 @@
width: 100%;
padding: 0 20px;
font-size: 14px;
- background-color: #E0F2FF ;
- color: #3B93FE;
+ background-color: #e0f2ff;
+ color: #3b93fe;
.checkAnalysis {
cursor: pointer;
height: 100%;
@@ -554,7 +574,7 @@
/deep/ .el-collapse-item__content {
width: 100%;
padding: 0 20px;
- background-color: #E0F2FF;
+ background-color: #e0f2ff;
font-size: 14px;
color: #333;
}
@@ -595,7 +615,8 @@
.mark {
font-size: 14px;
color: #fff;
- .mark-error,.mark-correct {
+ .mark-error,
+ .mark-correct {
white-space: nowrap;
min-height: 20px;
line-height: 18px;
@@ -606,29 +627,29 @@
background-color: #1fbc1f;
}
.mark-error {
- background-color: #FF5E5E;
+ background-color: #ff5e5e;
}
}
.headerConent {
- height: 100%;
- display: flex;
- align-items: center;
- .el-image {
- width: 9px;
- height: 9px;
- }
- .correct {
- color: #70B503;
- width: 200px;
- text-align: left;
- }
- .error {
- text-align: left;
- margin-left: 40px;
- width: 200px;
- color: #FF5E5E;
- }
- }
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
+ .correct {
+ color: #70b503;
+ width: 200px;
+ text-align: left;
+ }
+ .error {
+ text-align: left;
+ margin-left: 40px;
+ width: 200px;
+ color: #ff5e5e;
+ }
+}
.difficulty {
display: flex;
align-items: center;
@@ -648,6 +669,10 @@
background-color: red;
}
.primary-text-color {
- color: #3B93FE;
+ color: #3b93fe;
+}
+.mathField {
+ width: 500px;
+ margin-top: 10px;
}
</style>
--
Gitblit v1.9.1