Skip to content

P
pica.cloud.web-education-admin
提交 306888db 编写于 作者: shuang.zhou's avatar shuang.zhou
浏览文件
操作

订单管理 & 订单详情 样式修改 去除操作按钮

上级 a4242ea4
显示空白字符变更
内嵌 并排
正在显示 包含 176 行增加 和 46 行删除
src/views/goods/order-detail.vue
浏览文件 @ 306888db
...@@ -87,10 +87,69 @@ ...@@ -87,10 +87,69 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{storeType == 1 ? '物流' : '配送'}}信息</span> <span>{{storeType == 1 ? '物流' : '配送'}}信息</span>
</div> </div>
<!-- 物流信息 -->
<div class="logistics-info">
<div class="title">收货信息</div>
<p>{{ orderDetailData.receiverAddr }}</p>
<p>{{orderDetailData.receiver}} {{ orderDetailData.receiverMobile }}</p>
</div>
<div v-if="showStatus == 1 || showStatus == 2"> <div v-if="showStatus == 1 || showStatus == 2">
<!-- <div v-if="storeType == 3">--> <div>
<!-- <p>无配送信息，买家自提</p>--> <!-- 多包裹 -->
<!-- </div>--> <div class="multi-package">
<el-tabs v-model="packageName" @tab-click="handlePackageClick">
<el-tab-pane v-for="(item, index) in expressList" :key="index" :label="item.packageName" :name="item.packageName">
<div class="package-img">
<div class="img-box" v-for="(val, i) in item.goodsInfoList" :key="i">
<img :src="val.goodsImageUrl" alt="">
<span class="img-tips">{{val.goodsQuantity}}</span>
</div>
</div>
<!-- 云鹊配送 小药房 && 线下配送-->
<div class="yq-logistics" v-if="(storeType == 2 && expressType == 2)">
<div class="title">
{{item.expressStatus !== 4 ? '云鹊配送中' : '云鹊配送完成'}}
</div>
<p>配送员：{{ item.senderName }}</p>
<p>手机号：{{ item.senderMobile }}</p>
<p>备注：{{ item.remark }}</p>
</div>
<!-- 物流信息 供货商 || 小药房 && 物流信息-->
<div
v-if="storeType == 1 || (storeType == 2 && expressType == 1)"
class="package-detail"
>
<div>物流公司：{{ item.expressCompany }}</div>
<div>快递单号：{{item.expressNo }}
<el-button type="text" @click="copyTxt">复制</el-button>
<input type="text" id="copyInput" class="hidden-input" />
</div>
<div>备注：{{ item.remark }}</div>
</div>
<!-- 线上物流时间线 -- 订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭 -->
<div class="steps-logistics" v-if="expressType == 1 && (showStatus === 1 || showStatus === 2 || showStatus === 6)">
<el-steps direction="vertical" :active="0">
<el-step
v-for="item in expressData"
:title="item.time"
:description="item.context"
:key="item.time"
>
<div slot="icon">
<div class="dot"></div>
</div>
</el-step>
</el-steps>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<!-- <div v-if="showStatus == 1 || showStatus == 2">
<div v-if="storeType == 3">
<p>无配送信息，买家自提</p>
</div>
<div> <div>
<p class="trade-status1"> <p class="trade-status1">
<i class="el-icon-truck" style="font-size: 18px"></i> <i class="el-icon-truck" style="font-size: 18px"></i>
...@@ -134,18 +193,18 @@ ...@@ -134,18 +193,18 @@
</div> </div>
<div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)"> <div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
<div class="trade-status1"> <div class="trade-status1">
<!-- <p> <p>
<i class="el-icon-truck" style="font-size: 18px"></i> <i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span> <span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
</p> --> </p>
<!-- <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button> --> <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button>
</div> </div>
<p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p> <p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
</div> </div>
<div v-if="showStatus == 4"> <div v-if="showStatus == 4">
<p>暂无{{storeType == 1 ? '物流' : '配送'}}信息，待买家支付</p> <p>暂无{{storeType == 1 ? '物流' : '配送'}}信息，待买家支付</p>
</div> </div>
<div v-if="showStatus == 5"><p>交易已关闭</p></div> <div v-if="showStatus == 5"><p>交易已关闭</p></div> -->
</el-card> </el-card>
<el-card class="right-card"> <el-card class="right-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
...@@ -158,23 +217,23 @@ ...@@ -158,23 +217,23 @@
<p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付时间：{{orderDetailData.paymentTime}}</p> <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付时间：{{orderDetailData.paymentTime}}</p>
<p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">&nbsp;&nbsp;&nbsp;招募人：{{orderDetailData.ownerName}}</p> <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">&nbsp;&nbsp;&nbsp;招募人：{{orderDetailData.ownerName}}</p>
<p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">所属药代：{{orderDetailData.brokerName}}</p> <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">所属药代：{{orderDetailData.brokerName}}</p>
<p>下单人手机号：{{orderDetailData.prescriberMobile}}</p> <!-- <p>下单人手机号：{{orderDetailData.prescriberMobile}}</p>
<p>订单类型：{{orderDetailData.saleTypeStr}}</p> <p>订单类型：{{orderDetailData.saleTypeStr}}</p>
<p v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</p> <p v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</p> -->
<!--<p>发货时间：{{orderDetailData.sendTime}}</p>--> <!--<p>发货时间：{{orderDetailData.sendTime}}</p>-->
<!--<p>成交时间：{{orderDetailData.finishTime}}</p>--> <!--<p>成交时间：{{orderDetailData.finishTime}}</p>-->
</div> </div>
</el-card> </el-card>
</div> </div>
</div> </div>
<send-set-dialog <!-- <send-set-dialog
:sendGoodsDialog="sendGoodsDialog" :sendGoodsDialog="sendGoodsDialog"
:dtType="dtType" :dtType="dtType"
:sendSetFormData="sendSetForm" :sendSetFormData="sendSetForm"
@closeSendSet="closeSendSet"> @closeSendSet="closeSendSet">
</send-set-dialog> </send-set-dialog> -->
</div> </div>
<el-dialog <!-- <el-dialog
class="tui-dialog" class="tui-dialog"
title="修改物流单号" title="修改物流单号"
:visible="showOrderNoFlag" :visible="showOrderNoFlag"
...@@ -195,7 +254,7 @@ ...@@ -195,7 +254,7 @@
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button> <el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button>
</span> </span>
</el-dialog> </el-dialog> -->
</div> </div>
</template> </template>
<script> <script>
...@@ -265,6 +324,8 @@ ...@@ -265,6 +324,8 @@
isShowRefundDetail: false, // 是否展示退款说明弹窗 isShowRefundDetail: false, // 是否展示退款说明弹窗
statusImgUrl: '', statusImgUrl: '',
showStatusStr: '', // 订单状态文案 showStatusStr: '', // 订单状态文案
packageName: '包裹1', // 多包裹name
expressIndex: 0, // 修改物流单号下标
} }
}, },
created() { created() {
...@@ -276,12 +337,20 @@ ...@@ -276,12 +337,20 @@
this.init(); this.init();
}, },
methods: { methods: {
// 多包裹切换获取包裹物流信息
handlePackageClick(tab) {
this.expressList.forEach(item => {
if (item.packageName === tab.name) {
this.viewLogistics(item.expressNo, this.orderDetailData.receiverMobile);
}
})
},
// 退款说明 // 退款说明
showRefundDetail(goodsId, orderId) { showRefundDetail(goodsId, orderId) {
let parmas = { let parmas = {
goodsId: goodsId, goodsId: goodsId,
orderId: orderId orderId: orderId
} };
getRefundDesc(parmas).then(res => { getRefundDesc(parmas).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
this.isShowRefundDetail = true; this.isShowRefundDetail = true;
...@@ -298,14 +367,17 @@ ...@@ -298,14 +367,17 @@
init() { init() {
queryOrderDetail(this.orderId).then(res => { queryOrderDetail(this.orderId).then(res => {
if (res.code == '000000') { if (res.code == '000000') {
const { goodsInfoDtoList } = res.data; const { goodsInfoDtoList, expressList } = res.data;
this.orderDetailData = {...res.data}; this.orderDetailData = {...res.data};
this.showStatus = res.data.showStatus; this.showStatus = res.data.showStatus;
this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
this.tableData = goodsInfoDtoList;
this.showStatusStr = res.data.showStatusStr; this.showStatusStr = res.data.showStatusStr;
this.statusImgUrl = require(`../../assets/image/order/order_status${res.data.showStatus}.png`); this.statusImgUrl = require(`../../assets/image/order/order_status${res.data.showStatus}.png`);
this.viewLogistics() this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
this.tableData = goodsInfoDtoList;
let expressNo = goodsInfoDtoList[0].expressNo;
let receiverMobile = this.orderDetailData.receiverMobile;
this.expressList = expressList; // 包裹信息
this.viewLogistics(expressNo, receiverMobile);
} }
}) })
}, },
...@@ -394,17 +466,34 @@ ...@@ -394,17 +466,34 @@
this.$message.success('复制成功'); this.$message.success('复制成功');
}, },
//查看物流 //查看物流
viewLogistics() { // viewLogistics() {
if (this.orderDetailData.expressNo && this.orderDetailData.receiverMobile) // if (this.orderDetailData.expressNo && this.orderDetailData.receiverMobile)
// expressInfo({
// expressNo: this.orderDetailData.expressNo,
// receiverMobile: this.orderDetailData.receiverMobile,
// }).then((res) => {
// if (res.code == "000000") {
// if (res.data.data && res.data.data.length) {
// this.expressData = res.data.data;
// } else {
// this.expressData[0].time = res.data.updateTime || '';
// this.expressData = this.expressData;
// }
// }
// });
// },
//查看物流
viewLogistics(expressNo, receiverMobile) {
if (expressNo && receiverMobile)
expressInfo({ expressInfo({
expressNo: this.orderDetailData.expressNo, expressNo: expressNo,
receiverMobile: this.orderDetailData.receiverMobile, receiverMobile: receiverMobile,
}).then((res) => { }).then((res) => {
if (res.code == "000000") { if (res.code == "000000") {
if (res.data.data && res.data.data.length) { if (res.data.data && res.data.data.length) {
this.expressData = res.data.data; this.expressData = res.data.data;
} else { } else {
this.expressData[0].time = res.data.updateTime || ''; this.expressData[0].time = res.data.updateTime || "";
this.expressData = this.expressData; this.expressData = this.expressData;
} }
} }
...@@ -519,11 +608,52 @@ ...@@ -519,11 +608,52 @@
height: 200px; height: 200px;
overflow-y: scroll; overflow-y: scroll;
} }
.logistics-info {
.title {
padding-bottom: 10px;
}
}
.multi-package {
.package-img {
display: flex;
.img-box {
width: 88px;
height: 88px;
background-color: rgb(224, 109, 109);
position: relative;
margin-right: 10px;
img {
width: 88px;
height: 88px;
}
.img-tips {
position: absolute;
right: 4px;
bottom: 4px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666666;
}
}
}
.yq-logistics {
padding-top: 25px;
.title {
padding-bottom: 20px;
}
}
.package-detail {
padding-top: 15px;
#copyInput {
display: none;
}
}
}
} }
.right-card{ .right-card{
width: 28%; width: 28%;
display: inline-block; display: inline-block;
max-height: 280px; max-height: 240px;
} }
.left-card, .right-card{ .left-card, .right-card{
p{ p{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或