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 @@
<div slot="header" class="clearfix">
<span>{{storeType == 1 ? '物流' : '配送'}}信息</span>
</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="storeType == 3">-->
<!-- <p>无配送信息，买家自提</p>-->
<!-- </div>-->
<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>
<p class="trade-status1">
<i class="el-icon-truck" style="font-size: 18px"></i>
......@@ -134,18 +193,18 @@
</div>
<div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
<div class="trade-status1">
<!-- <p>
<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> -->
</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>
<div v-if="showStatus == 5"><p>交易已关闭</p></div> -->
</el-card>
<el-card class="right-card">
<div slot="header" class="clearfix">
......@@ -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">&nbsp;&nbsp;&nbsp;招募人：{{orderDetailData.ownerName}}</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 v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</p>
<p v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</p> -->
<!--<p>发货时间：{{orderDetailData.sendTime}}</p>-->
<!--<p>成交时间：{{orderDetailData.finishTime}}</p>-->
</div>
</el-card>
</div>
</div>
<send-set-dialog
<!-- <send-set-dialog
:sendGoodsDialog="sendGoodsDialog"
:dtType="dtType"
:sendSetFormData="sendSetForm"
@closeSendSet="closeSendSet">
</send-set-dialog>
</send-set-dialog> -->
</div>
<el-dialog
<!-- <el-dialog
class="tui-dialog"
title="修改物流单号"
:visible="showOrderNoFlag"
......@@ -195,7 +254,7 @@
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button>
</span>
</el-dialog>
</el-dialog> -->
</div>
</template>
<script>
......@@ -265,6 +324,8 @@
isShowRefundDetail: false, // 是否展示退款说明弹窗
statusImgUrl: '',
showStatusStr: '', // 订单状态文案
packageName: '包裹1', // 多包裹name
expressIndex: 0, // 修改物流单号下标
}
},
created() {
......@@ -276,36 +337,47 @@
this.init();
},
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 = {
goodsId: goodsId,
orderId: orderId
}
getRefundDesc(parmas).then(res => {
if (res.code == "000000") {
this.isShowRefundDetail = true;
this.$alert(`<p>退款方式：${res.refundWay}</p>
<p>退款金额：${res.refundAmount}元</p>
<p>退款对象：${res.refundObject}</p>
<p>退款理由：${res.refundReason}</p>`,
'退款说明', {
dangerouslyUseHTMLString: true
});
}
})
};
getRefundDesc(parmas).then(res => {
if (res.code == "000000") {
this.isShowRefundDetail = true;
this.$alert(`<p>退款方式：${res.refundWay}</p>
<p>退款金额：${res.refundAmount}元</p>
<p>退款对象：${res.refundObject}</p>
<p>退款理由：${res.refundReason}</p>`,
'退款说明', {
dangerouslyUseHTMLString: true
});
}
})
},
init() {
queryOrderDetail(this.orderId).then(res => {
if (res.code == '000000') {
const { goodsInfoDtoList } = res.data;
const { goodsInfoDtoList, expressList } = res.data;
this.orderDetailData = {...res.data};
this.showStatus = res.data.showStatus;
this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
this.tableData = goodsInfoDtoList;
this.showStatusStr = res.data.showStatusStr;
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,21 +466,38 @@
this.$message.success('复制成功');
},
//查看物流
viewLogistics() {
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() {
// 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({
expressNo: expressNo,
receiverMobile: 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;
}
}
}
});
});
},
},
filters: {
......@@ -519,11 +608,52 @@
height: 200px;
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{
width: 28%;
display: inline-block;
max-height: 280px;
max-height: 240px;
}
.left-card, .right-card{
p{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或