boss/pages/main/index/balance_change.vue

<template >
  <div id="mainBody" v-if="coins">
    <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="180">
        <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="变动后总金额">
        <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: ['全部'],
        orders: allorderOptions
    }
  },
  mounted() {
    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 = ['可用余额']
          }else if (this.orderType[0]=='可用余额'){
              this.orderType = ['全部']
          }else {
              this.orderType = ['全部']
          }
          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;
    overflow-x: scroll;
    height: calc(100% - 40px);
  }
  .top{
    padding: 10px;
  }
</style>