添加订单详情页
This commit is contained in:
zhh
parent
592e5eb887
commit
5ea9cbb527
@ -30,3 +30,10 @@ export function deliveryOrder(data) {
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
export function getOrderDetail(id) {
|
||||
return request({
|
||||
url:'/order/'+id,
|
||||
method:'get'
|
||||
});
|
||||
}
|
||||
|
||||
1
src/icons/svg/marker.svg
Normal file
1
src/icons/svg/marker.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540454363495" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1978" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M789 112.1c8.1 0 15.9 1.6 23.2 4.8 11.7 4.6 20.9 11.8 27.8 21.7s10.3 20.8 10.3 32.8v681.5c0 12-3.4 22.9-10.3 32.8-6.9 9.9-16.1 17.1-27.8 21.7-6.7 2.8-14.5 4.2-23.2 4.2-16.9 0-31.6-5.7-43.9-16.9l-233-224.3-233.2 224.1C266.2 906.2 251.5 912 235 912c-8.1 0-15.9-1.6-23.2-4.8-11.7-4.6-20.9-11.8-27.8-21.7-6.9-9.9-10.3-20.8-10.3-32.8V171.3c0-12 3.4-22.9 10.3-32.8 6.9-9.9 16.1-17.1 27.8-21.7 7.4-3.2 15.1-4.8 23.2-4.8h554v0.1z" p-id="1979"></path></svg>
|
||||
|
After Width: | Height: | Size: 832 B |
@ -153,6 +153,13 @@ export const constantRouterMap = [
|
||||
component: () => import('@/views/oms/order/index'),
|
||||
meta: {title: '订单列表', icon: 'product-list'}
|
||||
},
|
||||
{
|
||||
path: 'orderDetail',
|
||||
name: 'orderDetail',
|
||||
component: () => import('@/views/oms/order/orderDetail'),
|
||||
meta: {title: '订单详情'},
|
||||
hidden:true
|
||||
},
|
||||
{
|
||||
path: 'deliverOrderList',
|
||||
name: 'deliverOrderList',
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</el-col>
|
||||
<el-col class="form-border font-small" :span="18" style="height:50px">
|
||||
{{orderReturnApply.orderSn}}
|
||||
<el-button type="text" size="small">查看</el-button>
|
||||
<el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
@ -303,6 +303,9 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleViewOrder(){
|
||||
this.$router.push({path:'/oms/orderDetail',query:{id:this.orderReturnApply.orderId}});
|
||||
},
|
||||
getDetail() {
|
||||
getApplyDetail(this.id).then(response => {
|
||||
console.log("getDetail")
|
||||
|
||||
@ -315,7 +315,9 @@
|
||||
handleSelectionChange(val){
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
handleViewOrder(index, row){},
|
||||
handleViewOrder(index, row){
|
||||
this.$router.push({path:'/oms/orderDetail',query:{id:row.id}})
|
||||
},
|
||||
handleCloseOrder(index, row){
|
||||
this.closeOrder.dialogVisible=true;
|
||||
this.closeOrder.orderIds=[row.id];
|
||||
|
||||
195
src/views/oms/order/orderDetail.vue
Normal file
195
src/views/oms/order/orderDetail.vue
Normal file
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user