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="width: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="width: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 {
    width: 100%;
    max-width: 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 {
    width: 25%;
}
.col-md-1 {
    width: 8.33333333%;
}
.col-md-2 {
    width: 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 {
    width: 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>
Vue原生訂單列表

vue/vuex 訂單列表中預設地址是怎麼改變的

vue 訂單列表多個倒計時

vue實現商品列表的新增刪除例項講解

vue實現購物車列表

vue 拖拽列表

vue 監聽列表元素滾動到頁面可視區

Vue:點選列表切換顏色

vue實現虛擬列表功能的程式碼

訂單列表和資料列表（七）

vue 中後臺列表的增刪改查同一解決方案

vue實現前端列表多條件篩選

vue,原生html—input框輸入銀行卡4位分開、手機號344分隔

vue原生檔案上傳，可以多檔案上傳

Vue中的列表item依次進入動畫

vue六：vue基礎之列表渲染和key值設定

Vue 點選列表中某一個變色案例

原生JS列表自動滾動，帶過渡效果

vue點選列表變亮（v-for和v-bind的結合）

Vue多選列表元件深入詳解

Vue原生訂單列表

相關推薦
