index.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form class="form-params" :model="queryParams" label-width="auto" :inline="true" size="small">

          <el-form-item label="总订单号" prop="order_sn">
            <el-input style="width:220px;" v-model="queryParams.order_sn" placeholder="请输入总订单号"/>
          </el-form-item>

          <el-form-item label="结算时间" prop="cashTime">
            <el-date-picker
              v-model="queryParams.cashTime"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
      <el-table :data="withdrawlogList" :height="tableHeight">
        <el-table-column label="序号" align="center" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总订单号" align="center" prop="links_des"></el-table-column>
        <el-table-column label="账单结算时间" align="center" prop="add_time">
          <template slot-scope="scope">
            {{ speTiemFormatter(scope.row.add_time) }}<br/>
          </template>
        </el-table-column>
        <el-table-column label="结算金额" :formatter="formatFee" align="center" prop="change_money"></el-table-column>
        <el-table-column label="交易单号" align="center" prop="balance_sn"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <div class="footer_pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 详情 -->
    <el-dialog title="账单详情" width="80%" :close-on-click-modal="false" :destroy-on-close="true"
               :visible.sync="detailDialog" center :before-close="cancel">
      <div class="settle-con">
        <div class="settle-details-header">
          <div style="float:left;">
            <span>订单状态：</span>
            <span>{{ orderStatusFormatter(orderStatus) }}</span>
            <span style="margin: 0 0 0 30px;">总订单号：</span>
            <span>{{ orderSn }}</span>
          </div>
          <div style="float:right;">
            <span>结算状态：</span>
            <span>{{ settlementStatus }}</span>
          </div>
        </div>
        <!-- 商品订单 table -->
        <el-table class="title_table " align="center" :data="orderGoodsDetail" :span-method="arraySpanMethod">
          <el-table-column label="商品主图/商品名称" align="center">
            <template slot-scope="scope">
              <div class="img-title-table">
                <img v-if="scope.row.thumb" style="width:60px;height:60px;" :src="scope.row.thumb"/>
                <div class="ml10">{{ scope.row.title }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品ID" align="center" prop="goods_id"></el-table-column>
          <el-table-column label="规格/数量/金额" align="center" >
            <template slot-scope="scope">
              {{ scope.row.goods_option_title }}<br/>
              {{ scope.row.goods_price / 100 }} 元<br/>
              x {{ scope.row.total }}<br/>
            </template>
          </el-table-column>
          <el-table-column label="下单/发货/完成时间" align="center" width="" >
            <template slot-scope="scope">
              {{ speTiemFormatter(scope.row.created_time) }}<br/>
              {{ speTiemFormatter(scope.row.send_time) }}<br/>
              {{ speTiemFormatter(scope.row.updated_time) }}
            </template>
          </el-table-column>
          <el-table-column label="运费" align="center" width="" prop="dispatch_price" >
            <template slot-scope="scope">
              {{ scope.row.dispatch_price / 100 }}
            </template>
          </el-table-column>
          <el-table-column label="收货人" align="center" width="" >
            <template>
              {{ realName }}
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" width="" prop="">
            <template>
              {{ mobile }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listVerifyrecord,
    getVerifyrecord
  } from '@/api/module/settlementbill'
  import {dateFormat} from '@/utils'

  export default {
    name: "Settlementbill",
    data() {
      return {
        fullHeight: 0,
        tableHeight: 0,
        // 查询参数
        queryParams: { // 查询参数
          cashTime: [],
          order_sn: '',
          change_type: 1
        },
        total: 0,
        currentPage: 1,
        pageSize: 20,
        withdrawlogList: [],
        // 账单详情
        detailDialog: false,
        orderStatus: '',
        orderSn: '',
        settlementStatus: '',
        orderGoodsDetail: [],
        realName: '',
        mobile: '',
      }
    }, // data end
    created() {
      /** 查询 提现记录 列表 */
      this.search();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 100;
      }
    },
    methods: {
      /** 有搜索条件是，初始化到第一页 */
      search() {
        this.currentPage = 1;
        this.getList();
      },
      /** 查询 提现记录 列表 */
      getList() {
        let params = {
          page: this.currentPage,
          limit: this.pageSize,
          change_type: 1,
        }

        if (this.queryParams.order_sn != '') {
          params['order_sn'] = this.queryParams.order_sn;
        }

        if (this.queryParams.cashTime && this.queryParams.cashTime.length == 2) {
          params['start_time'] = new Date(this.queryParams.cashTime[0]).getTime() / 1000;
          params['end_time'] = new Date(this.queryParams.cashTime[1]).getTime() / 1000;
        }

        listVerifyrecord(params).then(res => {
          if (res.code == 1) {
            this.withdrawlogList = res.data.list;
            this.total = res.data.count;
          } else {
            this.$message({type: 'error',message: res.message ? res.message : '数据请求失败'});
          }
        });
      },
      /** 详情 跳转 */
      viewDetails(row) {
        const indexId = row.order_id ? row.order_id : 0;
        getVerifyrecord({order_id: indexId}).then(res=> {
          if(res.code == 1 && res.data) {
            this.detailDialog = true;

            if (res.data.order) {
              this.orderStatus = res.data.order.status;
              this.orderSn = res.data.order.order_sn;
              this.settlementStatus = res.data.order.settlement_status == 1 ? '已结算' : '未结算';
              this.realName = res.data.order.real_name;
              this.mobile = res.data.order.mobile;
            }

            if (res.data.order_goods_detail) {
              this.orderGoodsDetail = res.data.order_goods_detail;
              // dispatch_price
              if(this.orderGoodsDetail && this.orderGoodsDetail.length > 0) {
                for(let i = 0; i < this.orderGoodsDetail.length; i++) {
                  this.orderGoodsDetail[i]['dispatch_price'] = res.data.order.dispatch_price
                }
              }
              console.log(222,this.orderGoodsDetail);
            }
          }else {
            this.$message({type: 'error',message: res.message ? res.message : '数据请求失败'});
          }
        });

      },
      /** 重置 搜索条件 */
      resetQuery() {
        this.queryParams = {
          cashTime: [],
          order_sn: '',
          change_type: 1
        }
        this.currentPage = 1
        this.pageSize = 20
        this.getList();
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },

      /** 格式化价格 返回原数据是 分，除以100 */
      formatFee(row, s, value, i) {
        let nm = 0,
          money = value
        if (money > 0) {
          nm = money / 100
        }
        return nm
      },
      /** 格式化时间 */
      formatTime(row) {
        var Time = row.add_time
        var newtime = ""
        if (Time > 0) {
          newtime = dateFormat(Time * 1000, "Y-m-d H:i:s");
        }
        return newtime
      },
      /** 时间格式化 */
      speTiemFormatter(time) {
        if (time) {
          return dateFormat(time *1000, 'Y-m-d H:i:s')
        }else {
          return '--'
        }
      },
      /** 订单状态 */
      orderStatusFormatter(status) {
        if(status === -1) {
          return '订单取消'
        }else if (status === 0) {
          return '待付款'
        }else if (status === 1) {
          return '待发货'
        }else if (status === 2) {
          return '待收货'
        }else if (status === 3) {
          return '已完成'
        }else if (status === 4) {
          return '已结算'
        }else {
          return '' // 保险，返回空
        }
      },
      // 取消按钮
      cancel() {
        this.detailDialog = false;
      },
      // 表单重置
      reset() {
        // this.form = {
        //   id: null,
        //   reflect_sn: null,
        //   reflect_money: null,
        //   status: 0,
        //   des: null,
        //   seller_bank_id: null,
        //   add_time: null,
        //   fee: null,
        //   seller_id: null,
        //   after_reflect_money: null
        // };
        // this.resetForm("form");
      },

      /** 表格合并 列单元格 */
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex > 3 ) { // 用于设置要合并开始的列号
          if (rowIndex === 0) { // 用于设置合并开始的行号
            return {
              rowspan: 100,　　　　　// 合并的行数
              colspan: 1 // 合并的列数，设为０则直接不显示
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
    } //methods结束
  }
</script>

<style scoped>
  .form-params .el-form-item {
    margin: 10px 0 10px 10px;
  }

  /* 分页 */
  .footer_pagination {
    text-align: center;
    margin-top: 15px;
  }
  /* 详情 */
  .settle-details-header {
    margin: 0 5px 10px;
    overflow: hidden;
  }

  .img-title-table {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ml10 {
    margin-left: 10px;
  }
</style>