uni-halo/pagesA/friend-links/friend-links.vue

<template>
	<view class="app-page card-shadow">
		<view v-if="loading != 'success'" class="loading-wrap">
			<tm-skeleton model="listAvatr"></tm-skeleton>
			<tm-skeleton model="listAvatr"></tm-skeleton>
			<tm-skeleton model="listAvatr"></tm-skeleton>
			<tm-skeleton model="listAvatr"></tm-skeleton>
			<tm-skeleton model="listAvatr"></tm-skeleton>
		</view>
		<view v-else class="content" :class="{ 'bg-white': dataList.length !== 0 }">
			<!-- 空数据 -->
			<view v-if="dataList.length == 0" class="content-empty flex flex-center">
				<tm-empty icon="icon-shiliangzhinengduixiang-" label="啊偶,博主还没有朋友呢~"></tm-empty>
			</view>

			<!-- 如果只有一个分组：使用列表的形式 dataList.length == 1 -->
			<view v-else class="flex flex-col pb-24">
				<block v-for="(link, index) in dataList" :key="index">
					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
						<!-- 色彩版本 -->
						<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12"
							:class="{ 'border-b-1': index != dataList.length - 1 }" @click="fnCopyLink(link)">
							<view class="link-logo">
								<cache-image class="link-logo_img" radius="12rpx" :url="link.spec.logo"
									:fileMd5="link.spec.logo" mode="aspectFill"></cache-image>
							</view>
							<view class="flex flex-col pl-30 info-detail">
								<view class="link-card_name text-size-l text-weight-b text-red">
									<tm-tags style="margin-right: 12rpx;margin-left: -2rpx;" color="bg-gradient-light-blue-lighten"
										:shadow="0" size="s" model="fill">
										{{ link.spec.groupName || '暂未分组' }}
									</tm-tags>
									{{ link.spec.displayName }}
								</view>
								<view class="poup-tag mt-6" style="font-size: 28rpx;">
									站点地址：{{ link.spec.url }}
									<!-- <tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">
										URL：{{ link.spec.url }}
									</tm-tags>
									<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">
										{{ link.spec.groupName || '暂未分组' }}
									</tm-tags> -->
								</view>
								<view class="link-card_desc text-overflow mt-4" style="font-size: 28rpx;">
									博客简介：{{ link.spec.description || '这个博主很懒，没写简介~' }}
								</view>
							</view>
						</view>
						<!-- 简洁版本 -->
						<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnCopyLink(link)">
							<image class="logo shadow-6" :src="link.spec.logo" mode="aspectFill"></image>
							<view class="info pl-24">
								<view class="name text-size-g">{{ link.spec.displayName }}</view>
								<view class="desc mt-12 text-size-s text-grey-darken-1">{{ link.spec.description }}
								</view>
								<view v-if="false" class="link mt-12 text-size-m text-grey-darken-1">
									<text class="iconfont icon-link mr-6 text-size-s"></text>
									{{ link.spec.url }}
								</view>
							</view>
						</view>
					</tm-translate>
				</block>
			</view>

			<!-- 如果大于一个分组：使用联系人的索引形式 dataList.length > 1 -->
			<block v-if="false">
				<block v-for="(team, index) in dataList" :key="index">
					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
						<view class="grey-lighten-4 text  text-size-s text-weight-b px-32 py-12">{{ team.title }}</view>
						<block v-for="(link, linkIndex) in team.children" :key="link.metadata.name">
							<tm-translate animation-name="fadeUp" :wait="calcAniWait(linkIndex)">
								<!-- 色彩版本 -->
								<view v-if="!globalAppSettings.links.useSimple"
									class="info flex pt-24 pb-24 pl-12 pr-12" :class="{
										'border-b-1':
											linkIndex != team.children.length - 1 || index == dataList.length - 1
									}" @click="fnCopyLink(link)">
									<view class="link-logo">
										<cache-image class="link-logo_img" radius="12rpx" :url="link.spec.logo"
											:fileMd5="link.spec.logo" mode="aspectFill"></cache-image>
									</view>
									<view class="flex flex-col pl-30 info-detail">
										<view class="link-card_name text-size-l text-weight-b text-red">
											{{ link.spec.displayName }}
										</view>
										<view class="poup-tag ml--10 mt-6">
											<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">
												ID：{{ link.metadata.name }}
											</tm-tags>
											<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s"
												model="fill">
												{{ link.spec.groupName || '暂未分组' }}
											</tm-tags>
										</view>
										<view class="link-card_desc text-overflow text-size-s mt-4">
											博客简介：{{ link.spec.description || '这个博主很懒，没写简介~' }}
										</view>
									</view>
								</view>
								<!-- 简洁版本 -->
								<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnCopyLink(link)">
									<image class="logo shadow-6" :src="link.spec.logo" mode="aspectFill"></image>
									<view class="info pl-24">
										<view class="name text-size-g">{{ link.spec.displayName }}</view>
										<view class="desc mt-12 text-size-s text-grey-darken-1">
											{{ link.spec.description }}
										</view>
										<view v-if="false" class="link mt-12 text-size-m text-grey-darken-1">
											<text class="iconfont icon-link mr-6 text-size-s"></text>
											{{ link.spec.url }}
										</view>
									</view>
								</view>
							</tm-translate>
						</block>
					</tm-translate>
				</block>
			</block>

			<!-- 返回顶部 -->
			<tm-flotbutton color="light-blue" @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>

			<!-- 详情弹窗 -->
			<tm-poup v-model="detail.show" :width="640" height="auto" position="center" :round="6">
				<view class="poup pa-36">
					<view class="info flex">
						<view class="poup-logo bg-gradient-amber-accent pa-4 shadow-24">
							<image class="poup-logo_img" :src="detail.data.logo" mode="aspectFill"></image>
						</view>
						<view class="pl-24 info-detail">
							<view class="poup-name text-size-lg text-weight-b">{{ detail.data.name }}</view>
							<view class="poup-tag ml--10">
								<tm-tags color="bg-gradient-amber-accent" size="n" model="fill">
									ID：{{ detail.data.id }}
								</tm-tags>
								<tm-tags color="bg-gradient-light-blue-lighten" size="n" model="fill">
									{{ detail.data.team || '暂未分组' }}
								</tm-tags>
							</view>
							<view class="poup-link text-size-m" @click="fnCopyLink(detail.data)">
								<text class="text-orange">{{ detail.data.url }}</text>
								<text class="iconfont icon-copy text-size-s ml-6 text-grey"></text>
							</view>
						</view>
					</view>

					<view class="poup-desc mt-20">
						博客简介：{{ detail.data.description || '这个博主很懒，没写简介~' }}
					</view>

					<!-- 博客预览图 -->
					<view class="mt-24">
						<tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)"
							mode="aspectFill"></tm-images>
					</view>
				</view>
			</tm-poup>

			<view class="load-text">{{ loadMoreText }}</view>
		</view>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';

	import {
		GetRandomNumberByRange
	} from '@/utils/random.js';
	export default {
		components: {
			tmSkeleton,
			tmTranslate,
			tmFlotbutton,
			tmTags,
			tmEmpty,
			tmImages,
			tmPoup
		},
		data() {
			return {
				loading: 'loading',
				queryParams: {
					size: 10,
					page: 1
				},
				result: {},
				detail: {
					show: false,
					data: {}
				},
				isLoadMore: false,
				loadMoreText: '',
				dataList: [],
				cacheDataList: []
			};
		},
		computed: {
			caclSiteThumbnail(val) {
				return val => {
					if (!val) return '';
					if (val.charAt(val.length - 1) != '/') {
						val = val + '/';
					}
					return 'https://image.thum.io/get/width/1000/crop/800/' + val;
				};
			}
		},
		onLoad() {
			this.fnSetPageTitle('朋友圈');
			this.fnGetData();
		},
		onPullDownRefresh() {
			this.isLoadMore = false;
			this.queryParams.page = 1;
			this.dataList = []
			this.cacheDataList = []
			this.fnGetData();
		},
		onReachBottom(e) {
			if (this.result.hasNext) {
				this.queryParams.page += 1;
				this.isLoadMore = true;
				this.fnGetData();
			} else {
				uni.showToast({
					icon: 'none',
					title: '没有更多数据了'
				});
			}
		},
		methods: {
			fnRandomColor() {
				const _r = GetRandomNumberByRange(0, this.$haloConfig.colors.length - 1);
				return this.$haloConfig.colors[_r];
			},
			fnGetData() {
				if (!this.isLoadMore) {
					this.loading = 'loading';
				}
				this.loadMoreText = '';

				this.$httpApi.v2
					.getFriendLinkList(this.queryParams)
					.then(res => {
						console.log('请求结果：');
						console.log(res);
						this.result = res;
						const list = res.items.map(item => {
							item.spec.logo = this.$utils.checkAvatarUrl(item.spec.logo)
							return item;
						})
						this.dataList = this.dataList.concat(list);

						// this.cacheDataList = this.cacheDataList.concat(list);
						// this.dataList = this.handleGroup(this.cacheDataList).reverse();
						setTimeout(() => {
							this.loading = 'success';
							this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
						}, 500);

					})
					.catch(err => {
						console.error(err);
						this.loading = 'error';
						this.loadMoreText = '加载失败，请下拉刷新！';
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							uni.stopPullDownRefresh();
						}, 500);
					});
			},

			handleGroup(list) {
				const group = {}
				list.forEach(item => {
					if (group[item.spec.groupName]) {
						group[item.spec.groupName].children.push(item)
					} else {
						group[item.spec.groupName] = {
							title: item.spec.groupName,
							children: [item]
						}
					}
				})

				return Object.keys(group).map(key => {
					const {
						title,
						children = []
					} = group[key]
					return {
						title,
						children
					}
				})
			},
			fnOnLinkEvent(link) {
				this.detail.data = link;
				this.detail.show = true;
			},

			fnCopyLink(link) {
				uni.setClipboardData({
					data: `${link.name}:${link.url}`,
					showToast: false,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '链接复制成功！'
						});
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '复制失败！'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fafafd;
	}

	.loading-wrap {
		padding: 24rpx;
		min-height: 100vh;
	}

	.content {
		padding: 0 24rpx;
		padding-top: 24rpx;

		.content-empty {
			height: 60vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.link-card {
		border-bottom: 2rpx solid #f5f5f5;
		background-color: #ffffff;

		&.one {
			border: 0;
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);

			.logo {
				box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.1);
			}
		}

		.logo {
			// width: 126rpx;
			// height: 126rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 6rpx solid #ffffff;
			box-shadow: none;
		}

		.info {
			width: 0;
			flex-grow: 1;

			.name {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #303133;
				font-size: 30rpx;
				font-weight: bold;
			}

			.desc {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #303133;
				font-size: 28rpx;
			}
		}
	}

	.link-card_name {
		// color: #303133;
		// color: #0080fe;
	}

	.link-card_desc {
		font-size: 24rpx;
		line-height: 1.6;
		color: #303133;
	}

	.link-logo {
		width: 140rpx;
		height: 140rpx;

		&_img {
			width: 100%;
			height: 100%;
		}
	}

	.poup-logo {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;

		&_img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.info-detail {
		width: 0;
		flex-grow: 1;
		justify-content: center;
	}

	.poup-desc {
		font-size: 28rpx;
		line-height: 1.6;
		color: #555 !important;
	}

	.preview-site {
		width: 100%;
		height: 300rpx;
	}
</style>