300 lines
8.1 KiB
Vue
300 lines
8.1 KiB
Vue
<template>
|
||
<div class="article-manager">
|
||
<el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
|
||
<div style="background: #f3f3f3;height:60px">
|
||
<span style="line-height:60px;margin:0px 30px;color:red; font-size:16px"> 当前订单状态：{{ detailData.orderStatus | orderStatus }}</span>
|
||
</div>
|
||
<el-descriptions title="基本信息" class="orderText" direction="vertical" :column="6" border>
|
||
<el-descriptions-item label="订单编号">{{ detailData.orderCode }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户账号">{{ detailData.customerPhone }}</el-descriptions-item>
|
||
<el-descriptions-item label="支付积分">{{ detailData.integral }}</el-descriptions-item>
|
||
<el-descriptions-item label="下单时间">{{ detailData.createTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="自提油站">{{ detailData.takeSiteName }}</el-descriptions-item>
|
||
<el-descriptions-item label="提货码">{{ detailData.takeCode }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-descriptions title="收货人信息" class="orderText" direction="vertical" :column="3" border>
|
||
<el-descriptions-item label="收货人">{{ detailData.customerName }}</el-descriptions-item>
|
||
<el-descriptions-item label="手机号码">{{ detailData.customerPhone }}</el-descriptions-item>
|
||
<el-descriptions-item label="订单备注">{{ detailData.remark || '暂无' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div class="orderText">商品信息</div>
|
||
<el-table
|
||
:data="detailData.mallOrderInfoDetails"
|
||
class="ivu-mt mt14"
|
||
v-loading="loading"
|
||
highlight-current-row
|
||
empty-text="暂无数据"
|
||
show-summary
|
||
:summary-method="getSummaries"
|
||
>
|
||
<el-table-column label="商品图片" min-width="80" align="center" prop="oderDetailImg">
|
||
<template slot-scope="scope">
|
||
<el-image style="width: 60px; height: 50px" :src="scope.row.oderDetailImg"> </el-image>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品名称" min-width="120" align="center" prop="productName">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.productName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="价格/货号" min-width="120" prop="marketPrice">
|
||
<template slot-scope="scope">
|
||
<span>价格：¥{{ scope.row.marketPrice }}</span>
|
||
<br />
|
||
<span>货号：{{ scope.row.productNum }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="属性" min-width="60" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.attributeJson }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="数量" min-width="80" align="center" prop="orderNum"> </el-table-column>
|
||
|
||
<el-table-column label="小计" min-width="120" align="center" prop="allMarketPrice"> </el-table-column>
|
||
</el-table>
|
||
<div class="orderText">操作信息</div>
|
||
<el-table :data="detailData.mallOrderInfoRecords" class="ivu-mt mt14" v-loading="loading" border highlight-current-row empty-text="暂无数据">
|
||
<el-table-column label="操作者" min-width="120" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.customerName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作时间" min-width="60" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.createTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="订单状态" min-width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.orderStatus | orderStatus }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="支付状态" min-width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.payStatus | payStatus }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="备注" min-width="120" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.remark }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
filters: {
|
||
orderStatus(e) {
|
||
switch (e) {
|
||
case '0':
|
||
return '已下单'
|
||
case '1':
|
||
return '待核销'
|
||
case '2':
|
||
return '已核销'
|
||
case '-1':
|
||
return '已取消'
|
||
default:
|
||
return '暂无'
|
||
}
|
||
},
|
||
payStatus(e) {
|
||
switch (e) {
|
||
case '0':
|
||
return '待支付'
|
||
case '1':
|
||
return '已支付'
|
||
case '2':
|
||
return '退款申请'
|
||
case '3':
|
||
return '全部退款'
|
||
case '4':
|
||
return '部分退款'
|
||
default:
|
||
return '暂无'
|
||
}
|
||
}
|
||
},
|
||
|
||
props: {
|
||
detailData: {
|
||
type: Object,
|
||
default() {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
template: false,
|
||
modals: false,
|
||
batchModal: false,
|
||
grid: {
|
||
xl: 6,
|
||
lg: 8,
|
||
md: 12,
|
||
sm: 24,
|
||
xs: 24
|
||
}
|
||
}
|
||
},
|
||
created() {},
|
||
activated() {},
|
||
methods: {
|
||
getSummaries(param) {
|
||
// 合计
|
||
const { columns, data } = param
|
||
const sums = []
|
||
|
||
if (columns && data) {
|
||
let allMarketPrice = 0 // 交易金额
|
||
|
||
data.forEach(item => {
|
||
allMarketPrice += item.allMarketPrice ? item.allMarketPrice : 0
|
||
})
|
||
allMarketPrice = allMarketPrice.toFixed(2)
|
||
|
||
columns.forEach((column, index) => {
|
||
switch (
|
||
column.property // column.property可以匹配它的每一列的命名， 然后赋值
|
||
) {
|
||
case 'allMarketPrice':
|
||
sums[index] = '合计' + allMarketPrice + '元' // 值取自后台
|
||
break
|
||
|
||
default:
|
||
break
|
||
}
|
||
})
|
||
return sums
|
||
} else {
|
||
return sums
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .el-tabs__item {
|
||
height: 54px !important;
|
||
line-height: 54px !important;
|
||
}
|
||
::v-deep .ivu-modal-mask {
|
||
z-index: 999 !important;
|
||
}
|
||
|
||
::v-deep .ivu-modal-wrap {
|
||
z-index: 999 !important;
|
||
}
|
||
|
||
.Box {
|
||
::v-deep .ivu-modal-body {
|
||
height: 700px;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
|
||
.batch-box {
|
||
::v-deep .ivu-modal-body {
|
||
overflow: auto;
|
||
min-height: 350px;
|
||
}
|
||
}
|
||
|
||
.tabBox_img {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.bg {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 11;
|
||
}
|
||
|
||
::v-deep .happy-scroll-content {
|
||
width: 100%;
|
||
|
||
.demo-spin-icon-load {
|
||
animation: ani-demo-spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes ani-demo-spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.demo-spin-col {
|
||
height: 100px;
|
||
position: relative;
|
||
border: 1px solid #eee;
|
||
}
|
||
}
|
||
|
||
.labelInput {
|
||
border: 1px solid #dcdee2;
|
||
width: 100%;
|
||
padding: 0 15px;
|
||
border-radius: 5px;
|
||
min-height: 30px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
|
||
.span {
|
||
color: #c5c8ce;
|
||
}
|
||
|
||
.iconxiayi {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: var(--prev-color-primary);
|
||
font-size: 12px;
|
||
}
|
||
.el-icon-arrow-down {
|
||
font-size: 12px;
|
||
}
|
||
.el-dropdown-menu__item {
|
||
a {
|
||
color: #606266;
|
||
}
|
||
}
|
||
.label_width {
|
||
width: 400px;
|
||
}
|
||
.orderText {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|