ngds/frontendEle/src/views/shop/order-list.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-table class="withdraw-table" :data="tableData" style="width: 100%;" :span-method="objectSpanMethod">
              <el-table-column label="商品编号" prop="SKU_CODE"></el-table-column>
              <el-table-column label="商品名称" prop="GOODS_TITLE"></el-table-column>
                <el-table-column label="数量" prop="BUY_NUMS"></el-table-column>
                <el-table-column label="会员价格">
                    <template slot-scope="props">
                        {{ props.row.REAL_PRICE * props.row.BUY_NUMS }}
                    </template>
                </el-table-column>
                <el-table-column label="会员PV">
                    <template slot-scope="props">
                        {{ props.row.REAL_PV * props.row.BUY_NUMS }}
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="SN"></el-table-column>
                <el-table-column label="会员编号" prop="USER_NAME"></el-table-column>
                <el-table-column label="会员姓名" prop="REAL_NAME"></el-table-column>
                <el-table-column label="收货人" prop="CONSIGNEE"></el-table-column>
                <el-table-column label="收货电话" prop="MOBILE"></el-table-column>
                <el-table-column label="支付时间" prop="PAY_AT"></el-table-column>
            </el-table>
            <div class="white-box-footer">
                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import Pagination from '@/components/Pagination'
    export default {
        name: "order-list",
        components: {Pagination},
        mounted() {
            this.getData()
        },
        data() {
            return {
                loading: false,
                form:{

                },
                tableData:null,
                list: null,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
            }
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
              if (columnIndex > 4) {
                if (rowIndex % 2 === 0) {
                  return {
                    rowspan: 2,
                    colspan: 1
                  };
                } else {
                  return {
                    rowspan: 0,
                    colspan: 0
                  };
                }
              }
            },
            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            getData(page, pageSize) {
                let _this = this
                network.getPageData(_this, 'shop/order-list', page, pageSize, {type: this.type}, function (response) {
                    _this.loading = false;
                    _this.list = response.list;
                    let settingObj=_this.list;

                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );
                    _this.tableData=settingArr;
                    console.log(this.tableData)


                });
            },
        }
    }
</script>
<style scoped>

</style>