3.23

<template>

<div class="main-border">
<el-table
:data="Order"
stripe
style="width: 100%;color: #5a5c61;">
<el-table-column
prop="orderNumber"
label="订单号"
show-overflow-tooltip
width="200">
</el-table-column>
<el-table-column
prop="idleItem.idleName"
label="二手物品名称"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="orderPrice"
label="金额"
show-overflow-tooltip
min-width="100"
width="100">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
show-overflow-tooltip
min-width="150"
width="200">
</el-table-column>
<el-table-column
label="订单状态"
width="100"
show-overflow-tooltip>
<template slot-scope="scope">
<div>{{orderStatus[scope.row.orderStatus]}}</div>
</template>
</el-table-column>
<el-table-column
label="支付状态"
width="100"
show-overflow-tooltip
class="cell el-tooltip">
<template slot-scope="scope">
<div>{{paymentStatus[scope.row.paymentStatus]}}</div>
</template>
</el-table-column>
<el-table-column
prop="paymentWay"
label="支付方式"
width="100"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="paymentTime"
label="支付时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="deleteOrder(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="nowPage"
:page-size="8"
background
layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>

<script>
export default {
name: "orderList",
created() {
this.getOrder();
},
methods:{
getOrder(){
this.$api.getOrderList({
page: this.nowPage,
nums:8
}).then(res => {
if(res.status_code==1){
this.Order = res.data.list;
this.total = res.data.count;
}else {
this.$message.error(res.msg)
}

}).catch(e => {
console.log(e)
})
},
deleteOrder(index){
this.$api.deleteOrder({
id:this.Order[index].id
}).then(res=>{
if(res.status_code==1){
this.getOrder();
}else {
this.$message.error(res.msg)
}

}).catch(e => {
console.log(e)
})
},
handleCurrentChange(val) {
this.nowPage = val;
this.getOrder();
},
},
data(){
return {
mode:1,
nowPage: 1,
total: 0,
paymentStatus:['未支付','已支付'],
orderStatus:['待付款','待发货','待收货','已完成','已取消'],
Order: []
}
},
}
</script>

<style scoped>
.main-border{
background-color: #FFF;
padding: 10px 30px;
box-shadow: 0 1px 15px -6px rgba(0,0,0,.5);
border-radius: 5px;
}
.block {
display: flex;
justify-content:center;
padding-top: 15px;
padding-bottom: 10px;
width: 100%;
}
</style>