布局

assets/scss/mobileCommon.scss

@@ -664,8 +664,8 @@ table.com-price-list {
       text-align: left;
       padding: 0 .2rem;
       font-size: .28rem;
-      height: .53rem;
-      line-height: .53rem;
+      height: .73rem;
+      line-height: .73rem;
       &:active, &:focus {
         background: $base-color;
         color: #fff;

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

@@ -313,6 +313,9 @@
     .order-nav {
       background: #fff;
       position: fixed;
+      -webkit-box-shadow: 0 1px 3px #ddd;
+      -moz-box-shadow: 0 1px 3px #ddd;
+      box-shadow: 0 1px 3px #ddd;
       top: 1.26rem;
       width: 100%;
       z-index: 10;

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

@@ -1,135 +1,137 @@
 <template>
-  <div class="mobile-invoice mobile-content mobile-content-long invoice-record" @click="showFilterInvoiceType = false">
+  <div class="mobile-invoice invoice-wrapper 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', null)" v-show="filterParams.invoicetype">全部</li>
-            <li @click.stop="setFilter('invoicetype', 1206)" v-show="filterParams.invoicetype != 1206">普票</li>
-            <li @click.stop="setFilter('invoicetype', 1205)" v-show="filterParams.invoicetype != 1205">专票</li>
-          </ul>
-        </div>
+    <div class="invoice-wrapper-el" id="invoice-wrapper-el">
+      <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>
-      <ul class="mi-list" v-if="invoiceList.length">
-        <li v-for="inv in invoiceList">
-          <div class="line">
+      <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', null)" v-show="filterParams.invoicetype">全部</li>
+              <li @click.stop="setFilter('invoicetype', 1206)" v-show="filterParams.invoicetype != 1206">普票</li>
+              <li @click.stop="setFilter('invoicetype', 1205)" v-show="filterParams.invoicetype != 1205">专票</li>
+            </ul>
+          </div>
+        </div>
+        <ul class="mi-list" v-if="invoiceList.length">
+          <li v-for="inv in invoiceList">
+            <div class="line">
             <span class="inline-block title">
               类型：
             </span>
-            <span class="inline-block content">
+              <span class="inline-block content">
               <i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>
             </span>
-          </div>
-          <div class="line">
+            </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 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 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">
+              <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">
+              <span class="inline-block content">
               <nuxt-link class="block link" :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">
+            </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 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>
-          <template v-if="inv.invoicetype == 1205">
-            <div class="line">
+              <span class="inline-block content">{{inv.invoicetitle}}</span>
+            </div>
+            <template v-if="inv.invoicetype == 1205">
+              <div class="line">
             <span class="inline-block title">
               单位地址：
             </span>
-              <span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>
-            </div>
-            <div class="line">
+                <span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>
+              </div>
+              <div class="line">
             <span class="inline-block title">
               单位电话：
             </span>
-              <span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>
-            </div>
-            <div class="line">
+                <span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>
+              </div>
+              <div class="line">
             <span class="inline-block title">
               税务登记号：
             </span>
-              <span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>
-            </div>
-            <div class="line">
+                <span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>
+              </div>
+              <div class="line">
             <span class="inline-block title">
               开户银行：
             </span>
-              <span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>
-            </div>
-            <div class="line">
+                <span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>
+              </div>
+              <div class="line">
             <span class="inline-block title">
               开户银行账户：
             </span>
-              <span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>
-            </div>
-          </template>
-          <div class="line">
+                <span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>
+              </div>
+            </template>
+            <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 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 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>
+              <span class="inline-block content">{{inv.invoiceAddress}}</span>
+            </div>
+          </li>
+        </ul>
+        <empty-status
+          :text="'暂无开票信息'"
+          :showLink="false"
+          v-else></empty-status>
+      </div>
     </div>
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
-    <pull-up :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
+    <pull-up :fixId="'invoice-wrapper-el'" :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
   </div>
 </template>
 <script>
@@ -246,6 +248,12 @@
   }
   .order-nav {
     background: #fff;
+    -webkit-box-shadow: 0 1px 3px #ddd;
+    -moz-box-shadow: 0 1px 3px #ddd;
+    box-shadow: 0 1px 3px #ddd;
+    position: fixed;
+    width: 100%;
+    top: 1.26rem;
     div {
       height: 0.82rem;
       line-height: 0.82rem;
@@ -261,4 +269,23 @@
       }
     }
   }
+  .invoice-wrapper {
+    background: #fff;
+    /*margin: 1.26rem 0 0 0;*/
+    left: 0;
+    bottom: .98rem;
+    top: 2.08rem;
+    right: 0;
+    z-index: 0;
+    /*padding: 0.82rem 0 1.04rem;*/
+    /*height: calc(100vh - 1.26rem);*/
+    position: absolute;
+    width: 100%;
+    .invoice-wrapper-el {
+      /*margin: 0 0 0.98rem;*/
+      height: calc(100vh - 1.26rem - 0.98rem);
+      overflow-y: scroll;
+      /*padding-bottom: 0.98rem;*/
+    }
+  }
 </style>

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

@@ -507,6 +507,9 @@
     }
     .order-nav {
       background: #fff;
+      -webkit-box-shadow: 0 1px 3px #ddd;
+      -moz-box-shadow: 0 1px 3px #ddd;
+      box-shadow: 0 1px 3px #ddd;
       position: fixed;
       width: 100%;
       top: 1.26rem;