添加无数据时的空数据提示

src/views/Bill/annualfee.vue

@@ -14,7 +14,7 @@
           <div class="title_money">{{data.waitPay}}</div>
         </div>
       </div>
-      <div class="box">
+      <div class="box" v-if="data.list.length > 0">
         <div class="list" v-for="(item,index) in data.list" :key="index">
           <div class="list_title">
             <div class="title">{{item.vipTerm|vipTermFilter}}</div>
@@ -26,6 +26,9 @@
           </p>
         </div>
       </div>
+      <div class="empty_data" v-else>
+        暂无{{title}}数据
+      </div>
     </div>
   </div>
 </template>
@@ -171,5 +174,10 @@ export default {
       }
     }
   }
+  .empty_data{
+    color:#c2c2c2;
+    margin:100px auto;
+    width: 120px;
+  }
 }
 </style>
\ No newline at end of file

src/views/Bill/sociallist.vue

@@ -7,29 +7,32 @@
       <div class="header">
         <div class="content_left">
           <div class="title_info">应付总额</div>
-          <div class="title_money">{{data.payment|moneyNum}}</div>
+          <div class="title_money">{{ data.payment | moneyNum }}</div>
         </div>
         <div class="content_right">
           <div class="title_info">待付金额</div>
-          <div class="title_money">{{data.waitPayment|moneyNum}}</div>
+          <div class="title_money">{{ data.waitPayment | moneyNum }}</div>
         </div>
       </div>
-      <div class="box">
-        <div class="list" v-for="(item,index) in data.list" :key="index">
+      <div class="box" v-if="data.list.length > 0">
+        <div class="list" v-for="(item, index) in data.list" :key="index">
           <div class="list_title" @click="toNextPage(index)">
-            <div class="title">{{item.groupName}}</div>
+            <div class="title">{{ item.groupName }}</div>
             <van-icon name="arrow" class="arrow_right" />
           </div>
           <p>
             <span>应付金额</span>
-            <i>{{item.payment|moneyNum}}</i>
+            <i>{{ item.payment | moneyNum }}</i>
           </p>
           <p>
             <span>待付金额</span>
-            <i>{{item.waitPayment|moneyNum}}</i>
+            <i>{{ item.waitPayment | moneyNum }}</i>
           </p>
         </div>
       </div>
+      <div class="empty_data" v-else>
+        暂无{{title}}数据
+      </div>
     </div>
   </div>
 </template>
@@ -43,7 +46,7 @@ import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
   },
   mixins: [setBarHeight],
   data() {
@@ -54,12 +57,12 @@ export default {
       data: {
         payment: 0,
         waitPayment: 0,
-        list: [{ groupName: "", payment: 0, waitPayment: 0, list: [] }]
-      }
+        list: [{ groupName: "", payment: 0, waitPayment: 0, list: [] }],
+      },
     };
   },
   computed: {
-    ...mapGetters(["getBeginDate"])
+    ...mapGetters(["getBeginDate"]),
   },
   methods: {
     ...mapActions(["loadReceiptDetail"]),
@@ -67,24 +70,24 @@ export default {
       if (this.type != "service") {
         this.$router.push({
           name: "socialdetail",
-          query: { index }
+          query: { index },
         });
       } else {
         this.$router.push({
           name: "servicefee_detail",
-          query: { index }
+          query: { index },
         });
       }
     },
     getData() {
       this.loadReceiptDetail({
         accountId: this.currentPerId,
-        type: this.type
+        type: this.type,
       }).then(
-        data => {
+        (data) => {
           this.data = data;
         },
-        err => {
+        (err) => {
           console.log(err);
         }
       );
@@ -116,7 +119,7 @@ export default {
     },
     navLeftArrowClick() {
       this.$router.go(-1);
-    }
+    },
   },
   mounted() {
     this.setPageNavState();
@@ -125,7 +128,7 @@ export default {
     this.currentPerId = this.$route.query.currentPerId;
     this.makeTitle();
     this.getData();
-  }
+  },
 };
 </script>
 
@@ -198,5 +201,10 @@ export default {
       }
     }
   }
+  .empty_data{
+    color:#c2c2c2;
+    margin:100px auto;
+    width: 120px;
+  }
 }
 </style>
\ No newline at end of file

src/views/Other/index.vue

@@ -14,7 +14,7 @@
           <div class="title_money">{{data.waitPay|moneyNum}}</div>
         </div>
       </div>
-      <div class="box">
+      <div class="box" v-if="data.list.length > 0">
         <div class="list" v-for="(item,index) in data.list" :key="index">
           <div class="list_title" @click="toPage(index)">
             <div class="title">{{item.productName}}</div>
@@ -30,6 +30,9 @@
           </p>
         </div>
       </div>
+      <div class="empty_data" v-else>
+        暂无{{title}}数据
+      </div>
     </div>
   </div>
 </template>
@@ -190,5 +193,10 @@ export default {
       }
     }
   }
+  .empty_data{
+    color:#c2c2c2;
+    margin:100px auto;
+    width: 120px;
+  }
 }
 </style>
\ No newline at end of file