jsowell-charger-web/jsowell-ui/src/views/financial/components/virtualFinance.vue

<template>
  <div class="app-container">
    <!-- <el-row :gutter="10">
        <el-col :span="24">
    <div class="public">
      <div class="bgc headTitle">虚拟充值用户充电收入</div>
      <div class="headBox">
        <div class="conten">
          <div> <i class="el-icon-user" style="font-size:30px"></i></div>
          <div class="content-title">
            <span>运营商:</span>
            <span style="margin-left: 80px;font-size: 15px;">贵州省怀仁市新能源科技有限公司</span>
          </div>
        </div>
      </div>
    </div>
  </el-col>
       
        <el-col :span="12">
    <div class="public">
      <div class="bgc1 headTitle">充电收入汇总</div>
       <div class="headBox">
         <div class="conten">
            <div> <i class="el-icon-coin" style="font-size:30px"></i></div>
            <div class="content-title">
              <span style="font-size:37px">132156元</span>
            </div>
         </div>
      </div>
    </div>
        </el-col>
    </el-row> -->
   <div class="search">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
         <el-form-item label="日期" prop="tradeDate">
                <el-date-picker
                    v-model="createTimeRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                ></el-date-picker>
            </el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <!-- <div v-if="buttonBoolean">
        </div> -->
    </el-form>
     <!-- <div class="search-arrow" @click="showOrHide()">
         <span>{{ showOrHideText }}</span>
         <i :class="icon"></i>
     </div> -->
    </div>
     <div>
            <el-table
                :data="merchantList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="orderCode"
                    label="订单号"
                    align="center"
                />
                <el-table-column
                    prop="transactionCode"
                    label="交易流水号"
                    align="center"
                    width="300"
                />
                <el-table-column
                    prop="stationName"
                    label="站点名称"
                    align="center"
                    width="130"
                />
                <el-table-column
                    prop="orderAmount"
                    label="订单金额"
                    align="center"
                />
                <el-table-column
                    prop="orderSettleTime"
                    label="订单结算时间"
                    align="center"
                />
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getOrderList"
            />
      </div>
   </div>
</template>

<script>
import {getMerchantOrderList} from "@/api/order/order";
import { getDay } from "@/utils/common";
export default {
   data() {
      return {
          createTimeRange:[],
          merchantList:[],
          showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
          total: 0,
           queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantId: this.$route.query.merchantId,
                startTime: '',
                endTime: '',
                orderCode: null,
                transactionCode: null,
                mobileNumber: null,
                orderStatus: null,
                stationId: null,
            },
      }
    },
    methods: {
       defaultDate() {
            let beg = getDay(-30); //当月第一天
            let end = getDay(0); //当天
            this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
            this.queryParams.startTime = beg
            this.queryParams.endTime = end
        },
        // 搜索0
      onSubmit() {
        let arr = this.createTimeRange[0]
            let str = this.createTimeRange[1]
            this.queryParams.startTime = arr
            this.queryParams.endTime = str
            this.queryParams.pageNum = 1;
            this.getOrderList();
      },
       showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
         getOrderList() {
            getMerchantOrderList(this.queryParams).then((response) => {
                this.merchantList = response.rows;
                console.log('虚拟财务',this.merchantList)
                this.total = response.total;
            })
        },
    },
    async created () {
     await this.defaultDate()
      this.getOrderList()
    }
}
</script>

<style lang="scss" scoped>
.public{
  background: #f6f7f8;
    border: 1px solid #ebebf0;
}
.bgc{
  background: linear-gradient(90deg,#38cebf,#1fabcd)
}
.bgc1{
  background: linear-gradient(90deg,#ff8564,#fe6ca0)
}
.headTitle{
  height: 40px;
  padding-left: 24px;
  line-height: 40px;
  color: #fff;
}
.content-l{
  height: 60px;
}
.headBox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 145px;
  padding: 15px 0;
  line-height: 113px;
}
.conten{
  display: flex;
  align-items: center;
}
.headBox-r{
  width: 100%;
  min-height: 145px;
  padding: 15px 50px;
}
.content-title{
  margin-left: 50px;
}
.search{
  position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 20px 30px 0;
    margin-bottom: 12px;
    margin-top: 10px;
    background-color: #f6f7f8;
    border: 1px solid #ebebf0;
}
.search-arrow{
  position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    overflow: hidden;
    text-align: center;
    line-height: 28px;
    background-color:#edf4ff;
    color: #4d8cfd;
}
.demo-form-inline{
  margin-bottom: 28px;
}

  // border-color: white;
  //                   background-color: white;
  //                   font-size: x-small;
  //                   color: #50bfff;
  //                   padding: 1px 2px;
  //                   margin-left: 40%;
  //                   margin-top: 0px;
  //                   margin-bottom: 15px;
</style>