tuanfeng-pc-admin/src/views/finance/withdrawal/components/DetailModal.vue

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <div>
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="店铺名称：">
          {{ formData.shopName }}
        </el-descriptions-item>
        <el-descriptions-item label="店铺编码：">
          {{ formData.shopCode }}
        </el-descriptions-item>
        <el-descriptions-item label="银行名称：">
          {{ formData.bankName }}
        </el-descriptions-item>
        <el-descriptions-item label="银行卡号：">
          {{ formData.bankCard }}
        </el-descriptions-item>
        <el-descriptions-item label="收款人姓名：">
          {{ formData.collectionName }}
        </el-descriptions-item>
        <el-descriptions-item label="提现金额：">
          {{ formData.withdrawalMoney }}
        </el-descriptions-item>
        <el-descriptions-item label="处理编号：">
          {{ formData.handleSn }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间：">
          {{ formData.applyTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
          {{ formData.handleTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <div>
            <span v-if="formData.state === 0">待处理</span>
            <span v-else-if="formData.state === 1">已处理</span>
            <span v-else-if="formData.state === 2">通过</span>
            <span v-else-if="formData.state === 3">拒绝</span>
            <span v-else-if="formData.state === 4">待确认</span>
            <span v-else>--</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="备注：">
          {{ formData.cause || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="惠市宝订单的分账状态：">
          <div>
            <span v-if="formData.summaryHsbSplitState === -1">无需分账</span>
            <span v-else-if="formData.summaryHsbSplitState === 0">未分账</span>
            <span v-else-if="formData.summaryHsbSplitState === 1">部分分账</span>
            <span v-else-if="formData.summaryHsbSplitState === 2">已分账</span>
            <span v-else>--</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="惠市宝已分账金额：">
          {{ formData.summaryHsbSplitedAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="惠市宝剩余分账金额：">
          {{ formData.summaryHsbSplitRemainAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="非惠市宝订单的相关提现金额：">
          {{ formData.summaryNotHsbAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="已认证身份姓名">
          {{ cardData.name }}
        </el-descriptions-item>
        <el-descriptions-item label="已认证身份证">
          {{ cardData.idCard }}
        </el-descriptions-item>
        <el-descriptions-item label="已认证电话号码">
          {{ cardData.phone}}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-tabs v-model="tabsValue">
      <el-tab-pane label="结算列表" name="relatedSettlement" v-if="![3, 4].includes(formData.withdrawalType)">
        <div v-if="formData.relatedSettlement && formData.relatedSettlement.length" style="margin-top: 32px">
          <el-table
            v-loading="!formData.relatedSettlement.length"
            height="60vh"
            element-loading-text="暂无结算数据"
            :data="formData.relatedSettlement"
            v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
          >
            <el-table-column align="center" min-width="80" prop="id" label="ID" show-overflow-tooltip />
            <el-table-column align="center" width="120" prop="canWithdrawalAmount" label="可提现金额" show-overflow-tooltip />
            <el-table-column align="center" prop="createTime" label="创建时间" width="150" />
            <el-table-column align="center" min-width="150" prop="curWithdrawalAmount" label="占关联提现申请总额的金额" show-overflow-tooltip />
            <el-table-column align="center" min-width="120" prop="refundAmount" label="回退金额" show-overflow-tooltip />
            <el-table-column align="center" width="100" prop="shopId" label="关联店铺ID" show-overflow-tooltip />
            <el-table-column align="center" width="150" prop="sn" label="结算编号" show-overflow-tooltip />
            <el-table-column align="center" label="结算状态" prop="state">
              <template slot-scope="{ row }">
                <el-tag v-if="row.state === '0'" effect="plain" type="info">未清算</el-tag>
                <el-tag v-else-if="row.state === '1'" effect="plain" type="success">已清算</el-tag>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="140" label="是否惠市宝订单结算" prop="isHsb">
              <template slot-scope="{ row }">
                <div style="display: flex; justify-content: center; align-items: center">
                  <div>
                    <el-tag v-if="row.isHsb === '0'" effect="plain" type="info">否</el-tag>
                    <el-tag v-else-if="row.isHsb === '1'" effect="plain" type="success">是</el-tag>
                    <span v-else>--</span>
                  </div>
                  <el-button v-if="row.isHsb === '1'" style="margin-left: 6px" type="warning" size="mini" @click="$refs.LedgerInformation && $refs.LedgerInformation.handleOpen(formData, row.sn)">
                    分账状态
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" prop="totalPrice" label="总金额" />
            <el-table-column align="center" width="100" prop="withdrawaledAmount" label="已提现金额" show-overflow-tooltip />
            <el-table-column align="center" width="100" prop="withdrawalingAmount" label="提现中的金额" show-overflow-tooltip />
            <el-table-column align="center" label="操作" width="120" fixed="right" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button v-if="formData.relatedOrders[row.sn]" type="success" size="mini" @click="$refs.RelatedOrders && $refs.RelatedOrders.handleOpen(formData, row.sn)">关联订单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 关联订单 -->
          <RelatedOrders ref="RelatedOrders" />
          <!-- 订单的分账状态信息 -->
          <LedgerInformation ref="LedgerInformation" @success="getInfo(formData.withdrawalId)" />
        </div>
        <div v-else style="font-size: 16px; font-weight: bold">无结算数据</div>
      </el-tab-pane>

      <el-tab-pane v-if="[3, 4].includes(formData.withdrawalType)" label="入账列表" name="entry">
        <el-table :data="formData.withdrawalType === 3 ? formData.shopVoucherEntryRecordList : formData.shopVoucherExchangeEntryRecordList" border stripe>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column align="center" prop="orderFormId" label="来源订单号"></el-table-column>
          <el-table-column align="center" prop="number" label="代金券数量"></el-table-column>
          <el-table-column align="center" prop="createTime" label="入账时间"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane v-if="[3, 4].includes(formData.withdrawalType)" label="出账列表" name="disbursement">
        <el-table :data="formData.withdrawalType === 3 ? formData.shopVoucherOutgoinRecordList : formData.shopVoucherExchangeOutgoinRecordList" border stripe>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column align="center" prop="orderFormId" label="来源订单号"></el-table-column>
          <el-table-column align="center" prop="number" label="代金券数量"></el-table-column>
          <el-table-column align="center" prop="createTime" label="出账时间"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import RelatedOrders from './RelatedOrders'
import LedgerInformation from './LedgerInformation'
import { withdrawalGetById, withdrawalGetById2,getWithdrawalAccount } from '@/api/withdrawal'

export default {
  name: 'DetailModal',
  components: {
    RelatedOrders,
    LedgerInformation
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1220px',
        title: '查看提现详情'
      },
      visible: false,
      tabsValue: 'relatedSettlement',
      formData: {
        withdrawalId: '',
        shopName: '',
        shopCode: '',
        bankName: '',
        bankCard: '',
        collectionName: '',
        withdrawalMoney: '',
        handleSn: '',
        applyTime: '',
        handleTime: '',
        state: '',
        cause: '',
        relatedSettlement: [], // 结算记录
        relatedOrders: {}, // 相关订单
        relatedPresenterVoucherLogs: {}, // 代金券记录
        relatedCommissionLogs: {}, // 佣金记录
        relatedBuyerUsers: [], // 用户列表
        summaryHsbSplitState: '',
        summaryHsbSplitedAmount: '',
        summaryHsbSplitRemainAmount: '',
        summaryNotHsbAmount: ''
      },
      //  身份证信息
      cardData:{}
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.withdrawalId) {
        this.getInfo(params.withdrawalId)
        this.getWithdrawalInfo(params.shopId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        let api = null
        if (![3, 4].includes(this.formData.withdrawalType)) {
          api = withdrawalGetById
          this.tabsValue = 'relatedSettlement'
        } else {
          api = withdrawalGetById2
          this.tabsValue = 'entry'
        }

        const res = await api({ withdrawalId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          withdrawalId: res.data.withdrawalId || '',
          shopName: res.data.shopName || '',
          shopCode: res.data.shopCode || '',
          bankName: res.data.bankName || '',
          bankCard: res.data.bankCard || '',
          collectionName: res.data.collectionName || '',
          withdrawalMoney: res.data.withdrawalMoney || 0,
          handleSn: res.data.handleSn || '',
          applyTime: res.data.applyTime || '',
          handleTime: res.data.handleTime || '',
          state: res.data.state || 0,
          cause: res.data.cause || '',
          relatedSettlement: res.data.relatedSettlement || [],
          relatedOrders: res.data.relatedOrders || {},
          relatedPresenterVoucherLogs: res.data.relatedPresenterVoucherLogs || {},
          relatedCommissionLogs: res.data.relatedCommissionLogs || {},
          relatedBuyerUsers: res.data.relatedBuyerUsers || [],
          summaryHsbSplitState: res.data.summaryHsbSplitState,
          summaryHsbSplitedAmount: res.data.summaryHsbSplitedAmount,
          summaryHsbSplitRemainAmount: res.data.summaryHsbSplitRemainAmount,
          summaryNotHsbAmount: res.data.summaryNotHsbAmount,
          withdrawalType: this.formData.withdrawalType
        })
      } finally {
        loading.close()
      }
    },
    // 单独用来请求提现的身份证以及手机号姓名等
    async getWithdrawalInfo(id){
      let {data} = await getWithdrawalAccount({ shopIds: id })
      this.cardData = data[0]
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-collapse {
// 	.el-collapse-item__header {
// 		height: auto;
// 	}

// 	.el-descriptions {
// 		flex: 1;
// 		margin-right: 20px;
// 	}
// }
.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
  }
}
</style>