查看更多

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css" />
   <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>-->
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_0aqseo0wttvu.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_2ne91qekhfk.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" />
   <!--<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>-->
   {{ HEAD }}

assets/scss/mobileInvoice.scss

@@ -1,13 +1,36 @@
+@import '~assets/scss/mixins';
 $blue-base: #3f84f6;
 .mobile-invoice {
   .switch-head {
     border-bottom: .28rem solid #f1f3f6;
   }
   .mi-remind-area {
-    padding: .24rem .29rem;
+    padding: .24rem .3rem;
     font-size: .28rem;
     color: #333;
     line-height: .42rem;
+    .more {
+      font-size: .24rem;
+      color: $blue-base;
+      text-align: center;
+      margin-top: .1rem;
+      i {
+        font-size: .22rem;
+      }
+    }
+    &.less {
+      height: 1.5rem;
+      overflow: hidden;
+      position: relative;
+      .more {
+        margin: 0;
+        position: absolute;
+        bottom: 0;
+        left: .3rem;
+        right: .3rem;
+        @include background-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 1));
+      }
+    }
     .content {
       word-break: break-all;
       color: #666;

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

@@ -6,7 +6,7 @@
       <nuxt-link to="/mobile/center/user/invoice/invoiceRecord" tag=div><span>开票记录</span></nuxt-link>
     </div>
     <div class="mobile-invoice">
-      <div class="mi-remind-area">
+      <div class="mi-remind-area" :class="{less: !showMoreRemind}">
         <p class="title">温馨提示</p>
         <p class="content">
           <span class="inline-block">1、</span>
@@ -24,6 +24,10 @@
           <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">
@@ -87,6 +91,11 @@
     name: 'invoice-view',
     layout: 'mobile',
     middleware: 'authenticated',
+    data () {
+      return {
+        showMoreRemind: false
+      }
+    },
     computed: {
       invoices () {
         return this.$store.state.invoice.data.Buyerinvoices

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

@@ -6,7 +6,7 @@
         <span class="com-switch-item inline-block" :class="{active: switchType == 'record'}" @click="setSwitchType('record')">开票记录</span>
       </div>
     </div>
-    <div class="mi-remind-area" v-if="switchType == 'apply'">
+    <div class="mi-remind-area" :class="{less: !showMoreRemind}" v-if="switchType == 'apply'">
       <p class="title">温馨提示</p>
       <p class="content">
         <span class="inline-block">1、</span>
@@ -20,6 +20,10 @@
         <span class="inline-block">3、</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" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="订单号/发票抬头/收票人/联系电话">
@@ -135,7 +139,8 @@
         },
         showFilterInvoiceType: false,
         operateIds: null,
-        switchType: 'apply'
+        switchType: 'apply',
+        showMoreRemind: false
       }
     },
     components: {