BJ_web_developers / wxgzh

<template>
  <div style="height: 100%">
    <div class="noDada" v-if="list.length == 0">
      <img src="../../../assets/images/parkInvoice/parkInvoiceNo.png" width="180px" height="140px">
      <p>暂无发票抬头,请添加发票抬头才可以发票哦</p>

      <div style="padding: 10px;">
        <x-button type="warn" @click.native="$router.push('fill')">添加发票抬头</x-button>
      </div>
    </div>
    <div class="inovice-main" v-else>
      <div class="inovice-top">
        <group>
          <cell is-link link="invoiceOpt" align-items="left" class="inovice-list">
            <div slot="title">
              <span>发票类型:</span>
              <span>{{type}}</span>
            </div>

            <div slot="title">
              <span>发票抬头:</span>
              <span>{{name}}</span>
            </div>

            <div slot="title">
              <span>电子邮箱:</span>
              <span>{{email}}</span>
            </div>

            <div slot="title">
              <span>备注信息:</span>
              <span>{{remark}}</span>
            </div>
          </cell>
        </group>

        <div class="weui-cells weui-cells_checkbox" v-if="checkboxData.length>0">
          <label v-for='(item, index) in checkboxData' :key="item.id" class="weui-cell weui-check_label">
            <div class="weui-cell__hd">
              <input :value="item.id" v-model="item.state" @click="handleInputChange" type="checkbox"
                     name="vux-checkbox" class="weui-check">
              <i class="weui-icon-checked vux-checklist-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
              <p>{{item.carNumber}}</p>
              <p>发票</p>
              <p>{{item.plName}}</p>
              <p>
                有效期：{{$utils.timestampTransformTime(item.createDate)}}--{{$utils.timestampTransformTime(item.payFinishTime)}}</p>
            </div>
            <p>¥{{((item.orderActFee)/100).toFixed(2)}}元</p>
          </label>
        </div>


        <div class="noDada" v-else>
          <img src="../../../assets/images/parkInvoice/parkInvoiceNo.png" width="90px" height="70px">
          <p>您还没有可开发票的记录</p>
        </div>
      </div>

      <div class="inovice-bottom">
        <p class="calculate-wrap">
          您已选中 <span style="color: #f00">{{ checkedLen}}</span>笔交易
          <span style="padding-left: 20px">合计 <span style="color: #f00">{{(totalPrice/100).toFixed(2)}}</span></span>
        </p>

        <div class="opration-area">
          <!--<input  v-model="isAllChecked" @click="allHandle" type="checkbox"-->
          <!--name="vux-checkbox" class="weui-check">-->

          <!--<checklist   :options="commonList" v-model="isAllChecked" @on-change="allHandle"></checklist>-->
          <div @click="allHandle" style="float: left">
            <check-icon :value.sync="isAllChecked"> 全选</check-icon>
          </div>

          <x-button type="warn" style="width: 160px;float: right;height: 60px;border-radius: 0"
                    @click.native="openTicket">提交开票
          </x-button>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
import {
  queryCustInvoiceInfoList,
  queryRntPayOrderForInvoice,
  openTicketForCustInvoiceHisInfo
} from "@/api/invoice/invoice.js"
export default {
  name: "parkInvoice",
  data() {
    return {
      invoiceType:'',// 1    停车订单,2    会员卡列表,3  充值列表
      name: "",
      email: "",
      type: "",
      remark: "",
      list: [],
      invoiceList:[],
      commonList: ["全选"],
      fullValues: [],
      checkboxData: [],
      selectedData: [], // 全选存储数据
      totalPrice: 0, // 总价
      isAllChecked: false,// 是否全选
      checkedLen: 0,// 选中了几个
      checkBox: {
        checked: false,
        items: {}
      }
    };
  },
  computed: {
    totalPurchasers() {
      return this.selectedData.length;
    },

  },
  mounted() {
    this.name = this.$route.query.name;
    this.email = this.$route.query.email;
    this.type = this.$route.query.type;
    this.remark = this.$route.query.remark;
    this.invoiceType = this.$route.query.invoiceType
    this.queryCustInvoiceInfoList(); //  获取抬头
    this.queryRntPayOrderForInvoice();  //  获取可开票列表

  },
  methods: {
    //  提交开票
    openTicket: function() {
      let that = this;
      if (this.checkedLen == 0) {
        this.$vux.toast.text("请先选择可发票记录", "top");
        return false;
      }

      let finalArr = this.checkboxData.filter(item => this.selectedData.indexOf(item.id) > -1);
      finalArr.forEach(item=>{
        this.$delete(item,'id')
        this.$delete(item,'state')
      })

      let data = this.list[0]
      let obj = {}
      let jsondata = {};
      if (data.invoiceType == 0){ // 0个人 1企业
        obj = {
          invoiceType: this.invoiceType, // 1    停车订单,2    会员卡列表,3  充值列表
          remark: data.remark, //备注谢谢
          custName: data.name, // 发票抬头
          custEmail:data.email, // 邮箱
          invoiceTotalFee: this.totalPrice, // 总金额
          invoiceKind: "0",
          orderList: finalArr
        };
      }else{
        obj = {
          invoiceType: this.invoiceType, // 1    停车订单,2    会员卡列表,3  充值列表
          remark: data.remark, //备注谢谢
          custName:  data.name, // 发票抬头
          custCardNo:  data.cardNo, // 开户账户
          custPhone: data.phone, // 电话
          invoiceTotalFee: this.totalPrice, // 总金额
          custEmail: data.email, // 邮箱
          custAddress: data.address, // 地址
          custBankName: data.bankName, // 开户银行
          invoiceKind: "0",
          orderList: JSON.stringify(finalArr)
        };
      }

      jsondata = Object.assign(obj, this.$utils.commonParams());
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log(JSON.stringify(jsondata));
      openTicketForCustInvoiceHisInfo(jsondata).then(response => {
        console.log(response);

        if(response.code==0){
          this.queryRntPayOrderForInvoice()
          this.$vux.toast.text(response. message, 'top')
        }else{
          this.$vux.toast.text(response. message, 'top')
        }

      });
    },
    //  获取可开票列表
    queryRntPayOrderForInvoice: function() {
      let that = this;
      let jsondata = {};
      let obj = {
        invoiceType: this.invoiceType // 1    停车订单,2    会员卡列表,3  充值列表
      };
      jsondata = Object.assign(obj, this.$utils.commonParams());
      jsondata.sign = this.$utils.signObject(jsondata);
      queryRntPayOrderForInvoice(jsondata).then(response => {
        const res = response.data

        that.checkboxData = res;
        for (var i = 0; i < that.checkboxData.length; i++) { // 添加state属性并设置为false
          that.$set(that.checkboxData[i], "state", false);
          that.$set(that.checkboxData[i], "id", i);
        }
        console.log('-----')
        console.log(that.checkboxData);
      });
    },
    //  获取抬头
    queryCustInvoiceInfoList: function() {
      let that = this;
      let jsondata = this.$utils.commonParams();
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log("传参  " + JSON.stringify(jsondata));
      queryCustInvoiceInfoList(jsondata).then(response => {
        // console.log(response);
        this.list = response.data.filter(item => {
          return item.isDefault == 1
        })
        response.data.map(item => {
          if (item.isDefault == 1) {
            that.name = item.name;
            that.email = item.email;
            that.type = item.invoiceType == "0" ? "个人" : "企业";
            that.remark = item.remark;
          }
        });
      });
    },
    change: function() {
    },
    // 全选
    allHandle: function(value) {
      console.log(this.isAllChecked);
      if (this.isAllChecked) {
        console.log("1");
        this.totalPrice = 0;
        this.checkedLen = this.checkboxData.length;
        this.selectedData = [];
        for (let i = 0; i < this.checkboxData.length; i++) {
          this.$set(this.checkboxData[i], "state", true);
          console.log(this.checkboxData[i].orderActFee);
          this.totalPrice += this.checkboxData[i].orderActFee;
          this.selectedData.push(this.checkboxData[i].id);
        }
        // this.totalPrice = (this.totalPrice/100).toFixed(2)
        this.checkedLen = this.checkboxData.length;
        console.log(this.checkboxData);
      } else {
        console.log("2");
        this.totalPrice = 0;
        this.checkedLen = 0;
        this.selectedData = [];
        for (let i = 0; i < this.checkboxData.length; i++) {
          this.$set(this.checkboxData[i], "state", false);
        }
        console.log(this.checkboxData);
      }
      // this.isAllChecked = !this.isAllChecked
    },
    // 单选
    handleInputChange: function(e) {
      console.log(e.target._value);
      console.log("------------");
      console.log(this.selectedData);
      setTimeout(() => {
        if (this.selectedData.indexOf(e.target._value) > -1) {
          this.remove(this.selectedData, e.target._value);
        } else {
          this.selectedData.push(e.target._value);
        }
        if (this.selectedData.length < this.checkboxData.length) {
          this.isAllChecked = false;
        } else {
          this.isAllChecked = true;
        }
        this.calculatedTotal();
        this.checkedLen = this.selectedData.length;
      }, 0);
      console.log(this.selectedData);
    },
    //数组删除
    remove(arr, val) {
      var index = arr.indexOf(val);
      if (index > -1) {
        arr.splice(index, 1);
      }
    },
    //数组合并去重
    arrayMerging(arr1, arr2) {
      var arr = arr1.concat();
      for (var i = 0; i < arr2.length; i++) {
        if (arr.indexOf(arr2[i]) === -1) {
          arr.push(arr2[i]);
        }
      }
      return arr;
    },
    calculatedTotal() {
      this.totalPrice = 0;
      this.selectedData.map((item1, index) => {
        let curItem1 = item1;
        this.checkboxData.map((item2, index) => {
          if (this.checkboxData[index].id == curItem1) {
            this.totalPrice += this.checkboxData[index].orderActFee;
          }
        });
      });
      return this.totalPrice;
    }
  }
};
</script>

<style scoped lang="scss">
  .noDada {
    text-align: center;
    img {
      margin: 20px auto;
    }
  }

  .inovice-top {
    flex: 1;
    overflow-y: auto;
  }

  .inovice-top > > > .weui-cells {
    margin-top: 0;
  }

  .inovice-top > > > .weui-cells_checkbox {
    font-size: 14px;
  }

  .inovice-list {
    span:nth-of-type(2) {
      padding-left: 30px;
      color: #999;
    }
  }

  .inovice-main {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .inovice-bottom {
    height: 100px;
  }

  .calculate-wrap {
    background: #e6fafa;
    padding: 0 0 0 15px;
    height: 40px;
    line-height: 40px;
  }

  .opration-area {
    padding-left: 15px;
    height: 60px;
    line-height: 60px;
  }

</style>