boss/components/drawer/invoice/user_settlement.vue

<template>
  <el-drawer
    title="关联订单"
    size="60%"
    :append-to-body="false"
    :destroy-on-close="true"
    :visible="true"
    :modal-append-to-body="false"
    :before-close="handleClose"
    :wrapperClosable="false"
    ref="drawer_close">
    <div v-loading="loading" style="padding: 20px"  class="block">
      <el-table row-key="id" :data="list">
        <el-table-column prop="title" label="关联项目">
          <template slot-scope="scope">
            <a :href="scope.row.link" style="color: #006eff" target="_blank">{{scope.row.title}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="应付金额">
          <template slot-scope="scope">
            <span>{{scope.row.y_money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sf_money" label="实付金额">
          <template slot-scope="scope">
            <span>{{scope.row.sf_money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sf_money" label="结算费率">
          <template slot-scope="scope">
            <span>{{scope.row.js_rate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="开票类型">
          <template slot-scope="scope">
            <span>{{scope.row.invoice_type_text}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            <span>{{scope.row.status_text}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
  export default {
    props: {
      action: {
      },
      pro: {
      },
      back:{
        type:Object
      },
    },
    data() {
      return {
        search: {
          pagesize: 15,
          page:0,
          total:0,
        },
        loading:true,
        list: []
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      handleClose:function()
      {
        this.back.drawer_obj.user_settlement=false;
        this.back.drawer_obj.id="";
      },
      async getList() {
        this.loading = true;
        let data = this.search;
        data.user_invoice_id = this.pro;
        let res = await  this.$post("/uapi/pub/info/user/user_settlement/admin_list",data);
        this.loading = false;
        if (res.status == 1) {
          this.list = res.data.list;
          this.search.total = res.data.total;
        }
      },
      page_event(page) {
        this.search.page = page;
        this.getList();
      },
    }
  };
</script>

<style scoped>
  .el-tag {
    cursor: pointer;
  }
</style>