|
|
@@ -1,461 +1,461 @@
|
|
|
<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="{
|
|
|
+ <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-flotbutton :offset="[16,80]" label="申请" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @click="toSubmitLinkPage"></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>
|
|
|
+ <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-flotbutton v-if="$haloPluginsConfig.autoSubmitLink.enabled" :offset="[16,80]" label="申请" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent"
|
|
|
+ @click="toSubmitLinkPage"></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
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false,
|
|
|
- data: {}
|
|
|
- },
|
|
|
- hasNext:false,
|
|
|
- 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.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.hasNext = res.hasNext;
|
|
|
- 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: '复制失败！'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- toSubmitLinkPage() {
|
|
|
- this.$Router.push({
|
|
|
- path: '/pagesA/submit-link/submit-link'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+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
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ hasNext: false,
|
|
|
+ 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.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.hasNext = res.hasNext;
|
|
|
+ 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: '复制失败！'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toSubmitLinkPage() {
|
|
|
+ this.$Router.push({
|
|
|
+ path: '/pagesA/submit-link/submit-link'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</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>
|
|
|
+.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>
|
小莫唐尼