卖家开票记录

assets/scss/mobileInvoice.scss

@@ -31,13 +31,14 @@ $blue-base: #3f84f6;
     }
   }
   .mi-list-content {
-    padding: 0 .3rem;
     .mi-lc-filters {
-      padding-top: .1rem;
+      padding: .1rem 0 0 0;
+      margin: 0 .3rem;
       border-bottom: 1px solid #dcdcdc;
     }
     .mi-list {
       font-size: .28rem;
+      padding: 0 .3rem;
       li {
         margin: .3rem 0;
         border-radius: .06rem;
@@ -64,7 +65,7 @@ $blue-base: #3f84f6;
             .inv {
               width: .7rem;
               height: .32rem;
-              line-height: .32rem;
+              line-height: .28rem;
               text-align: center;
               font-size: .24rem;
               border-radius: .04rem;
@@ -89,6 +90,7 @@ $blue-base: #3f84f6;
           }
         }
       }
+
     }
   }
   .mi-fix-result {
@@ -112,4 +114,30 @@ $blue-base: #3f84f6;
       margin-top: .15rem;
     }
   }
+  &.invoice-record {
+    .switch-head {
+      border: none;
+    }
+    .mi-list {
+      padding: 0;
+      li {
+        border: none;
+        margin: .3rem;
+        border-bottom: 1px solid #dcdcdc;
+        .line {
+          border: none;
+          padding: 0;
+          margin-bottom: .36rem;
+          .title {
+            label {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+    .mi-fix-result {
+      display: none;
+    }
+  }
 }

components/mobile/MobileHeader.vue

@@ -233,6 +233,9 @@
           } else {
             title = '销售订单'
           }
+        } else if (this.startWith(val, '/mobile/center/vendor/invoice')) {
+          this.showSearchIcon = false
+          title = '发票管理'
         } else {
           this.showSearchIcon = true
           title = '优软商城'

components/mobile/base/RemindOpeModal.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="mobile-modal com-remind-modal" v-if="show">
+    <div class="cr-remind">
+      <div class="header"><i class="iconfont icon-guanbi1" @click="$emit('closeAction')"></i></div>
+      <div class="content"><i class="fa fa-exclamation-circle"></i>
+        <span>{{text}}</span>
+      </div>
+      <div class="footer">
+        <button @click="$emit('closeAction')">取消</button>
+        <button @click="$emit('closeAction', true)">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      text: {
+        type: String,
+        default: '提示'
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  // 统一提示弹框
+  $base-color: #3f84f6;
+  .com-remind-modal {
+    .cr-remind {
+      width: 6.3rem;
+      height: 3.5rem;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -1.75rem;
+      margin-left: -3.15rem;
+      border-radius: .15rem;
+      .header {
+        height: .6rem;
+        line-height: .6rem;
+        background: #3976f4;
+        border-top-left-radius: .15rem;
+        border-top-right-radius: .15rem;
+        i {
+          font-size: .32rem;
+          color: #fff;
+          float: right;
+          margin-right: .28rem;
+        }
+      }
+      .content {
+        background: #fff;
+        padding: .53rem .5rem;
+        span {
+          font-size: .32rem;
+          display: inline-block;
+          width: 4.5rem;
+        }
+        i {
+          font-size: .44rem;
+          color: #3976f4;
+          float: left;
+          margin-right: .2rem;
+        }
+      }
+      .footer {
+        background: #fff;
+        padding-bottom: .37rem;
+        text-align: center;
+        border-bottom-left-radius: .15rem;
+        border-bottom-right-radius: .15rem;
+        margin-top: -0.05rem;
+        button {
+          width: 2.22rem;
+          height: .77rem;
+          line-height: .77rem;
+          color: #fff;
+          font-size: .32rem;
+          border-radius: .08rem;
+          background: #bfbfbf;
+          &:last-child {
+            background: $base-color;
+            margin-left: .3rem;
+          }
+        }
+      }
+    }
+  }
+</style>

components/mobile/base/index.js

@@ -7,5 +7,6 @@ import SelectAddress from './SelectAddress.vue'
 import AddressView from './addressView.vue'
 import AddressEdit from './addressEdit.vue'
 import RemindStr from './RemindStr.vue'
+import RemindOpeModal from './RemindOpeModal.vue'
 
-export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper, SelectAddress, AddressView, AddressEdit, RemindStr }
+export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper, SelectAddress, AddressView, AddressEdit, RemindStr, RemindOpeModal }

pages/mobile/center/vendor/invoice/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="mobile-invoice mobile-content mobile-content-long vendor-invoice">
+  <div class="mobile-invoice mobile-content mobile-content-long vendor-invoice" :class="{'invoice-record': switchType == 'record'}" @click="showFilterInvoiceType = false">
     <div class="switch-head">
       <div class="com-switch-head">
-        <span class="active com-switch-item inline-block">买家开票申请</span>
-        <span class="com-switch-item inline-block">开票记录</span>
+        <span class="com-switch-item inline-block" :class="{active: switchType == 'apply'}" @click="setSwitchType('apply')">买家开票申请</span>
+        <span class="com-switch-item inline-block" :class="{active: switchType == 'record'}" @click="setSwitchType('record')">开票记录</span>
       </div>
     </div>
-    <div class="mi-remind-area">
+    <div class="mi-remind-area" v-if="switchType == 'apply'">
       <p class="title">温馨提示</p>
       <p class="content">
         <span class="inline-block">1、</span>
@@ -22,29 +22,29 @@
       </p>
     </div>
     <div class="search-content mi-search-content">
-      <input type="text" placeholder="订单号/发票抬头/收票人/联系电话">
-      <span><i class="iconfont icon-sousuo"></i></span>
+      <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">
-        <div class="com-select-wrap fr">类型
-          <ul class="select-list">
-            <li>普票</li>
-            <li>专票</li>
+        <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="setInvoiceType(1206)">普票</li>
+            <li @click.stop="setInvoiceType(1205)">专票</li>
           </ul>
         </div>
       </div>
-      <ul class="mi-list">
+      <ul class="mi-list" v-if="invoiceList.length">
         <li v-for="inv in invoiceList" @click.stop="setActive(inv)" :class="{active: inv.$active}">
           <div class="line">
             <span class="inline-block title">
                <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
-                 <input type="checkbox">
+                 <!--<input type="checkbox">-->
                </label>
               类型：
             </span>
             <span class="inline-block content">
-              <i class="inv" :class="{'spec-inv' : inv.type === 1205}">{{inv.type === 1206 ? '普票' : '专票'}}</i>
+              <i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>
             </span>
           </div>
           <div class="line">
@@ -58,8 +58,10 @@
               订单号：
             </span>
             <span class="inline-block content">
-              <template v-for="id in inv.orderidArr">
+              <template v-for="id in inv.orderids.split(',')">
+                <a class="link">
                 {{id}}
+                </a>
                 <br/>
               </template>
             </span>
@@ -96,20 +98,29 @@
           </div>
         </li>
       </ul>
+      <empty-status
+        :text="'暂无开票信息'"
+        :showLink="false"
+        v-else></empty-status>
     </div>
-    <div class="mi-fix-result">
+    <div class="mi-fix-result" v-if="invoiceList.length">
       <label class="bottom-modal-check mobile-cart-check" :class="{active: allChecked}">
         <input type="checkbox" @change="setActive()">
         <span>全选</span>
       </label>
-      <button>确认开票</button>
+      <button @click="submit">确认开票</button>
     </div>
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
     <pull-up :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
+    <remind-ope-modal :text="'点击【确认】系统将通知买家发票已寄出，否则请点击【取消】'"
+                      :show="Boolean(operateIds)"
+                      @closeAction="closeRemindOpe"
+    ></remind-ope-modal>
   </div>
 </template>
 <script>
-  import { RemindBox, PullUp } from '~components/mobile/common'
+  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
+  import { RemindOpeModal } from '~components/mobile/base'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -120,12 +131,21 @@
         invoiceList: [],
         isChange: false,
         page: 1,
-        count: 10
+        count: 10,
+        filterParams: {
+          invoicetype: '',
+          keyword: ''
+        },
+        showFilterInvoiceType: false,
+        operateIds: null,
+        switchType: 'apply'
       }
     },
     components: {
       RemindBox,
-      PullUp
+      PullUp,
+      RemindOpeModal,
+      EmptyStatus
     },
     fetch ({store}) {
       return Promise.all([
@@ -142,7 +162,7 @@
             }
             let arr = this.baseUtils.deepCopy(val.content)
             arr.forEach(item => {
-              item.orderidArr = item.orderids.split(',')
+//              item.orderidArr = item.orderids.split(',')
               item.$active = false
             })
             this.invoiceList = [...this.invoiceList, ...arr]
@@ -177,6 +197,12 @@
         this.remindText = str
         this.timeoutCount++
       },
+      initParams () {
+        this.page = 1
+        this.filterParams.invoicetype = null
+        this.filterParams.keyword = null
+        this.operateIds = null
+      },
       setActive (inv) {
         if (inv) {
           inv.$active = !inv.$active
@@ -189,11 +215,62 @@
         }
       },
       reloadList () {
-        this.$store.dispatch('invoice/getInvoices', {count: this.count, page: this.page, role: 'SELLER', sorting: {'createTime': 'DESC'}, status: 101})
+        return this.$store.dispatch('invoice/getInvoices', {count: this.count, page: this.page, role: 'SELLER', sorting: {'createTime': 'DESC'}, status: this.switchType === 'record' ? 102 : 101, invoicetype: this.filterParams.invoicetype, keyword: this.filterParams.keyword})
       },
       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()
+      },
+      submit () {
+        let arr = []
+        this.invoiceList.forEach(item => {
+          if (item.$active) {
+            arr.push(item.id)
+          }
+        })
+        if (arr.length) {
+          this.operateIds = arr.join(',')
+        } else {
+          this.setRemindText('请先勾选开票申请')
+        }
+      },
+      doSubmit () {
+        return this.$http.put(`/trade/billSubmit/${this.operateIds}`).then(res => {
+          if (res.data.length) {
+            this.setRemindText('开票成功')
+            this.initParams()
+            this.onFilter()
+          } else {
+            this.setRemindText('开票失败，请重试')
+          }
+        }, err => {
+          this.setRemindText(err.response.data || '开票失败，请重试')
+        })
+      },
+      closeRemindOpe (flag) {
+        if (flag) {
+          this.doSubmit()
+        } else {
+          this.operateIds = null
+        }
+      },
+      setSwitchType (type) {
+        this.initParams()
+        this.switchType = type
+        this.onFilter()
+//          .then(() => {
+//          this.switchType = type
+//        })
       }
     }
   }
@@ -202,5 +279,8 @@
   @import '~assets/scss/mobileInvoice';
   .vendor-invoice {
     margin-bottom: 2.3rem;
+    &.invoice-record {
+      margin-bottom: .98rem;
+    }
   }
 </style>