拼团问题修复
This commit is contained in:
66
userPackage/components/status.vue
Normal file
66
userPackage/components/status.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user