hainan_2024/h5/pages/main/question/src2/question.vue

<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 InputComponent from './input.vue'
	import SelectComponent from './select.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 setValue = (index, value) => {
		$emit('setValue', index, value)
	}

	onMounted(() => {
		mountedAction()
	})
</script>
<template>
	<view>
		<view :class="[
			$props.index.includes('-') ? '' : 'question_block_wrapper'
		]">
			<view class="question_title_wrapper">
				<text class="must_dot_wrapper">*</text>
				<text class="question_index_wrapper">{{ $props.index }}.</text>
				<text class="question_question_wrapper">{{ $props.info['question'] }}</text>
			</view>
			<view v-if="$props.info.type === 'input'">
				<InputComponent @setValue="setValue" :index="$props.index" :info="$props.info"></InputComponent>
			</view>
			<view v-else-if="$props.info.type === 'select'">
				<SelectComponent @setValue="setValue" :index="$props.index" :info="$props.info"></SelectComponent>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.question_question_wrapper {
		margin-left: 10rpx;
	}

	.question_index_wrapper {
		margin-left: 5rpx;
	}

	.must_dot_wrapper {
		color: #DB2C0F;
	}

	.question_title_wrapper {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 28rpx;
	}

	.question_block_wrapper {
		width: calc(100% - 80rpx);
		margin: 16rpx auto 0;
		padding-top: 40rpx;
	}
</style>