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

<template>
  <div class="payment-info">
    <InfoCard title="回款概览">
      <div class="payment-info-content">
        <div class="payment-info-item">
          回款状态：{{ returnStatus }}
        </div>
        <div class="payment-info-item">
          已回款金额：¥{{ returnAmount(returnRes?.returnMoney) }}
        </div>
        <div class="payment-info-item">
          未回款金额：¥{{ returnAmount(returnRes?.remainingMoney) }}
        </div>
      </div>
    </InfoCard>
    <InfoCard title="回款交易详情" :length="paymentDetailList.length || 0" :is-show-length="true">
      <div class="payment-info-content">
        <TableCard
          class="payment-info-content-table"
          :table-data="paymentDetailList"
          :columns="paymentDetailColumns"
          width="1108px"
        >
          <template v-slot:return_voucher_url="{ row }">
            <span v-if="row.row.return_voucher_url" @click="vouched(row.row.return_voucher_url)" class="column-cell">点击查看</span>
            <span v-else>-</span>
          </template>
        </TableCard>
      </div>
    </InfoCard>
    <InfoCard v-if="orderTransfer.length" title="用户自助下单对公转账">
      <div class="payment-info-content">
        <TableCard
          class="payment-info-content-table"
          :table-data="orderTransfer"
          :columns="transerColumns"
          width="1108px"
        >
          <template v-slot:voucher="{ row }">
            <span @click="vouched(row.row.voucher)" class="column-cell">点击查看</span>
          </template>
          <template v-slot:action="{ row }">
            <span @click="payShenHe" class="column-cell">{{ row.row.action }}</span>
          </template>
        </TableCard>
      </div>
    </InfoCard>
    <newDetailModel
      ref="paymentDetailModel"
      :order-detail="orderData"
    ></newDetailModel>
  </div>
</template>

<script>
import InfoCard from '../../ui/InfoCard.vue';
import TableCard from '../../ui/TableCard.vue';
import newDetailModel from '../newDetailModel.vue';
import { mapState } from 'vuex';
export default {
  name: 'PaymentInfo',
  components: {
    InfoCard,
    TableCard,
    newDetailModel
  },
  data() {
    const defaultRender = (val) => val || '-';
    return {
      paymentDetailColumns: [
        {
          label: '回款时间',
          prop: 'return_time',
          width: '112',
          render: (row) => this.formatDate(row.return_time)
        },
        {
          label: '回款金额',
          prop: 'return_money',
          width: '90',
          render: (row) => {
            return row.return_money ? '¥' + this.returnAmount(row.return_money) : this.returnAmount(0)
          }
        },
        {
          label: '支付方式',
          prop: 'return_type',
          width: '90',
          render (row) {
            const payCashStatus = [
              { v: '1', n: '微信支付' },
              { v: '2', n: '支付宝支付' },
              { v: '3', n: '对公转账' }
            ]
            return payCashStatus.find(v => v.v == row.return_type).n || '-'
          }
        },
        {
          label: '手续费',
          prop: 'procedures_money',
          width: '90',
          render: (row) => {
             return row.procedures_money ? '￥' + this.returnAmount(row.procedures_money) : this.returnAmount(0) 
          }
        },
        {
          label: '回款银行',
          prop: 'bank_name',
          width: '120',
          render (row) {
            return defaultRender(row.bank_name)
          }
        },
        {
          label: '支付单号/银行流水号',
          prop: 'return_code',
          width: '112',
          render (row) {
            return row.bank_flow || row.return_code
          }
        },
        {
          label: '支付户名',
          prop: 'pay_account_name',
          width: '90',
          render (row) {
            return defaultRender(row.pay_account_name) 
          }
        },
        {
          label: '流水金额',
          prop: 'flow_money',
          width: '90',
          render: (row) => {
            return row.flow_money ? '￥' + this.returnAmount(row.flow_money) : this.returnAmount(0)
          }
        },
        {
          label: '支付凭证',
          prop: 'return_voucher_url',
          width: '90'
        },
        {
          label: '操作时间',
          prop: 'operate_time',
          width: '112',
          render: (row) => {
            return defaultRender(row.operate_time) 
          }
        },
        {
          label: '操作人',
          prop: 'operate_person',
          width: '90',
          render: (row) => {
            return defaultRender(row.operate_person) 
          }
        },
        {
          label: '回款说明',
          prop: 'return_remark',
          width: '202',
          render (row) {
            return defaultRender(row.return_remark)
          }
        }
      ],
      paymentDetailList_: [
        {
          return_time: '2023-12-31 13:21:32',
          paymoney: '点击查看',
          return_type: '微信支付',
          // commission: '¥100.00',
          bank_name: '广发银行北京顺义支行',
          bank_flow: '094640260820',
          pay_account_name: '张三',
          flow_money: '¥2,000.00',
          operate_time: '2023-12-31 13:21:32',
          operate_person: '张三',
          return_remark: '备注'
        }
      ],
      transerColumns: [
        {
          label: '提交时间',
          prop: 'create_time',
          render (row) {
            return defaultRender(row.create_time)
          }
        },
        {
          label: '支付凭证',
          prop: 'voucher',
        },
        {
          label: '审核状态',
          prop: 'state',
          render (row) {
            return defaultRender(row.state) 
          }
        },
        {
          label: '审核时间',
          prop: 'update_time',
          render (row) {
            return defaultRender(row.update_time) 
          }
        },
        {
          label: '操作人',
          prop: 'audit_person',
          render (row) {
            return defaultRender(row.audit_person) 
          }
        },
        {
          label: '操作',
          prop: 'action'
        }
      ],
      orderTransfer_: [
        {
          create_time: '2023-12-31 13:21:32',
          voucher: '点击查看',
          state: '审核通过',
          update_time: '2023-12-31 13:21:32',
          audit_person: '张三',
          action: '审核',
        }
      ],
    }
  },
  computed: {
    ...mapState({
      orderDetail: state => state.order.orderDetail 
    }),
    returnStatus() {
      const val = this.orderDetail?.orderData?.return_status || 0;
      if (val == 0) {
          return '未回款'
      } else if (val == 1) {
          return '全额回款'
      } else if (val == 2) {
          return '部分回款'
      } else {
          return '未回款'
      }
    },
    returnRes () {
      return this.orderDetail?.returnRes || {};
    },
    orderData() {
      return this.orderDetail?.orderData || {};
    },
    paymentDetailList () {
      return this.returnRes?.returnInfo || [];
    },
    orderTransfer () {
      return this.returnRes?.orderTransfer || [];
    }
  },
  methods: {
    returnAmount(val) {
      if (!val) return 0;
      val = Number(val)
      const amount = (val / 100).toFixed(2) || 0;
      return amount;
    },
    formatDate(timeString) {
      if (!timeString) return '-';
      // 只取空格前的日期部分
      return timeString.split(' ')[0];
    },
    setReturnType(val) {
      if (val === 1) {
          return '微信支付'
      } else if(val === 2) {
          return '支付宝支付'
      } else if(val === 3) {
          return '对公转账'
      } else {
          return '未回款'
      }
    },
    payShenHe() {
      this.$refs.paymentDetailModel.sShow = true;
    },
    vouched(val) {
      if (val) {
        const urls = this.$router.resolve(val)
        window.open(urls.href, '_blank')
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.payment-info {
  background: #F2F2F4;
  ::v-deep {
    .info-card {
      margin-bottom: 16px;
    }
  }
  .payment-info-content {
    width: 1108px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .payment-info-item{
    margin-right: 32px;
    min-width: 255px;
    font-size: 14px;
    line-height: 22px;
    color: $gray_10;
  }
  .payment-info-content-table {
    border-radius: 4px;
    ::v-deep {
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          display: block; /* 强制显示滚动条 */
          height: 8px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 4px;
        }
      }
      .cell {
        text-align: center;
        font-size: 14px;
        color: $gray_10;
        font-weight: 400;
      }
      .has-gutter {
        th {
          background: #F9FAFB;
          .cell {
            padding: 0;
            color: #686868;
          }
        }
      }
      .column-cell {
        color: $color_main;
        cursor: pointer;
      }
    }
  }
  .num-active {
    color: $color_main;
  }
}
</style>