DRF中后台返回不同状态，前端展示不同状态样式

后端

class AuctionModelSerializer(serializers.ModelSerializer):
    status = serializers.SerializerMethodField()
    items = serializers.SerializerMethodField()
    cover = serializers.CharField()

    class Meta:
        model = models.Auction
        fields = ['id', 'title', 'status', 'cover', 'total_price', 'look_count', 'goods_count', 'items']

    def get_status(self, obj):
        status_class_mapping = {
            2: 'preview',
            3: 'auction',
            4: 'stop'
        }
        return {'text': obj.get_status_display(), 'class': status_class_mapping.get(obj.status)}

    def get_items(self, obj):
        queryset = models.AuctionItem.objects.filter(auction=obj)[0:5]
        return [row.cover.name for row in queryset]

前端

<view>
  <text class="status {{auctionDetail.status.class}}">{{auctionDetail.status.text}}</text>
  <text class="time">距离开始 34时 42分 33秒</text>
</view>