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

<template>
  <div class="mobile-invoice mobile-content mobile-content-long invoice-record" @click="showFilterInvoiceType = false">
    <div class="order-nav">
      <nuxt-link to="/mobile/center/user/invoice" tag="div"><span>发票信息</span></nuxt-link>
      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待开票订单</span></nuxt-link>
      <div class="active"><span>开票记录</span></div>
    </div>
    <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="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 link">
              <nuxt-link class="block" :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>
          <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>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :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: null
        },
        showFilterInvoiceType: false
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    fetch ({store}) {
      return Promise.all([
        store.dispatch('invoice/getInvoices', {count: 10, page: 1, role: 'BUYER', sorting: {'createTime': 'DESC'}})
      ])
    },
    watch: {
      '$store.state.invoice.data.invoices.data': {
        handler: function (val) {
          if (val && val.content) {
            if (this.isChange) {
              this.invoiceList = []
              this.isChange = false
            }
            this.invoiceList = [...this.invoiceList, ...val.content]
          }
        },
        immediate: true
      }
    },
    computed: {
      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';
  .order-nav {
    background: #fff;
    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;
      }
    }
  }
</style>