parent
433c0fb49b
commit
c05eb9f1e9
@ -0,0 +1,111 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-tabs :activeName="activeName" type="card"> |
||||
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
<el-tab-pane label="待支付" name="pay"></el-tab-pane> |
||||
<el-tab-pane label="待发货" name="shipping"></el-tab-pane> |
||||
<el-tab-pane label="待收货" name="dispatch"></el-tab-pane> |
||||
<el-tab-pane label="已完成" name="finish"></el-tab-pane> |
||||
<el-tab-pane label="已取消" name="cancel"></el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
<el-form :inline="true"> |
||||
<el-row type="flex"> |
||||
<el-col> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入用户昵称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入订单号"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col class="right"> |
||||
<el-form-item> |
||||
<el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd" |
||||
type="daterange" range-separator="-" start-placeholder="开始日期" |
||||
end-placeholder="结束日期"></el-date-picker> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button type="primary">查询</el-button> |
||||
<el-button>重置</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-form-item> |
||||
<el-input placeholder="全部物流"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-button>导出</el-button> |
||||
|
||||
<el-table :data="dataList" class="table"> |
||||
<el-table-column type="selection" align="center"></el-table-column> |
||||
<el-table-column label="订单号" align="center"> |
||||
12313141 |
||||
</el-table-column> |
||||
<el-table-column label="用户" align="center"> |
||||
张三 |
||||
</el-table-column> |
||||
<el-table-column label="实际支付金额" align="center"> |
||||
¥120.00 |
||||
</el-table-column> |
||||
<el-table-column label="共计/件" align="center"> |
||||
5 |
||||
</el-table-column> |
||||
<el-table-column label="购买门店" align="center"> |
||||
门店名称 |
||||
</el-table-column> |
||||
<el-table-column label="订单状态" align="center"> |
||||
待支付 |
||||
</el-table-column> |
||||
<el-table-column label="物流" align="center"> |
||||
顺丰 |
||||
</el-table-column> |
||||
<el-table-column label="创建时间" align="center"> |
||||
2022-12-31 12:31 |
||||
</el-table-column> |
||||
<el-table-column label="收货地址" align="center"> |
||||
河南省郑州市金水区光明路125号 |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<el-button type="text">订单详情</el-button> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "Order", |
||||
data() { |
||||
return { |
||||
dataList: [undefined], |
||||
activeName: "all", |
||||
total: 1, |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
dateRange: undefined |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
getList() { |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.table { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.right { |
||||
display: flex; |
||||
justify-content: right; |
||||
} |
||||
</style> |
Loading…
Reference in new issue