You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
8.0 KiB
299 lines
8.0 KiB
<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="text" direction="vertical" :column="6" border> |
|
<el-descriptions-item label="订单编号">{{ detailData.orderCode }}</el-descriptions-item> |
|
<el-descriptions-item label="用户账号">{{ detailData.acctId }}</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="text" 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="text">商品信息</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="text">操作信息</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; |
|
} |
|
.text { |
|
font-size: 16px; |
|
font-weight: bold; |
|
margin-top: 20px; |
|
} |
|
</style>
|
|
|