|
@@ -1,31 +1,55 @@
|
|
|
<template>
|
|
|
<div v-loading.fullscreen.lock="detailLoading">
|
|
|
- <div class="head">
|
|
|
- <!-- <span>销售单详情</span>
|
|
|
- <span>返回</span>
|
|
|
- -->
|
|
|
- </div>
|
|
|
+ <!-- <div class="head"></div> -->
|
|
|
<div class="main">
|
|
|
<div class="box" style="margin-top: 15px;">
|
|
|
<div class="item_title">
|
|
|
<span>{{ $t("baseMessage") }}</span>
|
|
|
</div>
|
|
|
- <div class="ptitle">
|
|
|
+ <div class="ptitle baseinfotab">
|
|
|
<baseInfoTab :orderInfo="orderInfo"></baseInfoTab>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="box" style="margin-top: 15px;">
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.promotionActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item
|
|
|
+ :title="$t('shopifyPromotion.promotionMessage')"
|
|
|
+ name="2"
|
|
|
+ >
|
|
|
+ <div class="ptitle">
|
|
|
+ <promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("shopifyPromotion.promotionMessage") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
|
<promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
<div class="box" style="margin-top: 15px;">
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.receivingInfoActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('receInfor')" name="2">
|
|
|
+ <div class="ptitle">
|
|
|
+ <receivingInfoTab
|
|
|
+ :addressInfo="addressInfo"
|
|
|
+ :orderInfo="orderInfo"
|
|
|
+ ></receivingInfoTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("receInfor") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
@@ -33,19 +57,30 @@
|
|
|
:addressInfo="addressInfo"
|
|
|
:orderInfo="orderInfo"
|
|
|
></receivingInfoTab>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<div
|
|
|
class="box"
|
|
|
style="margin-top: 15px;"
|
|
|
v-if="this.pickUpInfo != null && this.pickUpInfo.orderType == 'pickUp'"
|
|
|
>
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.pickUpInfoActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('pickUpInfor')" name="2">
|
|
|
+ <div class="ptitle">
|
|
|
+ <pickUpInfoDiaTab :pickUpInfo="pickUpInfo"></pickUpInfoDiaTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("pickUpInfor") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
|
<pickUpInfoDiaTab :pickUpInfo="pickUpInfo"></pickUpInfoDiaTab>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
@@ -53,16 +88,31 @@
|
|
|
style="margin-top: 15px;padding-bottom: 10px;"
|
|
|
v-if="invoiceInfo != null"
|
|
|
>
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.invoiceInfoActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('view.invoiceDetails')" name="2">
|
|
|
+ <div class="ptitle">
|
|
|
+ <invoiceInfoTab :invoiceInfo="invoiceInfo"></invoiceInfoTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("view.invoiceDetails") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
|
<invoiceInfoTab :invoiceInfo="invoiceInfo"></invoiceInfoTab>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
<div class="box" style="margin-top: 15px;" v-if="this.logData != ''">
|
|
|
- <el-collapse v-model="active" accordion>
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.operationLogActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
<el-collapse-item :title="$t('title.operationLog')" name="2">
|
|
|
<div class="ptitle">
|
|
|
<operationLog :logData="this.logData"></operationLog>
|
|
@@ -76,18 +126,74 @@
|
|
|
style="margin-top: 15px;"
|
|
|
v-if="this.orderGiftCards != null"
|
|
|
>
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.orderGiftCardsActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('orderPayType')" name="2">
|
|
|
+ <div class="ptitle">
|
|
|
+ <orderGiftCardsTab
|
|
|
+ :orderGiftCards="orderGiftCards"
|
|
|
+ ></orderGiftCardsTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("orderPayType") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
|
<orderGiftCardsTab
|
|
|
:orderGiftCards="orderGiftCards"
|
|
|
></orderGiftCardsTab>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- 多件多折信息 -->
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="margin-top: 15px;"
|
|
|
+ v-if="this.orderGiftCards != null"
|
|
|
+ >
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer"
|
|
|
+ v-model="collapse.orderGiftCardsActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('discountInfo')" name="2">
|
|
|
+ <div class="ptitle">
|
|
|
+ <discountInfoTab
|
|
|
+ :orderGiftCards="orderGiftCards"
|
|
|
+ ></discountInfoTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
+ <span>{{ $t("orderPayType") }}</span>
|
|
|
</div>
|
|
|
+ <div class="ptitle">
|
|
|
+ <orderGiftCardsTab
|
|
|
+ :orderGiftCards="orderGiftCards"
|
|
|
+ ></orderGiftCardsTab>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
-
|
|
|
<div class="box" style="margin-top: 15px;">
|
|
|
- <div class="item_title">
|
|
|
+ <el-collapse
|
|
|
+ class="collapseContainer detailTab"
|
|
|
+ v-model="collapse.orderItemListActive"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <el-collapse-item :title="$t('orderDetails')" name="2">
|
|
|
+ <div class="ptitle orderitemlist">
|
|
|
+ <orderItemListTab
|
|
|
+ :orderDeatils="orderDeatils"
|
|
|
+ :orderInfo="orderInfo"
|
|
|
+ :exchangeFlag="exchangeFlag"
|
|
|
+ :getOrderInfo="getOrderInfo"
|
|
|
+ ></orderItemListTab>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <!-- <div class="item_title">
|
|
|
<span>{{ $t("orderDetails") }}</span>
|
|
|
</div>
|
|
|
<div class="ptitle">
|
|
@@ -97,7 +203,7 @@
|
|
|
:exchangeFlag="exchangeFlag"
|
|
|
:getOrderInfo="getOrderInfo"
|
|
|
></orderItemListTab>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="box" style="margin: 15px 0;padding-bottom: 10px;">
|
|
@@ -129,6 +235,7 @@ import optLogTab from "./optLogTab";
|
|
|
import orderItemListTab from "./orderItemListTab";
|
|
|
import orderGiftCardsTab from "./orderGiftCardsTab";
|
|
|
import receivingInfoTab from "./receivingInfoTab";
|
|
|
+import discountInfoTab from "./discountInfoTab";
|
|
|
import operationLog from "@/views/oms/order/components/operationLog.vue";
|
|
|
import PickUpInfoDiaTab from "@/views/oms/order/components/pickUpInfoDiaTab.vue";
|
|
|
|
|
@@ -144,14 +251,23 @@ export default {
|
|
|
orderItemListTab,
|
|
|
orderGiftCardsTab,
|
|
|
receivingInfoTab,
|
|
|
- promotionInfoTab
|
|
|
+ promotionInfoTab,
|
|
|
+ discountInfoTab
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
activeName: "orderItemList",
|
|
|
logData: [],
|
|
|
orderInfo: {},
|
|
|
- active: 1,
|
|
|
+ collapse: {
|
|
|
+ promotionActive: "2",
|
|
|
+ receivingInfoActive: "2",
|
|
|
+ pickUpInfoActive: "2",
|
|
|
+ operationLogActive: "1",
|
|
|
+ orderGiftCardsActive: "2",
|
|
|
+ orderItemListActive: "2",
|
|
|
+ invoiceInfoActive: "2"
|
|
|
+ },
|
|
|
addressInfo: {},
|
|
|
pickUpInfo: {},
|
|
|
orderDeatils: [],
|
|
@@ -359,3 +475,107 @@ export default {
|
|
|
color: #606266;
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.orderDetailDialog {
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 36px 21px 0px 28px;
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ae8877;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ top: 14px;
|
|
|
+ right: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ .el-icon-close {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0px 8px 28px 8px;
|
|
|
+ }
|
|
|
+ .item_title,
|
|
|
+ .el-collapse-item__header {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 16px !important;
|
|
|
+ line-height: 16px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 28px !important;
|
|
|
+ &:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ top: 13px;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 3px;
|
|
|
+ height: 13px;
|
|
|
+ background: #ae8877;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse {
|
|
|
+ border: none;
|
|
|
+ .el-collapse-item__wrap {
|
|
|
+ // margin: 18px;
|
|
|
+ }
|
|
|
+ .el-collapse-item__header {
|
|
|
+ height: 40px;
|
|
|
+ padding-left: 9px !important;
|
|
|
+ &:before {
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-collapse-item__wrap,
|
|
|
+ .el-collapse-item__header {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-collapse-item {
|
|
|
+ margin: 18px;
|
|
|
+ border-bottom: 1px solid#d8d8d8 !important;
|
|
|
+ padding-bottom: 18px;
|
|
|
+ }
|
|
|
+ .el-collapse-item__content {
|
|
|
+ padding-bottom: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collapseContainer {
|
|
|
+ .ptitle {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-descriptions-item__cell {
|
|
|
+ line-height: 22px !important;
|
|
|
+ }
|
|
|
+ .ptitle {
|
|
|
+ margin: 2px 20px;
|
|
|
+ border-bottom: 1px solid#d8d8d8;
|
|
|
+ &.baseinfotab {
|
|
|
+ border-bottom: none;
|
|
|
+ background: #f5f0ee;
|
|
|
+ padding: 0px 18px;
|
|
|
+ }
|
|
|
+ &.orderitemlist {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .baseinfo {
|
|
|
+ padding: 18px;
|
|
|
+ .el-descriptions__table {
|
|
|
+ background: #f5f0ee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detailTab {
|
|
|
+ .el-collapse-item {
|
|
|
+ border-bottom: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|