boss/pages/main/index/user_bills.vue

<template>
  <div id="mainBody">
    <div v-if="user">
    <div class="user-name">用户：{{user.nickname}}({{user.uid}})</div>
    <div class="user-info">订单数量：{{totalCount}}，收入金额：{{income_success_sum}}元，支出金额：{{expense_success_sum}}元，当前余额 {{balance}}元</div>
    <el-table
      :data="finaceList" border
      style="width: 100%">
      <el-table-column
        prop=""
        label="订单名称">
        <template slot-scope="scope">
          <span class="lblue point">
            <nuxt-link target="_blank" :to="{path:'/main/orders_detail?id='+scope.row.order_no}">{{scope.row.product_title}}</nuxt-link>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="实际金额">
        <template slot-scope="scope">
          <span v-if="scope.row.real_amount>0" style="color: green">+{{scope.row.real_amount}}</span>
          <span v-if="scope.row.real_amount<0" style="color: orange">{{scope.row.real_amount}}</span>
          <span v-if="scope.row.real_amount==0">{{scope.row.real_amount}}</span>
        </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">
          <nuxt-link target="_blank" :to="{path:'/main/orders_detail?id='+scope.row.order_no}">{{scope.row.order_no}}</nuxt-link>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="人工">
        <template slot-scope="scope">
          {{(scope.row.artificial_mark === 1 || scope.row.artificial_mark === "1")?'是':'否'}}
        </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 {
        user:{},
        tradeList: [
          {
            id: 0,
            type: "全部"
          },
          {
            id: 1,
            type: "充值"
          },
          {
            id: 2,
            type: "提现"
          },
          {
            id: 3,
            type: "购买"
          },
          {
            id: 4,
            type: "购买"
          }
        ],

        finaceList: [],

        // 下发的总数据
        totalData: {},
        // 负责人
        checkUser: "",
        // 审核人列表
        periodStatusList: [],
        // 数据总条目
        totalCount: 1,
        currentPage: 1,
        currentPageSize: 20,
        // 列表数据
        tableData: [],
      };
    },
    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();
      },
      // 获取列表数据

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

        };
        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);
        this.successCount=Number(data.successCount);
        this.income_sum=Number(data.income_sum);
        this.income_success_sum=Number(data.income_success_sum);
        this.expense_sum=Number(data.expense_sum);
        this.expense_success_sum=Number(data.expense_success_sum);
        this.balance=data.total_balance.total_balance;
        this.user=data.user;
        //console.log(this.user.nickname);
      },
      async downFinanceList() {
        let body = {
          page: this.currentPage,
          page_size: this.currentPageSize,
          user:this.$route.query.user
        };
        // 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;
      },
    }
  };
</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;
  }
  #mainBody {
    white-space: nowrap;
    overflow-x: scroll;
    height: calc(100% - 40px);
  }
</style>