ronggui-admin/src/views/financeManagement/getSettDetails.vue

<template>
  <div class="app-main-height">
    <el-row>
      <el-col :span="22">
        <p style="color:red">
          <span style="margin-right:20px;">结算编号：{{ settCode }}</span>
          <span v-if="type==1" style="margin-right:20px;">结算金额：{{ totalSettAmount }}元</span>
          <span v-if="type==2" style="margin-right:20px;">渠道奖励总额：{{ totalSettReward }}元</span>
          <!-- <span style="margin-right:20px;">微信支付服务费：{{wxServiceFee}}元</span> -->
          <span>订单总额：{{ totalSettAmount }}元</span>
        <!-- <span>奖励金总额：{{totalSettReward||0}}元</span> -->
        </p>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-document" type="primary" size="small" @click="handleDownload">
          导出结算明细
        </el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <template slot="empty">
        <p>{{ dataText }}</p>
      </template>
      <el-table-column
        type="index"
        label="序号"
        width="100"
      />
      <el-table-column
        prop="comboName"
        label="商品名称"
      />
      <el-table-column
        prop="orderCode"
        label="订单编号"
      />
      <el-table-column
        prop="merchantsName"
        label="店铺名称"
      />
      <el-table-column
        v-if="type==1"
        prop="orderAmount"
        label="结算金额（元）"
      />
      <el-table-column
        v-if="type==2"
        prop="rewardAmount"
        label="渠道奖励金（元）"
      />
      <el-table-column
        prop="orderAmount"
        label="订单金额（元）"
      />
      <el-table-column
        prop="settTime"
        label="结算时间"
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="count"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      listLoading: false,
      dataText: '暂无数据',
      type: '', // 区分渠道奖励和供应商奖励
      layout: 'total, prev, pager, next, jumper',
      queryForm: {
        pageNo: 1,
        pageSize: 10
      },
      totalSettAmount: '',
      wxServiceFee: '',
      realSettAmount: '',
      totalSettReward: '',
      settCode: ''
    }
  },
  created() {
    /**
       *  根据列表页传过来的type值判断 渠道结算/供应商结算
       *
       *  type=1 供应商结算
       *  type=2 渠道结算
       *
       *  当值为1的时候展示结算金额（元）
       *  当值为2的时候展示渠道奖励金（元）
       */
    this.type = this.$route.query.type
    this.fetchData()
    // console.log(this.type)
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const params = {
        type: 'getSettDetails',
        data: {
          orderSettID: this.$route.query.orderSettID,
          pageNum: this.queryForm.pageNo
        }
      }
      this.$http
        .post(this.$api.getSettDetails, params)
        .then((res) => {
          setInterval(() => {
            this.listLoading = false
          }, 1000)
          if (res) {
            this.totalSettAmount = res.totalSettAmount
            this.wxServiceFee = res.wxServiceFee
            this.realSettAmount = res.realSettAmount
            this.totalSettReward = res.totalSettReward
            this.settCode = res.settCode
            this.count = parseInt(res.count)
            this.tableData = res.orderSettList
          } else {
            this.count = ''
            this.tableData = []
          }
        })
    },
    // 分页
    handleCurrentChange(e) {
      this.queryForm.pageNo = e
      this.fetchData()
    },
    // 导出结算明细
    handleDownload() {
      const params = {
        type: 'exportSett',
        data: {
          orderSettID: this.$route.query.orderSettID
        }
      }
      this.$http
        .post(this.$api.exportSett, params)
        .then((res) => {
          // console.log(res)
          this.downloadLoading = false
          var downloadFileUrl = res.url
          var elemIF = document.createElement('iframe')
          elemIF.src = downloadFileUrl
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
          elemIF.click()
          setTimeout(() => {
            document.body.removeChild(elemIF)
          }, 1000)
        })
    }
  }

  //   beforeRouterLeave(to,from,next){
  //   to.meta.keepAlive=true
  //   next()
  // }
}
</script>