boss/pages/main/index/user_bills.vue

<template>
  <div>
    <div>
    <div class="user-name">用户：开发者大汪(123132)</div>
    <div class="user-info">订单数量：100（支付成功 50），收入金额：123.45元（成功 34.45元），支出金额：543.21元（成功 43.21元），当前余额 1000.00元</div>
    <el-table
      :data="finaceList" border
      style="width: 100%">
      <el-table-column
        prop=""
        label="订单名称">
        <template slot-scope="scope">
          <a href="" class="link-type product_title">{{scope.row.product_title}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="实际金额">
        <template slot-scope="scope">
          {{scope.row.real_amount}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="当前余额">
        <template slot-scope="scope">
          {{scope.row.total_balance?scope.row.total_balance:'--'}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="支付方式">
        <template slot-scope="scope">
          {{scope.row.channel_name}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="订单状态">
        <template slot-scope="scope">
          {{scope.row.order_state_name}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.created_at_name}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="订单编号">
        <template slot-scope="scope">
          {{scope.row.order_no}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="人工">
        <template slot-scope="scope">
          {{scope.row.artificial_mark?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="备注说明">
        <template slot-scope="scope">
        {{scope.row.public_comment}}
        </template>
      </el-table-column>
    </el-table>
  </div>
    <div class="order-footer">
      <el-pagination
        background
        @current-change="getFinanceList"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tradeList: [
          {
            id: 0,
            type: "全部"
          },
          {
            id: 1,
            type: "充值"
          },
          {
            id: 2,
            type: "提现"
          },
          {
            id: 3,
            type: "购买"
          },
          {
            id: 4,
            type: "购买"
          }
        ],

        finaceList: [],

        // 下发的总数据
        totalData: {},
        // 项目ID
        jobID: "",
        // 审核人
        period: "",
        status: "",

        // 负责人
        checkUser: "",
        // 审核人列表
        periodStatusList: [],
        // 数据总条目
        totalCount: 1,
        currentPage: 1,
        currentPageSize: 20,
        // 列表数据
        tableData: [],
        localData: {
          env: "test"
        }
      };
    },
    computed: {
      isTest() {
        return this.localData.env === "test";
      }
    },
    mounted() {
      // this.getTableData();
      this.getFinanceList();
    },
    methods: {
      clickDev(uid) {
        this.$router.push({ path: "/main/orders_detail", params: { id: uid } });
      },
      changePageSize(val) {
        this.getFinanceList();
      },
      // 格式化列表数据
      formatTableData(data) {
        return data.map(i => ({
          ...i,
          payAround: `${i.start_time}<br>${i.end_time}`,
          pre_send_salary_timeShow: new Date(
            i.pre_send_salary_time * 1000
          ).toLocaleDateString()
        }));
      },
      formatDate(time) {
        var now = new Date(time * 1000);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
        );
      },

      // 获取列表数据

      async getFinanceList() {
        let body = {
          page: this.currentPage,
          page_size: this.currentPageSize,

        };
        const res = await this.$post("/api/admin/order/get_user_orders", body);
        var data = res.data;
        this.finaceList = data.orders;
        this.totalCount = Number(data.count);
      },
      async downFinanceList() {
        let body = {
          page: this.currentPage,
          page_size: this.currentPageSize,
          user:this.$route.query.uid
        };
        // const res = await this.$get("/api/admin/order/get_orders", body);
        // http://local-rooter.proginn.com:20201/api/admin/order/get_orders?page=1&page_size=20&artificial_mark=1
        var url =
          window.location.host + "/api/admin/order/export?" + "artificial_mark=1";
        console.log(url);
        window.location.href = "http://" + url;
      },
      createOrder() {
        this.$router.push({
          path: "artificial_order/",
          query: {
            type: "create"
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .user-name {
    margin-bottom: 10px;
  }

  .user-info {
    margin-bottom: 10px;
  }

  .order-footer {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

  .product_title{
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
</style>