骨架图和无数据

src/components/common/BookAllListModule.vue

@@ -30,6 +30,10 @@
           />
         </div>
       </div>
+      <div class="nodata" v-if="Bookinfo.BookList.length===0">
+        <img src="../../assets/nodata.png" />
+        <p>找不到文件</p>
+      </div>
       <!-- <div class="listlive">
         <div
           v-for="(item,index) in Bookinfo.BookList"
@@ -198,4 +202,17 @@ export default {
     }
   }
 }
+.nodata{
+    text-align: center;
+    img{
+        width: 329px;
+    }
+    p{
+        color: #A8A8A8;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        margin: 30px 0;
+    }
+}
 </style>

src/components/common/BookCard.vue

@@ -1,35 +1,50 @@
 <template>
-  <div class="BookCard" @click="handleLink">
-    <!-- <div
-      class="image"
-      :style="{height:height?height:'280px'}"
-    ></div> -->
-    <el-image
-        class="image"
-        :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
-        :fit="'contain'">
-    </el-image>
-    <div class="bottom">
-      <p class="name">{{item.name}}</p>
-      <!-- <template>
-        <el-rate
-          v-model="item.score"
-          disabled
-          show-score
-          :colors="colors"
-          :score-template="score"
-        >
-        </el-rate>
-      </template> -->
-      <p class="author">{{item.shelve_date||item.typeName||item.classperiod||item.author}}</p>
-      <template v-if="!type||type!='bookShelf'">
-        <p class="price">
-          <span class="OPPOSans">￥{{item.price_discount|cutMoneyFiter}}</span>
-          <s>￥{{item.price|cutMoneyFiter}}</s>
-        </p>
-      </template>
+    <div>
+        <el-skeleton style="width: 240px" :loading="true" animated v-if="item.skeleton">
+            <template slot="template">
+                <el-skeleton-item
+                    variant="image"
+                    style="width: 200px; height: 280px;"
+                />
+                <div style="padding: 12px;width: 200px;">
+                    <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
+                    <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 16px; width:50%;" />
+                    <el-skeleton-item variant="text" style="height: 21px; width:70%;" />
+                </div>
+            </template>
+        </el-skeleton>
+        <div class="BookCard" @click="handleLink" v-else>
+            <!-- <div
+            class="image"
+            :style="{height:height?height:'280px'}"
+            ></div> -->
+            <el-image
+                class="image"
+                :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
+                :fit="'contain'">
+            </el-image>
+            <div class="bottom">
+            <p class="name">{{item.name}}</p>
+            <!-- <template>
+                <el-rate
+                v-model="item.score"
+                disabled
+                show-score
+                :colors="colors"
+                :score-template="score"
+                >
+                </el-rate>
+            </template> -->
+            <p class="author">{{item.shelve_date||item.typeName||item.classperiod||item.author}}</p>
+            <template v-if="!type||type!='bookShelf'">
+                <p class="price">
+                <span class="OPPOSans">￥{{item.price_discount|cutMoneyFiter}}</span>
+                <s>￥{{item.price|cutMoneyFiter}}</s>
+                </p>
+            </template>
+            </div>
+        </div> 
     </div>
-  </div>
 </template>
 
 <script>

src/views/bookStore/all.vue

@@ -130,7 +130,38 @@ export default {
     //这里存放数据
     return {
       Bookinfo:{
-        BookList: [],
+        BookList: [
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            }
+        ],
         name: '',
         number: 0,
         numberstr: '',
@@ -182,7 +213,7 @@ export default {
       currentPage: 1, // 当前页码
       page_capacity: 10, // 每页条数
       searchValue: '',
-      titleName:''
+      titleName:window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):''
     }
   },
   //计算属性 类似于data概念

src/views/bookStore/index.vue

@@ -221,8 +221,40 @@ export default {
         score: 3,
       }
       ],
-      LBCourseList:[], // 录播课列表
-      IssueList: [], // 报纸列表
+      LBCourseList:[
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        }
+      ], // 录播课列表
+      IssueList: [
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        }
+      ], // 报纸列表
       bannerFlag: true // 是否展示广告
     }
   },