|
|
@@ -7,7 +7,7 @@
|
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
|
</view>
|
|
|
- <block v-else>
|
|
|
+ <view v-else class="bg-white">
|
|
|
<!-- 空数据 -->
|
|
|
<view v-if="result.length == 0" class="empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="啊偶,博主还没有朋友呢~"></tm-empty></view>
|
|
|
|
|
|
@@ -28,44 +28,49 @@
|
|
|
</view>
|
|
|
</tm-translate>
|
|
|
</block>
|
|
|
- <!-- 返回顶部 -->
|
|
|
- <tm-flotbutton @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>
|
|
|
</view>
|
|
|
|
|
|
<!-- 如果大于一个分组:使用联系人的索引形式 result.length > 1 -->
|
|
|
- <block v-else-if="result.length > 1">
|
|
|
- <tm-quickIndex :list="result">
|
|
|
- <template #cell="{ data }">
|
|
|
+ <block v-else>
|
|
|
+ <block v-for="(team, index) in result" :key="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.id">
|
|
|
<!-- 艳丽版本 -->
|
|
|
- <view v-if="!globalAppSettings.links.useSimple" class="info flex pa-36 border-b-1" @click="fnOnLinkEvent(data.item)">
|
|
|
- <view class="link-logo">
|
|
|
- <cache-image class="link-logo_img" radius="12rpx" :url="data.item.logo" :fileMd5="data.item.logo" mode="aspectFill"></cache-image>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ v-if="!globalAppSettings.links.useSimple"
|
|
|
+ class="info flex pa-36"
|
|
|
+ :class="{ 'border-b-1': linkIndex != team.children.length - 1 }"
|
|
|
+ @click="fnOnLinkEvent(link)"
|
|
|
+ >
|
|
|
+ <view class="link-logo"><cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.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">{{ data.item.name }}</view>
|
|
|
+ <view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
|
|
|
<view class="poup-tag ml--10 mt-6">
|
|
|
- <tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID:{{ data.item.id }}</tm-tags>
|
|
|
- <tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ data.item.team }}</tm-tags>
|
|
|
+ <tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID:{{ link.id }}</tm-tags>
|
|
|
+ <tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ link.team }}</tm-tags>
|
|
|
</view>
|
|
|
- <view class="link-card_desc text-overflow text-size-s mt-4">博客简介:{{ data.item.description || '这个博主很懒,没写简介~' }}</view>
|
|
|
+ <view class="link-card_desc text-overflow text-size-s mt-4">博客简介:{{ link.description || '这个博主很懒,没写简介~' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 简洁版本 -->
|
|
|
- <view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(data.item)">
|
|
|
- <image class="logo shadow-6" :src="data.item.logo" mode="aspectFill"></image>
|
|
|
+ <view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">
|
|
|
+ <image class="logo shadow-6" :src="link.logo" mode="aspectFill"></image>
|
|
|
<view class="info pl-24">
|
|
|
- <view class="name text-size-g">{{ data.item.name }}</view>
|
|
|
- <view class="desc mt-12 text-size-s text-grey-darken-1">{{ data.item.description }}</view>
|
|
|
+ <view class="name text-size-g">{{ link.name }}</view>
|
|
|
+ <view class="desc mt-12 text-size-s text-grey-darken-1">{{ link.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>
|
|
|
- {{ data.item.url }}
|
|
|
+ {{ link.url }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- </tm-quickIndex>
|
|
|
+ </block>
|
|
|
+ </block>
|
|
|
</block>
|
|
|
|
|
|
+ <!-- 返回顶部 -->
|
|
|
+ <tm-flotbutton v-if="linkTotal > 10" 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">
|
|
|
@@ -90,7 +95,7 @@
|
|
|
<view class="mt-24"><tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)" mode="aspectFill"></tm-images></view>
|
|
|
</view>
|
|
|
</tm-poup>
|
|
|
- </block>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -101,7 +106,6 @@ import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vu
|
|
|
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 tmQuickIndex from '@/tm-vuetify/components/tm-quickIndex/tm-quickIndex.vue';
|
|
|
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
|
|
|
|
|
import { GetRandomNumberByRange } from '@/utils/random.js';
|
|
|
@@ -114,7 +118,6 @@ export default {
|
|
|
tmTags,
|
|
|
tmEmpty,
|
|
|
tmImages,
|
|
|
- tmQuickIndex,
|
|
|
tmPoup
|
|
|
},
|
|
|
data() {
|
|
|
@@ -129,7 +132,8 @@ export default {
|
|
|
detail: {
|
|
|
show: false,
|
|
|
data: {}
|
|
|
- }
|
|
|
+ },
|
|
|
+ linkTotal: 0
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -158,6 +162,7 @@ export default {
|
|
|
return this.$haloConfig.colors[_r];
|
|
|
},
|
|
|
fnGetData() {
|
|
|
+ this.linkTotal = 0;
|
|
|
this.loading = 'loading';
|
|
|
uni.showLoading({
|
|
|
mask: true,
|
|
|
@@ -169,12 +174,12 @@ export default {
|
|
|
if (res.status == 200) {
|
|
|
console.log('请求结果:');
|
|
|
console.log(res);
|
|
|
- let resData = res.data;
|
|
|
// 处理数据
|
|
|
- const _result = resData.map(item => {
|
|
|
+ const _result = res.data.map(item => {
|
|
|
const _team = item.team || '未分组';
|
|
|
const _firstChart = _team ? _team.substring(0, 1) : '';
|
|
|
const _links = item.links.map(link => {
|
|
|
+ this.linkTotal += 1;
|
|
|
link.logo = this.$utils.checkAvatarUrl(link.logo);
|
|
|
return link;
|
|
|
});
|
|
|
@@ -266,7 +271,7 @@ export default {
|
|
|
// height: 126rpx;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
+ border-radius: 12rpx;
|
|
|
border: 6rpx solid #ffffff;
|
|
|
box-shadow: none;
|
|
|
}
|