加载 空

mallApp/src/components/app-wrapper-empty.vue

@@ -1,36 +1,15 @@
 <template>
-	<div class="app-empty" :style="{'height: 100%;': !!isEmpty }">
-		<div class="app-empty-center" :style="{'text-align: center;': !!isEmpty}">
-			<slot v-if="!isEmpty" name="empty_body" />
-			<slot v-if="isEmpty && !isLoading" name="empty_content">
-				<div class="app-empty__img" :style="{width: pictureWidth}">
-					<img :src="src" mode="widthFix" />
-				</div>
-				<div class="app-empty__title">
-					<template v-if="isTitle">
-						<span :class="[type==='noData'?'empty_noData':'']">{{ title }}</span>
-						<span>{{ content }}</span>
-					</template>
-					<slot v-else name="empty_title"></slot>
-				</div>
-			</slot>
-			<slot v-else>
-				<div>
-					<div class="foot-layout" v-if="finished">
-						<div class="foot-text">{{finishedText}}</div>
-					</div>
-					<div class="foot-layout" v-if="isLoading">
-						<div class="foot-text">
-							<div class="loading"></div>加载中
-						</div>
-					</div>
-				</div>
-			</slot>
-			<slot name="footer" />
+	<div class="app-empty">
+		<div class="app-empty-center">
+			<div class="app_empty_img">
+				<image :src="`${constant.hostUrl}/image/common/no_data_hua.png`" mode="widthFix"></image>
+			</div>
+			<div class="app-empty-title">
+				<span class="empty_noData">{{ title }}</span>
+			</div>
 		</div>
 	</div>
 </template>
-
 <script>
 export default {
 	name: 'AppWrapperEmpty',
@@ -39,29 +18,18 @@ export default {
 			type: String,
 			default: 'noData'
 		},
-
-		// 图片宽度
-		pictureWidth: {
-			type: String,
-			default: '200upx'
-		},
-
 		pictureHeight: {
 			type: String,
 			default: ''
 		},
-
 		title: {
 			type: String,
 			default: '暂无数据'
 		},
-
-		// 是否垂直居中
 		content: {
 			type: String,
 			default: ''
 		},
-
 		isEmpty: {
 			type: Boolean,
 			default: false
@@ -74,117 +42,53 @@ export default {
 			type: Boolean,
 			default: false
 		},
-		finishedText: {
-			type: String,
-			default: '没有更多了'
-		},
 		isTitle: {
 			type: Boolean,
 			default: true
 		}
 	},
 	computed: {
-		src() {
-			if (this.img) {
-				return this.img
-			} else if (this.type == 'search') {
-				return `${this.$constant.imgUrl}/retail/common/img_noorder.png`
-			} else {
-				return `${this.$constant.imgUrl}/retail/common/img_nodata.png`
-			}
-		}
 	},
 	data() {
 		return {}
 	}
 }
 </script>
-
 <style lang="scss" scoped>
-	.app-empty {
+.app-empty {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	& .app-empty-center {
 		width: 100%;
-		display: flex;
-		align-items: center;
-
-		& .app-empty-center {
-			width: 100%;
-			margin-bottom: 80upx;
-		}
-
-		& .app-empty__img {
-			width: 100%;
-			text-align: center;
-			margin: 116upx auto 50upx;
-			& image {
-				width: 160upx;
-				margin:0 auto;
-			}
-		}
-
-		& .app-empty__title {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			font-size: 32upx;
-			color: #666666;
-
-			& span {
-				font-weight: 400;
-
-				& + span {
-					font-weight: initial;
-					margin-top: 10upx;
-					font-size: 26upx;
-				}
-			}
-			& .empty_noData {
-				font-size: 26upx;
-			}
-		}
-	}
-	.foot-divider {
-		height: 1upx;
-		background-color: #dcdada;
-		width: 63upx;
-		margin: 0 22upx;
 	}
-
-	.foot-text {
-		font-size: 26upx;
-		color: #a1a1a1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+	& .app_empty_img {
+		width: 100%;
+		margin-top:100upx;
+		text-align: center;
+		& image {
+			margin:0 auto;
+			width:260upx;
+		}
 	}
-
-	.foot-layout {
+	& .app-empty-title {
 		display: flex;
-		flex-direction: row;
-		justify-content: center;
+		flex-direction: column;
 		align-items: center;
-		height: 115upx;
-	}
-
-	.loading {
-		display: inline-block;
-		margin-right: 12upx;
-		vertical-align: middle;
-		width: 14upx;
-		height: 14upx;
-		background: 0 0;
-		border-radius: 50%;
-		border: 2upx solid #e9eaec;
-		border-color: #e9eaec #e9eaec #e9eaec #f4a738;
-		animation: btn-spin 0.6s linear;
-		animation-iteration-count: infinite;
-	}
-
-	@keyframes btn-spin {
-		0% {
-			transform: rotate(0);
+		font-size: 32upx;
+		color: #cccccc;
+		margin-top:30upx;
+		& span {
+			font-weight: 400;
+			& + span {
+				font-weight: initial;
+				margin-top: 10upx;
+				font-size: 26upx;
+			}
 		}
-		100% {
-			transform: rotate(360deg);
+		& .empty_noData {
+			font-size: 26upx;
 		}
 	}
+}
 </style>

mallApp/src/pages/home/category.vue

@@ -57,7 +57,7 @@
       <block v-else>
         <app-wrapper-empty 
           :title="getEmptyTitle()" 
-          :is-empty="$util.isEmpty(list.data)" 
+          :is-empty="true" 
         />
       </block>
     </scroll-view>
@@ -83,7 +83,7 @@
         <block v-else>
           <app-wrapper-empty 
             :title="getEmptyTitle()" 
-            :is-empty="$util.isEmpty(list.data)" 
+            :is-empty="true" 
           />
         </block>
       </scroll-view>