tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改评论页的传参

Browse Source
This commit is contained in:
田岩
2025-08-21 08:46:43 +08:00
parent 8211032e86
commit e5e0b19bda
19 changed files with 1049 additions and 884 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/examination/characters-subject.vue
+57 -69
View File
@@ -2,17 +2,17 @@
<view class="item">
<view class="top">
<view class="type">
{{subject_type_text}}
</view>
<view class="score">
5分
</view>
<view class="fl1">
{{ subject_type_text }}
</view>
<view class="score">5分</view>
<view class="fl1"></view>
<view class="right">
<view class="mark_and_feedback_div">
<image :src="markIcon(props.item.mark?'#0066FF':'#ABABAB')" class="img" @click="mark_click()"></image>
<image
:src="markIcon(props.item.mark ? '#0066FF' : '#ABABAB')"
class="img"
@click="mark_click()"
></image>
<image :src="feedbackIcon()" class="img" @click="feedback_click()"></image>
</view>
<!-- <view class="right_text">展开</view>
@@ -20,7 +20,7 @@
</view>
</view>
<view class="question_text">
{{subject_data.qnsContent}}
{{ subject_data.qnsContent }}
</view>
<view class="option_div">
<questionVue @changePlay="changePlay" :dataInfo="talkingInfo" :activeVoiceId="questionValue"></questionVue>
@@ -28,103 +28,93 @@
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
nextTick,
computed,
toRaw,
watch
} from 'vue'
import { ref, reactive, onMounted, nextTick, computed, toRaw, watch } from 'vue';
import questionVue from './question.vue';
import radioSubjectItem from './radio-subject-item.vue'
import {
markIcon,feedbackIcon
} from '@/common/imgSvg'
import {
SUBJECT_TYPE
} from '@/enum.js'
const questionValue = ref('')
import radioSubjectItem from './radio-subject-item.vue';
import { markIcon, feedbackIcon } from '@/common/imgSvg';
import { SUBJECT_TYPE } from '@/enum.js';
const questionValue = ref('');
const props = defineProps({
item: {
type: Object,
required: true,
required: true
},
mode: {
type: String,
required: true,
required: true
},
activeVoiceId: {
type: String,
required: true,
required: true
},
voicePathValue: {
type: String,
required: true,
},
required: true
}
});
const emit = defineEmits(['subject_click'])
const emit = defineEmits(['subject_click']);
const talkingInfo = ref({
id: '3',
intrctWay: "02",
intrctContent: "中的i id一二三。",
intrctWay: '02',
intrctContent: '中的i id一二三。',
talkingText: '中的i id一二三。',
talkingVoice: ''
})
watch(() => props.voicePathValue, (val) => {
if (val) {
talkingInfo.value = {
id: '3',
intrctWay: "02",
intrctContent: "中的i id一二三。",
talkingText: '中的i id一二三。',
talkingVoice: val
});
watch(
() => props.voicePathValue,
(val) => {
if (val) {
talkingInfo.value = {
id: '3',
intrctWay: '02',
intrctContent: '中的i id一二三。',
talkingText: '中的i id一二三。',
talkingVoice: val
};
}
}
})
const feedback_click = () =>{
emit('subject_click', 'feedback', props.item)
}
const mark_click = () =>{
emit('subject_click', 'mark', props.item)
}
);
const feedback_click = () => {
emit('subject_click', 'feedback', props.item);
};
const mark_click = () => {
emit('subject_click', 'mark', props.item);
};
const customStyle = {
borderRadius: '16rpx',
width: '292rpx',
backgroundColor: '#0066FF',
border: '1rpx solid rgb(12, 123, 245)',
}
border: '1rpx solid rgb(12, 123, 245)'
};
const subject_data = reactive({
qnsId: '',
qnsContent: '',
qnsTyp: '',
})
qnsTyp: ''
});
Object.assign(subject_data, {
qnsId: props.item.qnsId,
qnsContent: props.item.qnsContent,
qnsTyp: props.item.qnsTyp,
})
qnsTyp: props.item.qnsTyp
});
// 题类型
const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
const subject_type_text = computed(() => SUBJECT_TYPE.find((res) => subject_data.qnsTyp === res.value)?.label || '');
const changePlay = (id) => {
console.log('changePlay');
questionValue.value = id
questionValue.value = id;
// emit('handleEvents', 'changePlay', props.talkingInfo, id)
}
};
</script>
<style scoped lang="scss">
.mark_and_feedback_div{
.mark_and_feedback_div {
display: flex;
height: 100%;
justify-content: end;
align-items: center;
.img{
.img {
width: 38rpx;
height: 38rpx;
margin-left: 4rpx;
@@ -133,7 +123,6 @@
}
.option_div {
padding-top: 46rpx;
}
.item {
@@ -150,12 +139,12 @@
.type {
width: 108rpx;
height: 46rpx;
background: #267EFF;
background: #267eff;
border-radius: 8rpx;
font-family: PingFangSC;
font-weight: 500;
font-size: 25rpx;
color: #FFFFFF;
color: #ffffff;
text-align: center;
line-height: 46rpx;
}
@@ -181,7 +170,6 @@
text-align: left;
font-style: normal;
}
}
}
@@ -196,4 +184,4 @@
margin-top: 20rpx;
}
}
</style>
</style>
src/components/examination/radio-subject-item.vue
+13 -20
View File
@@ -3,12 +3,6 @@
<view class="option_text">
{{props.analysisVo.itemNo}}. {{props.analysisVo.itemContent}}
</view>
<!-- <image v-show="select_status==='primary'" class="img" src="@/static/images/common/primary.png" mode="heightFix">
</image>
<image v-show="select_status==='success'" class="img" src="@/static/images/common/success.png" mode="heightFix">
</image>
<image v-show="select_status==='error'" class="img" src="@/static/images/common/error.png" mode="heightFix">
</image> -->
<image :src="select_status_icon" class="img"></image>
</view>
</template>
@@ -37,21 +31,21 @@
required: false,
},
my_answer: {
type: Array,
required: true,
},
backend_answer: {
type: Array,
required: true,
},
type: String,
defauft:''
}
});
const select_status = computed(() => {
if (props.backend_answer.length === 0) {
return (props.my_answer||[]).includes(props.analysisVo.itemId) ? 'primary' : 'info';
} else {
return (props.my_answer||[]).includes(props.analysisVo.itemId) ? 'success' :
'error';
}
// 只要是正确答案 就是绿色
if (props.analysisVo.correctFlag === 'R') return 'success';
// 是错误答案但是被用户错误选中的为红
console.log('props.my_answer', props.my_answer);
const my_answer_array = props.my_answer.split(',');
if(my_answer_array.includes(props.analysisVo.itemId) && props.analysisVo.correctFlag === 'E') return 'error';
// 只有被我选中,不知是正确还是错误的为蓝
if(my_answer_array.includes(props.analysisVo.itemId)) return 'primary';
// 什么都不是者为灰色
return 'info';
})
const select_status_icon = computed(() => {
if (select_status.value === 'primary') {
@@ -65,7 +59,6 @@
})
const click_option = () => {
emit('click_option', props.analysisVo)
}
</script>
src/components/examination/radio-subject.vue
+16 -18
View File
@@ -24,7 +24,7 @@
</view>
<view class="option_div">
<radioSubjectItem v-for="(analysisVo,index) in subject_data.itemVos" @click_option="click_option" :key="index"
:analysisVo="analysisVo" :my_answer="props.item.my_answer" :backend_answer="props.item.backend_answer">
:analysisVo="analysisVo" :my_answer="props.item.my_answer">
</radioSubjectItem>
</view>
<view class="option_div_button" v-if="subject_data.qnsTyp==='MU' && ['practice','study'].includes(props.mode)">
@@ -81,8 +81,6 @@
qnsTyp: '',
itemVos: props.item.itemVos.map(res => ({
...res,
// 选择状态, 'info表示未选' ， primary 表示蓝色， sunccess 表示绿色， error 表示红色
select_status: 'info'
})),
})
Object.assign(subject_data, {
@@ -95,21 +93,21 @@
const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
// 点击答题
const click_option = (analysisVo) => {
// // 无论什么类型如果表里已经有了，再次点击就是弹出
if (props.item.my_answer.includes(analysisVo.itemId)) {
props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
} else if (props.item.qnsTyp === 'SN') { // 单选
// 单选插入，并且移除其他
props.item.my_answer[0] = analysisVo.itemId
muCheckbox()
} else if (props.item.qnsTyp === 'MU') { // 多选题
// 多选直接插入
props.item.my_answer.push(analysisVo.itemId)
} else if (props.item.qnsTyp === 'JD') { // 判断题
// 判断插入，并且移除其他
props.item.my_answer = [analysisVo.itemId]
muCheckbox()
}
// // // 无论什么类型如果表里已经有了，再次点击就是弹出
// if (props.item.my_answer.includes(analysisVo.itemId)) {
// props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
// } else if (props.item.qnsTyp === 'SN') { // 单选
// // 单选插入，并且移除其他
// props.item.my_answer[0] = analysisVo.itemId
// muCheckbox()
// } else if (props.item.qnsTyp === 'MU') { // 多选题
// // 多选直接插入
// props.item.my_answer.push(analysisVo.itemId)
// } else if (props.item.qnsTyp === 'JD') { // 判断题
// // 判断插入，并且移除其他
// props.item.my_answer = [analysisVo.itemId]
// muCheckbox()
// }
}
const muCheckbox = () => {
emit('subject_click', 'answer', {
src/components/examination/subject.vue
+213
View File
@@ -0,0 +1,213 @@
<template>
<view class="item">
<view class="top">
<view class="type">
{{subject_type_text}}
</view>
<view class="score" v-if="mode !== 'study'">
5分
</view>
<view class="fl1" v-if="mode !== 'study'">
</view>
<view class="right" v-if="mode !== 'study'">
<view class="mark_and_feedback_div">
<image :src="markIcon(props.item.mark?'#0066FF':'#ABABAB')" class="img" @click="mark_click()"></image>
<image :src="feedbackIcon()" class="img" @click="feedback_click()"></image>
</view>
<!-- <view class="right_text">展开</view>
<uv-icon class="arrow-icon" name="arrow-right"></uv-icon> -->
</view>
</view>
<view class="question_text">
{{subject_data.qnsContent}}
</view>
<view class="option_div">
<template v-if="qnsTyp === 'ES'">
<!-- <questionVue @changePlay="changePlay" :dataInfo="talkingInfo" :activeVoiceId="questionValue"></questionVue> -->
</template>
<template v-else>
<radioSubjectItem v-for="(analysisVo,index) in subject_data.itemVos" @click_option="click_option" :key="index"
:analysisVo="analysisVo" :my_answer="props.item.my_answer">
</radioSubjectItem>
</template>
</view>
<view class="option_div_button" v-if="subject_data.qnsTyp==='MU' && ['practice','study'].includes(props.mode)">
<uv-button type="primary" class="send_evaluate" :custom-style="customStyle" :throttleTime="300"
@click="muCheckbox" :hairline="false">确定</uv-button>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
nextTick,
computed,
toRaw
} from 'vue'
import radioSubjectItem from './radio-subject-item.vue'
import {
markIcon,
feedbackIcon
} from '@/common/imgSvg'
import {
SUBJECT_TYPE
} from '@/enum.js'
const customStyle = {
borderRadius: '16rpx',
width: '292rpx',
backgroundColor: '#0066FF',
border: '1rpx solid rgb(12, 123, 245)',
}
const emit = defineEmits(['subject_click'])
const props = defineProps({
item: {
type: Object,
required: true,
},
mode: {
type: String,
required: true,
}
});
const feedback_click = () => {
emit('subject_click', 'feedback', props.item)
}
const mark_click = () => {
emit('subject_click', 'mark', props.item)
}
// 单选 SN， 多选 MU，判断题 JD，简答 ES
const qnsTyp = computed(() => props.item.qnsTyp)
const subject_data = reactive({
qnsId: '',
qnsContent: '',
qnsTyp: '',
itemVos: props.item.itemVos.map(res => ({
...res,
})),
})
Object.assign(subject_data, {
qnsId: props.item.qnsId,
qnsContent: props.item.qnsContent,
qnsTyp: props.item.qnsTyp,
})
// 题类型
const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
// 点击答题
const click_option = (analysisVo) => {
// // 无论什么类型如果表里已经有了，再次点击就是弹出
// if (props.item.my_answer.includes(analysisVo.itemId)) {
// props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
// } else if (props.item.qnsTyp === 'SN') { // 单选
// // 单选插入，并且移除其他
// props.item.my_answer[0] = analysisVo.itemId
// muCheckbox()
// } else if (props.item.qnsTyp === 'MU') { // 多选题
// // 多选直接插入
// props.item.my_answer.push(analysisVo.itemId)
// } else if (props.item.qnsTyp === 'JD') { // 判断题
// // 判断插入，并且移除其他
// props.item.my_answer = [analysisVo.itemId]
// muCheckbox()
// }
}
const muCheckbox = () => {
emit('subject_click', 'answer', {
qnsTyp: props.item.qnsTyp,
qnsId: props.item.qnsId,
answer: props.item.my_answer,
answerItems: subject_data.itemVos.filter(t=> props.item.my_answer.includes(t.itemId))
})
}
</script>
<style scoped lang="scss">
.mark_and_feedback_div {
display: flex;
height: 100%;
justify-content: end;
align-items: center;
.img {
width: 38rpx;
height: 38rpx;
margin-left: 4rpx;
padding: 4rpx;
}
}
.option_div_button {
width: 100%;
height: 84rpx;
padding-top: 30rpx;
// background-color: red;
display: flex;
flex-direction: column;
align-items: center;
}
.item {
// height: 170rpx;
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: 40rpx;
.top {
display: flex;
align-items: center;
.type {
width: 108rpx;
height: 46rpx;
background: #267EFF;
border-radius: 8rpx;
font-family: PingFangSC;
font-weight: 500;
font-size: 25rpx;
color: #FFFFFF;
text-align: center;
line-height: 46rpx;
}
.score {
margin-left: 24rpx;
font-family: ArialMT;
font-size: 30rpx;
color: #333333;
text-align: left;
}
.right {
display: flex;
align-items: center;
.right_text {
font-family: PingFangSC;
font-weight: 600;
font-size: 28rpx;
color: #333;
text-align: left;
font-style: normal;
}
}
}
.question_text {
font-family: PingFangSC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 48rpx;
text-align: left;
font-style: normal;
margin-top: 20rpx;
}
}
</style>
src/components/examination/touchBtn.vue
+2
View File
@@ -154,6 +154,7 @@
};
onMounted(async () => {
// #ifdef APP-PLUS
recorderManager.onStop(function (res) {
console.log('recorder stop' + JSON.stringify(res));
console.log('录音文件临时位置', res.tempFilePath, isOut.value);
@@ -177,6 +178,7 @@
startTime = Date.now();
recordingStatus.value = 'in_recording';
});
// #endif
});
const touchY = ref(0);
src/components/topic-display/topic-display.vue
+170 -48
View File
@@ -1,63 +1,120 @@
<template>
<view class="">
<view class="option_div">
<view class="option_item success">
<view class="text">
A.这里是选项 A 的内容
</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item success">
<view class="text">
B.这里是选项 B 的内容
</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item error">
<view class="text">
C.这里是选项 C 的内容
</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item info">
D.这里是选项D的内容
<view class="item">
<view class="top">
<view class="type">{{ subject_type_text }}</view>
<view class="score">{{ item.tgtGrade }}分</view>
<view class="fl1"></view>
<view class="right" v-if="[''].includes(props.mode)">
<view class="right_text">展开</view>
<uv-icon class="arrow-icon" name="arrow-right"></uv-icon>
</view>
</view>
<view class="analysis_div">
<view class="analysis_title">
<view class="success_answer">
正确答案：ABC
</view>
<view class="text">{{ item.qnsContent }}</view>
<view class="additional_div">
<view class="option_div">
<radioSubjectItem v-for="(analysisVo,index) in item.itemVos" @click_option="click_option" :key="index"
:analysisVo="analysisVo" :my_answer="props.item.anserResult" :backend_answer="[]">
</radioSubjectItem>
<view class="your_answer">
你的答案：<text class="red_color">AB</text>
<!-- <view class="option_item success">
<view class="text">A.这里是选项 A 的内容</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item success">
<view class="text">B.这里是选项 B 的内容</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item error">
<view class="text">C.这里是选项 C 的内容</view>
<image class="img" src="@/static/images/common/success.png" mode="heightFix"></image>
</view>
<view class="option_item info">D.这里是选项D的内容</view> -->
</view>
<view class="analysis_note">
题目解析：属于商业银行风险管理“三道防线的是A部门，B部门和C部门银行风险管理“三道防线的是A部门，B部，银行风险管理“三道防线的是A部门，B部银行风险管理“三道防线的是A部门，B部
<view class="analysis_div">
<view class="analysis_title">
<view class="success_answer">正确答案：{{ correctResultLabel.join('') }}</view>
<view class="your_answer">
你的答案：
<text class="red_color">{{ myResultLabel.join('') }}</text>
</view>
</view>
<view class="analysis_note">
题目解析：{{item.analyContent}}
</view>
</view>
</view>
</view>
</template>
<script>
<script setup>
import radioSubjectItem from '@/components/examination/radio-subject-item.vue'
import { SUBJECT_TYPE } from '@/enum.js';
import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance } from 'vue';
const props = defineProps({
item: {
type: Object,
required: true
},
mode: {
type: String,
required: true,
validator: (value) => {
// 考试: examination 练习: practice 错题本: mistake 学习: study
return ['examination', 'practice', 'mistake', 'study'].includes(value);
}
}
});
// 试题类型
const qnsTyp = computed(() => props.item.qnsTyp);
const item = computed(() => props.item);
// 正确答案选项
const correctResultLabel = computed(() =>
props.item.itemVos.filter((res) => res.correctFlag === 'R').map((res) => res.itemNo)
);
// 我的答案选项
const myResultLabel = computed(() => {
const anserResultArray = props.item.anserResult.split(',');
return props.item.itemVos.filter((res) => anserResultArray.includes(res.itemId)).map((res) => res.itemNo);
});
console.log(myResultLabel.value, 'myResultLabel');
//
const subject_data = reactive({
qnsId: '',
qnsContent: '',
qnsTyp: '',
itemVos: props.item.itemVos.map((res) => ({
...res,
// 选择状态, 'info表示未选' ， primary 表示蓝色， sunccess 表示绿色， error 表示红色
select_status: 'info'
}))
});
// 题目类型换成汉字
const subject_type_text = computed(() => SUBJECT_TYPE.find((res) => qnsTyp.value === res.value)?.label || '');
const click_option = () => {
}
</script>
<style scoped lang="scss">
.success {
color: #15B859;
background: #E7F8ED;
color: #15b859;
background: #e7f8ed;
}
.info {
color: #333333;
background: #F9F9F9 ;
background: #f9f9f9;
}
.error {
color: #F5212D;
background: #FCE8E9;
color: #f5212d;
background: #fce8e9;
}
.option_item {
width: 100%;
height: 108rpx;
@@ -88,23 +145,26 @@
padding-right: 30rpx;
}
}
.analysis_div{
.analysis_title{
.analysis_div {
.analysis_title {
display: flex;
justify-content: space-between;
align-items: center;
margin: 32rpx 0 28rpx 0;
.success_answer{
.success_answer {
}
.your_answer{
.your_answer {
}
.red_color{
color: #F5212D;
.red_color {
color: #f5212d;
}
}
.analysis_note{
.analysis_note {
font-family: PingFangSC;
font-weight: 500;
font-size: 30rpx;
@@ -114,4 +174,66 @@
font-style: normal;
}
}
</style>
.item {
// height: 170rpx;
border-radius: 16rpx;
margin: 12rpx 0 50rpx 0;
padding: 34rpx 30rpx 34rpx 36rpx;
background-color: #fff;
display: flex;
flex-direction: column;
.top {
display: flex;
align-items: center;
.type {
width: 108rpx;
height: 46rpx;
background: #267eff;
border-radius: 8rpx;
font-family: PingFangSC;
font-weight: 500;
font-size: 25rpx;
color: #ffffff;
text-align: center;
line-height: 46rpx;
}
.score {
margin-left: 24rpx;
font-family: ArialMT;
font-size: 30rpx;
color: #333333;
text-align: left;
}
.right {
display: flex;
align-items: center;
.right_text {
font-family: PingFangSC;
font-weight: 600;
font-size: 28rpx;
color: #333;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
}
.text {
font-family: PingFangSC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 48rpx;
text-align: left;
font-style: normal;
margin-top: 20rpx;
}
}
</style>