How can the data in the red box be displayed in the black box classification according to the status?

<import src="/pages/common/navtop/navtop.wxml"/><template is="nav" data="{ 
    { 
    navH:navH, barH:barHeight, title: ' Check the order ', bgColor: '#fff', fontColor: '#000', type: ''}}"></template><movable-area style="height: calc(100% - { 
    { 
    navH}}px - 60px); top: { 
    { 
    navH}}px;"> <movable-view class="movable-view" out-of-bounds="false" direction="vertical" y="500rpx" bindchange="moveCoupon1"> <view class="add-case" hover-class="none" hover-stop-propagation="false" bindtap="goToCreateOrder"> new case </view> </movable-view></movable-area><view class="main-container" style="padding-top:{ 
    { 
    navH}}px;" hover-class="none" hover-stop-propagation="false"> <!--  Scroll navigation  --> <view class="bg"> <view class="nav"> <scroll-view class="scrollview" scroll-x="true"> <view class="scrollview"> <block wx:for="{ 
    { 
    scrollViewTitle}}" wx:key="item"> <view> <view class="{ 
    { 
    currentIndex==index?'selected':'normal'}}" id="{ 
    { 
    index}}" bindtap="changeCurrentIndex"> { 
    { 
    item}} </view> </view> </block> </view> </scroll-view> </view> </view> <!--  Content  --> <swiper current="{ 
    { 
    currentIndex}}" style="height:{ 
    { 
    winHeight}}rpx "> <!--  All  --> <swiper-item> <scroll-view style="height:{ 
    { 
    winHeight - 50}}rpx "> 111 </scroll-view> </swiper-item> <!--  Not submitted  --> <swiper-item> <scroll-view> 222 </scroll-view> </swiper-item> <!--  Not submitted  --> <swiper-item> <scroll-view> 333 </scroll-view> </swiper-item> <!--  Not submitted  --> <swiper-item> <scroll-view> 444 </scroll-view> </swiper-item> </swiper> <view wx:if="{ 
    { 
    orderList.length}}" class="order-container" hover-class="none" hover-stop-propagation="false"> <view wx:for="{ 
    { 
    orderList}}" wx:key="item" class="item" hover-class="none" hover-stop-propagation="false" style="background: #ffff url(/images/logo-bg2.jpg) no-repeat right bottom / 450rpx 302rpx;" data-sn="{ 
    { 
    item.sn}}" bindtap="oderdetail"> <view class="head" hover-class="none" hover-stop-propagation="false"> <view > <view class="name" hover-class="none" hover-stop-propagation="false">{ 
    { 
    item.name}}</view> <view> <text class="sex" class="name" hover-class="none" hover-stop-propagation="false">{ 
    { 
    item.Sex ==0 ?' Woman ':' male '}}</text> <text class="name" hover-class="none" hover-stop-propagation="false">{ 
    { 
    item.Age}} year </text> </view> </view> <view class="num-time" hover-class="none" hover-stop-propagation="false"> <view hover-class="none" hover-stop-propagation="false"> The order no. ：{ 
    { 
    item.sn}}</view> <view hover-class="none" hover-stop-propagation="false"> Order time ：{ 
    { 
    item.creation_time}}</view> </view> <!-- <view class="status" hover-class="none" hover-stop-propagation="false">{ 
    { 
    item.statusText}}</view> --> </view> <view class="term" hover-class="none" hover-stop-propagation="false"> <text selectable="false" space="false" decode="false"> Service type ：{ 
    { 
    item.orderType}}</text> <text selectable="false" space="false" decode="false"> Patient type ：{ 
    { 
    item.hzlx}}</text> <text selectable="false" space="false" decode="false"> Model categories ：{ 
    { 
    item.model_type}}</text> <text selectable="false" space="false" decode="false"> Processing methods ：{ 
    { 
    item.jgfs}}</text> <text selectable="false" space="false" decode="false"> Treatment area ：{ 
    { 
    item.zlqy}}</text> </view> </view> </view> <view wx:if="{ 
    {!orderList.length && nodataStatus}}" class="no-data flex-center" hover-class="none" hover-stop-propagation="false"> <image src="/images/nodata.png" lazy-load="false" binderror="" bindload=""></image> </view></view>