Merge remote-tracking branch 'origin/feature-201818-wangcz' into feature-201818-wangcz

pages/mobile/center/user/invoice/waitinvoice.vue

@@ -38,7 +38,9 @@
           <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}"></label>
+                 <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
+                   <input type="checkbox">
+                 </label>
                 商家名称：
               </span>
               <span class="inline-block content" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>
@@ -53,9 +55,9 @@
             </div>
             <div class="line">
               <span class="inline-block title">
-                可开票金额：
+                可开票金额(¥)：
               </span>
-              <span class="inline-block content pri">¥{{inv.price || 0}}</span>
+              <span class="inline-block content pri">{{inv.price}}</span>
             </div>
           </li>
         </ul>
@@ -71,14 +73,118 @@
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
 
     <addinvoice
-      :chooseItem="chooseItem"
+      :chooseItem="addItem"
       @addinvoiceBtn="addinvoiceFn"
       v-if="showAddinvoice"
-      :isSaveinvoiceType="$kind"
       :joinType="joinType"
     ></addinvoice>
 
     <pull-up :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
+
+    <!-- 申请发票弹窗 -->
+    <div class="mobile-modal" @touchmove="preventTouchMove($event)" v-if="showSend">
+      <div class="applyinvoice_Alert" >
+        <div class="applyinvoice_title">申请开票<span><i class="iconfont icon-guanbi1" @click="showSend = false"></i></span></div>
+        <div ref="applyinvoiceAlert" class="scrollContent" >
+          <div>
+            <div class="applyinvoice-ul" v-if="invoiceArr.length > 0">
+              <div class="addinvoice-focus clearfix">
+                <div class="pull-left addinvoice-focus-name">发票类型：</div>
+                <div class="pull-left clearfix">
+                  <div class="normal pull-left" style="margin-right: 0.2rem;" @click="chooseVoice('speci', 1205)" v-if="showSpeciBtn">
+                    <div class="icon" :class="waitinvoiceType === 'speci' ? 'active' : ''">
+                      <div class="icon-next"></div>
+                    </div>
+                    增值税专票
+                  </div>
+                  <div class="normal pull-left" @click="chooseVoice('normal', 1206)" v-if="showNormalBtn">
+                    <div class="icon" :class="waitinvoiceType === 'normal' ? 'active' : ''">
+                      <div class="icon-next"></div>
+                    </div>
+                    增值税普票
+                  </div>
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix">
+                <div class="pull-left addinvoice-focus-name">发票抬头：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.head}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" v-if="chooseItem.kind === 1205">
+                <div class="pull-left addinvoice-focus-name">单位地址：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.companyAddress}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" v-if="chooseItem.kind === 1205">
+                <div class="pull-left addinvoice-focus-name">单位电话：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.companyPhone}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" v-if="chooseItem.kind === 1205">
+                <div class="pull-left addinvoice-focus-name">税务登记号：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.companyTaxNumber}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" v-if="chooseItem.kind === 1205">
+                <div class="pull-left addinvoice-focus-name">开户银行：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.bankName}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" v-if="chooseItem.kind === 1205">
+                <div class="pull-left addinvoice-focus-name">开户银行账号：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.bankAccount}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" >
+                <div class="pull-left addinvoice-focus-name">收票人：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.name}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" >
+                <div class="pull-left addinvoice-focus-name">联系电话：</div>
+                <div class="pull-left clearfix">
+                  {{chooseItem.telephone}}
+                </div>
+              </div>
+              <div class="addinvoice-focus clearfix" >
+                <div class="pull-left addinvoice-focus-name">收票地址：</div>
+                <div class="pull-left clearfix">
+                  <p style="line-height:0.4rem">{{chooseItem.area}}</p>
+                  <p style="line-height:0.4rem">{{chooseItem.detailAddress}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="applyinvoice-ul">
+              <div class="addinvoice-focus clearfix">
+                <div class="pull-left addinvoice-focus-name">暂无发票信息：</div>
+                <div class="pull-left clearfix" @click="addInvoiceNew()">
+                  <img src="/images/mobile/center/user/icon-rm-invoice.png"/>新增发票
+                </div>
+              </div>
+            </div>
+            <div class="applyinvoive_infotitle">共<a class="blue">{{applyObj.sellNum.length}}</a>个商家，<a class="blue">{{applyObj.orderNum}}</a>个订单，发票金额总计：<a class="red">¥{{applyObj.allPrice}}</a>元</div>
+            <div class="applyinvoive_detailinfo">
+              <div class="clearfix" v-for="info in applyObj.sellNum">
+                <div class="pull-left">{{info.sellername}}</div>
+                <div class="pull-right">金额：¥{{info.orderAllPrice}}</div>
+              </div>
+            </div>
+            <div class="applyinvoice_controll clearfix">
+              <div @click="showSend = false" class="pull-left">取消</div>
+              <div class="pull-right" @click="applyInvoiceFn()">确认</div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </div>
 </template>
 
@@ -87,6 +193,7 @@
   import axios from '~plugins/axios'
   import { RemindBox, PullUp } from '~components/mobile/common'
   import { addinvoice } from '~components/mobile/center'
+  import BScroll from 'better-scroll'
   export default {
     name: 'invoice-view',
     layout: 'mobile',
@@ -142,35 +249,41 @@
     },
     data() {
       return {
+        waitinvoiceType: 'speci',
+        showNormalBtn: true, // 是否显示普票按钮
+        showSpeciBtn: true, // 是否显示专票按钮
         activeType: '',
         invoiceList: [],
+        invoiceArr: [],
         collectResult: '',
         timeoutCount: 0,
         chooseItem: {},
         showAddinvoice: false,
-        $kind: 0,
         joinType: 'add',
         keyword: '',
-        page: 1
+        page: 1,
+        showSend: false,
+        applyObj: {
+          sellNum: []
+        },
+        addItem: {}
       }
     },
     async asyncData() {
-      // let { data } = await axios.get('/trade/bill/list/personal')
-      // let _arr = []
-      // data.forEach(obj => {
-      //   if (obj.kind === 1206) {
-      //     _arr.splice(0, 0, obj)
-      //   } else {
-      //     _arr.push(obj)
-      //   }
-      // })
-      // let hasnormal = data.find(item => {
-      //   return item.kind === 1206
-      // })
-      // return {
-      //   invoiceList: _arr,
-      //   hasnormal: hasnormal
-      // }
+      let { data } = await axios.get('/trade/bill/list/personal')
+      let showNormalBtn = data.find(item => {
+        return item.kind === 1206
+      })
+      let showSpeciBtn = data.find(item => {
+        return item.kind === 1205
+      })
+      let chooseItem = showSpeciBtn ? showSpeciBtn : showNormalBtn
+      return {
+        invoiceArr: data,
+        showNormalBtn: showNormalBtn ? true: false,
+        showSpeciBtn: showSpeciBtn ? true : false,
+        chooseItem: chooseItem
+      }
     },
     methods: {
       setActive (inv) {
@@ -184,24 +297,30 @@
           })
         }
       },
+      chooseVoice(str, num) {
+        this.waitinvoiceType = str
+        this.chooseItem = this.invoiceArr.find(obj => {
+          return obj.kind === num
+        })
+        this._initScroll()
+      },
       async addinvoiceFn(ty, item) {
         this.showAddinvoice = false
         if (ty) {
           let { data } = await axios.get('/trade/bill/list/personal')
-          let _arr = []
-          data.forEach(obj => {
-            if (obj.kind === 1206) {
-              _arr.splice(0, 0, obj)
-            } else {
-              _arr.push(obj)
-            }
-          })
-          let hasnormal = data.find(item => {
+          let showNormalBtn = data.find(item => {
             return item.kind === 1206
           })
-          this.invoiceList = _arr
-          this.hasnormal = hasnormal
+          let showSpeciBtn = data.find(item => {
+            return item.kind === 1205
+          })
+          let chooseItem = showSpeciBtn ? showSpeciBtn : showNormalBtn
+          this.invoiceArr = data
+          this.showNormalBtn = showNormalBtn ? true: false
+          this.showSpeciBtn = showSpeciBtn ? true : false
+          this.chooseItem = chooseItem
         }
+        this.showSend = true
       },
       setRemindText(str) {
         this.collectResult = str
@@ -220,13 +339,53 @@
       applyInvoice() {
         let _arr = []
         let _orderNum = 0
+        let _AllPice = 0
         this.invoiceList.forEach(obj => {
-          if (obj.$active) {
+          if (obj.$active === true) {
+            _AllPice += obj.price
             _orderNum++
-            let _find = this._arr.find($it => {
+            let _find = _arr.find($it => {
               return $it.storeid === obj.storeid
             })
-            _find.orderAllPrice += obj.price
+            if (_find) {
+              _find.orderAllPrice += obj.price
+            } else {
+              obj.orderAllPrice = obj.price
+              _arr.push(obj)
+            }
+          }
+        })
+        if (_arr.length === 0) {
+          this.setRemindText('请勾选未开票订单')
+          return
+        }
+        this.applyObj = {
+          sellNum: _arr,
+          orderNum: _orderNum,
+          allPrice: _AllPice
+        }
+        this.showSend = true
+        this._initScroll()
+      },
+      // 申请开票最后阶段
+      applyInvoiceFn() {
+        if (this.invoiceArr.length === 0) {
+          this.setRemindText('请选择发票类型')
+          return
+        }
+        let str = ''
+        this.applyObj.sellNum.forEach(obj => {
+          str === '' ? str += obj.orderid : str += ',' + obj.orderid
+        })
+        let json = {
+          invoiceid: 3034,
+          orderids: str
+        }
+        this.$http.post('/trade/billSubmit', json).then(res => {
+          if (res.data instanceof Array) {
+            this.setRemindText('申请成功')
+            this.searchMore()
+            this.showSend = false
           }
         })
       },
@@ -241,6 +400,20 @@
       onPullUp () {
         this.page++
         this.reloadList()
+      },
+      _initScroll() {
+        this.$nextTick(res => {
+           if (!this.scroll) {
+             this.scroll = new BScroll(this.$refs.applyinvoiceAlert, {click: true})
+           } else {
+             this.scroll.refresh()
+           }
+        })
+      },
+      addInvoiceNew() {
+        this.showSend = false
+        this.addItem = {}
+        this.showAddinvoice = true
       }
     },
     components: {
@@ -264,8 +437,9 @@
   }
   .invoice-wrapper {
     background: #f1f3f6;
-    margin: 2.08rem 0 0.98rem 0;
-    height: calc(100vh - 1.26rem - 0.98rem - 1.06rem - 0.82rem);
+    margin: 1.26rem 0 0 0;
+    padding: 0.82rem 0 2.04rem;
+    height: calc(100vh - 1.26rem);
     overflow-y: scroll;
     .order-nav {
       background: #fff;
@@ -304,16 +478,128 @@
     .mobile-invoice .mi-list-content .mi-list li .line .content {
       padding: 0;
       color: #3976f4;
+      width: 67%;
       &.pri {
         color: #ee1111
       }
     }
-    .mi-list {
-      .title {
-        width: 30% !important;
+    .mobile-invoice .mi-list-content .mi-list li .line .title {
+      width: 33%;
+    }
+    .applyinvoice_Alert {
+      background: #fff;
+      position: fixed;
+      bottom: 0.98rem;
+      left: 0;
+      width: 100%;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      padding-bottom: 0.2rem;
+      .scrollContent {
+        max-height: 6rem;
+        overflow: hidden;
       }
-      .content {
-        width: 70% !important;
+      .applyinvoice_title {
+        color: #333;
+        font-size: 0.42rem;
+        text-align: center;
+        line-height: 1rem;
+        font-weight: 600;
+        position: relative;
+        i {
+          position: absolute;
+          font-size: 16px;
+          right: 0.2rem;
+        }
+      }
+      .applyinvoice-ul {
+        .addinvoice-focus {
+          font-size: 0.28rem;
+          color: #666;
+          line-height: 0.6rem;
+          margin: 0 0.2rem;
+          img {
+            width: 0.29rem;
+            vertical-align: top;
+            height: 0.33rem;
+            margin-top: 0.12rem;
+            margin-right: 0.04rem;
+          }
+          .addinvoice-focus-name {
+            width: 2.1rem;
+          }
+          .normal {
+            .icon {
+              font-size: 0.28rem;
+              color: #333;
+              width: 0.5rem;
+              height: 0.5rem;
+              border-radius: 50%;
+              border: 1px solid #dcdcdc;
+              position: relative;
+              display: inline-block;
+              vertical-align: top;
+              &.active .icon-next {
+                background: #226ce7;
+                width: 0.3rem;
+                height: 0.3rem;
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate3d(-50%, -50%, 0);
+              }
+            }
+          }
+        }
+      }
+      .applyinvoive_infotitle {
+        color: #333;
+        font-size: 0.28rem;
+        @include lineHeight(0.6rem);
+        background: #e5e5e5;
+        padding: 0 0.2rem;
+        .blue {
+          color: #3e82f5;
+        }
+        .red{
+          max-width: 1.6rem;
+          @include overFlowHidden();
+          vertical-align: middle;
+          display: inline-block;
+          color: #f43938
+        }
+      }
+      .applyinvoive_detailinfo {
+        color: #333;
+        font-size: 0.28rem;
+        padding: 0.2rem;
+        .clearfix {
+          @include lineHeight(0.5rem);
+        }
+        .pull-left {
+          max-width: 4rem;
+          @include overFlowHidden()
+        }
+        .pull-right {
+          max-width: 3rem;
+          @include overFlowHidden()
+        }
+      }
+      .applyinvoice_controll {
+        padding: 0 0.3rem;
+        div {
+          width: 3.29rem;
+          @include lineHeight(0.77rem);
+          color: #fff;
+          font-size: 0.32rem;
+          text-align: center;
+          border-radius: 0.07rem;
+          background: #bfbfbf;
+          &:last-child {
+            background: #3e82f5;
+          }
+        }
       }
     }
   }