<!-- -->
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索区域 -->
<el-row>
<el-col :span="8">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
</el-row>
<!-- 订单列表table区域 -->
<el-table :data="orderList" border stripe>
<el-table-column
label="#"
type="index"
align="center"
></el-table-column>
<el-table-column
label="订单编号"
prop="order_number"
width="220px"
align="center"
></el-table-column>
<el-table-column
label="订单价格"
prop="order_price"
align="center"
></el-table-column>
<el-table-column label="是否付款" prop="order_pay" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.order_pay === '0'" type="danger"
>未付款</el-tag
>
<el-tag v-else type="success">已付款</el-tag>
</template>
</el-table-column>
<el-table-column
label="是否发货"
prop="is_send"
align="center"
></el-table-column>
<el-table-column label="下单时间" prop="create_time" align="center">
<template slot-scope="scope">
{{ scope.row.create_time | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
</div>
</template>
<script>
import api from '@/utils/api/order.js'
export default {
name: '',
data() {
return {
queryInfo: {
query: '', //查询条件
pagenum: 1,
pagesize: 10,
},
total: 0,
orderList: [],
}
},
created() {
this.getOrderList()
},
methods: {
async getOrderList() {
const res = await api.getOrderList(this.queryInfo)
if (res.meta.status !== 200) {
return this.$message.error('获取订单列表失败')
}
console.log(res)
this.total = res.data.total
this.orderList = res.data.goods
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getOrderList()
},
handleCurrentChange(newNum) {
this.queryInfo.pagenum = newNum
this.getOrderList()
},
},
}
</script>
<style lang="less" scoped>
</style>