文件页面交互优化

src/pages/order/document.vue

@@ -9,20 +9,25 @@
 					<!-- 合作商或品牌 -->
 					<view>{{items[key]}}</view>
 					<!-- 跳转到所有标签页面的更多按钮 -->
-					<view class="label-file-right" @click="handleMore(key)">
+					<view class="label-file-right" @click="handleMore(key)" v-if="item.length > 3">
 						<text class="label-right-text">更多</text>
 						<u-icon name="arrow-right"></u-icon>
 					</view>
 				</view>
-				<view class="label-content" v-if="item.length > 0">
+				<view class="label-content">
 					<view v-for="(label, ind) in item" :key="ind" class="label-item">
 						<!-- 选中为蓝底，非选中状态为灰底 -->
 						<view :class="['label-normal', {'selected': label.id == selected[key].id}]" @click="handleClick(key, label)">
 							<text class="label-text">{{label.name}}</text>
 						</view>
-					</view>
+					</view>
+					<!-- 标签加载中 -->
+					<view class="tag-loading-view" v-if="tapLoading[key]">
+						<u-loading mode="flower"></u-loading>
+					</view>
+					<!-- 无供应商、无品牌 -->
+					<view class="tag-tip-view" v-else-if="item.length <= 0">{{'暂无' + items[key]}}</view>
 				</view>
-				<view class="tag-tip-view" v-else>{{'暂无' + items[key]}}</view>
 			</view>
 		</template>
 		<view class="file-title">文件列表</view>
@@ -68,7 +73,11 @@
 					'1': {}, // 选中的合作商
 					'2': {} // 选中的品牌
 				},
-				loading: false, // 文件列表加载中
+				loading: false, // 文件列表加载中
+				tapLoading: { 
+					'1': true, // 合作商加载中
+					'2': true // 品牌加载中
+				},
 				orderFile: false, // 是否是订单详情进来
 				fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
 			};
@@ -141,7 +150,7 @@
 		methods: {
 			// 选中标签
 			handleClick(key, label) {
-				this.selected[key] = label
+				this.selected[key] = label
 				if (key == '1') { // 合作商
 					this.selected['2'] = {} // 清空选中品牌标签
 					this.list = [] // 清空文件列表
@@ -258,14 +267,16 @@
 				}
 			},
 			// 获取合作商或品牌列表
-			async loadFileLabel(type, partnerCompanyId) {
+			async loadFileLabel(type, partnerCompanyId) {
+				this.tapLoading[type] = true
 				let param = {
 					type: type, // 1:合作商标签，2：品牌标签
 				}
 				if (type == '2') {
 					param.partnerCompanyId = partnerCompanyId // 合作商的标签id
 				}
-				let res = await this.$u.api.fileLabel(param)
+				let res = await this.$u.api.fileLabel(param)
+				this.tapLoading[type] = false
 				if (res && res.code == 200) {
 					this.labels[type] = res.data || []
 					
@@ -378,13 +389,24 @@
 						}
 					}
 				}
+				.tag-loading-view {
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-top: 20rpx;
+					position: absolute;
+					padding-right: 30rpx;
+				}
+				.tag-tip-view {
+					color: #999999;
+					width: 100%;
+					margin-top: 30rpx;
+					text-align: center;
+					position: absolute;
+					padding-right: 30rpx;
+				}
 			}
-			.tag-tip-view {
-				color: #999999;
-				width: 100%;
-				margin-top: 30rpx;
-				text-align: center;
-			}
 		}
 	}