|
|
@@ -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>
|
