订单相关
This commit is contained in:
xk_chenlianjie
296
src/views/order/orderListDetail.vue
Normal file
296
src/views/order/orderListDetail.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="article-manager">
|
||||
<el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
|
||||
<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>
|
||||
Reference in New Issue
Block a user