|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年9月11日 19:24:50
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
$api,
|
|
|
$response
|
|
|
} from '@/api'
|
|
|
import {
|
|
|
useStore
|
|
|
} from '@/store'
|
|
|
import QuestionComponent from './question.vue'
|
|
|
const $emit = defineEmits(['setValue'])
|
|
|
const $store = useStore()
|
|
|
const $props = defineProps({
|
|
|
info: {
|
|
|
type: Object,
|
|
|
default: () => {
|
|
|
return {
|
|
|
id: 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
index: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const mountedAction = () => {
|
|
|
|
|
|
}
|
|
|
|
|
|
const selectClick = (e) => {
|
|
|
if ($props.info.value === e) {
|
|
|
$emit('setValue', $props.index, '')
|
|
|
} else {
|
|
|
$emit('setValue', $props.index, e)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const setValue = (index, value) => {
|
|
|
$emit('setValue', index, value)
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
mountedAction()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view v-for="(i,k) in $props.info.select" :key="k" class="question_select_item_wrapper" @click="selectClick(k)">
|
|
|
<view class="select_checkbox_wrapper" :class="[
|
|
|
$props.info.value === k ? 'active' : ''
|
|
|
]"><uni-icons color="#ffffff" type="checkmarkempty" size="20"></uni-icons>
|
|
|
</view>
|
|
|
<text class="question_content_wrapper">{{ i.content }}</text>
|
|
|
</view>
|
|
|
<view v-if="$props.info.value !== '' && $props.info.select[$props.info.value].children.length !== 0">
|
|
|
<view class="bind_tip_wrapper">请回答以下关联问题</view>
|
|
|
<view v-for="(ii,ik) in $props.info.select[$props.info.value].children" :key="ik">
|
|
|
<view class="children_break_wrapper"></view>
|
|
|
<QuestionComponent @setValue="setValue" :info="ii" :index="`${$props.index}-${String(ik + 1)}`">
|
|
|
</QuestionComponent>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.children_break_wrapper {
|
|
|
height: 20rpx;
|
|
|
}
|
|
|
|
|
|
.bind_tip_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 26rpx;
|
|
|
color: #828282;
|
|
|
line-height: 60rpx;
|
|
|
margin-top: 32rpx;
|
|
|
}
|
|
|
|
|
|
.question_content_wrapper {
|
|
|
width: calc(100% - 40rpx - 15rpx);
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.question_select_item_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.select_checkbox_wrapper {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
background: #FFFFFF;
|
|
|
color: #ffffff;
|
|
|
border-radius: 50%;
|
|
|
border: 2px solid #D9D9D9;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.select_checkbox_wrapper.active {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
background: #239EA3;
|
|
|
border-radius: 50%;
|
|
|
border: 2px solid #239EA3;
|
|
|
}
|
|
|
</style> |