修改发票管理页面排版

components/personalMaterial/PersonalMaterial.vue

@@ -185,6 +185,9 @@
   }
 </script>
 <style lang="scss" scoped>
+  .com-del-box {
+    z-index: 100;
+  }
   .personal-material {
     width: 1190px;
     margin: 0 auto;

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

@@ -12,112 +12,134 @@
     <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 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 overhiden">{{item.head}}</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 overhiden">{{item.telephone}}</div>
-            </div>
+      <ul class="invoice-middle mi-list" v-if="invoiceList.length > 0">
+        <li v-for="(item, index) in invoiceList">
+          <template v-if="item.kind === 1206">
+            <div class="mi-list-bottom clearfix">
+              <div class="list clearfix">
+                <div class="pull-left">发票抬头：</div>
+                <div class="pull-left overhidden" style="width: 1.85rem">{{item.head}}</div>
+              </div>
+              <div class="list clearfix">
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">收票人：</div>
+                  <div class="pull-left overhidden" style="width:2.1rem">{{item.name}}</div>
+                </div>
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">联系电话：</div>
+                  <div class="pull-left overhidden">{{item.telephone}}</div>
+                </div>
+              </div>
 
-            <div class="invoice-list clearfix">
-              <div class="invoice-list-title pull-left">收票地址：</div>
-              <div class="pull-right">
-                <p>{{item.area}}</p>
-                <p style="max-width: 4.4rem" class="overhiden">{{item.detailAddress}}</p>
+              <div class="list ">
+                <div class="clearfix">
+                  <div class="pull-left">收票地址：</div>
+                  <div class="pull-left" style="width: 5rem;">
+                    {{item.detailAddress}}
+                  </div>
+                </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="fixedImg">
+              <img src="/images/mobile/center/invoice-nor2.png"/>
             </div>
+          </template>
+          <template v-else>
+            <div :style="!hasnormal ? '': 'margin-top: 0.24rem'" class="invoice-speci">
+              <div class="mi-list-bottom clearfix">
+                <div class="list clearfix">
+                  <div class="pull-left">发票抬头：</div>
+                  <div class="pull-left overhidden" style="width: 1.85rem">{{item.head}}</div>
+                </div>
+                <div class="list" >
+                  <div class="clearfix">
+                    <div class="pull-left">单位电话：</div>
+                    <div class="pull-left overhidden" style="width: 4.6rem;">
+                      {{item.companyPhone || '-'}}
+                    </div>
+                  </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="list">
+                  <div class="clearfix">
+                    <div class="pull-left">单位地址：</div>
+                    <div class="pull-left overhidden" style="width: 4.6rem;">
+                      {{item.bcompanyAddress || '-'}}
+                    </div>
+                  </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="list">
+                  <div class="clearfix">
+                    <div class="pull-left">税务登记号：</div>
+                    <div class="pull-left overhidden" style="width: 4.8rem;">
+                      {{item.companyTaxNumber || '-'}}
+                    </div>
+                  </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 overhiden">{{item.companyTaxNumber}}</div>
-            </div>
+                <div class="list">
+                  <div class="clearfix">
+                    <div class="pull-left">开户银行名称：</div>
+                    <div class="pull-left overhidden" style="width: 4.6rem;">
+                      {{item.bankName || '-'}}
+                    </div>
+                  </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="list">
+                  <div class="clearfix">
+                    <div class="pull-left">开户银行账户：</div>
+                    <div class="pull-left overhidden" style="width: 4.6rem;">
+                      {{item.bankAccount || '-'}}
+                    </div>
+                  </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="list clearfix">
+                  <div class="clearfix pull-left w50">
+                    <div class="pull-left">收票人：</div>
+                    <div class="pull-left overhidden" style="width:2.1rem">{{item.name}}</div>
+                  </div>
+                  <div class="clearfix pull-left w50">
+                    <div class="pull-left">收票电话：</div>
+                    <div class="pull-left overhidden">{{item.telephone}}</div>
+                  </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">
-                <p>{{item.area}}</p>
-                <!--<p>{{item.detailAddress}}</p>-->
-                <p style="max-width: 4.4rem" class="overhiden">{{item.detailAddress}}</p>
+                <div class="list ">
+                  <div class="clearfix">
+                    <div class="pull-left">收票地址：</div>
+                    <div class="pull-left" style="width: 5rem;">
+                      {{item.detailAddress}}
+                    </div>
+                  </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 class="fixedImg">
+                <img src="/images/mobile/center/invoice-spec2.png"/>
               </div>
             </div>
+          </template>
+        </li>
+      </ul>
+      <!-- 专票 -->
 
-            <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 class="com-none-state" v-if="invoiceList.length === 0">
         <img src="/images/mobile/@2x/empty-collect.png">
         <p>抱歉，暂无发票消息</p>
       </div>
+      <div class="addVoice" v-if="invoiceList.length !== 2" @click="addInvoiceNew()">新增发票</div>
     </div>
     <div class="deleteKuang" v-if="showDeleteAlert" @touchmove="preventTouchMove($event)">
       <div class="kuangContent">
@@ -271,6 +293,7 @@
       margin: 1.26rem 0 0.98rem;
       height: calc(100vh - 1.26rem - 0.98rem);
       overflow-y: scroll;
+      position: relative;
     }
     /*overflow-y: scroll;*/
     .mobile-header{
@@ -410,6 +433,7 @@
         text-align: center;
         font-size: 0.26rem;
         @include lineHeight(0.8rem);
+        border-top: 1px solid #dcdcdc;
         div {
           width: 50%;
           &:nth-child(1) {
@@ -501,6 +525,61 @@
     .mi-remind-area {
       background: #fff;
     }
+    .addVoice {
+      position: absolute;
+      display: block;
+      margin: 0 auto;
+      width: 95%;
+      height: .78rem;
+      line-height: .78rem;
+      text-align: center;
+      font-size: .32rem;
+      color: #fff;
+      background: #3f84f6;
+      border-radius: .05rem;
+      left: 0;
+      right: 0;
+      bottom: 0.2rem
+    }
+    .mi-list {
+      li {
+        background: #fff;
+        border-radius: 0.05rem;
+        border: 1px solid #e3e5e8;
+        margin: 0 0.2rem 0.3rem;
+        padding: 0 0.24rem;
+        position: relative;
+        .fixedImg {
+          position: absolute;
+          right: 0;
+          top: 0;
+          img {
+            width: 0.82rem;
+            height: 0.82rem;
+          }
+        }
+        .mi-list-top {
+          @include lineHeight(0.55rem);
+          font-size: 0.28rem;
+          color: #333;
+          border-bottom: 1px solid #d3d3d3;
+        }
+        .mi-list-bottom {
+          font-size: 0.28rem;
+          color: #333;
+          padding: 0.2rem 0;
+          .list {
+            line-height: 0.55rem;
+          }
+          .overhidden {
+            @include overFlowHidden()
+          }
+          .w50 {
+            width: 50%;
+          }
+        }
+      }
+    }
   }
 </style>