|
|
@@ -0,0 +1,222 @@
|
|
|
+<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', 1206)">普票</li>
|
|
|
+ <li @click.stop="setFilter('invoicetype', 1205)">专票</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="mi-list" v-if="invoiceList.length">
|
|
|
+ <li v-for="inv in invoiceList" :class="{active: inv.$active}">
|
|
|
+ <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>
|
yangc