playlet/project/src/components/detials/orderCharge....

<template>
  <div class="con" v-loading="loading">
    <ux-grid class="uxGridBox" ref="plxTable" :border="false" @row-click="()=>{return}" :header-cell-style="headerColor" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
      <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label" :min-width="item.min_width?item.min_width:120" :fixed="item.fixed?item.fixed:''" align="center">
        <template #header>
          <div class="flex-align-jus-center">{{item.label}}
            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
              <div><i class="el-icon-question"></i></div>
            </el-tooltip>
          </div>
        </template>
        <template v-slot="{ row,$index }">
          <span v-if="item.prop == 'order_id'">
              {{row[item.prop]?row[item.prop]:'-'}}
          </span>
          <span v-else-if="item.prop == 'name'">
              {{row[item.prop]?row[item.prop]:'-'}}
            </span>
          <span v-else-if="item.prop == 'pay_status'">
              {{row[item.prop]?(row[item.prop]==1?'已付款':'未付款'):'-'}}
            </span>
          <span v-else>{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
        </template>
      </ux-table-column>
    </ux-grid>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noData from "../assembly/noData";
export default {
  name: "order",
  props:['rowProp'],
  components:{
    noData
  },
  data(){
    return{
      loading:false,
      desCol: [
        { prop: "order_id", label: "订单ID", min_width: 180, fixed: 'left' },
        { prop: "wx_account", label: "公众号", },
        { prop: "name", label: "用户昵称", min_width: 160 },
        { prop: "mp_user_register_time", label: "用户注册时间", min_width: 160 },
        { prop: "pay_status", label: "订单状态", },
        { prop: "order_pay_time", label: "下单时间" , min_width: 160},
        { prop: "pay_money", label: "支付金额(元)" },
        // { prop: "first_day_roi", label: "充值次数",  },
        { prop: "order_source", label: "订单来源", },
        { prop: "playlet_name", label: "剧名", min_width: 160 },
        // { prop: "recall_rate2", label: "订单类型", },
        { prop: "ad_report_action_type", label: "回传类型", },
        { prop: "ad_report_order_status", label: "下单回传结果", },
        { prop: "ad_report_purchase_status", label: "付费回传结果", },
        // { prop: "ad_report_status", label: "回传结果", },
      ],
      page:1,
      pages:0,
      page_size:20,
      total:0,
    }

  },
  created() {
    this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
    this.init()
  },
  methods:{
    headerColor ({ row, column, rowIndex, columnIndex }) {
      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
    },
    init(){
      this.loading = true
      let data={
        unionid: this.rowProp.unionid,
        page:this.page,
        page_size:this.page_size
      }
      this.$axios.post(this.URL.BASEURL + this.URL.charge_list,data).then((res)=>{
        this.loading = false
        res=res.data
        if(res&&res.errno==0){
          this.datas = res.rst.data
          this.$refs.plxTable.reloadData(this.datas)
          this.page = res.rst.pageInfo.page
          this.pages = res.rst.pageInfo.pages
          this.page_size = res.rst.pageInfo.size
          this.total = res.rst.pageInfo.total
        }else{
          this.$message({
            message: res.err,
            type: "info"
          })
        }
      }).catch(err=>{
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.init()
    },
  }
}
</script>
<style lang="scss" scoped>
.con{
  position: relative;
  .uxGridBox{
    border: 1px solid #EBEEF5;
  }
  .thead{
    background: #FBFBFB;
    border: 1px solid #D2D2D2;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    position: sticky;
    top: 60px;
    .thead_item{
      //width: 25%;
      min-width: 180px;
      padding: 6px;
      text-align: center;
    }
  }
  .tbody{
    .tbody_item{
      margin-top: 20px;
      text-align: center;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 13px;
      div{
        width: 25%;
      }
      .c-00B38A{
        color: #00B38A;
      }
    }
  }
}
</style>