mall-web-ssr/pages/mobile/center/user/invoice/invoiceRecord.vue

<template>
  <div class="mobile-invoice invoice-wrapper invoice-record" @click="showFilterInvoiceType = false">
    <div class="order-nav">
      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>申请开票</span></nuxt-link>
      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=101" tag="div" :class="status === '101' ? 'active' :''"><span>待卖家开票</span></nuxt-link>
      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=102" tag="div" :class="status === '102' ? 'active' :''"><span>已开票</span></nuxt-link>
      <!--<div class="active"><span>已开票</span></div>-->
    </div>
    <div class="invoice-wrapper-el" id="invoice-wrapper-el">
      <div class="search-content mi-search-content">
        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="卖家/物料名称/订单号/收票人/联系电话">
        <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <div class="mi-list-content">
        <!--<div class="mi-lc-filters clearfix">-->
          <!--<span class="multi-check inline-block" :class="{active: filterParams.status === 101}" @click="setFilter('status', 101)">待开票</span>-->
          <!--<span class="multi-check inline-block" :class="{active: filterParams.status === 102}" @click="setFilter('status', 102)">已开票</span>-->
          <!--<div class="com-select-wrap fr" @click.stop="showFilterInvoiceType = !showFilterInvoiceType">{{filterParams.invoicetype === 1206 ? '普票' : filterParams.invoicetype === 1205 ? '专票' : '全部'}}-->
            <!--<ul class="select-list" v-show="showFilterInvoiceType">-->
              <!--<li @click.stop="setFilter('invoicetype', null)" v-show="filterParams.invoicetype">全部</li>-->
              <!--<li @click.stop="setFilter('invoicetype', 1206)" v-show="filterParams.invoicetype != 1206">普票</li>-->
              <!--<li @click.stop="setFilter('invoicetype', 1205)" v-show="filterParams.invoicetype != 1205">专票</li>-->
            <!--</ul>-->
          <!--</div>-->
        <!--</div>-->
        <ul class="mi-list" v-if="invoiceList.length">
          <li v-for="inv in invoiceList">
            <div class="mi-list-top clearfix">
              <div class="pull-left">{{inv.createTime | date}}</div>
              <div class="pull-right" style="margin-right: 0.8rem;">{{inv.status == 101 ? '待开票' : '已开票'}}</div>
            </div>
            <div class="mi-list-bottom">
              <div class="list clearfix">
                <div class="clearfix pull-left w50">
                  <div class="pull-left">发票抬头：</div>
                  <div class="pull-left overhidden" style="width: 1.85rem">{{inv.invoicetitle}}</div>
                </div>
                <div class="clearfix pull-left w50">
                  <div class="pull-left">开票金额：</div>
                  <div class="pull-left overhidden" style="width: 1.85rem">¥{{inv.price || 0}}</div>
                </div>
              </div>

              <div class="list" v-if="inv.invoicetype === 1205">
                <div class="clearfix">
                  <div class="pull-left">单位电话：</div>
                  <div class="pull-left overhidden" style="width: 4.6rem;">
                    {{inv.billInfo.companyPhone || '-'}}
                  </div>
                </div>
              </div>

              <div class="list" v-if="inv.invoicetype === 1205">
                <div class="clearfix">
                  <div class="pull-left">单位地址：</div>
                  <div class="pull-left overhidden" style="width: 4.6rem;">
                    {{inv.billInfo.companyAddress || '-'}}
                  </div>
                </div>
              </div>

              <div class="list" v-if="inv.invoicetype === 1205">
                <div class="clearfix">
                  <div class="pull-left">税务登记号：</div>
                  <div class="pull-left overhidden" style="width: 4.8rem;">
                    {{inv.billInfo.companyTaxNumber || '-'}}
                  </div>
                </div>
              </div>
              <div class="list" v-if="inv.invoicetype === 1205">
                <div class="clearfix">
                  <div class="pull-left">开户银行名称：</div>
                  <div class="pull-left overhidden" style="width: 4.6rem;">
                    {{inv.billInfo.bankName || '-'}}
                  </div>
                </div>
              </div>

              <div class="list" v-if="inv.invoicetype === 1205">
                <div class="clearfix">
                  <div class="pull-left">开户银行账户：</div>
                  <div class="pull-left overhidden" style="width: 4.6rem;">
                    {{inv.billInfo.bankAccount || '-'}}
                  </div>
                </div>
              </div>

              <div class="list clearfix">
                <div class="clearfix pull-left">
                  <div class="pull-left">收票人：</div>
                  <div class="pull-left overhidden" style="width:2.1rem">{{inv.receiverName}}</div>
                </div>
              </div>
              <div class="list clearfix">
                <div class="clearfix pull-left">
                  <div class="pull-left">收票电话：</div>
                  <div class="pull-left overhidden">{{inv.recTel}}</div>
                </div>
              </div>

              <div class="list ">
                <div class="clearfix">
                  <div class="pull-left">收票地址：</div>
                  <div class="pull-left" style="width: 5rem;">
                    {{inv.invoiceAddress}}
                  </div>
                </div>
              </div>

              <div class="list ">
                <div class="clearfix">
                  <div class="pull-left">卖家：</div>
                  <div class="pull-left" style="width: 5rem;">
                    {{inv.sellername}}
                  </div>
                </div>
              </div>

              <div class="list ">
                <div class="clearfix">
                  <div class="pull-left">订单号：</div>
                  <div class="pull-left">
                    <nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">
                      {{id}}
                    </nuxt-link>
                  </div>
                </div>
              </div>

            </div>
            <div class="fixedImg">
              <img src="/images/mobile/center/invoice-spec2.png" v-if="inv.invoicetype === 1205"/>
              <img src="/images/mobile/center/invoice-nor2.png" v-else/>
            </div>
          </li>
        </ul>
        <!--<ul class="mi-list" v-if="invoiceList.length">-->
          <!--<li v-for="inv in invoiceList">-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--类型：-->
            <!--</span>-->
              <!--<span class="inline-block content">-->
              <!--<i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>-->
            <!--</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--申请时间：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.createTime | date}}</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--状态：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.status == 101 ? '待开票' : '已开票'}}</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--商家名称：-->
            <!--</span>-->
              <!--<nuxt-link :to="`/mobile/shop/${inv.storeid}`" class="inline-block content link">{{inv.sellername}}</nuxt-link>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--订单号：-->
            <!--</span>-->
              <!--<span class="inline-block content">-->
              <!--<nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">-->
                <!--{{id}}-->
              <!--</nuxt-link>-->
            <!--</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--可开票金额：-->
            <!--</span>-->
              <!--<span class="inline-block content price">¥{{inv.price || 0}}</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--发票抬头：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.invoicetitle}}</span>-->
            <!--</div>-->
            <!--<template v-if="inv.invoicetype == 1205">-->
              <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--单位地址：-->
            <!--</span>-->
                <!--<span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>-->
              <!--</div>-->
              <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--单位电话：-->
            <!--</span>-->
                <!--<span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>-->
              <!--</div>-->
              <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--税务登记号：-->
            <!--</span>-->
                <!--<span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>-->
              <!--</div>-->
              <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--开户银行：-->
            <!--</span>-->
                <!--<span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>-->
              <!--</div>-->
              <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--开户银行账户：-->
            <!--</span>-->
                <!--<span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>-->
              <!--</div>-->
            <!--</template>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--收票人：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.receiverName}}</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--联系电话：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.recTel}}</span>-->
            <!--</div>-->
            <!--<div class="line">-->
            <!--<span class="inline-block title">-->
              <!--收票地址：-->
            <!--</span>-->
              <!--<span class="inline-block content">{{inv.invoiceAddress}}</span>-->
            <!--</div>-->
          <!--</li>-->
        <!--</ul>-->
          <empty-status
            :text="'暂无开票信息'"
            :showLink="false"
            v-else></empty-status>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :fixId="'invoice-wrapper-el'" :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data () {
      return {
        remindText: '',
        timeoutCount: '',
        invoiceList: [],
        isChange: false,
        page: 1,
        count: 10,
        filterParams: {
          invoicetype: '',
          keyword: '',
          // 101为待开票， 102为已开票
          status: 101
        },
        showFilterInvoiceType: false
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('invoice/getInvoices', {count: 10, page: 1, role: 'BUYER', sorting: {'createTime': 'DESC'}, status: route.query.status})
      ])
    },
    asyncData({route}) {
      let filterParams = {
        invoicetype: '',
        keyword: '',
        // 101为待开票， 102为已开票
        status: 101
      }
      filterParams.status = route.query.status
      return {
        filterParams: filterParams
      }
    },
    watch: {
      '$store.state.invoice.data.invoices.data': {
        handler: function (val) {
          if (val && val.content) {
            if (this.isChange) {
              this.invoiceList = []
              this.isChange = false
            }
            let arr = this.baseUtils.deepCopy(val.content)
            arr.forEach(item => {
              item.billInfo = item.billInfo ? JSON.parse(item.billInfo) : {}
            })
            this.invoiceList = [...this.invoiceList, ...arr]
          }
        },
        immediate: true
      },
      '$route.query.status': {
        handler: function (val) {
          this.filterParams.keyword = ''
          this.filterParams.status = val
          this.page = 0
          this.isChange = true
          this.onPullUp()
        }
      }
    },
    computed: {
      status() {
        return this.$route.query.status
      },
      invoices () {
        return this.$store.state.invoice.data.invoices
      },
      fetching () {
        return this.invoices.fetching
      }
    },
    methods: {
      setRemindText: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      initParams () {
        this.page = 1
        this.filterParams.invoicetype = null
        this.filterParams.keyword = null
      },
      reloadList () {
        return this.$store.dispatch('invoice/getInvoices',
          {count: this.count,
            page: this.page,
            role: 'BUYER',
            sorting: {'createTime': 'DESC'},
            invoicetype: this.filterParams.invoicetype,
            keyword: this.filterParams.keyword,
            status: this.filterParams.status
          })
      },
      onPullUp () {
        this.page++
        this.reloadList()
      },
      onFilter () {
        this.isChange = true
        this.page = 1
        return this.reloadList()
      },
      setInvoiceType (type) {
        this.filterParams.invoicetype = type
        this.showFilterInvoiceType = false
        this.onFilter()
      },
      setFilter (type, val) {
        if (type === 'invoicetype') {
          this.showFilterInvoiceType = false
          this.filterParams.invoicetype = val
        } else if (type === 'status') {
          this.filterParams.status = val === this.filterParams.status ? null : val
        }
        this.onFilter()
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/mobileInvoice';
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .invoice-record {
    .mi-list {
      padding-bottom: .68rem !important;
    }
  }
  .order-nav {
    background: #fff;
    -webkit-box-shadow: 0 1px 3px #ddd;
    -moz-box-shadow: 0 1px 3px #ddd;
    box-shadow: 0 1px 3px #ddd;
    position: fixed;
    width: 100%;
    top: 1.26rem;
    div {
      height: 0.82rem;
      line-height: 0.82rem;
      display: inline-block;
      width: 33.3%;
      text-align: center;
      font-size: .28rem;
      color: #666;
      &.active span{
        color: #3f84f6;
        border-bottom: 0.04rem solid #3f84f6;
        padding-bottom: 0.2rem;
      }
    }
  }
  .invoice-wrapper {
    background: #f1f3f6;
    /*margin: 1.26rem 0 0 0;*/
    left: 0;
    bottom: .98rem;
    top: 2.08rem;
    right: 0;
    z-index: 0;
    /*padding: 0.82rem 0 1.04rem;*/
    /*height: calc(100vh - 1.26rem);*/
    position: absolute;
    width: 100%;
    .invoice-wrapper-el {
      /*margin: 0 0 0.98rem;*/
      height: calc(100vh - 1.26rem - 0.98rem - 0.82rem);
      overflow-y: scroll;
      /*padding-bottom: 0.98rem;*/
    }
  }
  .mobile-invoice.invoice-record .mi-list {
    li {
      background: #fff;
      border-radius: 0.05rem;
      border: 1px solid #e3e5e8;
      margin: 0 0.2rem 0.3rem;
      padding: 0 0.24rem;
      position: relative;
      .fixedImg {
        position: absolute;
        right: 0;
        top: 0;
        img {
          width: 0.82rem;
          height: 0.82rem;
        }
      }
      .mi-list-top {
        @include lineHeight(0.55rem);
        font-size: 0.28rem;
        color: #333;
        border-bottom: 1px solid #d3d3d3;
      }
      .mi-list-bottom {
        font-size: 0.28rem;
        color: #333;
        padding: 0.2rem 0;
        .list {
          line-height: 0.55rem;
        }
        .overhidden {
          @include overFlowHidden()
        }
        .w50 {
          width: 50%;
        }
      }
    }
  }
</style>