workApp/components/customRadio.vue

<template>
	<view class="custom_radio_group">
		<view 
			v-for="(item, idx) in options" 
			:key="idx" 
			class="radio_item"
			:class="{ active: modelValue === item.value }"
			@click="handleClick(item.value)"
		>
			<view class="radio_dot" :class="{ checked: modelValue === item.value }">
				<view v-if="modelValue === item.value" class="radio_inner"></view>
			</view>
			<text class="radio_text">{{ item.label }}</text>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	modelValue: {
		type: [Number, String],
		default: 0
	},
	options: {
		type: Array,
		default: () => []
	}
});

const emit = defineEmits(['update:modelValue']);

const handleClick = (value) => {
	emit('update:modelValue', value);
};
</script>

<style lang="scss" scoped>
.custom_radio_group {
	display: flex;
	gap: 24rpx;

	.radio_item {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.radio_dot {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 2rpx solid #DCDFE6;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			&.checked {
				border-color: #2E64FA;
				background-color: #FFFFFF;

				.radio_inner {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: #2E64FA;
				}
			}
		}

		.radio_text {
			font-size: 28rpx;
			color: #333333;
		}
	}
}
</style>