hainan_2024/h5/pages/main/question/src/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)
	}

	const convertToRoman = (num) => {
		const romanNumerals = [{
				value: 1000,
				symbol: 'M'
			},
			{
				value: 900,
				symbol: 'CM'
			},
			{
				value: 500,
				symbol: 'D'
			},
			{
				value: 400,
				symbol: 'CD'
			},
			{
				value: 100,
				symbol: 'C'
			},
			{
				value: 90,
				symbol: 'XC'
			},
			{
				value: 50,
				symbol: 'L'
			},
			{
				value: 40,
				symbol: 'XL'
			},
			{
				value: 10,
				symbol: 'X'
			},
			{
				value: 9,
				symbol: 'IX'
			},
			{
				value: 5,
				symbol: 'V'
			},
			{
				value: 4,
				symbol: 'IV'
			},
			{
				value: 1,
				symbol: 'I'
			}
		];
		let roman = '';
		for (let i = 0; i < romanNumerals.length; i++) {
			while (num >= romanNumerals[i].value) {
				num -= romanNumerals[i].value;
				roman += romanNumerals[i].symbol;
			}
		}
		return roman;
	}

	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 v-if="$props.index.includes('-')" class="question_index_wrapper">
					<text v-if="$props.index.split('-').length === 2">({{ $props.index.split('-')[1] }}).</text>
					<text v-else>{{ convertToRoman(Number($props.index.split('-')[$props.index.split('-').length - 1])) }}.</text>
				</text>
				<text v-else 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>
	.circle_question_wrapper {
		display: inline-block;
		width: 24rpx;
		height: 24rpx;
		font-size: 12rpx;
		border-radius: 999rpx;
		border: 1rpx #333333 solid;
		display: flex;
		align-items: center;
		line-height: 26rpx;
		justify-content: center;
		font-weight: bold;
	}

	.question_question_wrapper {
		margin-left: 10rpx;
	}

	.question_index_wrapper {
		margin-left: 5rpx;
		display: flex;
	}

	.must_dot_wrapper {
		color: #DB2C0F;
	}

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

	.question_block_wrapper {
		width: calc(710rpx - 40rpx);
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		padding: 36rpx 20rpx;
		margin: 16rpx auto 0;
	}
</style>