qmx_page_admin/src/views/create-order/components/order-detail-submodule/PaymentPlan.vue

<template>
  <div class="payment-plan">
    <InfoCard>
      <template #title>
        <span>回款计划</span>
        <span style="font-size: 14px;line-height: 22px;">
          （共<span class="num-active"> {{ paymentPlanList.length }} </span>条
          <span>预计回款</span>
          <span class="num-active"> ￥{{ formatNumber(returnMoneyPlant?.plantMoney || 0) }} </span>
          <span> 实际回款</span>
          <span class="num-active"> ￥{{ formatNumber(returnMoneyPlant?.returnMoney || 0) }} </span>）
        </span>
      </template>
      <div class="payment-plan-content">
        <paymentPlanModule :orderDetail="orderDetail"></paymentPlanModule>
      </div>
    </InfoCard>
  </div>
</template>
<script>
import InfoCard from '../../ui/InfoCard.vue'
import paymentPlanModule from './PaymentPlanModule.vue';
import { mapState } from 'vuex';
export default {
  name: 'PaymentPlan',
  components: {
    InfoCard,
    paymentPlanModule
  },
  data() {
    return {
      paymentPlanList: [],
      returnMoneyPlant: {}
    } 
  },
  computed: {
    ...mapState({
      orderDetail: state => state.order.orderDetail
    })
  },
  watch: {
    orderDetail: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.getPaymentPlanList()
        })
      }
    }
  },
  mounted() {
    this.getPaymentPlanList()
  },
  methods: {
    getPaymentPlanList() {
      this.returnMoneyPlant = this.orderDetail?.returnMoneyPlant || {};
      const listMap = this.orderDetail?.returnMoneyPlant?.list || {};

      let plantList = listMap.plantList;

      if (!plantList) {
        this.paymentPlanList = [];
        return;
      }

      try {
        plantList = JSON.parse(plantList);
      } catch (error) {
        console.error('Failed to parse plantList JSON:', error);
        plantList = [];
      }

      this.paymentPlanList = Array.isArray(plantList) ? plantList : [];
    },
    formatNumber(num, x = 2) {
      return (num / 100).toFixed(x)
    }
  }
}
</script>
<style scoped lang="scss">
.payment-plan {
  .payment-plan-content-table {
    border-radius: 4px;
  }
  .num-active {
    color: $color_main;
  }
}
</style>