MallVue/src/views/oms/order/orderDetail.vue
2018-10-30 16:40:29 +08:00

698 lines
26 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template> 
<div class="detail-container">
<div>
<el-steps :active="formatStepStatus(order.status)" 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">当前订单状态{{order.status | formatStatus}}</span>
<div class="operate-button-container" v-show="order.status===0">
<el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
<el-button size="mini">修改商品信息</el-button>
<el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
<el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
<el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
</div>
<div class="operate-button-container" v-show="order.status===1">
<el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
<el-button size="mini">取消订单</el-button>
<el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
</div>
<div class="operate-button-container" v-show="order.status===2||order.status===3">
<el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
<el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
</div>
<div class="operate-button-container" v-show="order.status===4">
<el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
<el-button size="mini" @click="showMarkOrderDialog">备注订单</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>
<el-col :span="4" class="table-cell">{{order.deliveryCompany | formatNull}}</el-col>
<el-col :span="4" class="table-cell">{{order.deliverySn | formatNull}}</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>
<div style="margin-top: 20px">
<svg-icon icon-class="marker" style="color: #606266"></svg-icon>
<span class="font-small">商品信息</span>
</div>
<el-table
ref="orderItemTable"
:data="order.orderItemList"
style="width: 100%;margin-top: 20px" border>
<el-table-column label="商品图片" width="120" align="center">
<template slot-scope="scope">
<img :src="scope.row.productPic" style="height: 80px">
</template>
</el-table-column>
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<p>{{scope.row.productName}}</p>
<p>品牌{{scope.row.productBrand}}</p>
</template>
</el-table-column>
<el-table-column label="价格/货号" width="120" align="center">
<template slot-scope="scope">
<p>价格{{scope.row.productPrice}}</p>
<p>货号{{scope.row.productSn}}</p>
</template>
</el-table-column>
<el-table-column label="属性" width="120" align="center">
<template slot-scope="scope">
{{scope.row.productAttr | formatProductAttr}}
</template>
</el-table-column>
<el-table-column label="数量" width="120" align="center">
<template slot-scope="scope">
{{scope.row.productQuantity}}
</template>
</el-table-column>
<el-table-column label="小计" width="120" align="center">
<template slot-scope="scope">
{{scope.row.productPrice*scope.row.productQuantity}}
</template>
</el-table-column>
</el-table>
<div style="float: right;margin: 20px">
合计<span class="color-danger">{{order.totalAmount}}</span>
</div>
<div style="margin-top: 60px">
<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.totalAmount}}</el-col>
<el-col :span="6" class="table-cell">{{order.freightAmount}}</el-col>
<el-col :span="6" class="table-cell">-{{order.couponAmount}}</el-col>
<el-col :span="6" class="table-cell">-{{order.integrationAmount}}</el-col>
</el-row>
<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.promotionAmount}}</el-col>
<el-col :span="6" class="table-cell">-{{order.discountAmount}}</el-col>
<el-col :span="6" class="table-cell">
<span class="color-danger">{{order.totalAmount+order.freightAmount}}</span>
</el-col>
<el-col :span="6" class="table-cell">
<span class="color-danger">{{order.payAmount+order.freightAmount-order.discountAmount}}</span>
</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>
<el-table style="margin-top: 20px;width: 100%"
ref="orderHistoryTable"
:data="order.historyList" border>
<el-table-column label="操作者" width="120" align="center">
<template slot-scope="scope">
{{scope.row.operateMan}}
</template>
</el-table-column>
<el-table-column label="操作时间" width="160" align="center">
<template slot-scope="scope">
{{formatTime(scope.row.createTime)}}
</template>
</el-table-column>
<el-table-column label="订单状态" width="120" align="center">
<template slot-scope="scope">
{{scope.row.orderStatus | formatStatus}}
</template>
</el-table-column>
<el-table-column label="付款状态" width="120" align="center">
<template slot-scope="scope">
{{scope.row.orderStatus | formatPayStatus}}
</template>
</el-table-column>
<el-table-column label="发货状态" width="120" align="center">
<template slot-scope="scope">
{{scope.row.orderStatus | formatDeliverStatus}}
</template>
</el-table-column>
<el-table-column label="备注" align="center">
<template slot-scope="scope">
{{scope.row.note}}
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="修改收货人信息"
:visible.sync="receiverDialogVisible"
width="40%">
<el-form :model="receiverInfo"
ref="receiverInfoForm"
label-width="150px">
<el-form-item label="收货人姓名:">
<el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="手机号码:">
<el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
</el-input>
</el-form-item>
<el-form-item label="邮政编码:">
<el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
</el-input>
</el-form-item>
<el-form-item label="所在区域:">
<v-distpicker :province="receiverInfo.receiverProvince"
:city="receiverInfo.receiverCity"
:area="receiverInfo.receiverRegion"
@selected="onSelectRegion"></v-distpicker>
</el-form-item>
<el-form-item label="详细地址:">
<el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="receiverDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleUpdateReceiverInfo"> </el-button>
</span>
</el-dialog>
<el-dialog title="修改费用信息"
:visible.sync="moneyDialogVisible"
width="40%">
<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.totalAmount}}</el-col>
<el-col :span="6" class="table-cell">
<el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend"></template></el-input>
</el-col>
<el-col :span="6" class="table-cell">-{{order.couponAmount}}</el-col>
<el-col :span="6" class="table-cell">-{{order.integrationAmount}}</el-col>
</el-row>
<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.promotionAmount}}</el-col>
<el-col :span="6" class="table-cell">
<el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-</template></el-input>
</el-col>
<el-col :span="6" class="table-cell">
<span class="color-danger">{{order.totalAmount+moneyInfo.freightAmount}}</span>
</el-col>
<el-col :span="6" class="table-cell">
<span class="color-danger">{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
</el-col>
</el-row>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="moneyDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleUpdateMoneyInfo"> </el-button>
</span>
</el-dialog>
<el-dialog title="发送站内信"
:visible.sync="messageDialogVisible"
width="40%">
<el-form :model="message"
ref="receiverInfoForm"
label-width="150px">
<el-form-item label="标题:">
<el-input v-model="message.title" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="内容:">
<el-input v-model="message.content" type="textarea" rows="3">
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="messageDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleSendMessage"> </el-button>
</span>
</el-dialog>
<el-dialog title="关闭订单"
:visible.sync="closeDialogVisible"
width="40%">
<el-form :model="closeInfo"
label-width="150px">
<el-form-item label="操作备注:">
<el-input v-model="closeInfo.note" type="textarea" rows="3">
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleCloseOrder"> </el-button>
</span>
</el-dialog>
<el-dialog title="备注订单"
:visible.sync="markOrderDialogVisible"
width="40%">
<el-form :model="markInfo"
label-width="150px">
<el-form-item label="操作备注:">
<el-input v-model="markInfo.note" type="textarea" rows="3">
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="markOrderDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleMarkOrder"> </el-button>
</span>
</el-dialog>
<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
</div>
</template>
<script>
import {getOrderDetail,updateReceiverInfo,updateMoneyInfo,closeOrder,updateOrderNote,deleteOrder} from '@/api/order';
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
import {formatDate} from '@/utils/date';
import VDistpicker from 'v-distpicker';
const defaultReceiverInfo = {
orderId:null,
receiverName:null,
receiverPhone:null,
receiverPostCode:null,
receiverDetailAddress:null,
receiverProvince:null,
receiverCity:null,
receiverRegion:null,
status:null
};
export default {
name: 'orderDetail',
components: { VDistpicker, LogisticsDialog},
data() {
return {
id: null,
order: {},
receiverDialogVisible:false,
receiverInfo:Object.assign({},defaultReceiverInfo),
moneyDialogVisible:false,
moneyInfo:{orderId:null, freightAmount:0, discountAmount:0,status:null},
messageDialogVisible:false,
message: {title:null, content:null},
closeDialogVisible:false,
closeInfo:{note:null,id:null},
markOrderDialogVisible:false,
markInfo:{note:null},
logisticsDialogVisible:false
}
},
created() {
this.id = this.list = this.$route.query.id;
getOrderDetail(this.id).then(response => {
this.order = response.data;
});
},
filters: {
formatNull(value) {
if(value===undefined||value===null||value===''){
return '暂无';
}else{
return value;
}
},
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;
},
formatStatus(value) {
if (value === 1) {
return '待发货';
} else if (value === 2) {
return '已发货';
} else if (value === 3) {
return '已完成';
} else if (value === 4) {
return '已关闭';
} else if (value === 5) {
return '无效订单';
} else {
return '待付款';
}
},
formatPayStatus(value) {
if (value === 0) {
return '未支付';
} else if(value===4){
return '已退款';
}else{
return '已支付';
}
},
formatDeliverStatus(value) {
if (value === 0||value === 1) {
return '未发货';
} else {
return '已发货';
}
},
formatProductAttr(value){
if(value==null){
return '';
}else{
let attr = JSON.parse(value);
let result='';
for(let i=0;i<attr.length;i++){
result+=attr[i].key;
result+=":";
result+=attr[i].value;
result+=";";
}
return result;
}
}
},
methods: {
onSelectRegion(data){
this.receiverInfo.receiverProvince=data.province.value;
this.receiverInfo.receiverCity=data.city.value;
this.receiverInfo.receiverRegion=data.area.value;
},
formatTime(time) {
if (time == null || time === '') {
return '';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatStepStatus(value) {
if (value === 1) {
//待发货
return 2;
} else if (value === 2) {
//已发货
return 3;
} else if (value === 3) {
//已完成
return 4;
}else {
//待付款已关闭无限订单
return 1;
}
},
showUpdateReceiverDialog(){
this.receiverDialogVisible=true;
this.receiverInfo={
orderId:this.order.id,
receiverName:this.order.receiverName,
receiverPhone:this.order.receiverPhone,
receiverPostCode:this.order.receiverPostCode,
receiverDetailAddress:this.order.receiverDetailAddress,
receiverProvince:this.order.receiverProvince,
receiverCity:this.order.receiverCity,
receiverRegion:this.order.receiverRegion,
status:this.order.status
}
},
handleUpdateReceiverInfo(){
this.$confirm('是否要修改收货信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateReceiverInfo(this.receiverInfo).then(response=>{
this.receiverDialogVisible=false;
this.$message({
type: 'success',
message: '修改成功!'
});
getOrderDetail(this.id).then(response => {
this.order = response.data;
});
});
});
},
showUpdateMoneyDialog(){
this.moneyDialogVisible=true;
this.moneyInfo.orderId=this.order.id;
this.moneyInfo.freightAmount=this.order.freightAmount;
this.moneyInfo.discountAmount=this.order.discountAmount;
this.moneyInfo.status=this.order.status;
},
handleUpdateMoneyInfo(){
this.$confirm('是否要修改费用信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateMoneyInfo(this.moneyInfo).then(response=>{
this.moneyDialogVisible=false;
this.$message({
type: 'success',
message: '修改成功!'
});
getOrderDetail(this.id).then(response => {
this.order = response.data;
});
});
});
},
showMessageDialog(){
this.messageDialogVisible=true;
this.message.title=null;
this.message.content=null;
},
handleSendMessage(){
this.$confirm('是否要发送站内信?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.messageDialogVisible=false;
this.$message({
type: 'success',
message: '发送成功!'
});
});
},
showCloseOrderDialog(){
this.closeDialogVisible=true;
this.closeInfo.note=null;
this.closeInfo.id=this.id;
},
handleCloseOrder(){
this.$confirm('是否要关闭?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("ids",[this.closeInfo.id]);
params.append("note",this.closeInfo.note);
closeOrder(params).then(response=>{
this.closeDialogVisible=false;
this.$message({
type: 'success',
message: '订单关闭成功!'
});
getOrderDetail(this.id).then(response => {
this.order = response.data;
});
});
});
},
showMarkOrderDialog(){
this.markOrderDialogVisible=true;
this.markInfo.id=this.id;
this.closeOrder.note=null;
},
handleMarkOrder(){
this.$confirm('是否要备注订单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("id",this.markInfo.id);
params.append("note",this.markInfo.note);
params.append("status",this.order.status);
updateOrderNote(params).then(response=>{
this.markOrderDialogVisible=false;
this.$message({
type: 'success',
message: '订单备注成功!'
});
getOrderDetail(this.id).then(response => {
this.order = response.data;
});
});
});
},
handleDeleteOrder(){
this.$confirm('是否要进行该删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("ids",[this.id]);
deleteOrder(params).then(response=>{
this.$message({
message: '删除成功!',
type: 'success',
duration: 1000
});
this.$router.back();
});
})
},
showLogisticsDialog(){
this.logisticsDialogVisible=true;
}
}
}
</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>