技術標籤：微信小程式javascriptcss

根據返回的stsId確定發貨狀態

 <view class="order-card" wx:for="{{productList}}">
 	<view class="order-sts color{{item.stsId}}">{{['已取消','待支付','待發貨','待收貨','已完成'][item.stsId]}}</view>
 </view>	

js

productList: [
      {
        productId:
 
 0,
        username:"小美女呀小美女",
        productName: "白色短袖",
        stsId:"2",
        productNum: '8641231564841541564'
      }
 ]

根據stsId給view標籤添加了不同的class名稱

css:

/* 已取消 */
.color0{
  color: #909090;
}
/* 待支付 */
.color1{
  color: #E00900;
}
/* 待發貨 */
.color2{
  color: #FD7E00;
}
/* 待收貨 */
 

.color3{
  color: #29B9A5;
}

最終效果