1
This commit is contained in:
田岩
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="top">
|
||||
<view class="type">
|
||||
{{subject_type_text}}
|
||||
</view>
|
||||
<view class="score">
|
||||
5分
|
||||
</view>
|
||||
<view class="fl1">
|
||||
|
||||
</view>
|
||||
<view class="right">
|
||||
<!-- <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">
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
computed,
|
||||
toRaw
|
||||
} from 'vue'
|
||||
import radioSubjectItem from './radio-subject-item.vue'
|
||||
import {
|
||||
SUBJECT_TYPE
|
||||
} from '@/enum.js'
|
||||
const customStyle = {
|
||||
borderRadius: '16rpx',
|
||||
width: '292rpx',
|
||||
backgroundColor: '#0066FF',
|
||||
border: '1rpx solid rgb(12, 123, 245)',
|
||||
}
|
||||
const emit = defineEmits(['click_option'])
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
|
||||
const subject_data = reactive({
|
||||
qnsId: '',
|
||||
qnsContent: '',
|
||||
qnsTyp: '',
|
||||
})
|
||||
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 || '')
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.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;
|
||||
line-height: 40rpx;
|
||||
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>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<view class="option_item" @click.stop="click_option()" :class="select_status">
|
||||
<view class="option_text">
|
||||
{{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>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
computed,
|
||||
toRaw
|
||||
} from 'vue'
|
||||
import {
|
||||
optionErrorIcon,
|
||||
optionSuccessIcon
|
||||
} from '@/common/imgSvg'
|
||||
const emit = defineEmits(['click_option'])
|
||||
const props = defineProps({
|
||||
analysisVo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
my_answer: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
backend_answer: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
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';
|
||||
}
|
||||
})
|
||||
const select_status_icon = computed(() => {
|
||||
if (select_status.value === 'primary') {
|
||||
return optionSuccessIcon('#0066FF')
|
||||
} else if (select_status.value === 'success') {
|
||||
return optionSuccessIcon('#15B859')
|
||||
} else if (select_status.value === 'error') {
|
||||
return optionErrorIcon()
|
||||
}
|
||||
|
||||
})
|
||||
const click_option = () => {
|
||||
console.log('props.analysisVo.itemId', props.analysisVo.itemId);
|
||||
emit('click_option', props.analysisVo)
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.success {
|
||||
color: #15B859;
|
||||
background: #E7F8ED;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #333333;
|
||||
background: #ECF3FE;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #333333;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F5212D;
|
||||
background: #FCE8E9;
|
||||
}
|
||||
|
||||
.option_item {
|
||||
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
border-radius: 15rpx;
|
||||
margin-top: 32rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding-left: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
// -webkit-line-clamp: 2;
|
||||
/* 显示的行数 */
|
||||
overflow: hidden;
|
||||
.option_text {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 30rpx;
|
||||
// height: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="top">
|
||||
<view class="type">
|
||||
{{subject_type_text}}
|
||||
</view>
|
||||
<view class="score">
|
||||
5分
|
||||
</view>
|
||||
<view class="fl1">
|
||||
|
||||
</view>
|
||||
<view class="right">
|
||||
<!-- <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">
|
||||
<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"></radioSubjectItem>
|
||||
</view>
|
||||
<view class="option_div_button" v-if="subject_data.qnsTyp==='MU' && props.mode=='practice'" >
|
||||
<uv-button type="primary" class="send_evaluate" :custom-style="customStyle" :throttleTime="300"
|
||||
: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 {
|
||||
SUBJECT_TYPE
|
||||
} from '@/enum.js'
|
||||
const customStyle = {
|
||||
borderRadius: '16rpx',
|
||||
width: '292rpx',
|
||||
backgroundColor: '#0066FF',
|
||||
border: '1rpx solid rgb(12, 123, 245)',
|
||||
}
|
||||
const emit = defineEmits(['click_option'])
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
|
||||
const subject_data = reactive({
|
||||
qnsId: '',
|
||||
qnsContent: '',
|
||||
qnsTyp: '',
|
||||
itemVos: props.item.itemVos.map(res => ({
|
||||
...res,
|
||||
// 选择状态, 'info表示未选' ， primary 表示蓝色， sunccess 表示绿色， error 表示红色
|
||||
select_status: 'info'
|
||||
})),
|
||||
})
|
||||
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) => {
|
||||
// emit('click_option', props.item.qnsId, analysisVo)
|
||||
|
||||
// // 无论什么类型如果表里已经有了，再次点击就是弹出
|
||||
if (props.item.my_answer.includes(analysisVo.itemId)) {
|
||||
// console.log('无论什么类型如果表里已经有了，再次点击就是弹出', 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
|
||||
}
|
||||
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]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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;
|
||||
line-height: 40rpx;
|
||||
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>
|
||||
Reference in New Issue
Block a user