qmx_page_admin/src/views/create-order/components/order-review-submodule/OrderReviewContent.vue

<template>
  <div class="order-review-card-content">
    <InfoCard title="基本信息">
      <OrderDescInfo :orderInfo="orderInfo.orderData"></OrderDescInfo>
    </InfoCard>
    <!-- 产品信息 -->
    <OrderDetailCardProduct></OrderDetailCardProduct>
    <InfoCard title="协议信息">
      <ContractInfoSignModule></ContractInfoSignModule>
    </InfoCard>
    <PaymentPlan></PaymentPlan>
    <InfoCard title="最新业绩归属">
      <div class="performmace-belongs-content">
        <PerformanceBelongsModule></PerformanceBelongsModule>
      </div>
    </InfoCard>
    <InfoCard title="其他信息">
      <OrderDetailCardOther></OrderDetailCardOther>
    </InfoCard>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import InfoCard from '../../ui/InfoCard.vue';
import PerformanceBelongsModule from '../order-detail-submodule/PerformanceBelongsModule.vue';
import ContractInfoSignModule from '../order-detail-submodule/ContractInfoSignModule.vue';
import PaymentPlan from '../order-detail-submodule/PaymentPlan.vue';
import OrderDescInfo from './OrderDescInfo.vue';
import OrderDetailCardProduct from '../order-detail-submodule/OrderDetailCardProduct.vue';
import OrderDetailCardOther from '../order-detail-submodule/OrderDetailCardOther.vue';

export default {
  name: 'OrderReviewContent',
  props: {
    orderCode: {
      type: String,
      default: ''
    },
  },
  components: {
    InfoCard,
    OrderDescInfo,
    PaymentPlan,
    OrderDetailCardProduct,
    OrderDetailCardOther,
    ContractInfoSignModule,
    PerformanceBelongsModule,
  },
  data() {
    return {
      orderDetail: {},
      loading: true,
    }
  },
  computed: {
    ...mapState({
      orderInfo: state => state.order.orderDetail
    })
  },
  watch: {
    orderCode: {
      immediate: true,
      handler(val) {
        this.getOrderDetailFn(val)
      }
    }
  },
  methods: {
    ...mapActions('order', ['getOrderDetail']),
    getOrderDetailFn(id = this.orderCode) {
      if (!id) {
        return
      }
      this.getOrderDetail({ id }).then(res => {
        this.orderDetail = res || {}
      })
      .finally(() => {
        this.$emit('detail', this.orderDetail)
        this.loading = false 
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.order-review-card-content {
  background: #F2F2F4;
  ::v-deep {
    .info-card {
      $padding: 16px;
      padding-top: $padding;
      padding-bottom: $padding;
    }
    .order-detail-card-product {
      .info-card {
        margin-bottom: 0;
      }
    }
  }
}
</style>