xiamen-sb-uniapp/components/my-badge/my-badge.vue

<template>
    <view class="f-size-24 state-base-class" :style="[showStyle]">{{ text }}</view>
</template>

<script>
export default {
    props: {
        text: {
            // 按钮显示文本
            type: String,
            default: ''
        },
        status: {
            // 按钮显示文本
            type: String,
            default: 'success'
        },
        badgeStyle: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {};
    },
    computed: {
        showStyle: function () {
            let myShowStyle = { ...{ color: '#52c41a' } };
            if (this.status === 'success') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#00b148', 'background-color': '#e2ffee' }
                };
            }
            if (this.status === 'error') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#FF3C3C', 'background-color': '#FFEBEB' }
                };
            }
            if (this.status === 'default') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#999', 'background-color': '#EEEEEE' }
                };
            }
            if (this.status === 'processing') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#0082FF', 'background-color': '#E4F5FF' }
                };
            }
            if (this.status === 'green') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#00b148', 'background-color': '#e2ffee' }
                };
            }
            if (this.status === 'warning') {
                myShowStyle = {
                    ...myShowStyle,
                    ...{ color: '#FFA200', 'background-color': '#FFF4DD' }
                };
            }
            myShowStyle = { ...myShowStyle, ...this.badgeStyle };
            return myShowStyle;
        }
    },
    created() {},
    updated: function () {}
};
</script>

<style scoped>
.state-base-class {
    padding: 10rpx 30rpx;
    border-radius: 24rpx 0rpx 0rpx 24rpx;
}
</style>