109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<template>
|
||
<!-- 显示中文状态名称，而非原始英文值 -->
|
||
<text class="status" :class="returnClass">{{ statusName }}</text>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
// 接收父组件传入的英文状态值（ing/wait_verify等）
|
||
const props = defineProps({
|
||
status: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
// 状态映射表：英文值 → 中文名称 + 样式类
|
||
const statusMap = ref([{
|
||
name: '进行中', // 显示的中文
|
||
value: 'ing', // 匹配的英文状态
|
||
class: 'success' // 样式类
|
||
},
|
||
{
|
||
name: '待核销',
|
||
value: 'wait_verify',
|
||
class: 'warning'
|
||
},
|
||
{
|
||
name: '已核销',
|
||
value: 'finish',
|
||
class: 'primary' // 新增已核销专属样式
|
||
},
|
||
{
|
||
name: '退款中',
|
||
value: 'refunding',
|
||
class: 'error' // 退款中复用error样式
|
||
},
|
||
{
|
||
name: '已退款',
|
||
value: 'refund',
|
||
class: 'disabled' // 已退款复用error样式
|
||
},
|
||
{
|
||
name: '已取消',
|
||
value: 'cancel',
|
||
class: 'disabled' // 新增已取消样式
|
||
},
|
||
{
|
||
name: '超时',
|
||
value: 'timeout',
|
||
class: 'disabled' // 超时复用已取消样式
|
||
}
|
||
])
|
||
|
||
// 计算要显示的中文名称
|
||
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">
|
||
.status {
|
||
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 {
|
||
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> |