小程序代码简化?

Question

这是一个订单列表页面, 项右上角的状态中文和颜色值, wxml加了大量的逻辑判断

<view class="fs-2 fw-bold {{ item.status === 'WAIT' ? 'status-wait' : item.status === 'COMPLETE' ? 'status-complete' : item.status === 'CANCEL' ? 'status-cancel' : '' }}">
  {{ item.status === 'WAIT' ? statuses[1] : item.status === 'COMPLETE' ? statuses[2] : item.status === 'CANCEL' ? statuses[3] : statuses[0] }}
</view>

大概意思是这样的, 每个列表项 item 都有一个 status, 在 class 里用了一堆三元运算符进行判断, 指定字体颜色

.status-wait {
  color: rgb(200, 200, 0);
}

.status-delivery {
  color: rgb(0, 0, 190);
}

.status-complete {
  color: rgb(0, 190, 0);
}

.status-cancel {
  color: rgb(190, 0, 0);
}

我目前想到的简化方案是这样子 class="fs-2 fw-bold {{ 'status-' + item.status.toLowerCase() }}" 转小写再拼接

但是这种写法不支持

想问下一般像这种情况, 根据不同状态调用不同的 class, 怎么处理会比较好? 这个功能, 其他页面都有用到的, 想封装一下, 有没有什么好一点的解决方案?

Answer 1

拆分组件、变量塞到item里、if else写模板

Answer 2

我倒是觉得可以使用wxs，试试如下写法

//utils.wxs
<wxs module="foo">
    var getStatusClassMap = function(v) {
      var statusClassMap = {
        'WAIT':'status-wait',
        'COMPLETE':'status-complete',
        'CANCEL':'status-cancel',
      }
      var statusClassStr = statusClassMap[v] || ''
      var classStr = 'fs-2 fw-bold '+ statusClassStr
      return classStr
    }
    module.exports = {
        getStatusClassMap: getStatusClassMap
    };  
</wxs>


//wxml
<wxs src='./utils.wxs' module="foo"></wxs>
<view class="{{foo.getStatusClassMap(item.status)}}"></view>