新增买家订单

components/mobile/base/RemindStr.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mobile-modal" v-if="showRemind">
     <div class="mobile-remind-modal">
-      <div class="mb-content">{{text}}</div>
+      <div class="mb-content" v-html="text"></div>
       <div class="mb-foot" @click="$emit('closeAction')">我知道了</div>
     </div>
   </div>

components/mobile/center/addinvoice.vue

@@ -5,121 +5,135 @@
         <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
         <p>{{joinType === 'update' ? '修改': '新增'}}发票信息</p>
         <p class="en-name">
-          <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">
-          {{currentEnName}}
+          <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
         </p>
       </div>
     </div>
-    <div class="addinvoice-content-wrapper">
-      <div class="addinvoice-title" v-if="joinType !== 'add'">{{chooseItem.kind === 1206 ? '增值税普票' : '增值税专票'}}</div>
-      <div class="addinvoice-ul" :style="joinType === 'add' ? 'margin-top: 0.2rem' : ''">
-        <div class="addinvoice-focus clearfix" v-if="joinType === 'add'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票类型：</div>
-          <div class="pull-left clearfix">
-            <div class="normal pull-left" style="margin-right: 0.2rem;" @click="isSaveinvoiceType === 0 ? invoiceType = 'speci' : ''">
-              <div class="icon" :class="invoiceType === 'speci' ? 'active' : ''">
-                <div class="icon-next"></div>
+    <div class="addinvoice-content-wrapper" ref="ScrollContent">
+      <div>
+        <div class="addinvoice-title" v-if="joinType !== 'add'">{{chooseItem.kind === 1206 ? '增值税普票' : '增值税专票'}}</div>
+        <div class="addinvoice-ul" :style="joinType === 'add' ? 'margin-top: 0.2rem' : ''">
+          <div class="addinvoice-focus clearfix" v-if="joinType === 'add'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票类型：</div>
+            <div class="pull-left clearfix">
+              <div class="normal pull-left" style="margin-right: 0.2rem;" @click="isSaveinvoiceType === 0 ? changeType('speci') : ''">
+                <div class="icon" :class="invoiceType === 'speci' ? 'active' : ''">
+                  <div class="icon-next"></div>
+                </div>
+                增值税专票
               </div>
-              增值税专票
-            </div>
-            <div class="normal pull-left" @click="isSaveinvoiceType === 0 ? invoiceType = 'normal' : ''">
-              <div class="icon" :class="invoiceType === 'normal' ? 'active' : ''">
-                <div class="icon-next"></div>
+              <div class="normal pull-left" @click="isSaveinvoiceType === 0 ? changeType('normal') : ''">
+                <div class="icon" :class="invoiceType === 'normal' ? 'active' : ''">
+                  <div class="icon-next"></div>
+                </div>
+                增值税普票
               </div>
-              增值税普票
             </div>
           </div>
-        </div>
-        <div class="addinvoice-focus clearfix">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票抬头：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入发票抬头" type="text" v-model="chooseItem.head" />
+          <div class="addinvoice-focus clearfix">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票抬头：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入发票抬头" type="text" v-model="chooseItem.head" maxlength="50"/>
+            </div>
           </div>
-        </div>
-        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位地址：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入单位地址" type="text" v-model="chooseItem.companyAddress" maxlength="50" />
+          <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位地址：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入单位地址" type="text" v-model="chooseItem.companyAddress" maxlength="50" />
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位电话：</div>
-          <div class="pull-left input">
-            <input placeholder="区号和号码用“-”隔开" type="text" v-model="chooseItem.companyPhone"/>
+          <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位电话：</div>
+            <div class="pull-left input">
+              <input placeholder="区号和号码用“-”隔开" type="text" v-model="chooseItem.companyPhone" maxlength="20"/>
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>税务登记号：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入税务登记号" type="text" v-model="chooseItem.companyTaxNumber" maxlength="20"/>
+          <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>税务登记号：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入税务登记号" type="text" v-model="chooseItem.companyTaxNumber" maxlength="20"/>
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入开户银行" type="text" v-model="chooseItem.bankName" maxlength="30"/>
+          <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入开户银行" type="text" v-model="chooseItem.bankName" maxlength="30"/>
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行账号：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入开户银行账号" type="number" v-model="chooseItem.bankAccount" maxlength="30" />
+          <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行账号：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入开户银行账号" type="number" v-model="chooseItem.bankAccount" oninput="if(value.length>30)value=value.slice(0,30)" />
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>收票人：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入收票人" type="text" maxlength="10" v-model="chooseItem.name" />
+          <div class="addinvoice-focus clearfix">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>收票人：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入收票人" type="text" maxlength="10" v-model="chooseItem.name" />
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>联系电话：</div>
-          <div class="pull-left input">
-            <input placeholder="请输入联系电话" type="text" maxlength="11" v-model="chooseItem.telephone" />
+          <div class="addinvoice-focus clearfix">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>联系电话：</div>
+            <div class="pull-left input">
+              <input placeholder="请输入联系电话" type="number" oninput="if(value.length>11)value=value.slice(0,11)" v-model="chooseItem.telephone" />
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>所在地区：</div>
-          <div class="pull-left input" @click="addressShow = true">
-            <span v-text="chooseItem.area || '选择地区'">选择地区</span>
-            <i class="iconfont icon-xiangyou"></i>
-            <!--<input placeholder="省/市/区" type="text" />-->
+          <div class="addinvoice-focus clearfix">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>所在地区：</div>
+            <div class="pull-left input" @click="addressShow = true">
+              <span v-text="chooseItem.area || '选择地区'">选择地区</span>
+              <i class="iconfont icon-xiangyou"></i>
+              <!--<input placeholder="省/市/区" type="text" />-->
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-focus clearfix">
-          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>详细地址：</div>
-          <div class="pull-left input">
-            <input placeholder="建议您填写详细发件地址，如街道名，门牌号楼层和房间号等信息" type="text" v-model="chooseItem.detailAddress" />
+          <div class="addinvoice-focus clearfix">
+            <div class="pull-left addinvoice-focus-name"><a class="red">*</a>详细地址：</div>
+            <div class="pull-left input">
+              <input placeholder="建议您填写详细发件地址，如街道名，门牌号楼层和房间号等信息" type="text" v-model="chooseItem.detailAddress" maxlength="30"/>
+            </div>
           </div>
-        </div>
 
-        <div class="addinvoice-agree" v-if="joinType === 'add'">
-          <input type="checkbox" id="awesome" :checked="agreeInfo" @click="agreeInfo = !agreeInfo"/>
-          <label for="awesome">我已阅读并同意<a>《发票须知》</a></label>
-        </div>
+          <div class="line addinvoice-agree" v-if="joinType === 'add'" style="line-height: 0.36rem">
+            <span class="inline-block title">
+               <label class="bottom-modal-check mobile-cart-check" :class="{active: agreeInfo}" @click="agreeInfo = !agreeInfo">
+                 <!--<input type="checkbox">-->
+               </label>
+              我已阅读并同意<a @click="showRemindStr = true">《发票须知》</a>
+            </span>
+            <!--<input type="checkbox" id="awesome" :checked="agreeInfo" @click="agreeInfo = !agreeInfo"/>-->
+            <!--<label for="awesome"></label>-->
+          </div>
 
-        <div class="addinvoice-controll clearfix">
-          <div class="pull-left" @click="goBack()">取消</div>
-          <div class="pull-right" @click="goBack(true)">确认</div>
-        </div>
+          <div class="addinvoice-controll clearfix">
+            <div class="pull-left" @click="goBack()">取消</div>
+            <div class="pull-right" @click="goBack(true)">确认</div>
+          </div>
+          <div style="width:100%;height:1.2rem;position: relative"></div>
+      </div>
       </div>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
     <select-address :className="''" :isShow="addressShow" @closeAction="addressData"></select-address>
+    <remind-str :showRemind="showRemindStr"
+                :text="remindText"
+                @closeAction="showRemindStr = false"
+    ></remind-str>
   </div>
 </template>
 
 <script>
   import { RemindBox } from '~components/mobile/common'
+  import { RemindStr } from '~components/mobile/base'
   import SelectAddress from '~components/mobile/base/SelectAddress.vue'
+  import Bscroll from 'better-scroll'
   export default {
     name: 'addinvoice',
     props: {
@@ -157,6 +171,13 @@
           this.agreeInfo = true
         }
       }
+      this.$nextTick(res => {
+        if (!this.scroll) {
+          this.scroll = new Bscroll(this.$refs.ScrollContent, {click: true})
+        } else {
+          this.scroll.refresh()
+        }
+      })
     },
     data() {
       return {
@@ -164,10 +185,19 @@
         agreeInfo: false,
         collectResult: '',
         timeoutCount: 0,
-        addressShow: false
+        addressShow: false,
+        showRemindStr: false,
+        remindText : '<div style="font-size: 0.3rem">为确保发票的开具顺利，在【订单信息】页面填写开票信息后请认真核对，因为您填写的错误信息导致的损失由您自行承担。</div>' +
+        '<p style="font-size: 0.3rem;margin: 0.1rem 0">1.  如您收到的发票与您的开票信息、订单信息不符，请及时向卖家提出更换发票申请。</p>' +
+        '<p style="font-size: 0.3rem;margin: 0.1rem 0">2.  发票与您的开票信息、订单信息一致的情况下，发票一经开出，恕不退换。</p>' +
+        '<p style="font-size: 0.3rem">3.  补开发票的同时要补交税费。</p>'
       }
     },
     methods: {
+      changeType(str) {
+        this.scroll.refresh()
+        this.invoiceType = str
+      },
       goBack(str) {
         if (str) {
           if (this.chooseItem.head === '' || !this.chooseItem.head) {
@@ -186,6 +216,8 @@
             this.setRemindText('开户银行账号不能为空')
           } else if (this.chooseItem.name === '' || !this.chooseItem.name) {
             this.setRemindText('收票人不能为空')
+          } else if (this.chooseItem.telephone === '' || !this.chooseItem.telephone) {
+            this.setRemindText('联系电话不能为空')
           } else if (!/^1\d{10}$/.test(this.chooseItem.telephone)) {
             this.setRemindText('联系电话不正确')
           } else if (this.chooseItem.detailAddress === '' || !this.chooseItem.detailAddress) {
@@ -223,7 +255,8 @@
     },
     components: {
       RemindBox,
-      SelectAddress
+      SelectAddress,
+      RemindStr
     }
   }
 </script>
@@ -267,6 +300,9 @@
       width: 6rem;
       padding-left: 1rem;
     }
+    .mobile-center-header p.en-name {
+      font-size: .3rem;
+    }
     .mobile-header a{
       font-size:.28rem;
       color:#fff;
@@ -279,7 +315,8 @@
     .addinvoice-content-wrapper {
       margin: 1.26rem 0 0 0;
       height: calc(100vh - 1.26rem);
-      overflow-y: scroll;
+      /*overflow-y: scroll;*/
+      overflow: hidden;
       .addinvoice-title {
         font-size: 0.28rem;
         color: #333;
@@ -289,7 +326,6 @@
       .addinvoice-ul {
         background: #fff;
         margin: 0 0.2rem;
-        padding-bottom: 0.5rem;
         border: 1px solid #e0e0e0;
         border-radius: 0.07rem;
       }
@@ -300,7 +336,7 @@
         border-bottom: 1px solid #dcdcdc;
         margin: 0 0.2rem;
         .addinvoice-focus-name {
-          width: 2.1rem;
+          width: 2.2rem;
         }
         .red {
           color: #ff0000;
@@ -317,6 +353,9 @@
             display: inline-block;
             vertical-align: top;
             margin-top: 0.32rem;
+            &.active {
+              border: 1px solid #226ce7;
+            }
             &.active .icon-next {
               background: #226ce7;
               width: 0.3rem;
@@ -330,14 +369,14 @@
           }
         }
         input {
-          width: 4.55rem;
+          width: 4.4rem;
           font-size: 0.28rem;
           height: 0.5rem;
           line-height: 0.5rem;
           color: #666;
         }
         .input {
-          width: 4.55rem;
+          width: 4.4rem;
           font-size: 0.28rem;
           color: #666;
           position: relative;

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

@@ -1,121 +1,132 @@
 <template>
   <div class="invoice-wrapper">
+    <div class="mobile-nav">
+      <div class="mobile-header mobile-center-header">
+        <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
+        <p>发票管理</p>
+        <p class="en-name">
+          <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
+        </p>
+      </div>
+    </div>
     <div class="order-nav">
-      <div class="active" @click="changeTab('')"><span>开票信息</span></div>
-      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待开票信息</span></nuxt-link>
+      <div class="active" @click="changeTab('')"><span>发票信息</span></div>
+      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待开票订单</span></nuxt-link>
       <nuxt-link to="/mobile/center/user/invoice/invoiceRecord" tag=div><span>开票记录</span></nuxt-link>
     </div>
-    <div class="invoice-top clearfix">
-      <div class="pull-left">已设置的开票信息</div>
-      <div class="pull-right" v-if="invoiceList.length !== 2" @click="addInvoiceNew()"><img src="/images/mobile/center/user/icon-rm-invoice.png"/>新增发票</div>
-    </div>
-    <div class="invoice-middle" v-if="invoiceList.length > 0">
-      <div v-for="(item, index) in invoiceList">
-        <!-- 普票 -->
-        <div class="invoice-normal" v-if="item.kind === 1206">
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">发票类型：</div>
-            <div class="pull-right normal-primary">普票</div>
-          </div>
+    <div class="invoice-wrapper-el">
+      <div class="invoice-top clearfix">
+        <div class="pull-left">已设置的开票信息</div>
+        <div class="pull-right" v-if="invoiceList.length !== 2" @click="addInvoiceNew()"><img src="/images/mobile/center/user/icon-rm-invoice.png"/>新增发票</div>
+      </div>
+      <div class="invoice-middle" v-if="invoiceList.length > 0">
+        <div v-for="(item, index) in invoiceList">
+          <!-- 普票 -->
+          <div class="invoice-normal" v-if="item.kind === 1206">
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">发票类型：</div>
+              <div class="pull-right normal-primary">普票</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">开票抬头：</div>
-            <div class="pull-right">{{item.head}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">开票抬头：</div>
+              <div class="pull-right overhiden">{{item.head}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票人：</div>
-            <div class="pull-right">{{item.name}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票人：</div>
+              <div class="pull-right overhiden">{{item.name}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票人电话：</div>
-            <div class="pull-right">{{item.telephone}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票人电话：</div>
+              <div class="pull-right overhiden">{{item.telephone}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票地址：</div>
-            <div class="pull-right">
-              <p>{{item.area}}</p>
-              <p>{{item.detailAddress}}</p>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票地址：</div>
+              <div class="pull-right">
+                <p>{{item.area}}</p>
+                <p>{{item.detailAddress}}</p>
+              </div>
             </div>
-          </div>
 
-          <div class="invoice-controll clearfix">
-            <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
-            <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
-          </div>
-        </div>
-        <!-- 专票 -->
-        <div :style="!hasnormal ? '': 'margin-top: 0.24rem'" class="invoice-normal invoice-speci" v-else-if="item.kind === 1205">
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">发票类型：</div>
-            <div class="pull-right normal-primary">专票</div>
+            <div class="invoice-controll clearfix">
+              <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
+              <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
+            </div>
           </div>
+          <!-- 专票 -->
+          <div :style="!hasnormal ? '': 'margin-top: 0.24rem'" class="invoice-normal invoice-speci" v-else-if="item.kind === 1205">
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">发票类型：</div>
+              <div class="pull-right normal-primary ">专票</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">开票抬头：</div>
-            <div class="pull-right">{{item.head}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">开票抬头：</div>
+              <div class="pull-right overhiden">{{item.head}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">单位地址：</div>
-            <div class="pull-right overhiden">{{item.companyAddress}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">单位地址：</div>
+              <div class="pull-right overhiden">{{item.companyAddress}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票电话：</div>
-            <div class="pull-right">{{item.companyPhone}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票电话：</div>
+              <div class="pull-right">{{item.companyPhone}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">税务登记号：</div>
-            <div class="pull-right">{{item.companyTaxNumber}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">税务登记号：</div>
+              <div class="pull-right overhiden">{{item.companyTaxNumber}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">开户银行：</div>
-            <div class="pull-right">{{item.bankName}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">开户银行：</div>
+              <div class="pull-right overhiden">{{item.bankName}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">开户银行账号：</div>
-            <div class="pull-right">{{item.bankAccount}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">开户银行账号：</div>
+              <div class="pull-right overhiden">{{item.bankAccount}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票人：</div>
-            <div class="pull-right">{{item.name}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票人：</div>
+              <div class="pull-right">{{item.name}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">联系电话：</div>
-            <div class="pull-right">{{item.telephone}}</div>
-          </div>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">联系电话：</div>
+              <div class="pull-right">{{item.telephone}}</div>
+            </div>
 
-          <div class="invoice-list clearfix">
-            <div class="invoice-list-title pull-left">收票地址：</div>
-            <div class="pull-right">
-              <p>{{item.area}}</p>
-              <p>{{item.detailAddress}}</p>
+            <div class="invoice-list clearfix">
+              <div class="invoice-list-title pull-left">收票地址：</div>
+              <div class="pull-right">
+                <p>{{item.area}}</p>
+                <p>{{item.detailAddress}}</p>
+              </div>
             </div>
-          </div>
 
-          <div class="invoice-controll clearfix">
-            <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
-            <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
+            <div class="invoice-controll clearfix">
+              <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
+              <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="com-none-state" v-if="invoiceList.length === 0">
-      <img src="/images/mobile/@2x/empty-collect.png">
-      <p>抱歉，暂无发票消息</p>
+      <div class="com-none-state" v-if="invoiceList.length === 0">
+        <img src="/images/mobile/@2x/empty-collect.png">
+        <p>抱歉，暂无发票消息</p>
+      </div>
     </div>
     <div class="deleteKuang" v-if="showDeleteAlert" @touchmove="preventTouchMove($event)">
       <div class="kuangContent">
         <div class="title">删除信息</div>
-        <div class="titleinfo">是否删除此订单</div>
+        <div class="titleinfo">是否删除此发票信息</div>
         <!--<div class="info" v-show="isUploadpro">*存在已上架信息</div>-->
         <div class="K_btn">
           <div class="cancelBtn" @click="showDeleteAlert = false">取消</div>
@@ -123,7 +134,7 @@
         </div>
       </div>
     </div>
-
+    <mobile-footer></mobile-footer>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
 
    <addinvoice
@@ -140,10 +151,11 @@
   import axios from '~plugins/axios'
   import { RemindBox } from '~components/mobile/common'
   import { addinvoice } from '~components/mobile/center'
+  import { MobileFooter } from '~components/mobile'
   export default {
     name: 'invoice-view',
-    layout: 'mobile',
     middleware: 'authenticated',
+    layout: 'mobile',
     data() {
       return {
         activeType: '',
@@ -187,22 +199,20 @@
       },
       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 => {
-            return item.kind === 1206
-          })
-          this.invoiceList = _arr
-          this.hasnormal = hasnormal
-        }
+        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
+        })
+        this.invoiceList = _arr
+        this.hasnormal = hasnormal
       },
       updateInvoice(item, index) {
         this.joinType = 'update'
@@ -230,7 +240,8 @@
     },
     components: {
       RemindBox,
-      addinvoice
+      addinvoice,
+      MobileFooter
     }
   }
 </script>
@@ -248,11 +259,62 @@
   }
   .invoice-wrapper {
     background: #f1f3f6;
-    margin: 1.26rem 0 0.98rem 0;
-    height: calc(100vh - 1.26rem - 0.98rem);
-    overflow-y: scroll;
+    /*margin: 1.26rem 0 0 0;*/
+    left: 0;
+    bottom: 0;
+    top: 0;
+    right: 0;
+    z-index: 11;
+    /*padding: 0.82rem 0 1.04rem;*/
+    /*height: calc(100vh - 1.26rem);*/
+    position: absolute;
+    width: 100%;
+    .invoice-wrapper-el {
+      margin: 2.08rem 0 0.98rem;
+      height: calc(100vh - 1.26rem - 0.98rem);
+      overflow-y: scroll;
+      padding-bottom: 0.98rem;
+    }
+    /*overflow-y: scroll;*/
+    .mobile-header{
+      position: fixed;
+      top: 0;
+      z-index: 10;
+      width:100%;
+      height: 1.26rem;
+      line-height: 1.26rem;
+      /*border-bottom:.01rem solid #ccc;*/
+      background: #3e82f5;
+      padding:0 .2rem 0 .1rem;
+      color:#fff;
+    }
+    .mobile-header p{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size:.36rem;
+      text-align: center;
+      width: 6rem;
+      padding-left: 1rem;
+    }
+    .mobile-center-header p.en-name {
+      font-size: .3rem;
+    }
+    .mobile-header a{
+      font-size:.28rem;
+      color:#fff;
+      position: absolute;
+    }
+    .mobile-header a i{
+      font-size: .48rem;
+      margin-right: -.1rem;
+    }
     .order-nav {
       background: #fff;
+      position: fixed;
+      top: 1.26rem;
+      width: 100%;
+      z-index: 10;
       div {
         height: 0.82rem;
         line-height: 0.82rem;

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

@@ -1,8 +1,8 @@
 <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>
+      <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">

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

@@ -1,68 +1,85 @@
 <template>
   <div class="invoice-wrapper">
+    <div class="mobile-nav">
+      <div class="mobile-header mobile-center-header">
+        <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
+        <p>发票管理</p>
+        <p class="en-name">
+          <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
+        </p>
+      </div>
+    </div>
     <div class="order-nav">
-      <nuxt-link to="/mobile/center/user/invoice" tag="div"><span>开票信息</span></nuxt-link>
-      <div class="active"><span>待开票信息</span></div>
+      <nuxt-link to="/mobile/center/user/invoice" tag="div"><span>发票信息</span></nuxt-link>
+      <div class="active"><span>待开票订单</span></div>
       <nuxt-link to="/mobile/center/user/invoice/invoiceRecord" tag=div><span>开票记录</span></nuxt-link>
     </div>
-    <div class="mobile-invoice">
-      <div class="mi-remind-area" :class="{less: !showMoreRemind}">
-        <p class="title">温馨提示</p>
-        <p class="content">
-          <span class="inline-block">1、</span>
-          <span class="inline-block">申请发票时默认将同一店铺的订单合并开一张发票，如需分开开票，请分别申请；</span>
-        </p>
-        <p class="content">
-          <span class="inline-block">2、</span>
-          <span class="inline-block">您只能对订单状态为<b>“交易完成”</b>，且已不能再发起售后的人民币交易订单进行补开发票；</span>
-        </p>
-        <p class="content">
-          <span class="inline-block">3、</span>
-          <span class="inline-block">发票金额为产品总金额且不含运费、积分、优惠卷、促销折扣等金额；</span>
-        </p>
-        <p class="content">
-          <span class="inline-block">4、</span>
-          <span class="inline-block">发票邮寄费用将由卖家承担。</span>
-        </p>
-        <p class="more" @click="showMoreRemind = !showMoreRemind">{{showMoreRemind ? '收起' : '查看更多'}}
-          <i v-show="showMoreRemind" class="iconfont icon-shangshuangjiantou"></i>
-          <i v-show="!showMoreRemind" class="iconfont icon-xiashuangjiantou"></i>
-        </p>
-      </div>
-      <div class="search-content mi-search-content">
-        <input type="text" placeholder="商家名称/订单号" v-model="keyword">
-        <span @click="searchMore()"><i class="iconfont icon-sousuo"></i></span>
-      </div>
-      <div class="mi-list-content">
-        <ul class="mi-list">
-          <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">
-                 </label>
-                商家名称：
-              </span>
-              <span class="inline-block content" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>
-            </div>
-            <div class="line">
-              <span class="inline-block title">
-                订单号：
-              </span>
-              <span class="inline-block content" @click.stop="lookOrderDetail(inv)">
-              {{inv.orderid}}
-              </span>
-            </div>
-            <div class="line">
-              <span class="inline-block title">
-                可开票金额(¥)：
-              </span>
-              <span class="inline-block content pri">{{inv.price}}</span>
-            </div>
-          </li>
-        </ul>
+    <div class="invoice-wrapper-el">
+      <div class="mobile-invoice">
+        <div class="mi-remind-area" :class="{less: !showMoreRemind}">
+          <p class="title">温馨提示</p>
+          <p class="content">
+            <span class="inline-block">1、</span>
+            <span class="inline-block">申请发票时默认将同一店铺的订单合并开一张发票，如需分开开票，请分别申请；</span>
+          </p>
+          <p class="content">
+            <span class="inline-block">2、</span>
+            <span class="inline-block">您只能对订单状态为<b>“交易完成”</b>，且已不能再发起售后的人民币交易订单进行补开发票；</span>
+          </p>
+          <p class="content">
+            <span class="inline-block">3、</span>
+            <span class="inline-block">发票金额为产品总金额且不含运费、积分、优惠卷、促销折扣等金额；</span>
+          </p>
+          <p class="content">
+            <span class="inline-block">4、</span>
+            <span class="inline-block">发票邮寄费用将由卖家承担。</span>
+          </p>
+          <p class="more" @click="showMoreRemind = !showMoreRemind">{{showMoreRemind ? '收起' : '查看更多'}}
+            <i v-show="showMoreRemind" class="iconfont icon-shangshuangjiantou"></i>
+            <i v-show="!showMoreRemind" class="iconfont icon-xiashuangjiantou"></i>
+          </p>
+        </div>
+        <div class="search-content mi-search-content">
+          <input type="text" placeholder="商家名称/订单号" v-model="keyword">
+          <span @click="searchMore()"><i class="iconfont icon-sousuo"></i></span>
+        </div>
+        <div class="mi-list-content">
+          <ul class="mi-list" v-if="invoiceList.length > 0">
+            <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">-->
+                   </label>
+                  商家名称：
+                </span>
+                <span class="inline-block content" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>
+              </div>
+              <div class="line">
+                <span class="inline-block title">
+                  订单号：
+                </span>
+                <span class="inline-block content" @click.stop="lookOrderDetail(inv)">
+                {{inv.orderid}}
+                </span>
+              </div>
+              <div class="line">
+                <span class="inline-block title">
+                  可开票金额：
+                </span>
+                <span class="inline-block content pri">¥{{inv.price}}</span>
+              </div>
+            </li>
+          </ul>
+          <div class="com-none-state" v-if="invoiceList.length === 0">
+            <img src="/images/mobile/@2x/empty-collect.png">
+            <p>抱歉，暂无发票消息</p>
+          </div>
+        </div>
       </div>
-      <div class="mi-fix-result">
+    </div>
+    <div class="mobile-invoice">
+      <div class="mi-fix-result" v-if="invoiceList.length > 0">
         <label class="bottom-modal-check mobile-cart-check" :class="{active: allChecked}">
           <input type="checkbox" @change="setActive()">
           <span>全选</span>
@@ -70,6 +87,7 @@
         <button @click="applyInvoice()">申请开票</button>
       </div>
     </div>
+    <mobile-footer></mobile-footer>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
 
     <addinvoice
@@ -194,6 +212,7 @@
   import { RemindBox, PullUp } from '~components/mobile/common'
   import { addinvoice } from '~components/mobile/center'
   import BScroll from 'better-scroll'
+  import { MobileFooter } from '~components/mobile'
   export default {
     name: 'invoice-view',
     layout: 'mobile',
@@ -419,7 +438,8 @@
     components: {
       RemindBox,
       addinvoice,
-      PullUp
+      PullUp,
+      MobileFooter
     }
   }
 </script>
@@ -437,15 +457,61 @@
   }
   .invoice-wrapper {
     background: #f1f3f6;
-    margin: 1.26rem 0 0 0;
-    padding: 0.82rem 0 2.04rem;
-    height: calc(100vh - 1.26rem);
-    overflow-y: scroll;
+    /*margin: 1.26rem 0 0 0;*/
+    left: 0;
+    bottom: 0;
+    top: 0;
+    right: 0;
+    z-index: 11;
+    /*padding: 0.82rem 0 1.04rem;*/
+    /*height: calc(100vh - 1.26rem);*/
+    position: absolute;
+    width: 100%;
+    .invoice-wrapper-el {
+      margin: 2.08rem 0 0.98rem;
+      height: calc(100vh - 1.26rem - 0.98rem - 1.06rem);
+      overflow-y: scroll;
+      padding-bottom: 0.98rem;
+    }
+    .mobile-header{
+      position: fixed;
+      top: 0;
+      z-index: 10;
+      width:100%;
+      height: 1.26rem;
+      line-height: 1.26rem;
+      /*border-bottom:.01rem solid #ccc;*/
+      background: #3e82f5;
+      padding:0 .2rem 0 .1rem;
+      color:#fff;
+    }
+    .mobile-header p{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size:.36rem;
+      text-align: center;
+      width: 6rem;
+      padding-left: 1rem;
+    }
+    .mobile-center-header p.en-name {
+      font-size: .3rem;
+    }
+    .mobile-header a{
+      font-size:.28rem;
+      color:#fff;
+      position: absolute;
+    }
+    .mobile-header a i{
+      font-size: .48rem;
+      margin-right: -.1rem;
+    }
     .order-nav {
       background: #fff;
       position: fixed;
       width: 100%;
       top: 1.26rem;
+      z-index: 10;
       div {
         height: 0.82rem;
         line-height: 0.82rem;
@@ -489,7 +555,7 @@
     .applyinvoice_Alert {
       background: #fff;
       position: fixed;
-      bottom: 0.98rem;
+      bottom: 0rem;
       left: 0;
       width: 100%;
       border-top-left-radius: 5px;
@@ -578,11 +644,11 @@
           @include lineHeight(0.5rem);
         }
         .pull-left {
-          max-width: 4rem;
+          width: 3.5rem;
           @include overFlowHidden()
         }
         .pull-right {
-          max-width: 3rem;
+          width: 3.4rem;
           @include overFlowHidden()
         }
       }

pages/mobile/order/details.vue

@@ -415,15 +415,16 @@
         <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
         <div class="mobile-modal-content">
           <div v-if="vendorType === 'buyer'">
-            <div v-if="checkInfo(cancatInfo.enterprise.enTel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.enterprise.enTel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enTel}}</a></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enPhone)" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + cancatInfo.enterprise.enPhone" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enPhone}}</a></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enWeixin)" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enWeixin}}</span></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enQQ)" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enQQ}}</span></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enTel)" class="clearfix"><span >电话：</span><a :href="'tel:' + cancatInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{cancatInfo.enterprise.enTel}}</a></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enPhone)" class="clearfix"><span >手机：</span><a :href="'tel:' + cancatInfo.enterprise.enPhone" target="_blank" class="content-line link-url">{{cancatInfo.enterprise.enPhone}}</a></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enWeixin)" class="clearfix"><span >微信：</span><span class="content-line">{{cancatInfo.enterprise.enWeixin}}</span></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enQQ)" class="clearfix"><span >Q&nbsp;Q：</span><span class="content-line">{{cancatInfo.enterprise.enQQ}}</span></div>
             <div v-if="!empty">暂无联系方式</div>
           </div>
           <div v-else>
-            <div class="clearfix"><span class="pull-left"></span>抱歉，暂时无法与买家在线沟通！</div>
-            <div v-if="checkInfo(cancatInfo.entel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.entel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.entel}}</a></div>
+            <div v-if="checkInfo(cancatInfo.entel)"><span>电话：</span><a :href="'tel:' + cancatInfo.entel" target="_blank" class="content-line link-url">{{cancatInfo.entel}}</a></div>
+            <div v-else><span></span>抱歉，暂时无法与买家在线沟通！</div>
+
           </div>
         </div>
       </div>
@@ -615,6 +616,12 @@
               this.cancatInfo = res.data
             })
           } else {
+            if (!this.orderList.buyerenuu) {
+              this.cancatInfo = {
+                entel: this.orderList.buyPhone
+              }
+              return
+            }
             this.$http.get(`/basic/enterprise/${this.orderList.buyerenuu}/tels`).then(res => {
               this.cancatInfo = res.data.data
             })

pages/mobile/order/index.vue

@@ -250,15 +250,15 @@
         <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
         <div class="mobile-modal-content">
           <div v-if="vendorType === 'buyer'">
-            <div v-if="checkInfo(cancatInfo.enterprise.enTel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.enterprise.enTel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enTel}}</a></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enPhone)" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + cancatInfo.enterprise.enPhone" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enPhone}}</a></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enWeixin)" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enWeixin}}</span></div>
-            <div v-if="checkInfo(cancatInfo.enterprise.enQQ)" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enQQ}}</span></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enTel)"><span>电话：</span><a :href="'tel:' + cancatInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{cancatInfo.enterprise.enTel}}</a></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enPhone)"><span >手机：</span><a :href="'tel:' + cancatInfo.enterprise.enPhone" target="_blank" class="content-line link-url">{{cancatInfo.enterprise.enPhone}}</a></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enWeixin)"><span >微信：</span><span class="content-line">{{cancatInfo.enterprise.enWeixin}}</span></div>
+            <div v-if="checkInfo(cancatInfo.enterprise.enQQ)"><span>Q&nbsp;Q：</span><span class="content-line">{{cancatInfo.enterprise.enQQ}}</span></div>
             <div v-if="!empty">暂无联系方式</div>
           </div>
           <div v-else>
-            <div class="clearfix"><span class="pull-left"></span>抱歉，暂时无法与买家在线沟通！</div>
-            <div v-if="checkInfo(cancatInfo.entel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.entel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.entel}}</a></div>
+            <div v-if="checkInfo(cancatInfo.entel)" ><span >电话：</span><a :href="'tel:' + cancatInfo.entel" target="_blank" class="content-line link-url">{{cancatInfo.entel}}</a></div>
+            <div v-else ><span ></span>抱歉，暂时无法与买家在线沟通！</div>
           </div>
         </div>
       </div>
@@ -396,6 +396,13 @@
             this.cancatInfo = res.data
           })
         } else {
+          if (!item.buyerenuu) {
+            this.cancatInfo = {
+              entel: item.buyPhone
+            }
+            console.log(this.cancatInfo)
+            return
+          }
           this.$http.get(`/basic/enterprise/${item.buyerenuu}/tels`).then(res => {
             this.cancatInfo = res.data.data
           })