forked from macrozheng/mall-admin-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhh
committed
Oct 25, 2018
1 parent
592e5eb
commit 5ea9cbb
Showing
6 changed files
with
217 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,195 @@ | ||
<template> | ||
<div class="detail-container"> | ||
<div> | ||
<el-steps :active="1" finish-status="success" align-center> | ||
<el-step title="提交订单" :description="formatTime(order.createTime)"></el-step> | ||
<el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step> | ||
<el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step> | ||
<el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step> | ||
<el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step> | ||
</el-steps> | ||
</div> | ||
<el-card shadow="never" style="margin-top: 15px"> | ||
<div class="operate-container"> | ||
<i class="el-icon-warning color-danger" style="margin-left: 20px"></i> | ||
<span class="color-danger">当前订单状态:待付款</span> | ||
<div class="operate-button-container"> | ||
<el-button size="mini">修改收货人信息</el-button> | ||
<el-button size="mini">修改商品信息</el-button> | ||
<el-button size="mini">修改费用信息</el-button> | ||
<el-button size="mini">发送站内信</el-button> | ||
<el-button size="mini">关闭订单</el-button> | ||
<el-button size="mini">备注订单</el-button> | ||
</div> | ||
</div> | ||
<div style="margin-top: 20px"> | ||
<svg-icon icon-class="marker" style="color: #606266"></svg-icon> | ||
<span class="font-small">基本信息</span> | ||
</div> | ||
<div class="table-layout"> | ||
<el-row> | ||
<el-col :span="4" class="table-cell-title">订单编号</el-col> | ||
<el-col :span="4" class="table-cell-title">发货单流水号</el-col> | ||
<el-col :span="4" class="table-cell-title">用户账号</el-col> | ||
<el-col :span="4" class="table-cell-title">支付方式</el-col> | ||
<el-col :span="4" class="table-cell-title">订单来源</el-col> | ||
<el-col :span="4" class="table-cell-title">订单类型</el-col> | ||
</el-row> | ||
<el-row> | ||
<el-col :span="4" class="table-cell">{{order.orderSn}}</el-col> | ||
<el-col :span="4" class="table-cell">暂无</el-col> | ||
<el-col :span="4" class="table-cell">{{order.memberUsername}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.payType | formatPayType}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.sourceType | formatSourceType}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.orderType | formatOrderType}}</el-col> | ||
</el-row> | ||
<el-row> | ||
<el-col :span="4" class="table-cell-title">配送方式</el-col> | ||
<el-col :span="4" class="table-cell-title">物流单号</el-col> | ||
<el-col :span="4" class="table-cell-title">自动确认收货时间</el-col> | ||
<el-col :span="4" class="table-cell-title">订单可得优币</el-col> | ||
<el-col :span="4" class="table-cell-title">订单可得成长值</el-col> | ||
<el-col :span="4" class="table-cell-title">活动信息</el-col> | ||
</el-row> | ||
<el-row style="display: table"> | ||
<el-col :span="4" class="table-cell">{{order.deliveryCompany}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.deliverySn}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.autoConfirmDay}}天</el-col> | ||
<el-col :span="4" class="table-cell">{{order.integration}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.growth}}</el-col> | ||
<el-col :span="4" class="table-cell">{{order.promotionInfo}}</el-col> | ||
</el-row> | ||
</div> | ||
<div style="margin-top: 20px"> | ||
<svg-icon icon-class="marker" style="color: #606266"></svg-icon> | ||
<span class="font-small">收货人信息</span> | ||
</div> | ||
<div class="table-layout"> | ||
<el-row> | ||
<el-col :span="6" class="table-cell-title">收货人</el-col> | ||
<el-col :span="6" class="table-cell-title">手机号码</el-col> | ||
<el-col :span="6" class="table-cell-title">邮政编码</el-col> | ||
<el-col :span="6" class="table-cell-title">收货地址</el-col> | ||
</el-row> | ||
<el-row> | ||
<el-col :span="6" class="table-cell">{{order.receiverName}}</el-col> | ||
<el-col :span="6" class="table-cell">{{order.receiverPhone}}</el-col> | ||
<el-col :span="6" class="table-cell">{{order.receiverPostCode}}</el-col> | ||
<el-col :span="6" class="table-cell">{{order | formatAddress}}</el-col> | ||
</el-row> | ||
</div> | ||
</el-card> | ||
</div> | ||
</template> | ||
<script> | ||
import {getOrderDetail} from '@/api/order'; | ||
import {formatDate} from '@/utils/date'; | ||
export default { | ||
name: 'orderDetail', | ||
data() { | ||
return { | ||
id: null, | ||
order: {} | ||
} | ||
}, | ||
created() { | ||
this.id = this.list = this.$route.query.id; | ||
getOrderDetail(this.id).then(response => { | ||
this.order = response.data; | ||
}); | ||
}, | ||
filters: { | ||
formatPayType(value) { | ||
if (value === 1) { | ||
return '支付宝'; | ||
} else if (value === 2) { | ||
return '微信'; | ||
} else { | ||
return '未支付'; | ||
} | ||
}, | ||
formatSourceType(value) { | ||
if (value === 1) { | ||
return 'APP订单'; | ||
} else { | ||
return 'PC订单'; | ||
} | ||
}, | ||
formatOrderType(value) { | ||
if (value === 1) { | ||
return '秒杀订单'; | ||
} else { | ||
return '正常订单'; | ||
} | ||
}, | ||
formatAddress(order) { | ||
let str = order.receiverProvince; | ||
if (order.receiverCity != null) { | ||
str += " " + order.receiverCity; | ||
} | ||
str += " " + order.receiverRegion; | ||
str += " " + order.receiverDetailAddress; | ||
return str; | ||
} | ||
}, | ||
methods: { | ||
formatTime(time) { | ||
if (time == null || time === '') { | ||
return ''; | ||
} | ||
let date = new Date(time); | ||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss') | ||
} | ||
} | ||
} | ||
</script> | ||
<style scoped> | ||
.detail-container { | ||
width: 80%; | ||
padding: 20px 20px 20px 20px; | ||
margin: 20px auto; | ||
} | ||
.operate-container { | ||
background: #F2F6FC; | ||
height: 80px; | ||
margin: -20px -20px 0; | ||
line-height: 80px; | ||
} | ||
.operate-button-container { | ||
float: right; | ||
margin-right: 20px | ||
} | ||
.table-layout { | ||
margin-top: 20px; | ||
border-left: 1px solid #DCDFE6; | ||
border-top: 1px solid #DCDFE6; | ||
} | ||
.table-cell { | ||
height: 60px; | ||
line-height: 40px; | ||
border-right: 1px solid #DCDFE6; | ||
border-bottom: 1px solid #DCDFE6; | ||
padding: 10px; | ||
font-size: 14px; | ||
color: #606266; | ||
text-align: center; | ||
overflow: hidden; | ||
} | ||
.table-cell-title { | ||
border-right: 1px solid #DCDFE6; | ||
border-bottom: 1px solid #DCDFE6; | ||
padding: 10px; | ||
background: #F2F6FC; | ||
text-align: center; | ||
font-size: 14px; | ||
color: #303133; | ||
} | ||
</style> | ||
|
||
|