GithubProxy/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2025-05-19 18:10:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

update: 优化友链提交配置

Browse Source
This commit is contained in:
小莫唐尼 2024-06-02 19:38:27 +08:00
parent 19c4e12a5b
commit 620354b77a
6 changed files with 718 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -7,3 +7,4 @@ config/halo.config.js
config/ad.config.js
config/love.config.js
config/token.config.js
config/plugins.config.js

24
config/plugins.config.js Normal file
View File

@ -0,0 +1,24 @@
/** 插件相关配置 */
const PluginsConfig = Object.freeze({
// 友链提交配置
autoSubmitLink: {
// 可以考虑配置一个插件id，检测是否开启了友链提交插件
pluginId:"",
// 是否开启（可能不启用插件）
enabled: false,
// 我的友链信息
blogDetail: {
// 博客名称
name: "uni-halo 博客",
// 博客地址
url: "https://uni-halo.925i.cn/",
// 博客logo
logo: "https://uni-halo.925i.cn/logo.png",
// 博客简介
description: "一个基于Halo2.0 API 的博客小程序开源项目。",
}
}
})
export default PluginsConfig;

24
config/plugins.config.template.js Normal file
View File

@ -0,0 +1,24 @@
/** 插件相关配置 */
const PluginsConfig = Object.freeze({
// 友链提交配置
autoSubmitLink: {
// 可以考虑配置一个插件id，检测是否开启了友链提交插件（暂未使用）
pluginId: "",
// 是否开启（可能后台没有安装或未不启用插件）
enabled: true,
// 我的友链信息
blogDetail: {
// 博客名称
name: "",
// 博客地址
url: "",
// 博客logo
logo: "",
// 博客简介
description: "",
}
}
})
export default PluginsConfig;

5
main.js
View File

@ -69,6 +69,11 @@ Vue.prototype.$baseApiUrl = HaloTokenConfig.BASE_API
import HaloAdConfig from '@/config/ad.config.js'
Vue.prototype.$haloAdConfig = HaloAdConfig
import HaloPluginsConfig from '@/config/plugins.config.js'
Vue.prototype.$haloPluginsConfig = HaloPluginsConfig
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
Vue.prototype._i18n = i18n;

836
pagesA/friend-links/friend-links.vue
View File

@ -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>
<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 -->
<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="{
<!-- 如果大于一个分组：使用联系人的索引形式 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>
<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-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>
<!-- 详情弹窗 -->
<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="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="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="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 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);
import {GetRandomNumberByRange} from '@/utils/random.js';
// this.cacheDataList = this.cacheDataList.concat(list);
// this.dataList = this.handleGroup(this.cacheDataList).reverse();
setTimeout(() => {
this.loading = 'success';
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
}, 500);
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 = '';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
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);
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]
}
}
})
// this.cacheDataList = this.cacheDataList.concat(list);
// this.dataList = this.handleGroup(this.cacheDataList).reverse();
setTimeout(() => {
this.loading = 'success';
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
}, 500);
return Object.keys(group).map(key => {
const {
title,
children = []
} = group[key]
return {
title,
children
}
})
},
fnOnLinkEvent(link) {
this.detail.data = link;
this.detail.show = true;
},
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
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'
});
}
}
};
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;
}
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #fafafd;
}
.loading-wrap {
padding: 24rpx;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
min-height: 100vh;
}
.content {
padding: 0 24rpx;
padding-top: 24rpx;
.content {
padding: 0 24rpx;
padding-top: 24rpx;
.content-empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
}
.content-empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
}
.link-card {
border-bottom: 2rpx solid #f5f5f5;
background-color: #ffffff;
.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);
&.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 {
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;
}
.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;
.info {
width: 0;
flex-grow: 1;
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #303133;
font-size: 30rpx;
font-weight: bold;
}
.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;
}
}
}
.desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #303133;
font-size: 28rpx;
}
}
}
.link-card_name {
// color: #303133;
// color: #0080fe;
}
.link-card_name {
// color: #303133;
// color: #0080fe;
}
.link-card_desc {
font-size: 24rpx;
line-height: 1.6;
color: #303133;
}
.link-card_desc {
font-size: 24rpx;
line-height: 1.6;
color: #303133;
}
.link-logo {
width: 140rpx;
height: 140rpx;
.link-logo {
width: 140rpx;
height: 140rpx;
&_img {
width: 100%;
height: 100%;
}
}
&_img {
width: 100%;
height: 100%;
}
}
.poup-logo {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
.poup-logo {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
&_img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
&_img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.info-detail {
width: 0;
flex-grow: 1;
justify-content: center;
}
.info-detail {
width: 0;
flex-grow: 1;
justify-content: center;
}
.poup-desc {
font-size: 28rpx;
line-height: 1.6;
color: #555 !important;
}
.poup-desc {
font-size: 28rpx;
line-height: 1.6;
color: #555 !important;
}
.preview-site {
width: 100%;
height: 300rpx;
}
.preview-site {
width: 100%;
height: 300rpx;
}
</style>

477
pagesA/submit-link/submit-link.vue
View File

@ -1,252 +1,263 @@
<template>
<tm-fullView>
<view class="ma-32"><tm-coupon :hdata="d_3" color="blue" @click="blogDetailPoupShow=true"></tm-coupon></view>
<view class="pb-50">
<tm-form @submit="fnOnSubmit">
<tm-sheet color="blue" :shadow="24">
<view class="text-size-s text-weight-b mb-24">友链信息提交</view>
<tm-sheet :margin="[0,0]" :padding="[0,0]" classname="overflow" :shadow="24">
<tm-input name="displayName" required title="名称" v-model="form.displayName" placeholder="请输入网站名称" align="right"></tm-input>
<tm-input name="url" required title="网址" v-model="form.url" placeholder="请输入网站地址" align="right"></tm-input>
<tm-input name="logo" required title="Logo" v-model="form.logo" placeholder="请输入网站Logo" align="right"></tm-input>
<tm-input name="email" required title="邮箱" v-model="form.email" placeholder="请输入邮箱" align="right"></tm-input>
<tm-input name="linkPageUrl" title="友链页面" v-model="form.linkPageUrl" placeholder="请输入友链页面地址" align="right"></tm-input>
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
<text class="text-grey text-size-xs px-10">
<tm-helpTips color="bg-gradient-blue-lighten-b"
:show="true" direction="bottom" tip-direction="left"
label="展示本站链接的页面地址，用于校验是否添加本站友链" ment-direction="left">
<tm-icons :fllowTheme="true" name="icon-question-circle"></tm-icons>
</tm-helpTips>
（贵站友情链接页面地址，即包含本站链接也页面）
</text>
</view>
<tm-input name="rssUrl" title="RSS地址" v-model="form.rssUrl" placeholder="请输入RSS地址" align="right"></tm-input>
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
<text class="text-grey text-size-xs px-10">
<tm-helpTips color="bg-gradient-blue-lighten-b"
:show="true" direction="bottom" tip-direction="left"
label="用于抓取文章" ment-direction="left">
<tm-icons :fllowTheme="true" name="icon-question-circle"></tm-icons>
</tm-helpTips>
（用于抓取文章）
</text>
</view>
<tm-input name="description" :border-bottom="false" :vertical="true" required :height="100"
input-type="textarea" bg-color="grey-lighten-5" :maxlength="30" title="网站描述"
placeholder="请输入网站描述,不超过30字符" v-model="form.description"></tm-input>
<view class="px-24">
<tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>提交数据</tm-button>
<view class="py-32 text-size-s text-grey text-align-center">友链申请</view>
</view>
</tm-sheet>
</tm-sheet>
</tm-form>
<tm-fullView>
<view class="ma-32">
<tm-coupon :hdata="calcBlogCoupon" color="blue" @click="blogDetailPoupShow=true"></tm-coupon>
</view>
<view class="pb-50">
<tm-form @submit="fnOnSubmit">
<tm-sheet :shadow="24" color="blue">
<view class="text-size-s text-weight-b mb-24">友链信息提交</view>
<tm-sheet :margin="[0,0]" :padding="[0,0]" :shadow="24" classname="overflow">
<tm-input v-model="form.displayName" align="right" name="displayName" placeholder="请输入网站名称"
required title="名称"></tm-input>
<tm-input v-model="form.url" align="right" name="url" placeholder="请输入网站地址" required
title="网址"></tm-input>
<tm-input v-model="form.logo" align="right" name="logo" placeholder="请输入网站Logo" required
title="Logo"></tm-input>
<tm-input v-model="form.email" align="right" name="email" placeholder="请输入邮箱" required
title="邮箱"></tm-input>
<tm-input v-model="form.linkPageUrl" align="right" name="linkPageUrl" placeholder="请输入友链页面地址"
title="友链页面"></tm-input>
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
<text class="text-grey text-size-xs px-10">
<tm-helpTips :show="true" color="bg-gradient-blue-lighten-b" direction="bottom"
label="展示本站链接的页面地址，用于校验是否添加本站友链" ment-direction="left" tip-direction="left">
<tm-icons :fllowTheme="true" name="icon-question-circle"></tm-icons>
</tm-helpTips>
（贵站友情链接页面地址，即包含本站链接也页面）
</text>
</view>
<tm-input v-model="form.rssUrl" align="right" name="rssUrl" placeholder="请输入RSS地址"
title="RSS地址"></tm-input>
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
<text class="text-grey text-size-xs px-10">
<tm-helpTips :show="true" color="bg-gradient-blue-lighten-b" direction="bottom"
label="用于抓取文章" ment-direction="left" tip-direction="left">
<tm-icons :fllowTheme="true" name="icon-question-circle"></tm-icons>
</tm-helpTips>
（用于抓取文章）
</text>
</view>
<tm-input v-model="form.description" :border-bottom="false" :height="100" :maxlength="30"
:vertical="true" bg-color="grey-lighten-5" input-type="textarea" name="description"
placeholder="请输入网站描述,不超过30字符" required title="网站描述"></tm-input>
<view class="px-24">
<tm-button block navtie-type="form" theme="bg-gradient-blue-accent">提交数据</tm-button>
<view class="py-32 text-size-s text-grey text-align-center">友链申请</view>
</view>
</tm-sheet>
</tm-sheet>
</tm-form>
<tm-poup v-model="blogDetailPoupShow" :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="blogDetail.logo" mode="aspectFill"></image>
</view>
<view class="pl-24 info-detail">
<view class="poup-name text-size-lg text-weight-b">{{ blogDetail.name }}</view>
<view class="poup-tag ml--10">
<tm-tags color="bg-gradient-amber-accent" size="n"
model="fill">{{ blogDetail.description }}</tm-tags>
</view>
<view class="poup-link text-size-m" @click="fnCopyLink(blogDetail.url)">
<text class="text-orange">点击复制友链交换信息</text>
<text class="iconfont icon-copy text-size-s ml-6 text-grey"></text>
</view>
</view>
</view>
<tm-poup v-model="blogDetailPoupShow" :round="6" :width="640" height="auto" position="center">
<view class="poup pa-36" scroll-y="auto">
<view class="info flex">
<view class="poup-logo pa-4 shadow-24">
<image :src="blogDetail.logo" class="poup-logo_img" mode="aspectFill"></image>
</view>
<view class="pl-24 info-detail">
<view class="poup-name text-size-lg text-weight-b">{{ blogDetail.name }}</view>
<view class="poup-tag ml--10 text-size-n mt-10 text-grey">
{{ blogDetail.description }}
</view>
</view>
</view>
<view class="poup-desc mt-20">
<text>{{ blogDetail.content}}</text>
</view>
<!-- 博客预览图 -->
<view class="mt-24"><tm-images :width="568" :round="2" :src="caclSiteThumbnail(blogDetail.url)"
mode="aspectFill"></tm-images></view>
</view>
</tm-poup>
</view>
</tm-fullView>
<view class="poup-desc">
<text>{{ calcBlogContent }}</text>
</view>
<!-- 博客预览图 -->
<view class="mt-24">
<tm-images :round="2" :src="caclSiteThumbnail(blogDetail.url)" :width="568"
mode="aspectFill"></tm-images>
</view>
</view>
<view class="poup-link flex flex-center mb-24">
<tm-button theme="light-blue" size="n" @click="fnCopyLink(blogDetail.url)">复制友链交换信息</tm-button>
<tm-button text theme="white" @click="blogDetailPoupShow = false">关闭</tm-button>
</view>
</tm-poup>
</view>
</tm-fullView>
</template>
<script>
import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
import tmForm from "@/tm-vuetify/components/tm-form/tm-form.vue"
import tmActionSheet from "@/tm-vuetify/components/tm-actionSheet/tm-actionSheet.vue"
import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
import tmHelpTips from "@/tm-vuetify/components/tm-helpTips/tm-helpTips.vue"
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue'
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue'
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue'
import tmCoupon from '@/tm-vuetify/components/tm-coupon/tm-coupon.vue'
export default {
components: {
tmFullView,
tmSheet,
tmMenubars,
tmForm,
tmActionSheet,
tmButton,
tmInput,
tmHelpTips,
tmIcons,
tmPoup,
tmImages,
tmTags,
tmCoupon
},
data() {
return {
blogDetailPoupShow: false,
blogDetail: {
name: "柳意梧情博客",
url: "https://lywq.muyin.site",
logo: "https://lywq.muyin.site/logo.png",
description: "心在哪里收获就在哪里",
content: "博客名称：柳意梧情博客 \n博客地址：https://lywq.muyin.site \n博客logo：https://lywq.muyin.site/logo \n博客简介：柳意梧情博客-心在哪里收获就在哪里"
},
form: {
url: '', // 网址
name: '', // 名称
logo: '', // Logo
linkPageUrl: '', // 友链页面
team: '自助提交', // 分组
description: '' // 描述
},
d_3: {
img: 'https://lywq.muyin.site/logo.png',
title: '柳意梧情博客',
time: '心在哪里收获就在哪里',
btnText: '友链详情'
}
};
},
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;
};
}
import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
import tmForm from "@/tm-vuetify/components/tm-form/tm-form.vue"
import tmActionSheet from "@/tm-vuetify/components/tm-actionSheet/tm-actionSheet.vue"
import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
import tmHelpTips from "@/tm-vuetify/components/tm-helpTips/tm-helpTips.vue"
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue'
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue'
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue'
import tmCoupon from '@/tm-vuetify/components/tm-coupon/tm-coupon.vue'
},
onLoad() {
this.fnSetPageTitle('友链申请');
},
methods: {
fnOnSubmit(e) {
if (e === false) {
return uni.$tm.toast('请检查所有的必填项是否填写完整！');
}
if (this.form.url && !uni.$tm.test.url(this.form.url)) {
return uni.$tm.toast('请输入正确的网站地址！');
}
if (this.form.logo && !uni.$tm.test.url(this.form.logo)) {
return uni.$tm.toast('请输入正确的Logo地址！');
export default {
components: {
tmFullView,
tmSheet,
tmMenubars,
tmForm,
tmActionSheet,
tmButton,
tmInput,
tmHelpTips,
tmIcons,
tmPoup,
tmImages,
tmTags,
tmCoupon
},
data() {
return {
blogDetailPoupShow: false,
blogDetail: this.$haloPluginsConfig.autoSubmitLink.blogDetail,
form: {
url: '', // 网址
name: '', // 名称
logo: '', // Logo
linkPageUrl: '', // 友链页面
team: '自助提交', // 分组
description: '' // 描述
}
};
},
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;
};
},
calcBlogContent() {
return `
博客名称：${this.blogDetail.name}
博客地址：${this.blogDetail.url}
博客logo：${this.blogDetail.logo}
博客简介：${this.blogDetail.description}
`
},
calcBlogCoupon() {
return {
img: this.blogDetail.logo,
title: this.blogDetail.name,
time: this.blogDetail.description,
btnText: '友链详情'
}
}
if (this.form.email && !uni.$tm.test.email(this.form.email)) {
return uni.$tm.toast('请输入正确的邮箱地址！');
},
onLoad() {
this.fnSetPageTitle('友链申请');
},
methods: {
fnOnSubmit(e) {
if (e === false) {
return uni.$tm.toast('请检查所有的必填项是否填写完整！');
}
if (this.form.url && !uni.$tm.test.url(this.form.url)) {
return uni.$tm.toast('请输入正确的网站地址！');
}
if (this.form.logo && !uni.$tm.test.url(this.form.logo)) {
return uni.$tm.toast('请输入正确的Logo地址！');
}
if (this.form.email && !uni.$tm.test.email(this.form.email)) {
return uni.$tm.toast('请输入正确的邮箱地址！');
}
if (this.form.linkPageUrl && !uni.$tm.test.url(this.form.linkPageUrl)) {
return uni.$tm.toast('请输入正确的友链页面地址！');
}
if (this.form.rssUrl && !uni.$tm.test.url(this.form.rssUrl)) {
return uni.$tm.toast('请输入正确的RSS地址！');
}
this.fnHandle();
},
fnHandle() {
uni.showLoading({
title: '正在提交...'
});
this.$httpApi.v2.submitLink(this.form)
.then(res => {
if (res.code === 200) {
uni.$tm.toast('友链提交成功！');
setTimeout(() => {
uni.navigateTo({
url: '/pagesA/friend-links/friend-links',
success() {
let page = getCurrentPages().pop(); //跳转页面成功之后
if (!page) return;
page.onLoad(); //如果页面存在，则重新刷新页面
}
});
}, 1000);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast(err.msg);
});
},
fnCopyLink() {
uni.setClipboardData({
data: this.calcBlogContent,
showToast: false,
success: () => {
uni.showToast({
icon: 'none',
title: '复制成功！'
});
},
fail: () => {
uni.showToast({
icon: 'none',
title: '复制失败！'
});
}
});
}
if (this.form.linkPageUrl && !uni.$tm.test.url(this.form.linkPageUrl)) {
return uni.$tm.toast('请输入正确的友链页面地址！');
}
if (this.form.rssUrl && !uni.$tm.test.url(this.form.rssUrl)) {
return uni.$tm.toast('请输入正确的RSS地址！');
}
this.fnHandle();
},
fnHandle() {
uni.showLoading({
title: '正在提交...'
});
this.$httpApi.v2.submitLink(this.form)
.then(res => {
if (res.code == 200) {
uni.$tm.toast('友链提交成功！');
setTimeout(() => {
uni.navigateTo({
url: '/pagesA/friend-links/friend-links',
success() {
let page = getCurrentPages().pop(); //跳转页面成功之后
if (!page) return;
page.onLoad(); //如果页面存在，则重新刷新页面
}
});
}, 1000);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast(err.msg);
});
},
fnCopyLink() {
uni.setClipboardData({
data: this.blogDetail.content,
showToast: false,
success: () => {
uni.showToast({
icon: 'none',
title: '复制成功！'
});
},
fail: () => {
uni.showToast({
icon: 'none',
title: '复制失败！'
});
}
});
}
}
}
}
}
</script>
<style lang="scss" scoped>
.poup-logo {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
.poup-logo {
width: 140rpx;
height: 140rpx;
border-radius: 24rpx;
overflow: hidden;
&_img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
&_img {
width: 100%;
height: 100%;
}
}
.poup-desc {
font-size: 28rpx;
line-height: 1.6;
color: #555 !important;
}
.poup-desc {
margin-top: -20rpx;
font-size: 28rpx;
line-height: 1.8;
color: #555 !important;
}
.info-detail {
width: 0;
flex-grow: 1;
justify-content: center;
}
.info-detail {
width: 0;
flex-grow: 1;
justify-content: center;
}
pre {
//方法一：保留空白符序列，但是正常地进行换行。
white-space: pre-wrap;
//方法二：添加横向滚动条
overflow-x: auto;
}
pre {
//方法一：保留空白符序列，但是正常地进行换行。
white-space: pre-wrap;
//方法二：添加横向滚动条
overflow-x: auto;
}
</style>