套餐问题修复

userPackage/components/status.vue

@@ -1,44 +1,67 @@
 <template>
-	<text class="status  "  :class="returnClass">{{status}}</text>
+	<!-- 显示中文状态名称，而非原始英文值 -->
+	<text class="status" :class="returnClass">{{ statusName }}</text>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 
-	const props=defineProps({
-		status:{
-			default:''
+	// 接收父组件传入的英文状态值（ing/wait_verify等）
+	const props = defineProps({
+		status: {
+			type: String,
+			default: ''
 		}
 	})
-	const list =ref( [{
-			name: '全部',
-			value: ''
-		},
-		{
-			name: '待成团',
-			value: '',
-			class:'success'
+
+	// 状态映射表：英文值 → 中文名称 + 样式类
+	const statusMap = ref([{
+			name: '进行中', // 显示的中文
+			value: 'ing', // 匹配的英文状态
+			class: 'success' // 样式类
 		},
 		{
 			name: '待核销',
-			value: '',
-			class:'warning'
+			value: 'wait_verify',
+			class: 'warning'
 		},
 		{
 			name: '已核销',
-			value: ''
+			value: 'finish',
+			class: 'primary' // 新增已核销专属样式
 		},
 		{
-			name: '退款',
-			value: '',
-			class:'error'
+			name: '退款中',
+			value: 'refunding',
+			class: 'error' // 退款中复用error样式
 		},
+		{
+			name: '已退款',
+			value: 'refund',
+			class: 'disabled' // 已退款复用error样式
+		},
+		{
+			name: '已取消',
+			value: 'cancel',
+			class: 'disabled' // 新增已取消样式
+		},
+		{
+			name: '超时',
+			value: 'timeout',
+			class: 'disabled' // 超时复用已取消样式
+		}
 	])
-	const returnClass=computed(()=>{
-		const item=list.value.find(v=>props.status.includes(v.name))
-		return item?item.class:''
+
+	// 计算要显示的中文名称
+	const statusName = computed(() => {
+		const item = statusMap.value.find(v => v.value === props.status)
+		return item ? item.name : props.status // 未匹配到则显示原始值
 	})
 
+	// 计算要绑定的样式类
+	const returnClass = computed(() => {
+		const item = statusMap.value.find(v => v.value === props.status)
+		return item ? item.class : ''
+	})
 </script>
 
 <style lang="scss">
@@ -46,21 +69,41 @@ import { computed } from 'vue'
 		padding: 8rpx 18rpx;
 		border-radius: 8rpx;
 		border: 2rpx solid #333;
+		font-size: 24rpx;
 
+		// 进行中
 		&.success {
 			border-color: rgba(123, 209, 54, 1);
 			color: rgba(123, 209, 54, 1);
 			background: rgba(123, 209, 54, 0.12);
 		}
-		&.warning{
+
+		// 待核销
+		&.warning {
 			border-color: rgba(255, 141, 40, 1);
 			color: rgba(255, 141, 40, 1);
 			background: rgba(255, 141, 40, 0.12);
 		}
+
+		// 已核销（新增）
+		&.primary {
+			border-color: rgba(41, 148, 255, 1);
+			color: rgba(41, 148, 255, 1);
+			background: rgba(41, 148, 255, 0.12);
+		}
+
+		// 退款中/已退款
 		&.error {
 			border-color: #FF1C1C;
 			color: #FF1C1C;
 			background: rgba(255, 28, 28, 0.18);
 		}
+
+		// 已取消/超时（新增）
+		&.disabled {
+			border-color: rgba(153, 153, 153, 1);
+			color: rgba(153, 153, 153, 1);
+			background: rgba(153, 153, 153, 0.12);
+		}
 	}
 </style>