index.vue 8.25 KB

Edit Raw Blame History

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">对账明细</span></div>
      </div>
      <div>

        <!-- 搜索 -->
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="formSel"

            label-position="left"
          >
            <el-form-item label="交易金额">
                <div>
                  <el-input
                    placeholder="请输入"
                    style="width: 168px;"
                    v-model="input2">
                  </el-input>
                  --
                  <el-input
                    placeholder="请输入"

                    style="width:168px;"
                    v-model="input2">
                  </el-input>
                </div>
            </el-form-item>
            <el-form-item label="对账状态">
             <el-select
               v-model="input2"
               placeholder="请选择"

               style="width: 168px;"
             >
               <el-option label="全部" value="全部" />
             </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                plain

                style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;"
                @click="onSubmit"
                >搜索
              </el-button>
            </el-form-item>
          </el-form>

        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
          :border="true"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            min-width="4%"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="营业点"
            prop="body"
            width="auto"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            label="支付金额"
            prop="realAmount"
            width="auto"
            min-width="12%"
          >

          </el-table-column>
          <el-table-column
            label="手续费"
            prop="platformCouponAmount"
            width="auto"
            min-width="5%"
          >

          </el-table-column>
          <el-table-column
            label="调整金额"
            prop="totalDiscountAmount"
            width="auto"
            min-width="10%"

          >
          </el-table-column>
          <el-table-column
            prop="channel"
            label="支付渠道"
            width="auto"
            min-width="10%"

          >

          </el-table-column>
          <el-table-column
            prop="orderNo"
            label="订单号"
            width="auto"
            min-width="10%"

          >

          </el-table-column>
<el-table-column
            prop="payId"
            label="交易号"
            width="auto"
            min-width="10%"

          >

          </el-table-column>
          <el-table-column
            prop="createDate"
            label="支付完成时间"
            width="auto"
            min-width="10%"

          >

          </el-table-column>
          <el-table-column
            prop="time"
            label="对账日期"
            width="auto"
            min-width="10%"

          >

          </el-table-column>
          <el-table-column
            prop="time"
            label="核对状态"
            width="auto"
            min-width="10%"

          >

          </el-table-column>

        </el-table>
        <!-- <div class="fenye">
          <div style="line-height: 34px">显示第1到第10条记录</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            small
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total,sizes,prev, pager,next"
            :total="total "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->

      </div>
    </div>

  </div>
</template>

<script>
import {merchantQueries} from '../../../api/online.js'
export default {
  data () {
    return {
      rules: {},
      currentPage: 1,
      total: 100,
      flag: false,
      pageSize: 10,
      ggXin: false,
      tableData: [],
      pageindex: {
        merchantId:'9E602E5977EC48DEA06D42C67F4C93F0',
        page: 1,
        limit: 10,
        orderTimeStart:'',
        orderTimeEnd:'',
      },
    }
  },
  computed: {},
  mounted(){
    this.getOrder()
  },
  methods: {
    async getOrder(){
       this.getFirstDayOfYear()
      this.getLastDayOfYear()
     const res =   await merchantQueries(this.pageindex)
      this.tableData = JSON.parse(res.data).records
    this.total = JSON.parse(res.data).records.length

      },
      getFirstDayOfYear() {
        const now = new Date();
        const year = now.getFullYear();
        const firstDay = new Date(year, 0, 1, 0, 0, 0, 0);
        this.pageindex.orderTimeStart = this.formatDate(firstDay);
      },
        getLastDayOfYear() {
          const now = new Date()
          const year = now.getFullYear()
          const lastDay = new Date(year, 11, 31, 23, 59, 59, 999)
          this.pageindex.orderTimeEnd = this.formatDate(lastDay)
        },
        formatDate(date) {
          const year = date.getFullYear()
          const month = String(date.getMonth() + 1).padStart(2, '0')
          const day = String(date.getDate()).padStart(2, '0')
          const hours = String(date.getHours()).padStart(2, '0')
          const minutes = String(date.getMinutes()).padStart(2, '0')
          const seconds = String(date.getSeconds()).padStart(2, '0')
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        },
    onSubmit(){

    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    }
  }
}
</script>

<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }

/deep/ .el-form-item__content {
  line-height: 0;
}

.tableBtn {
  display: inline-block;
  margin-right: 10px;
}

::v-deep .formSearch {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 12px;
  justify-content: space-between;
  .el-form-item__label{
    line-height: 28px;
    font-size: 12px;
    color: #000;
    font-weight: 100;
  }
}

.greens {
  color: #3F9B6A;
}

/deep/ .el-table__row {
  font-size: 14px;
}

.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}

.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}

/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
/deep/ .el-pagination__total{
  margin-top:4px;
}
/deep/ .btn-prev{
  position:absolute ;
  top: 4px;
  right: 266px;
}
/deep/ .el-pager{
  position:absolute ;
  top: 4px;
  right: 40px;
}
/deep/ .btn-next{
  position:absolute;
 top: 4px;
  right: 10px;
}
::v-deep .btn .el-button:focus,
.el-button:hover {
  border: 1px solid #3F9B6A;
}
     ::v-deep .el-select .el-input.is-focus .el-input__inner{
         border-color:#3F9B6A
     }
     ::v-deep .dialog_css_Xq{
       .el-dialog__header{
         background-color:#fafafa;

       }
       .el-dialog__title{
         color:#000
       }
     }
</style>