Skip to content

M
member
Commit d0db0572 by caoyanzhi
Options

update: 客户订单

parent a24c8457
Showing with 147 additions and 10 deletions
src/components/allCustomers/order-list.vue
<template>
<div>订单列表</div>
<el-tabs v-model="activeName" class="order-tab">
<!-- <el-tab-pane label="全部订单(61)" name="all">用户管理</el-tab-pane> -->
<el-tab-pane label="门店订单(10)" name="store">
<div class="order-report">
<div class="order-report-item" v-for="(el, index) in storeOrderReport" :key="index">
<div class="order-report-label">{{ el.label }}</div>
<div class="order-report-value">{{ el.value }}</div>
</div>
</div>
<order-table tab="store"></order-table>
</el-tab-pane>
<el-tab-pane label="达摩微商城{20}" name="demo">
<order-table tab="demo"></order-table>
</el-tab-pane>
<el-tab-pane label="微盟订单()" name="weimob">
<order-table tab="weimob"></order-table>
</el-tab-pane>
<el-tab-pane label="天猫订单()" name="tmall">
<order-table tab="tmall"></order-table>
</el-tab-pane>
<el-tab-pane label="抖音订单()" name="douyin">
<order-table tab="douyin"></order-table>
</el-tab-pane>
<el-tab-pane label="其他订单()" name="other">
<order-table tab="other"></order-table>
</el-tab-pane>
</el-tabs>
</template>
<script>
import OrderTable from './order-list/order-table.vue';
export default {
name: 'OrderList'
name: 'OrderList',
components: { OrderTable },
data() {
return {
activeName: 'store',
storeOrderReport: [
{ label: '消费总额(实付)', value: '500.04' },
{ label: '消费总额(应收)', value: '500.04' },
{ label: '消费次数', value: '11' },
{ label: '最近消费时间', value: '2022-05-23' },
{ label: '客单价', value: '45.46' },
{ label: '连带率', value: '1.82' },
{ label: '件单价', value: '25.00' },
{ label: '最高单笔(实付)', value: '1000.00' },
{ label: '最高单笔(应收)', value: '1000.00' },
{ label: '平均折扣', value: '0.03' },
]
}
},
created() {
this.activeName = this.$route.query.tab || 'store';
}
}
</script>
\ No newline at end of file
</script>
<style lang="scss" scoped>
.order-tab {
/deep/ .el-tabs__header {
margin-bottom: 20px;
.el-tabs__nav-wrap {
padding: 0 20px;
}
}
/deep/ .el-tabs__content {
padding: 0 20px 20px;
}
}
.order-report {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 20px 15px;
height: 86px;
background: #F7F8FA;
border-radius: 4px;
box-sizing: border-box;
.order-report-item {
flex-shrink: 0;
.order-report-label {
font-size: 14px;
font-weight: 400;
color: #606266;
line-height: 20px;
}
.order-report-value {
margin-top: 5px;
font-size: 22px;
font-weight: bold;
color: #303133;
line-height: 26px;
}
}
}
</style>
src/components/allCustomers/order-list/order-table.vue
<template>
<div>
<div class="search-bar">
<el-input prefix-icon="el-icon-search" clearable placeholder="请输入订单/退款/退换单号" style="width: 260px"></el-input>
<el-select clearable placeholder="全部订单类型" style="margin-left: 10px;width: 160px"></el-select>
<span class="search-create-time">创建时间</span>
<el-date-picker
clearable
value-format="yyyy-MM-dd"
type="daterange"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="margin-left: 10px">
</el-date-picker>
</div>
<el-table class="table-header">
<el-table-column label="商品信息" min-width="351px"></el-table-column>
<el-table-column label="商品信息" min-width="350px"></el-table-column>
<el-table-column label="吊牌价/应收(元)" min-width="130px"></el-table-column>
<el-table-column label="数量" min-width="70px"></el-table-column>
<el-table-column label="小计金额(元)" min-width="125px"></el-table-column>
<el-table-column label="小计金额(元)" min-width="120px"></el-table-column>
<el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
<el-table-column label="收货/导购信息" min-width="255px"></el-table-column>
<el-table-column label="收货/导购信息" min-width="250px"></el-table-column>
</el-table>
<div class="order-list" v-for="el in 2" :key="el">
<div class="order-info-box">
......@@ -31,7 +45,7 @@
</div>
</div>
<el-table :data="tableData" :show-header="false" :span-method="spanMethod" class="order-detail">
<el-table-column label="商品信息" min-width="351px" show-overflow-tooltip>
<el-table-column label="商品信息" min-width="350px" show-overflow-tooltip>
<div class="goods-info-box">
<div class="goods-logo"></div>
<div class="goods-info">
......@@ -47,7 +61,7 @@
<el-table-column label="数量" min-width="70px">
<div>1</div>
</el-table-column>
<el-table-column label="小计金额(元)" min-width="125px">
<el-table-column label="小计金额(元)" min-width="120px">
<div>120.09</div>
</el-table-column>
<el-table-column label="订单金额(元)" class-name="order-amount" min-width="210px">
......@@ -97,7 +111,7 @@
</div>
</div>
</el-table-column>
<el-table-column label="收货/导购信息" min-width="255px">
<el-table-column label="收货/导购信息" min-width="250px">
<div class="order-descript">
<div class="order-descript-item">
<div class="order-descript-label">
......@@ -131,14 +145,33 @@
</el-table-column>
</el-table>
</div>
<el-pagination
:page-sizes="[20, 40, 60, 80]"
:total="params.total"
:page-size="params.pageSize"
:current-page="params.currentPage"
@current-change="onCurrentChange"
@size-change="onSizeChange"
background
layout="total,sizes,prev,pager,next"
style="margin-top: 20px; text-align: right"
></el-pagination>
</div>
</template>
<script>
export default {
name: 'OrderTable',
props: {
tab: String
},
data() {
return {
params: {
total: 105,
pageSize: 20,
currentPage: 1
},
tableData: [{}, {}, {}]
}
},
......@@ -156,12 +189,28 @@ export default {
} else {
return [1, 1];
}
},
onSizeChange(pageSize) {
this.params.pageSize = pageSize;
this.onCurrentChange(1);
},
onCurrentChange(currentPage) {
this.params.currentPage = currentPage;
}
}
}
</script>
<style lang="scss" scoped>
.search-bar {
margin-bottom: 20px;
font-size: 0;
.search-create-time {
margin-left: 10px;
vertical-align: middle;
color: #303133;
}
}
.table-header {
margin-bottom: 16px;
/deep/ .el-table__empty-block {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment