boss/pages/main/index/balance_change.vue

<template >
  <div id="mainBody" v-if="coins" style="padding-bottom: 60px;">
    <el-row>
      <el-col :span="24">
        <h3>用户余额订单</h3>
        <div class="type-boxs top">
          <span class="vsub">订单类型:</span>
          <div class="inlineb">
            <el-checkbox-group v-model="orderType" @change="orderStatus" size="mini">
              <el-checkbox-button
                v-for="allorder in orders"
                :label="allorder"
                :key="allorder"
              >{{allorder}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-form ref="form" label-width="40px" :model="form">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-form-item label="用户">
            <el-input placeholder="UID" v-model="user"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="编号">
            <el-input placeholder="订单编号" v-model="order_no"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="时间范围" label-width="80px">
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-button type="primary" plain @click="getFinanceList">筛选</el-button>
        <el-button plain>导出报表</el-button>
      </el-row>
    </el-form>
    <el-table :data="coins" border style="width: 100%">
      <el-table-column prop="date" label="ID" width="60">
        <template slot-scope="scope">{{scope.row.id}}</template>
      </el-table-column>
      <el-table-column prop="name" label="用户" width="180">
        <template slot-scope="scope">
          <a
            :href="scope.row.user_url"
            class="link-type"
            target="_blank"
          >{{scope.row.nickname}}({{scope.row.uid}})</a>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="变动金额">
        <template slot-scope="scope">{{scope.row.use}}</template>
      </el-table-column>
      <el-table-column prop="address" :label="changedCoins">
        <template slot-scope="scope">{{scope.row.total}}</template>
      </el-table-column>
      <el-table-column prop="address" label="变动前总金额">
        <template slot-scope="scope">{{scope.row.before_total_balance}}</template>
      </el-table-column>
      <el-table-column prop="address" label="变动后充值余额">
        <template slot-scope="scope">{{scope.row.total_recharge}}</template>
      </el-table-column>
      <el-table-column prop="address" label="变动后收入余额">
        <template slot-scope="scope">{{scope.row.total_income}}</template>
      </el-table-column>
      <el-table-column prop="address" label="变动前收入余额">
        <template slot-scope="scope">{{scope.row.before_income_balance}}</template>
      </el-table-column>
      <el-table-column prop="address" label="创建时间">
        <template slot-scope="scope">{{scope.row.time}}</template>
      </el-table-column>
      <el-table-column prop="address" label="更新时间">
        <template slot-scope="scope">{{scope.row.update_time}}</template>
      </el-table-column>
      <el-table-column prop="address" label="订单编号">
        <template slot-scope="scope">{{scope.row.order_no}}</template>
      </el-table-column>
    </el-table>
    <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="count"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
const allorderOptions = ["全部", "可用余额"];
export default {
  data() {
    return {
      currentPage: 1,
      currentPageSize: 20,
      coins: [],
      count: 1,
      user: "",
      order_no: "",
      timeRange: [],
      orderType: [
        this.$route.query && this.$route.query.orderType
          ? this.$route.query.orderType
          : "全部"
      ],
      orders: allorderOptions,
      changedCoins: "变动后总金额"
    };
  },
  mounted() {
    console.log(this.$route.query);
    this.getFinanceList();
  },
  methods: {
    changePageSize(val) {
      this.getFinanceList();
    },

    async getFinanceList() {
      this.user = this.$route.query.user;
      let body = {
        page: this.currentPage,
        size: this.currentPageSize,
        user: this.user,
        orderType: this.orderType
      };
      if (this.order_no) {
        body.order_no = this.order_no;
      }
      if (this.timeRange.length > 0) {
        console.log(this.timeRange);
        body.start_time = this.timeRange[0] / 1000;
        body.end_time = this.timeRange[1] / 1000;
      }
      const res = await this.$post("/api/admin/order/get_coins", body);
      this.coins = res.data.list;
      this.count = Number(res.data.count);
    },
    async downFinanceList() {
      let body = {
        page: this.currentPage,
        page_size: this.currentPageSize,
        user: this.$route.query.user
      };
      var url =
        window.location.host + "/api/admin/order/export?" + "artificial_mark=1";
      window.location.href = "http://" + url;
    },
    async orderStatus(val) {
      // this.orderType = ['全部'];
      if (this.orderType[0] == "全部") {
        this.orderType = ["可用余额"];
        this.changedCoins = "当前余额";
      } else if (this.orderType[0] == "可用余额") {
        this.orderType = ["全部"];
        this.changedCoins = "变动后总金额";
      } else {
        this.orderType = ["全部"];
        this.changedCoins = "变动后总金额";
      }
      let body = {
        page: this.currentPage,
        size: this.currentPageSize
      };
      if (this.orderType) {
        body.orderType = this.orderType;
      }
      const res = await this.$post("/api/admin/order/get_coins", body);
      this.coins = res.data.list;
      this.count = Number(res.data.count);
    }
  }
};
</script>

<style lang="scss" scoped>
.order-footer {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
#mainBody {
  white-space: nowrap;
  height: calc(100% - 40px);
}
.top {
  padding: 10px;
}
</style>