根据订单状态显示不同颜色表情

一：在help中根据状态定义对应css 

module Admin::Order::DetailsHelper
  # 显示彩色问题状态
  PS_BG_COLOR = {"finish"=>"green","un_catch"=>"yellow","under_take"=>"red"}
  def color_problem_status(detail)
    %Q{<span class="ui circular label #{PS_BG_COLOR[detail.problem_status]} basic"> #{detail.i18n_attr_problem_status} </span>} 
  end
end

二：通过block来定义更灵活的显示。

<%= show_created_by_name(@company.created_by) do |name|%>  
        <div class="column column_new">创建人: <%= name%> </div>  
<% end %>  
  
def show_created_by_name(created_by, &block)  
    name = CreatedBy.display_name(created_by)  
    if block_given?  
      capture(name,&block) if name.present?  
    else  
      name  
    end  
end

三：通过和i8n来定义状态css

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

下载

module Website
  module Ext
    module ActiveRecord
      module I18n
        extend ActiveSupport::Concern
        I18N_ATTR_PREFIX = /^i18n_attr_/
        NAME_OF_PREFIX = /^name_of_/
        def method_missing(method,opt={}, *args, &block)
          c = method.to_s
          col = c.sub(I18N_ATTR_PREFIX,'')
          if c =~ I18N_ATTR_PREFIX 
            col = c.sub(I18N_ATTR_PREFIX,'')
            display_model_status(self.class, col, self.send(col.to_sym),opt) if self.class.column_names.include?(col)
          elsif c =~ NAME_OF_PREFIX 
            col = c.sub(NAME_OF_PREFIX,'')
            eval("#{self.class.name}::#{col.upcase}.invert[self.#{col}]") if eval("#{self.class.name}.constants.include?(:#{col.upcase})")
          else
            super
          end
        end
        def display_model_status(model,attribute,value,opt={})
          return if value.nil?
          if ['active'].include?(attribute.to_s.strip)
            s = ::I18n.t("activerecord.status.#{attribute}.#{value}", default: value) 
          else
            s = ::I18n.t("activerecord.status.#{model.name.underscore}.#{attribute}.#{value}", default: value)
          end
          
          if opt[:css]
            s = %Q{<span class="ui circular label #{model.name.underscore} #{attribute} #{value} basic"> #{s} </span>}  
          end
          s
        end
      end
    end
  end
end
调用：
<%=raw detail.i18n_attr_problem_status(css:true) %>
<%=raw detail.i18n_attr_problem_status %>
enum problem_status: {
    "normal" => 0 ,
    "finish" =>1,
    "un_catch" => 10,
    "under_take" =>11
  }
i8n：
problem_status:
          'normal': ''  
          'finish': '问题订单已处理'
          'un_catch': '问题订单未处理'
          'under_take': '问题订单处理中'  
css：
/*问题订单状态颜色*/
.order_detail.problem_status.finish{
    color:#21BA45 !important;
    background-color: #fff !important; 
    border: 1px solid #21BA45 !important; 
}
.order_detail.problem_status.un_catch{
    color:#FBBD08 !important;
    background-color: #fff !important; 
    border: 1px solid #FBBD08 !important; 
}
.order_detail.problem_status.under_take{
    color:#DB2828 !important;
    background-color: #fff !important; 
    border: 1px solid #DB2828 !important; 
}