|
|
@@ -0,0 +1,128 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Version: 1.0
|
|
|
+ * @Autor: zhuyijun
|
|
|
+ * @Date: 2021-12-04 16:09:03
|
|
|
+ * @LastEditTime: 2021-12-04 16:50:03
|
|
|
+-->
|
|
|
+<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 :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-input placeholder="请输入内容"
|
|
|
+ v-model="queryInfo.query"
|
|
|
+ clearable>
|
|
|
+ <el-button slot="append"
|
|
|
+ icon="el-icon-search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table :data="orderList">
|
|
|
+ <el-table-column label="编号"
|
|
|
+ prop="order_number">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单价格"
|
|
|
+ prop="order_price">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否付款"
|
|
|
+ prop="pay_status">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.order_price === '1'"
|
|
|
+ type="success">已付款</el-tag>
|
|
|
+ <el-tag v-else
|
|
|
+ type="danger">未付款</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否发货">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.is_send === '是'"
|
|
|
+ type="success">已发货</el-tag>
|
|
|
+ <el-tag v-else
|
|
|
+ type="danger">未发货</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="下单时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.create_time | dateFormat}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作"
|
|
|
+ width="130px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-edit"></el-button>
|
|
|
+ <el-button type="success"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-success"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="queryInfo.pagenum"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="queryInfo.pagesize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ queryInfo: {
|
|
|
+ query: '',
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: 10
|
|
|
+ },
|
|
|
+ orderList: [],
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getOrderList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getOrderList () {
|
|
|
+ const { data: res } = await this.$http.get(`orders`, { params: this.queryInfo })
|
|
|
+ if (res.meta.status !== 200) {
|
|
|
+ return this.$message.error(res.meta.msg)
|
|
|
+ }
|
|
|
+ this.orderList = res.data.goods
|
|
|
+ this.total = res.data.total
|
|
|
+ },
|
|
|
+ handleSizeChange (newSize) {
|
|
|
+ this.queryInfo.pagesize = newSize
|
|
|
+ this.getOrderList()
|
|
|
+ },
|
|
|
+ handleCurrentChange (newPage) {
|
|
|
+ this.queryInfo.pagenum = newPage
|
|
|
+ this.getOrderList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+</style>
|
