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

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <div>
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="手机号码：">
          {{ withdrawalInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="银行名称：">
          {{ withdrawalInfo.bankName }}
        </el-descriptions-item>
        <el-descriptions-item label="银行卡号：">
          {{ withdrawalInfo.bankCard }}
        </el-descriptions-item>
        <el-descriptions-item label="收款人姓名：">
          {{ withdrawalInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="提现金额：">
          {{ withdrawalInfo.withdrawalMoney }}
        </el-descriptions-item>
        <el-descriptions-item label="实际到账：">
          {{ withdrawalInfo.actualReceipt }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间：">
          {{ withdrawalInfo.applyTime }}
        </el-descriptions-item>
        <el-descriptions-item label="处理时间：">
          {{ withdrawalInfo.handleTime }}
        </el-descriptions-item>
        <el-descriptions-item label="拒绝打款理由：">
          {{ withdrawalInfo.rejectReason || '--' }}
        </el-descriptions-item>

        <el-descriptions-item label="账户可提现金额：">
          {{ watherInfo.price }}
        </el-descriptions-item>
        <el-descriptions-item label="账户总金额：">
          {{ watherInfo.totalPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="提现中：">
          {{ watherInfo.pendingWithdrawal }}
        </el-descriptions-item>
        <el-descriptions-item label="已提现：">
          {{ watherInfo.alreadyPrice }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-tabs value="relatedSettlement">
      <el-tab-pane label="金流水记录列表" name="relatedSettlement">
        <div v-if="recordList && recordList.length" style="margin-top: 32px;">
          <el-table
            v-loading="!recordList.length" height="60vh" element-loading-text="暂无金流水记录数据" :data="recordList"
            v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
          >
            <!-- <el-table-column align="center" min-width="80" prop="price" label="支付金额" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" width="150" prop="paymentTime" label="支付时间" show-overflow-tooltip />
              <el-table-column prop="customerName" label="支付名称" width="120" />
              <el-table-column prop="customerPhone" label="支付电话" />
              <el-table-column prop="transactionId" label="通联流水号" />
              <el-table-column label="来源类型">
              <template slot-scope="{ row }">
              <span v-if="row.type == 1">关系链</span>
              <span v-if="row.type == 2">商城</span>
              <span v-if="row.type == 3">本地</span>
              <span v-if="row.type == 4">服务</span>
              </template>
              </el-table-column>
              <el-table-column label="状态">
              <template slot-scope="{ row }">
              <span v-if="row.isTo == 0">订单</span>
              <span v-if="row.isTo == 1">确认收货</span>
              </template>
              </el-table-column>
              <el-table-column prop="proportion" label="佣金比例" />
              <el-table-column prop="amount" label="分配的佣金" />
              <el-table-column prop="totalAmount" label="佣金总金额" /> -->
            <el-table-column align="center" min-width="80" prop="id" label="ID" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" min-width="80" prop="buyerUserId" label="入账用户Id" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="来源类型" prop="sourceType">
              <template slot-scope="{ row }">
                <el-tag v-if="row.sourceType === 1" effect="plain" type="info">平台</el-tag>
                <el-tag v-else-if="row.sourceType === 2" effect="plain" type="success">商圈</el-tag>
                <el-tag v-else-if="row.sourceType === 3" effect="plain" type="success">用户</el-tag>
                <el-tag v-else-if="row.sourceType === 4" effect="plain" type="success">社区</el-tag>
                <el-tag v-else-if="row.sourceType === 5" effect="plain" type="success">商城</el-tag>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="80" prop="sourceId" label="来源Id" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" width="150" prop="orderFormid" label="来源订单编号" show-overflow-tooltip />
            <el-table-column align="center" width="150" prop="transactionId" label="支付单号" show-overflow-tooltip />
            <el-table-column align="center" width="150" prop="commissionNumber" label="入账数量" show-overflow-tooltip />
            <el-table-column align="center" label="活动配置类型" prop="waterType">
              <template slot-scope="{ row }">
                <el-tag v-if="row.waterType === -1" effect="plain" type="info">退款退回</el-tag>
                <el-tag v-else-if="row.waterType === 1" effect="plain" type="success">升级活动</el-tag>
                <el-tag v-else-if="row.waterType === 2" effect="plain" type="success">分佣活动</el-tag>
                <el-tag v-else-if="row.waterType === 3" effect="plain" type="success">社区活动</el-tag>
                <el-tag v-else-if="row.waterType === 4" effect="plain" type="success">赠券活动</el-tag>
                <el-tag v-else-if="row.waterType === 5" effect="plain" type="success">赠金活动</el-tag>
                <el-tag v-else-if="row.waterType === 6" effect="plain" type="success">商圈订单</el-tag>
                <el-tag v-else-if="row.waterType === 7" effect="plain" type="success">爆款家具</el-tag>
                <el-tag v-else-if="row.waterType === 8" effect="plain" type="success">社区订单</el-tag>
                <el-tag v-else-if="row.waterType === 9" effect="plain" type="success">用户代金券转赠</el-tag>
                <el-tag v-else-if="row.waterType === 0" effect="plain" type="success">商家代金券转赠</el-tag>
                <el-tag v-else-if="row.waterType === 11" effect="plain" type="success">同城联盟卡</el-tag>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="150" prop="effectiveTime" label="有效时间" show-overflow-tooltip />
            <el-table-column align="center" min-width="80" prop="isProportion" label="佣金比例" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" min-width="120" prop="commissionTotal" label="佣金总额" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="受益用户类型" prop="buyerUserType">
              <template slot-scope="{ row }">
                <el-tag v-if="row.buyerUserType == 100" effect="plain" type="info">代理商</el-tag>
                <el-tag v-else-if="row.buyerUserType == 200" effect="plain" type="success">加盟商</el-tag>
                <el-tag v-else-if="row.buyerUserType == 300" effect="plain" type="success">小区店</el-tag>
                <el-tag v-else-if="row.buyerUserType == 400" effect="plain" type="success">本系统</el-tag>
                <span v-else>{{ row.buyerUserType }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="120" prop="withdrawalId" label="提现Id" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" width="150" prop="createTime" label="创建时间" show-overflow-tooltip />
          </el-table>
        </div>
        <div v-else style="font-size: 16px;font-weight: bold;">无佣金流水记录数据</div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { applicationGetById, getUserWater, getCommissionAll } from '@/api/application'

export default {
  name: 'DetailModal',
  components: {
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1220px',
        title: '查看提现详情'
      },
      visible: false,
      formData: {
        withdrawalId: ''
      },
      withdrawalInfo: {
        actualReceipt: '',
        applyTime: '',
        bankCard: '',
        bankName: '',
        batchId: '',
        buyerUserId: '',
        cost: '',
        handleTime: '',
        isConfirm: '',
        name: '',
        orderSn: '',
        phone: '',
        rejectReason: '',
        state: '',
        withdrawalId: '',
        withdrawalMoney: ''
      },
      watherInfo: {},
      recordQuery: {
        // page: 1,
        // pageSize: 20,
        // acquirerId: '',
        withdrawalId: ''
      },
      recordList: []
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async initList() {
      const res1 = await applicationGetById({ withdrawalId: this.formData.withdrawalId })
      this.withdrawalInfo = res1.data
      const res2 = await getUserWater({ userId: this.withdrawalInfo.buyerUserId })
      this.watherInfo = res2.data
      const res3 = await getCommissionAll({ ...this.recordQuery, withdrawalId: this.withdrawalInfo.withdrawalId })
      this.recordList = res3.data
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.initList()
      if (params.withdrawalId) {
        // this.getInfo(params.withdrawalId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ withdrawalId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          withdrawalId: res.data.withdrawalId || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

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