<template>
  <div id="app" style="width:300px;height:500px;overflow-y:auto;margin:0px auto;">
       <div v-for="obj in sortByKey" style="width:100%;height:133px;border:1px solid black">
             <p>訂單號:{{obj.order_id}}</p>
             <p>商品具體資訊:{{obj.spname}}</p>
             <p >商品狀態:<span style="color:red;">{{changeType(obj.pay_status)}}</span></p>
       </div>
  </div>
</template>
<script>
export default {
 name: 'app',
    data () {
      return {
          data1:[
                  { 
                    "order_id":156,
                    "spname":"vivo NEX ",
                    "pay_status":1,
                  },
                  {
                    "order_id":124,
                    "goods_id":42,
                    "spname":"法國進口紅酒",
                    "pay_status":3,
                  },
                  {
                    "order_id":124,
                    "goods_id":42,
                    "spname":"法拉利",
                    "pay_status":3,
                  },
                  {
                    "order_id":124,
                    "goods_id":42,
                    "spname":"oppofindX",
                    "pay_status":1,
                  },
                   {
                    "order_id":124,
                    "goods_id":42,
                    "spname":"oppofindX",
                    "pay_status":2,
                  }
              ]
    }
    },
    components: {

    },
    computed:{
      sortByKey: function() {
        return this.data1.sort((a,b)=>a.pay_status-b.pay_status);//升序
      }
    },
    methods: {
      changeType(str){
        return str==1? "待發貨":str==2?'已收貨':"已完成";
      },
  }
}
</script>

<style>
</style>