請問這種代碼有哪些優(yōu)化寫法？

最近在重構項目，看到了代碼里有這樣的結構，想進行優(yōu)化，不知道有哪些合適的寫法？

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

存在的問題：

有幾個 v-if v-else-if 里面的條件判斷比較多，不直觀
用到了很多的 parseFloat(number).tofixed(n),并且有的數(shù)值還要根據(jù)payment_type進行區(qū)分，有時候直接顯示數(shù)值，有時候要根據(jù)已有的數(shù)值進行計算再展示；并且我看到好些個頁面都有這種類似的結構，能不能有個統(tǒng)一一點的優(yōu)雅寫法？
還有就是后臺開發(fā)同事跟我說，不能直接展示這些數(shù)據(jù)，因為后臺返回的數(shù)據(jù)可能存在負數(shù)，如果有負數(shù)要統(tǒng)一展示成0

回答

編輯回答

蝶戀花

閑來無事、瞎答一通、僅供參考、概不負責................

HTML里的狀態(tài)合并根據(jù)請求的數(shù)據(jù)顯示不同的結果包括內容和class eg:

    <span :class="infoStatus.class">{{infoStatus.message}}</span>

設置一個狀態(tài)對象顯示 eg:

    data() {
        return {
            infoStatus: {
                class: [],
                message: '待支付'
            }
        }
    }

定義一個方法處理對象接收參數(shù) eg:

    methods: {
        statusJudge(item, message){
            if (item.payment_amount === 1 ){
                return
            }
            //  如果你的后端給你message的話 就可使用message替換文字描述
            if (status ===1) {
                this.infoStatus.message = '待支付'
                this.infoStatus.class = ['error','show']
            } else if ( status ===3 || status === 6 ) {
                this.infoStatus.message = '已支付'
                this.infoStatus.class = ['danger','hide']
            } else if ( status ===3 || status === 6 ) {
                this.infoStatus.message = '已超時'
                this.infoStatus.class = ['xxx','sss']
            }
        }
    }

在你獲取或者改變狀態(tài)的請求中調用方法 eg:

    mounted() {
        axios('url').then((res) =>{
            let item = res.data;
            this.statusJudge(item, item.message)
        })
    },

不寫了。。。

2018年8月28日 05:57

編輯回答