66 lines
1.1 KiB
Vue
66 lines
1.1 KiB
Vue
<template>
|
|
<text class="status " :class="returnClass">{{status}}</text>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props=defineProps({
|
|
status:{
|
|
default:''
|
|
}
|
|
})
|
|
const list =ref( [{
|
|
name: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
name: '待成团',
|
|
value: '',
|
|
class:'success'
|
|
},
|
|
{
|
|
name: '待核销',
|
|
value: '',
|
|
class:'warning'
|
|
},
|
|
{
|
|
name: '已核销',
|
|
value: ''
|
|
},
|
|
{
|
|
name: '退款',
|
|
value: '',
|
|
class:'error'
|
|
},
|
|
])
|
|
const returnClass=computed(()=>{
|
|
const item=list.value.find(v=>props.status.includes(v.name))
|
|
return item?item.class:''
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.status {
|
|
padding: 8rpx 18rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #333;
|
|
|
|
&.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);
|
|
}
|
|
&.error {
|
|
border-color: #FF1C1C;
|
|
color: #FF1C1C;
|
|
background: rgba(255, 28, 28, 0.18);
|
|
}
|
|
}
|
|
</style> |