确认订单页发票修改

pages/mobile/center/user/pay/_orderId.vue

@@ -208,56 +208,67 @@
     <!-- 选择配送方式弹框end -->
 
     <!-- 选择发票弹框start -->
-    <modal-wrapper :showModal="showInvoiceModal"
+    <modal-wrapper :showModal="showInvoiceModal && !showAddinvoice"
                    :title="'选择发票'"
                    @closeAction="showInvoiceModal = false">
       <ul class="invoice-list">
         <li @click="setInvoiceCheck(-1)">
-          <label class="bottom-modal-check mobile-cart-check" :class="{active: selectedInvoiceIndex === -1}">
-            <input type="checkbox">
-          </label>
-          <span class="inv-head">暂不开票</span>
-        </li>
-        <li v-for="(inv, index) in invoiceData" @click="setInvoiceCheck(index)">
-          <label class="bottom-modal-check mobile-cart-check" :class="{'active': selectedInvoiceIndex === index}">
-            <input type="checkbox">
-          </label>
-          <span class="inv-head inline-block text-ellipse">{{inv.head}}</span>
-          <img class="inv-type" :src="`/images/mobile/center/user/${inv.kind === 1205 ? 'invoice-spec' : 'invoice-nor'}.png`" alt="">
-          <div class="content-line" v-if="inv.kind === 1205">
-            <div class="title inline-block">单位地址：</div>
-            <div class="content inline-block">{{inv.companyAddress || '-'}}</div>
-          </div>
-          <div class="content-line" v-if="inv.kind === 1205">
-            <div class="title inline-block">单位电话：</div>
-            <div class="content inline-block">{{inv.companyPhone || '-'}}</div>
+          <div class="inv-content">
+            <label class="bottom-modal-check mobile-cart-check" :class="{active: selectedInvoiceIndex === -1}">
+              <input type="checkbox">
+            </label>
+            <span class="inv-head">暂不开票</span>
           </div>
-          <div class="content-line" v-if="inv.kind === 1205">
-            <div class="title inline-block">税务登记号：</div>
-            <div class="content inline-block">{{inv.companyTaxNumber || '-'}}</div>
-          </div>
-          <div class="content-line" v-if="inv.kind === 1205">
-            <div class="title inline-block">开户银行：</div>
-            <div class="content inline-block">{{inv.bankName || '-'}}</div>
-          </div>
-          <div class="content-line" v-if="inv.kind === 1205">
-            <div class="title inline-block">开户银行账户：</div>
-            <div class="content inline-block">{{inv.bankAccount || '-'}}</div>
-          </div>
-          <div class="content-line">
-            <div class="title inline-block">收票人：</div>
-            <div class="content inline-block">{{inv.name || '-'}}</div>
-          </div>
-          <div class="content-line">
-            <div class="title inline-block">联系电话：</div>
-            <div class="content inline-block">{{inv.telephone || '-'}}</div>
+        </li>
+        <li v-for="(inv, index) in invoiceData" @click.stop="setInvoiceCheck(index)">
+          <div class="inv-content">
+            <label class="bottom-modal-check mobile-cart-check" :class="{'active': selectedInvoiceIndex === index}">
+              <input type="checkbox">
+            </label>
+            <span class="inv-head inline-block text-ellipse">{{inv.head}}</span>
+            <img class="inv-type" :src="`/images/mobile/center/user/${inv.kind === 1205 ? 'invoice-spec' : 'invoice-nor'}.png`" alt="">
+            <div class="content-line" v-if="inv.kind === 1205">
+              <div class="title inline-block">单位地址：</div>
+              <div class="content inline-block">{{inv.companyAddress || '-'}}</div>
+            </div>
+            <div class="content-line" v-if="inv.kind === 1205">
+              <div class="title inline-block">单位电话：</div>
+              <div class="content inline-block">{{inv.companyPhone || '-'}}</div>
+            </div>
+            <div class="content-line" v-if="inv.kind === 1205">
+              <div class="title inline-block">税务登记号：</div>
+              <div class="content inline-block">{{inv.companyTaxNumber || '-'}}</div>
+            </div>
+            <div class="content-line" v-if="inv.kind === 1205">
+              <div class="title inline-block">开户银行：</div>
+              <div class="content inline-block">{{inv.bankName || '-'}}</div>
+            </div>
+            <div class="content-line" v-if="inv.kind === 1205">
+              <div class="title inline-block">开户银行账户：</div>
+              <div class="content inline-block">{{inv.bankAccount || '-'}}</div>
+            </div>
+            <div class="content-line">
+              <div class="title inline-block">收票人：</div>
+              <div class="content inline-block">{{inv.name || '-'}}</div>
+            </div>
+            <div class="content-line">
+              <div class="title inline-block">联系电话：</div>
+              <div class="content inline-block">{{inv.telephone || '-'}}</div>
+            </div>
+            <div class="content-line">
+              <div class="title inline-block">详细地址：</div>
+              <div class="content inline-block">{{inv.area + inv.detailAddress}}</div>
+            </div>
           </div>
-          <div class="content-line">
-            <div class="title inline-block">详细地址：</div>
-            <div class="content inline-block">{{inv.area + inv.detailAddress}}</div>
+          <div class="edit-addr-area">
+            <a class="inline-block addr-btn" @click.stop="updateInvoice(inv)"><i class="iconfont icon-xinzeng"></i>编辑</a>
+            <a class="inline-block addr-btn" @click.stop="deleteFn(inv)"><i class="iconfont icon-lajitong"></i>删除</a>
           </div>
         </li>
       </ul>
+      <div class="inv-btn" v-if="invoiceData.length < 2">
+        <button class="add-addr-btn" @click.stop="addInvoiceNew()"><i class="iconfont icon-add"></i>添加发票</button>
+      </div>
     </modal-wrapper>
     <!-- 选择发票弹框end -->
 
@@ -378,12 +389,20 @@
                 :text="'手续费：是指第三方支付机构在交易过程中，按照一定的百分比进行收取的费用。手续费金额=订单金额 * 0.45%'"
                 @closeAction="showRemindStr = false"
     ></remind-str>
+    <addinvoice
+      :chooseItem="chooseItem"
+      @addinvoiceBtn="addinvoiceFn"
+      v-if="showAddinvoice"
+      :isSaveinvoiceType="$kind"
+      :joinType="joinType"
+    ></addinvoice>
   </div>
 </template>
 <script>
   import { LinkUser, ModalWrapper, BottomModalWrapper, AddressEdit, RemindStr } from '~components/mobile/base'
   import { RemindBox } from '~components/mobile/common'
   import { goodsPurchaseOperate } from '~utils/mixin'
+  import { addinvoice } from '~components/mobile/center'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -417,7 +436,11 @@
         currentTakeSelfStoreId: '',
         editAddr: false,
         currentAddress: {},
-        showRemindStr: false
+        showRemindStr: false,
+        chooseItem: {},
+        showAddinvoice: false,
+        $kind: 0,
+        joinType: 'add'
       }
     },
     mixins: [goodsPurchaseOperate],
@@ -427,7 +450,8 @@
       RemindBox,
       BottomModalWrapper,
       AddressEdit,
-      RemindStr
+      RemindStr,
+      addinvoice
     },
     fetch ({ store, params }) {
       return Promise.all([
@@ -948,6 +972,33 @@
         }, err => {
           this.setRemindText(err.response.data || '删除失败，系统错误')
         })
+      },
+      reloadInvoice () {
+        this.$store.dispatch('userCenter/loadPayInvoice')
+      },
+      async addinvoiceFn(ty, item) {
+        this.showAddinvoice = false
+        if (ty) {
+          this.reloadInvoice()
+        }
+      },
+      updateInvoice(item, index) {
+        this.joinType = 'update'
+        this.chooseItem = this.baseUtils.deepCopy(item)
+        this.$kind = 0
+        this.showAddinvoice = true
+      },
+      addInvoiceNew() {
+        this.joinType = 'add'
+        this.$kind = this.invoiceData.length > 0 ? this.invoiceData[0].kind : 0
+        this.chooseItem = {}
+        this.showAddinvoice = true
+      },
+      deleteFn(item) {
+        this.$http.delete(`/trade/bill/delete/${item.id}`).then(res => {
+          this.setRemindText('删除成功')
+          this.reloadInvoice()
+        })
       }
     }
   }
@@ -1393,11 +1444,13 @@
           margin-bottom: 0;
         }
         background: #fff;
-        padding: .26rem .16rem .32rem .25rem;
         .inv-head {
           margin-left: .17rem;
           max-width: 5.3rem;
         }
+        .inv-content {
+          padding: .26rem .16rem .32rem .25rem;
+        }
         .inv-type {
           position: absolute;
           right: 0;
@@ -1474,22 +1527,22 @@
             color: #666;
           }
         }
-        .edit-addr-area {
-          border-top: 1px solid #d9d9d9;
-          .addr-btn {
-            width: 50%;
-            height: .8rem;
-            line-height: .8rem;
-            color: #333;
-            text-align: center;
-            i {
-              font-size: .34rem;
-              margin-right: .1rem;
-            }
-            &:first-child {
-              border-right: 1px solid #d9d9d9;
-            }
-          }
+      }
+    }
+    .edit-addr-area {
+      border-top: 1px solid #d9d9d9;
+      .addr-btn {
+        width: 50%;
+        height: .8rem;
+        line-height: .8rem;
+        color: #333;
+        text-align: center;
+        i {
+          font-size: .34rem;
+          margin-right: .1rem;
+        }
+        &:first-child {
+          border-right: 1px solid #d9d9d9;
         }
       }
     }
@@ -1511,6 +1564,13 @@
         margin-right: .08rem;
       }
     }
+    .inv-btn {
+      background: #f1f3f7;
+      padding-top: .26rem;
+      .add-addr-btn {
+        margin-top: 0;
+      }
+    }
     .takeself-list {
       li {
         .info-line {