Day24:24 - 结帐服务(8) - 前端 - 显示总订单资料、订单详情

Nnọọ，我是Charlie！
在Day23当中我们完成了订单资料的後端API，而今天我们将完成订单显示的前端。

================================◉‿◉=================================

首先是总订单资料的部分，在api\order.js当中新增getAllOrderData方法：

export function getAllOrderData(username,token){
  return axios.get(`http://${host()}:${port()}/userorder`,{
    params:{
      "username":username
    },
    headers:{
      "AUTHORIZATION":token
    }
  })
}

接着在orderPage.vue当中创建created方法，在created方法中呼叫getAllOrderData方法，并且加载资料：

    created(){
      var username = window.localStorage.getItem("username")
      var token = window.localStorage.getItem("token")
      if(username != null && token != null){
        getAllOrderData(username,token).then((response) => {
          var orderid = 0
          console.log(response.data.data)
          if(response.data.code == STATUS_OK){
            this.orders = []
            response.data.data.data.forEach((item) =>{
              this.orders.push({
                orderno:item.orderno,
                detail: item.products.map((x) => x.name).join() + "...",
                products:item.products,
                orderId: orderid,
	    amount: item.amount
              })
              orderid = orderid + 1
            })
          }else{
            this.$fire({type:"error",text:response.data})
          }
        })
      }else{
        this.$fire({type:"error",text:"请登入!"}).then(() => {
          window.location.href = "/#/login"
          window.location.reload()
        })
      }
    },

再来是排序的功能，在b-table上加上sort-changed：

<b-table striped hover :items="orders" :fields="fields" ref="orderTable" @sort-changed="handleSortChange">

接着使用watch来监控selected变数是否有变化：

watch:{
  selected:function(newSelected){
    console.log(newSelected)
    this.$refs.orderTable.$emit('sort-changed')
  }
},

然後撰写handleSortChange方法，让排序生效：

handleSortChange(){
console.log("into handle Sort Chagne")
if(this.selected == "日期"){
  this.orders.sort(function(a,b){
    if(a.date > b.date){
      return 1
    }else if(a.date < b.date){
      return -1
    }
    return 0
  })
}else if(this.selected == "编号"){
  this.orders.sort(function(a,b){
    if(a.orderno > b.orderno){
      return 1
    }else if(a.orderno < b.orderno){
      return -1
    }
    return 0
  })
}else if(this.selected == "商品数量"){
  this.orders.sort(function(a,b){
    return a.amount - b.amount
  })
}
},

再来是搜寻的部分，在b-table加上filter function：

:filter="searchText" :filter-function="filterTable"

接着增加filterTable方法，判断是否有在这些栏位里面，如果有的话就显示：

filterTable(row,filter){
if(row.orderno.includes(filter) || 
  row.detail.includes(filter) ||
  row.date.toString().includes(filter) ||
  row.orderId.toString().includes(filter) ||
  row.amount.toString().includes(filter)){
  return true
}
return false
},

还有renderDetail的部分，在renderDetail当中查找orderno，然後导到详情页面：

renderDetail(orderid){
this.orders.forEach((item) => {
  if(item.orderId == orderid){
    location.href = `/#/orderDetail/${item.orderno}`
  }
})
}

转到订单详情後，来编写订单详情的程序码。

首先在order.js当中新增打後端订单详情API的function：

export function getDetailOrderData(username,token,orderno){
  return axios.get(`http://${host()}:${port()}/userorder/${orderno}`,{
    params: {
      "username":username
    },
    headers:{
      "AUTHORIZATION":token
    }
  })
}

然後在orderDetail当中做引入，并且新增created程序码：

    created(){
      var username = window.localStorage.getItem("username")
      var token = window.localStorage.getItem("token")
      if(username != null && token != null){
        getDetailOrderData(username,token,this.$route.params.oid).then((response) => {
          if(response.data.code == STATUS_OK){
            this.orderno = this.$route.params.oid
            this.orderPrice = response.data.data.products.map((x) => x.subtotal).reduce((a,b) => a + b).toString()
            this.orderAddress = response.data.data.address
            this.orderStatus = response.data.data.orderStatus
            this.phone = response.data.data.phone
            this.products = response.data.data.products
          }
        })
      }
    }

即可成功看到订单详情：