src/views/payback/index.vue

<template>
  <div>
    <div class="serch-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="7">
            <el-form-item label="公司">
              <el-select v-model="form.orgId" placeholder="请选择公司">
              <el-option v-for="item in orgs" :label="item.orgName" :value="item.orgId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="7">
            <el-form-item label="车牌">
              <el-input v-model="form.carNum" maxlength="10" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="3">
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="table-wrap">
      <el-row :gutter="20">
        <el-col :xs="8" :sm="6" :md="3" :lg="22" :xl="22">
          <p class="table-title">订单详情</p>
        </el-col>
        <el-col :xs="8" :sm="3" :md="3" :lg="2" :xl="2">
          <el-button style="margin-top: 8px" size="small" type="primary" @click="toBackSubmit">补缴</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="orderData"
        style="width: 100%;"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        :show-overflow-tooltip="true"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          prop="plName"
          label="停车场"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="carNumber"
          label="车牌"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="arrearageFee"
          label="欠费金额">
          <template slot-scope="scope">
            <span>{{(scope.row.arrearageFee) |fen2Yuan}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkInTime"
          label="入场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkInTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkOutTime"
          label="出场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkOutTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkingDuration"
          label="停车时长"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row) |parkingDurationFormatter(scope.row.parkingDuration)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="berthNo"
          label="泊位编号">
        </el-table-column>
        <el-table-column
          prop="orderState"
          label="订单状态">
          <template slot-scope="scope">
            <span>{{(scope.row) |inOutStateFormatter}} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
        @prev-click="handleSizeChange"
        @next-click="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!--补缴对话框-->
    <el-dialog
      title="补缴"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false">
      <!--<div>-->
        <!--<img style="display: block;width: 100%" :src="url" >-->
      <!--</div>-->
      <div style="position: relative;height: 150px" >
        <div id="qrcode"></div>
        <div class="qecode_Bg"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {pageQueryArrearRecordByCondition,selectAllAppOrg,personOrderBackWxPay } from '@/api/index';
  import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
  import QRCode from 'qrcodejs2'  // 引入qrcode
  export default {
    data() {
      return {
        form: {
          orgId:null,
          plNos: null,
          carNum: null,
        },
        loading:false,
        orgs:[],
        total: 0,
        currentPage: 1,
        pageSize: 6,
        orderData: [
        ],
        multipleSelection:[],
        dialogVisible:false,
        url:'http://img.renniting.cn/group1/M00/35/07/rBABHF0fHpOAGw2BAAF_F0CXpIA340.png',
      }
    },
    mounted: function() {
      this.selectAllAppOrg();
    },
    methods: {
      qrcode :function(url) {
        let qrcode = new QRCode('qrcode', {
          width: 100,
          height: 100, // 高度
          text: url,// 二维码内容
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f'
          // foreground: '#ff0'
        })
        console.log(qrcode)
      },
      clearCode:function(){
        var qrcodes=document.getElementById('qrcode');
        if(qrcodes != null && qrcodes.innerHTML != '' && qrcodes.innerHTML!= null){
          qrcodes.innerHTML = '';
        }
      },
      /**
       *获取所有组织下拉框
       */
      selectAllAppOrg:function(){
        let req = {};
        selectAllAppOrg (req).then(response =>{
          if(response.code=='8888'){
            this.orgs = response.data;
            this.form.orgId = response.data[0].orgId;
            this.pageQueryArrearRecordByCondition();
          }else{
            console.log(response);
          }
        });
      },
      /**
       * 获取查询参数
       */
      getQueryParams: function() {
        if(this.form.orgId == undefined || this.form.orgId == null){
          console.log("orgId为空");
          return;
        }
        let userInfo = this.$store.state.user.userInfo;
        let plNos = [];
        if(this.form.plNos != null && this.form.plNos != ''){
          plNos.push(this.form.plNos);
        }
        let req = {
          custId:userInfo.custId,
          //custId:'501519113641649119232',
          orderStates:[52],
          plNos:plNos,
          orgId:this.form.orgId,
          carNum:this.form.carNum,
        }
        return req;
      },
      /**
       * 查询订单信息
       */
      pageQueryArrearRecordByCondition: function() {
        let req = this.getQueryParams();
        req.baseRequest={
          pageNum:this.currentPage,
          pageSize:this.pageSize,
        },
          pageQueryArrearRecordByCondition (req).then(response =>{
            if(response.code=='8888'){
              this.orderData = response.data.dataList;
              this.total = response.data.pageTotals;
              this.loading=false;
            }else{
              console.log(response);
            }
          });
      },
      // 获取子组件页码方法
      handleSizeChange: function(page) {
        console.log(page)
        this.currentPage = page;
        /** 调用表格数据.*/
        this.pageQueryArrearRecordByCondition();
      },
      //多选
      handleSelectionChange:function(val) {
        this.multipleSelection = val;
      },
      toBackSubmit:function(){
        this.clearCode();
        let selects = this.multipleSelection;
        if(selects == null || selects.length < 1){
          this.$message({
            message: '请至少选择一行数据!',
            type: 'warning'
          });
          return;
        }
        let orders = [];
        let orgIds = [];
        selects.forEach(item=>{
          orders.push({orderId:item.orderId,parkId:item.plNo,orderNotPayFee:item.arrearageFee,sourceType:1});
          orgIds.push(item.orgId);
        });
        if(orders == null || orders.length < 1){
          this.$message({
            message: '请至少选择一行数据!',
            type: 'warning'
          });
          return;
        }
        let req ={
          sysCode:'10003',
          payType:2,
          paySrcType:103,
          terminalSource:9,
          carNumber:'京A11111',
          recordArreaInfos:JSON.stringify(orders)
        };
        // req = JSON.stringify(req);
        //调用后台接口获取二维码信息
        personOrderBackWxPay(req).then(response =>{
          if(response.code=='8888'){
            let data = response.data;
            data = JSON.parse(data);
            let url = data.data.code_url;
            console.log(url);
            //this.url = url;
            this.qrcode(url);
          }else{
            console.log(response);
          }
        });
        this.dialogVisible = true;
      },
      onSubmit:function() {
        this.loading=true;
        this.pageQueryArrearRecordByCondition();
      },
      onBack:function() {
        this.dialogVisible = false;
        this.pageQueryArrearRecordByCondition();
        this.clearCode();
      },
      onCancel:function() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>
<style scoped>
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
  #qrcode{
    position: absolute;
    top: 30px;
    left: 50px;
    height: 100px;
    width: 100px;
  }
  .qecode_Bg{
    height: 220px;
    width: 139px;
    background: url("../../assets/park/phone_ewm.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -22px;
    left: 180px;
  }
</style>