goelia-ai-admin/src/views/oms/order/components/orderInfoDialog.vue

<template>
  <div v-loading.fullscreen.lock="detailLoading">
    <!-- <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 baseinfotab">
          <baseInfoTab :orderInfo="orderInfo"></baseInfoTab>
        </div>
      </div>

      <div class="box" style="margin-top: 15px;">
        <el-collapse
          class="collapseContainer"
          v-model="collapse.promotionActive"
          accordion
        >
          <el-collapse-item
            :title="$t('multiBuyDiscount.promotionMessage')"
            name="2"
          >
            <div class="ptitle">
              <promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- <div class="item_title">
          <span>{{ $t("multiBuyDiscount.promotionMessage") }}</span>
        </div>
        <div class="ptitle">
          <promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
        </div> -->
      </div>

      <div class="box" style="margin-top: 15px;">
        <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">
          <receivingInfoTab
            :addressInfo="addressInfo"
            :orderInfo="orderInfo"
          ></receivingInfoTab>
        </div> -->
      </div>
      <div
        class="box"
        style="margin-top: 15px;"
        v-if="this.pickUpInfo != null && this.pickUpInfo.orderType == 'pickUp'"
      >
        <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
        class="box"
        style="margin-top: 15px;padding-bottom: 10px;"
        v-if="invoiceInfo != null"
      >
        <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 class="box" style="margin-top: 15px;" v-if="this.logData != ''">
        <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>
            </div>
          </el-collapse-item>
        </el-collapse>
      </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('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-has="'priceRule:list'">
        <el-collapse
          class="collapseContainer"
          v-model="collapse.orderGiftCardsActive"
          accordion
        >
          <el-collapse-item :title="$t('discountInfo')" name="2">
            <div class="ptitle">
              <discountInfoTab :datas="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;">
        <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">
          <orderItemListTab
            :orderDeatils="orderDeatils"
            :orderInfo="orderInfo"
            :exchangeFlag="exchangeFlag"
            :getOrderInfo="getOrderInfo"
          ></orderItemListTab>
        </div> -->
      </div>

      <!-- 		<div class="box" style="margin: 15px 0;padding-bottom: 10px;">
				<div class="item_title">
					<span>操作日志</span>
				</div>
				<div class="ptitle">
					<optLogTab :ordersId="ordersId"></optLogTab>
				</div>
			</div> -->
    </div>
  </div>
</template>

<script>
import {
  getById,
  getLogData,
  queryOrderGiftCard,
  queryOrderDetails
} from "@/api/oms/order/order";
import { queryByOrdersId as getAddress } from "@/api/oms/order/address";
import { getById as getInvoice } from "@/api/oms/order/invoice";

import baseInfoTab from "./baseInfoTab";
import promotionInfoTab from "./promotionInfoTab";
import invoiceInfoTab from "./invoiceInfoTab";
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";

export default {
  name: "orderInfoDialog",
  props: ["ordersId", "exchangeFlag"],
  components: {
    PickUpInfoDiaTab,
    operationLog,
    baseInfoTab,
    invoiceInfoTab,
    optLogTab,
    orderItemListTab,
    orderGiftCardsTab,
    receivingInfoTab,
    promotionInfoTab,
    discountInfoTab
  },
  data() {
    return {
      activeName: "orderItemList",
      logData: [],
      orderInfo: {},
      collapse: {
        promotionActive: "2",
        receivingInfoActive: "2",
        pickUpInfoActive: "2",
        operationLogActive: "1",
        orderGiftCardsActive: "2",
        orderItemListActive: "2",
        invoiceInfoActive: "2"
      },
      addressInfo: {},
      pickUpInfo: {},
      orderDeatils: [],
      orderGiftCards: [],
      invoiceInfo: null,
      detailLoading: false
    };
  },
  created() {
    this.getOrderInfo();
  },
  methods: {
    async getOrderInfo() {
      this.detailLoading = true;
      await getById(this.ordersId).then(res => {
        if (200 == res.code) {
          this.orderInfo = res.data;
        }
      });

      await getAddress(this.orderInfo.ordersId).then(res => {
        if (200 == res.code) {
          this.addressInfo = res.data;
          this.pickUpInfo = res.data.orderPickUpLogCustomEntity;
        }
      });
      getLogData(this.orderInfo.ordersId).then(res => {
        if (200 == res.code) {
          this.logData = res.data;
        }
      });
      queryOrderGiftCard(this.orderInfo.ormorder).then(res => {
        if (200 == res.code) {
          this.orderGiftCards = res.data;
          for (let i in this.orderGiftCards) {
            if (this.orderGiftCards[i].containRise == "01") {
              this.orderGiftCards[i].containRiseCheck = true;
            } else {
              this.orderGiftCards[i].containRiseCheck = false;
            }
          }
        }
      });
      queryOrderDetails(this.orderInfo.ordersId).then(res => {
        if (200 == res.code) {
          this.orderDeatils = res.data;
          for (let i in this.orderDeatils) {
            if (this.orderDeatils[i].exchangeFlag == "1") {
              this.orderDeatils[i].exchangeCheck = true;
            } else {
              this.orderDeatils[i].exchangeCheck = false;
            }
            if (this.orderDeatils[i].refundFlag == "0") {
              this.orderDeatils[i].returnCheck = false;
            } else {
              this.orderDeatils[i].returnCheck = true;
            }
            if (this.orderDeatils[i].isGift == "0") {
              this.orderDeatils[i].isGiftCheck = false;
            } else {
              this.orderDeatils[i].isGiftCheck = true;
            }
          }
          console.log(this.orderDeatils);
          this.detailLoading = false;
        }
      });

      // if(this.orderInfo.invoiceId && 0 != this.orderInfo.invoiceId){
      // 	await getInvoice({invoiceId:this.orderInfo.invoiceId}).then(res =>{
      // 		if(200 == res.code){
      // 			this.invoiceInfo = res.data;
      // 		}
      // 	})
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  padding: 0 20px;
  height: 25px;
  box-shadow: 0px 7px 6px -6px #f8eeee;
  display: flex;
  justify-content: space-between;
  span:nth-child(1) {
    font-size: 15px;
    line-height: 25px;
    color: #909399;
    font-weight: 600;
  }
  span:nth-child(2) {
    line-height: 25px;
    cursor: pointer;
    color: #ae8878;
    font-size: 13px;
  }
}

.big_box {
  min-width: 650px;
  border: 1px solid #e4e7ed;
  border-bottom: none;
}

.big_box div {
  border-bottom: 1px solid #e4e7ed;
  display: flex;
}

.big_box p {
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-weight: bold;
  border-right: 1px solid #e4e7ed;
  padding: 0 5px;
  text-align: center;
  color: #909399;
  min-width: 100px;
}

.w {
  font-weight: 500 !important;
  color: #606266 !important;
  text-align: left !important;
  padding-left: 20px !important;
}

.main {
  margin-top: 15px;
  .box {
    text-align: center;
    position: relative;
    .box_item {
      padding: 0 20px;
      display: flex;
      .item_title {
        line-height: 40px;
        font-size: 18px;
        text-align: left;
        font-weight: 600;
      }
      .item_list {
        text-align: left;
        font-size: 14px;
        color: #606266;
        display: flex;
        p {
          margin: 10px 0;
        }
        div:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
    .item_title {
      padding-left: 20px;
      line-height: 40px;
      font-size: 18px;
      text-align: left;
      font-weight: 600;
    }
  }
}

.ptitle {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  color: #1f2d3d;
  text-align: left;
  font-weight: bold;
}

.pcode {
  color: #8f5842;
  font-weight: 500;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/deep/ .el-collapse-item__header {
  padding-left: 20px;
  line-height: 40px;
  font-size: 18px;
  text-align: left;
  font-weight: 600;
  color: #606266;
}
</style>
<style lang="scss">
.orderDetailDialog {
  .el-dialog__header {
    padding: 36px 21px 0px 28px;
    .el-dialog__title {
      font-size: 18px;
      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>