<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>
