feat: 提交页面

src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue

@@ -4,7 +4,14 @@
 			v-for="item in options"
 			:key="item.key"
 			type="button"
-			:class="['radio-button', { 'is-active': modelValue === item.key }]"
+			:class="[
+				'radio-button',
+				{
+					'is-active': multiple
+						? selectedValues.includes(item.key)
+						: modelValue === item.key
+				}
+			]"
 			@click="selectOption(item.key)"
 		>
 			{{ item.name }}
@@ -13,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue"
+
 interface Option {
 	name: string | number
 	value: string | number | boolean
@@ -21,15 +30,40 @@ interface Option {
 }
 
 const props = defineProps<{
-	modelValue: string | number | boolean | null // v-model 绑定的值
+	modelValue: string | number | boolean | Array<string | number | boolean> | null
 	options: Option[] // 按钮选项数组
+	multiple?: boolean // 是否支持多选，默认为 false
 }>()
 
 const emit = defineEmits<{
 	(e: "update:modelValue", value: any): void
 }>()
 
+const multiple = props.multiple === true
+
+const selectedValues = computed(() => {
+	if (!multiple) {
+		return typeof props.modelValue === 'undefined' || props.modelValue === null
+			? []
+			: [props.modelValue]
+	}
+
+	return Array.isArray(props.modelValue) ? props.modelValue : []
+})
+
 const selectOption = (value: any) => {
+	if (multiple) {
+		const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+		const index = current.indexOf(value)
+		if (index >= 0) {
+			current.splice(index, 1)
+		} else {
+			current.push(value)
+		}
+		emit("update:modelValue", current)
+		return
+	}
+
 	if (props.modelValue !== value) {
 		emit("update:modelValue", value)
 	}