提交 b6f52c67 编写于 作者: yi.li's avatar yi.li

订单详情页联调

上级 ce7042f2
......@@ -28,7 +28,7 @@ export const queryStore = (params) => {
export const queryOrderDetail = (orderId) => {
return fetch({
headers,
url: getBaseUrl(`trade/order/admin/query/${orderId}`),
url: getBaseUrl(`store/orders/admin/query/${orderId}`),
method: 'get',
// params: params,
description: '查询订单详情',
......@@ -39,7 +39,7 @@ export const queryOrderDetail = (orderId) => {
export const queryOrderList = (params) => {
return fetch({
headers,
url: getBaseUrl(`trade/order/admin/query/list`),
url: getBaseUrl(`store/orders/admin/query/list`),
method: 'get',
params: params,
description: '查询订单列表',
......
......@@ -4,26 +4,52 @@
<div class="order-detail-content screenSet" id="screenSet">
<div class="header-title">订单详情</div>
<div class="detail-all-info">
<div class="trade-status" v-if="orderDetailData.showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
<div class="trade-status" v-if="orderDetailData.showStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
<div class="trade-status" v-if="orderDetailData.showStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
<div class="trade-status" v-if="orderDetailData.showStatus == 4"><img src="../../assets/image/order/order_status4.png"/>等待买家付款</div>
<div class="trade-status" v-if="orderDetailData.showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>交易关闭</div>
<div class="trade-status" v-if="showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
<div class="trade-status" v-if="showStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
<div class="trade-status" v-if="showStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
<div class="trade-status" v-if="showStatus == 4"><img src="../../assets/image/order/order_status4.png"/>等待买家付款</div>
<div class="trade-status" v-if="showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>交易关闭</div>
<div class="trade-info">
<el-card class="left-card">
<div slot="header" class="clearfix">
<span>物流信息</span>
<span>{{storeType == 1 ? '物流' : '配送'}}信息</span>
</div>
<div>
<div v-if="showStatus == 1 || showStatus == 2">
<div v-if="storeType == 2">
<p>无配送信息,买家自提</p>
</div>
<div v-else>
<p class="trade-status1">
<i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">已发货</span>
<span class="send-status" v-if="storeType == 1">已发货</span>
<span class="send-status" v-if="storeType == 3">云鹊配送中</span>
</p>
<p>收货地址:{{orderDetailData.receiverAddr}}</p>
<p>收货地址:{{orderDetailData.receiverAddr}}{{orderDetailData.receiver}}{{orderDetailData.receiverMobile}}</p>
<div v-if="storeType == 1">
<p>物流公司:{{orderDetailData.expressName}}</p>
<p>快递单号:{{orderDetailData.expressNo}}</p>
</div>
<div v-if="storeType == 3">
<p>配送员姓名:{{orderDetailData.sender}}</p>
<p>手机号:{{orderDetailData.senderMobile}}</p>
</div>
<p>备注:{{orderDetailData.remark}}</p>
</div>
</div>
<div v-if="(showStatus == 3) && (storeType == 1 || storeType == 3)">
<div class="trade-status1">
<p>
<i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
</p>
<el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button>
</div>
<p>收货地址:{{orderDetailData.receiverAddr}}{{orderDetailData.receiver}}{{orderDetailData.receiverMobile}}</p>
</div>
<div v-if="showStatus == 4">
<p>暂无{{storeType == 1 ? '物流' : '配送'}}信息,待买家支付</p>
</div>
<div v-if="showStatus == 5"><p>交易已关闭</p></div>
</el-card>
<el-card class="right-card">
<div slot="header" class="clearfix">
......@@ -31,11 +57,11 @@
</div>
<div>
<p>订单编号:{{orderDetailData.orderNo}}</p>
<p>下单时间:{{orderDetailData.createdTime}}</p>
<p>支付方式:{{orderDetailData.payChannel}}</p>
<p>支付时间:{{orderDetailData.paymentTime}}</p>
<p>发货时间:{{orderDetailData.sendTime}}</p>
<p>成交时间:{{orderDetailData.finishTime}}</p>
<p>下单时间:{{orderDetailData.createdTime | liveDateFilter}}</p>
<p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付方式:{{orderDetailData.payChannel}}</p>
<p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付时间:{{orderDetailData.paymentTime}}</p>
<!--<p>发货时间:{{orderDetailData.sendTime}}</p>-->
<!--<p>成交时间:{{orderDetailData.finishTime}}</p>-->
</div>
</el-card>
</div>
......@@ -58,16 +84,24 @@
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | rangeStatus }}</span>
<span>{{orderDetailData.showStatusStr}}</span>
</template>
</el-table-column>
</el-table>
<div class="total-set">
<p><span>商品总额:</span><span>¥{{orderDetailData.totalPrice}}</span></p>
<p><span>优惠:</span><span>¥{{orderDetailData.totalCouponFee}}</span></p>
<p class="total-price"><span>实付:</span><span>¥{{orderDetailData.amount}}</span></p>
<p class="total-price" v-if="showStatus == 1 || showStatus == 2 || showStatus == 3"><span>实付:</span><span>¥{{orderDetailData.amount}}</span></p>
<p class="total-price" v-if="showStatus == 4"><span>应付:</span><span>¥{{orderDetailData.amount}}</span></p>
<p class="total-price" v-if="showStatus == 5"><span>实付:</span><span>¥0</span></p>
</div>
</div>
<send-set-dialog
:sendGoodsDialog="sendGoodsDialog"
:dialogTitle="dialogTitle"
:sendSetFormData="sendSetForm"
@closeSendSet="closeSendSet">
</send-set-dialog>
</div>
</div>
</template>
......@@ -75,9 +109,11 @@
// import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
import { queryOrderDetail } from '@/utils/shop';
import SendSetDialog from "@/components/shop/send-set-dialog";
export default {
components: {
BreadCrumb
BreadCrumb,
SendSetDialog
},
data(){
return{
......@@ -86,8 +122,8 @@
jumPathThird: '/order-manage',
curmbThird: '订单详情',
orderId: 111,
showStatus: 1,
storeType: null,
showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
storeType: null,//店铺类型,1供应商,2医生小店,3小药房
orderDetailData: {
amount: '',//订单实付总金额
createdTime: '',//下单时间
......@@ -105,10 +141,12 @@
remark: '',//备注
sendTime: '',//发货时间
payChannel: '',//支付方式
showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
// showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
},
tableData: [],
sendGoodsDialog: false,
dialogTitle: '',
sendSetForm: {},
}
},
created() {
......@@ -123,11 +161,28 @@
const { goodsInfoDtoList } = res.data;
this.orderDetailData = {...res.data};
this.storeType = res.data.storeType;
this.showStatus = res.data.showStatus;
this.tableData = goodsInfoDtoList;
}
})
},
showSendDialog() {
this.sendGoodsDialog = true;
if (this.storeType == 1) {
this.dialogTitle = '发货设置'
}else {
this.dialogTitle = '配送设置'
}
},
closeSendSet(val) {
console.log('关闭时传递参数',val)
//保存操作
if (val.type == 2) {
}
this.sendGoodsDialog = false;
},
},
}
</script>
<style lang="scss">
......@@ -166,14 +221,19 @@
display: flex;
font-size: 13px;
justify-content: space-between;
.el-card__body{
padding-top: 10px;
}
.left-card{
width: 69%;
display: inline-block;
margin-right: 2%;
.trade-status1{
padding-bottom: 5px;
height: 26px;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 5px;
.send-status{
margin-left: 10px;
display: inline-block;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册