最近在重构项目，看到了代码里有这样的结构，想进行优化，不知道有哪些合适的写法？

<li class="card-wrap" v-for="(item, idx) in orderList" :key="idx" @click="toDetail(item)">
            <div class="card">
              <div class="card-hd">
                <div class="text-shop">
                  <span>{{item.info.merchant}}</span>
                  <span class="text-state text-danger clearfix" v-if="item.status === 1 && parseFloat(item.payment_amount) !== -1">待支付</span>
                  <span class="text-state" v-else-if="item.status === 3 || item.status === 6 && parseFloat(item.payment_amount) !== -1">已支付</span>
                  <span class="text-state" v-else-if="item.status === 5 && parseFloat(item.payment_amount) !== -1">已超时</span>
                </div>
                <div v-if="parseFloat(item.payment_amount) !== -1" class="text-transform font-tp-m">
                  <span>{{item.payment_type==1 ? parseFloat(item.payment_amount).toFixed(4) :  parseFloat(item.payment_amount).toFixed(2) }} {{'paymentTypeName.name'}}</span>
                  <i class="icon-conversion"></i>
                  <span>{{item.payment_type==1 ? parseFloat(item.payment_amount).toFixed(4) : (parseFloat(item.payment_amount)/parseFloat(item.ex_rate)).toFixed(8)}} {{item.address.type}}</span>
                </div>
                <div v-else class="text-transform font-tp-m">
                  <span>{{parseFloat(item.payment_amount_settled).toFixed(4)}} {{item.address.type}}</span>
                </div>
                <div class="text-pay-state">
                  <div>
                    <p class="desc">已支付</p>
                    <span class="font-tp-m content">{{parseFloat(item.payment_amount_settled).toFixed(8)}}</span>
                    <span class="font-tp-m content">{{item.payment_type === 1 ? item.address.type : 'paymentTypeName.name'}}</span>
                  </div>
                  <div>
                    <p class="desc">待支付</p>
                    <span class="font-tp-m content">{{parseFloat(item.payment_amount_unsettled).toFixed(8)}}</span>
                    <span class="font-tp-m content">{{item.payment_type === 1 ? item.address.type : 'paymentTypeName.name'}}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>

存在的问题：

1. 有几个 v-if v-else-if 里面的条件判断比较多，不直观
2. 用到了很多的 parseFloat(number).tofixed(n),并且有的数值还要根据payment_type进行区分，有时候直接显示数值，有时候要根据已有的数值进行计算再展示；并且我看到好些个页面都有这种类似的结构，能不能有个统一一点的优雅写法？
3. 还有就是后台开发同事跟我说，不能直接展示这些数据，因为后台返回的数据可能存在负数，如果有负数要统一展示成0