Vue原生订单列表

<template>
    <div style="color: #555;font-size: 12px;">
        <!-- 订单列表 -->
        <div class="screen-title">
            <span class="text">订单列表</span>
        </div>
        <!-- 标签页切换 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="tabs.all" name="-999"></el-tab-pane>
            <el-tab-pane :label="tabs.daifukuan" name="0"></el-tab-pane>
            <el-tab-pane :label="tabs.daifahuo" name="1"></el-tab-pane>
            <el-tab-pane :label="tabs.yifahuo" name="2"></el-tab-pane>
            <el-tab-pane :label="tabs.yishouhuo" name="3"></el-tab-pane>
            <el-tab-pane :label="tabs.yiguanbi" name="5"></el-tab-pane>
            <el-tab-pane :label="tabs.yiwancheng" name="4"></el-tab-pane>
        </el-tabs>
        <!-- 表格 -->
        <div class="tab-content">
            <div class="tab-pane fade in active">
                <!-- thead -->
                <table class="table table-hover v-table mb-10">
                    <thead>
                        <tr>
                            <th class="col-md-3">商品</th>
                            <th class="col-md-1">单价</th>
                            <th class="col-md-1">数量</th>
                            <th class="col-md-2">买家/收货人</th>
                            <th class="col-md-1">订单状态</th>
                            <th class="col-md-2">实收</th>
                            <th class="col-md-2">操作</th>
                        </tr>
                    </thead>
                </table>
                <!-- tbody -->
                <div class="tables ol_tbody">
                    <table class="table v-table table-auto-center mb-10">
                        <tbody v-for="count in 10">
                            <!-- //每一条订单编号-下单时间-配送方式-订单类型 -->
                            <tr>
                                <td colspan="7" class="tr_1st">
                                    <span style="padding-right: 30px">订单编号：订单编号</span>
                                    <span style="padding-right: 30px">下单时间：下单时间</span>
                                    <span style="padding-right: 30px">配送方式：配送方式</span>
                                    <span style="padding-right: 30px">
                                        订单类型：
                                        <span class="label" style="background:#fb6638">订单类型</span>
                                    </span>
                                    <span style="padding-right: 30px">门店ID：门店ID</span>
                                    <span style="padding-right: 30px">店铺名称: 店铺名称</span>
                                </td>
                            </tr>
                            <!-- //每一条订单详细数据 -->
                            <tr>
                                <td class="col-md-3">
                                    <div class="media text-left">
                                        <div class="media-left">
                                            <p>
                                                <img
                                                    src="https://placeimg.com/640/480/any"
                                                    alt
                                                    style="60px;height:60px;"
                                                />
                                            </p>
                                        </div>
                                        <div class="media-body break-word">
                                            <div class="line-2-ellipsis">
                                                <a
                                                    class="tdTitles"
                                                >泰国进口皇室御用乳胶枕（学生款）</a>
                                            </div>
                                            <div
                                                class="small-muted line-2-ellipsis"
                                            >尺寸:sku_name|sku_name</div>
                                            <div
                                                class="small-muted line-2-ellipsis"
                                            >仓库:warehouse_name|warehouse_name</div>
                                            <div
                                                class="small-muted line-2-ellipsis"
                                            >商品编码:goods_code|goods_code</div>
                                            <div
                                                class="orderInfo small-muted line-2-ellipsis"
                                            >发货状态:已发货</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="col-md-1">￥100</td>
                                <td class="col-md-1">50件</td>
                                <td
                                    :rowspan="10"
                                    class="col-md-2 border-left"
                                >
                                    buyer_name
                                    <br />receiver_name
                                    <br />user_tel
                                </td>
                                <td :rowspan="10" class="col-md-1">
                                    <p class="mb-04">
                                        <span
                                            class="label label-red"
                                        >status_name</span>
                                    </p>
                                    <div>
                                        <div class="orderInfo" href="javascript:undefined">订单详情</div>
                                    </div>
                                </td>
                                <td class="col-md-2" :rowspan="10">
                                    商品总额：￥900
                                    <br />优惠：￥800
                                    <br />运费：￥700
                                    <br />实收金额：￥600
                                    <br />
                                </td>
                                <template>
                                    <!-- 待付款状态 -->
                                    <td
                                        :rowspan="10"
                                        class="col-md-2 fs-0 operationLeft"
                                    >
                                        <a href="javascript:void(0);" class="btn-operation pay">支付</a>
                                        <a
                                            href="javascript:void(0);"
                                            class="btn-operation adjust_price"
                                        >调整价格</a>
                                        <a
                                            href="javascript:void(0);"
                                            class="btn-operation seller_memo"
                                        >备注</a>
                                        <a
                                            href="javascript:void(0);"
                                            class="btn-operation seller_memo"
                                        >关闭订单</a>
                                    </td>
                                </template>
                            </tr>
                            <template>
                                <!-- 遍历从第二条数据开始遍历数组索引1 2 -->
                                <tr v-for="count in 2">
                                    <td class="media text-left">
                                        <div class="media text-left">
                                            <div class="media-left">
                                                <p>
                                                    <img
                                                        src="https://placeimg.com/640/480/any"
                                                        alt
                                                        style="60px;height:60px;"
                                                    />
                                                </p>
                                            </div>
                                            <div class="media-body break-word">
                                                <div class="line-2-ellipsis">
                                                    <a class="tdTitles" target="_blank">goods_name</a>
                                                </div>
                                                <div class="small-muted line-2-ellipsis">尺寸:sku_name</div>
                                                <div
                                                    class="small-muted line-2-ellipsis"
                                                >仓库:warehouse_name</div>
                                                <div
                                                    class="small-muted line-2-ellipsis"
                                                >商品编码:item.goods_code</div>
                                                <div
                                                    class="orderInfo item.shipping_status small-muted line-2-ellipsis"
                                                >发货状态:未发货</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="col-md-1">￥price</td>
                                    <td class="col-md-1">50件</td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <elPagination
            :page_count="page_count"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
        ></elPagination>
    </div>
</template>

<script>
import elPagination from '../widget/el-pagination.vue'; // 引入分页
import tiem from '../common/time.js'; // 引入时间处理
export default {
    created() {
    },
    data() {
        return {
            tabs: {
                daifukuan: '1',
                daifahuo: '2',
                yifahuo: '3',
                yishouhuo: '4',
                yiwancheng: '5',
                yiguanbi: '6',
                tuikuanzhong: '7',
                yituikuan: '8',
                all: '9'
            }, //标签页切换对象
            page_index: 1,
            page_size: 10,
            page_count: 10,
            activeName: '-999'
        };
    },
    methods: {
        //分页
        handleSizeChange(val) {
            this.page_size = val;
            this.getOrderList();
        },
        //分页
        handleCurrentChange(val) {
            this.page_index = val;
            this.getOrderList();
        },
        // 标签页切换
        handleClick(tab, event) {
            console.log(this.activeName, 'activeName');
            console.log(tab, event);
        }
    },
    components: {
        elPagination
    }
};
</script>

<style scoped>
/* //订单列表title */
.screen-title {
    height: 32px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dddddd;
}
.screen-title .text {
    float: left;
    line-height: 30px;
    padding-right: 6px;
    font-size: 12px;
    border-bottom: 3px solid #2589ff;
}
/* //表格 */
.tab-content > .active {
    display: block;
}
.fade.in {
    opacity: 1;
}
.mb-10 {
    margin-bottom: 10px;
}
.v-table {
    border: 1px solid #dddddd;
}
.table {
     100%;
    max- 100%;
    margin-bottom: 20px;
}
table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}
.v-table > thead {
    background-color: #f5f5f5;
    font-size: 12px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.v-table > thead > tr > th {
    color: #444;
    border-bottom: 1px solid #ddd;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-weight: normal;
}
.col-md-3 {
     25%;
}
.col-md-1 {
     8.33333333%;
}
.col-md-2 {
     16.66666667%;
}
/* // tbody */
.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.v-table .tr_1st {
    background-color: #f5f5f5;
    text-align: left;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
table td {
    text-align: center;
    vertical-align: middle !important;
}
.media:first-child {
    margin-top: 0;
}
.text-left {
    text-align: left !important;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.media-left,
.media-right,
.media-body {
    display: table-cell;
    vertical-align: top;
}
.media-left,
.media > .pull-left {
    padding-right: 10px;
}
.text-left {
    text-align: left !important;
}
img {
    border: none;
    vertical-align: middle;
}
.break-word {
    word-wrap: break-word;
    word-break: break-all;
}
.media-body {
     auto;
}
.media-left,
.media-right,
.media-body {
    display: table-cell;
    vertical-align: top;
}
.line-2-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ol_tbody a {
    margin-right: 4px;
}
a {
    color: #444;
    text-decoration: none;
}
.small-muted {
    font-size: 12px;
    color: #999;
    font-weight: 400;
    vertical-align: text-bottom;
}
.line-2-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
table td[class*='col-'],
table th[class*='col-'] {
    position: static;
    float: none;
    display: table-cell;
}
.v-table th,
.v-table td {
    text-align: center;
    vertical-align: middle !important;
}
.text-right {
    text-align: right !important;
}
.fs-0 {
    font-size: 0 !important;
}
.operationLeft {
    /* text-align: right !important; */
}
.ol_tbody a {
    margin-right: 4px;
}
.btn-operation {
    display: inline-block;
    margin-right: 4px;
    color: #2589ff;
    padding: 2px 4px;
    font-size: 12px;
    position: relative;
}
.border-left {
    border-left: 1px solid #ddd;
}
table td[class*='col-'],
table th[class*='col-'] {
    position: static;
    float: none;
    display: table-cell;
}
.orderInfo {
    cursor: pointer;
    color: #2589ff;
    margin-top: 3px;
}
.label-red {
    background-color: #ec6060;
}
.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
/* //清除浮动 */
.clearfix:after,
.clearfix:before {
    content: '';
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
</style>