通过订单状态来展示不同的样式文字
 
 
// tob首页(订单列表)
export const orderList = [
  {
    state: '2',
    text: '申办中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '3',
    text: '待审查',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '4',
    text: '待审批',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '5',
    text: '制证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '6',
    text: '发证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '7',
    text: '已完成',
    color: '#3B65E2',
    backgroundColor: '#E8EEFF',
  },
  {
    state: '8',
    text: '已取消',
    color: '#EC461E',
    backgroundColor: '#FFEFEB',
  },
];

export const orderMap = orderList.reduce((accumulator, currentObj) => {
  accumulator[currentObj.state.toString()] = currentObj;
  return accumulator;
}, {});

export const getOrderItemDescription = (state) => {
  return {
    text: orderMap[state].text,
    color: orderMap[state].color,
    backgroundColor: orderMap[state].backgroundColor,
  };
};

 
调用
 
 const { color, backgroundColor, text } = getOrderItemDescription(
        gzOrderDetail.state
      );

0 前言
 
电商平台所有模块中，订单系统作为比较核心的模块，它决定了整个流程能不能顺畅的执行，起着承上启下的作用（下单、支付、履约、售后、清结算、营销活动）。
 
订单系统的设计主要需要考虑订单字段、业务流程、状态机三大个方面，这些内容决定了订单系统稳定性与扩展性。
 
 
2 订单流程
 
订单流程指整个订单从产生到完成的整个流转过程，它包括正向流程和逆向的流程。
 
 
3 订单状态机
 
状态机表示了一笔订单的生命周期，按照一定的方向通过触发不同的事件产生数据流转的过程。
 
 
 
状态机v2.0
 
随着业务快速发展，我们的状态机也在逐步完善，在完善的过程中我们遇到两个问题
 
如何提供更多的订单状态来描述现实世界？
在提供更多的订单状态后，同时节省状态机维护成本？
为了解决这两个问题，我们采用大状态+小状态的设计。主、子订单上只维护大状态流转，抽象出物流、售后两个领域分别去维护各自的小状态。这样保证了主子订单上的状态不会特别多，同时又可以通过不同的领域中的小状态去满足业务需求。
 
主、子订单变更规则
 
正向状态是当全部子订单向前流转时，主订单才会向前走；
逆向状态是当子订单全部变成15(售后中) 主订单才变售后中.   子订单全部变成16(售后完成)主订单才变售后完成  子订单全部变成11(取消)主订单才变取消；
 
 
 
状态机在APP端的体现
 
团长C端提货界面
 
 
用户C端提货界面
 
 
 
 
思考与改进
 
1 目前物流领域的状态机只针对团长端开放，并没有针对C端用户开放。WMS和TMS作业都是按照团长+SKU纬度，团长收到货后承担这二次分拣的职责，由团长决定用户的货是否真的送达，所以WMS和TMS回传给订单的消息对用户是不准确的。
 
问题举例
 
小明在A团长下单5个苹果
 
小红在A团长下单5个苹果
 
23点仓库开始作业，发现一共只有5个苹果。
 
WMS TMS 下发出库、配送指令 A团长+5个苹果
OMS收到指令按照团长纬度更新订单状态，此时小明、小红的订单状态都被更新为司机送达
团长收到5个苹果后，选择把苹果全部给和他关系较好的小明。
此时小红没收到货、同时看到自己订单状态为司机送达就会很懵逼，这也是目前为什么履约状态只针对团长开放的原因。谁到货谁没到货团长线下决定的。
 
 
 
 
 
 
 
 
 
 
 
 

之前做小程序的时候有一个需求是订单列表有几个不同订单状态的选项卡，要求之间点不同的订单状态页面不刷新，而且也要做分页，所以比较棘手的问题就是每次分页的数据不会错乱，要准确的插入到指定的状态之中去。
我的思路是这样的，page,offset,total,dataend全部设置成数组，每种状态存不同data每次请求数据的时候都判断下当前在哪个选项卡里面，通过这个再插入到指定数组里面。
以下代码：
//设置变量
data{
//各个状态的数据是否结束
dataEnd: [false, false, false, false, false],
//各个状态的页
page:[0,0,0,0,0],
allData:false,//全部订单数据
dfkData: false,//待付款订单数据
dfhData: false,//待发货订单数据
dshData: false,//待收货订单数据
ywcData: false,//已完成订单数据
},

//获取当前状态
var index = this.data.activeIndex;
根据此index放入设置好的各种data里面

一：在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



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; 
}