cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 21:29:31 +08:00
Code Issues Activity

refactor: 将页面配置通过插件动态化配置（plugin-uni-halo）

Browse Source
This commit is contained in:
小莫唐尼
2024-06-24 18:59:05 +08:00
parent 959acab9c7
commit e17edade28
54 changed files with 5299 additions and 5653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesA/about/about.vue
+80 -75
View File
@@ -1,94 +1,99 @@
<template>
<view class="app-page bg-white flex flex-col">
<view v-if="uni_halo_logo" class="logo mt-40 pt-40"><image class="logo-img round-3" :src="uni_halo_logo" mode="aspectFill"></image></view>
<view class="mt-12 text-weight-b text-size-lg" :class="{ 'mt-40 pt-40': !uni_halo_logo }">uni-halo</view>
<view class="mt-12 text-size-s text-grey-darken-3"></view>
<view class="list-group mt-48" style="width: 100%;">
<tm-grouplist :shadow="0" :margin="0" :borderBottom="true">
<tm-listitem title="开源组织" :font-size="28" @click="$utils.copyText('https://www.ialley.cn', '巷子工坊官网已复制成功！')">
<text class="text-size-s" slot="rightValue">巷子工坊</text>
</tm-listitem>
<tm-listitem title="开源作者" :font-size="28" @click="$utils.copyText('https://b.925i.cn', '作者博客地址已复制')">
<text class="text-size-s" slot="rightValue">小莫唐尼</text>
</tm-listitem>
<tm-listitem title="作者博客" :font-size="28" @click="$utils.copyText('https://b.925i.cn', '作者博客地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://b.925i.cn</text>
</tm-listitem>
<tm-listitem title="文档地址" :font-size="28" @click="$utils.copyText('https://uni-halo.925i.cn', '项目码云仓库已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://uni-halo.925i.cn</text>
</tm-listitem>
<tm-listitem title="码云仓库" :font-size="28" @click="$utils.copyText('https://gitee.com/ialley-workshop-open/uni-halo', '码云仓库地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://gitee.com/ialley-workshop-open/uni-halo</text>
</tm-listitem>
<tm-listitem title="Github" :font-size="28" @click="$utils.copyText('https://github.com/ialley-workshop-open/uni-halo', 'Github地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://github.com/ialley-workshop-open/uni-halo</text>
</tm-listitem>
</tm-grouplist>
</view>
<view class="copyright bg-white text-size-xs text-align-center text-grey-darken-1 pa-36">
<view class="">根据 AGPL-3.0 协议开源</view>
<view class="mt-8">「 2022 uni-halo 丨 开源项目丨巷子工坊@小莫唐尼 」</view>
</view>
</view>
<view class="app-page bg-white flex flex-col">
<view class="logo mt-40 pt-40">
<image class="logo-img round-3" src="https://uni-halo.925i.cn/logo.png" mode="aspectFill"></image>
</view>
<view class="mt-12 text-weight-b text-size-lg">uni-halo</view>
<view class="mt-12 text-size-s text-grey-darken-3"></view>
<view class="list-group mt-48" style="width: 100%;">
<tm-grouplist :shadow="0" :margin="0" :borderBottom="true">
<tm-listitem title="开源组织" :font-size="28" @click="$utils.copyText('https://www.ialley.cn', '巷子工坊官网已复制成功！')">
<text class="text-size-s" slot="rightValue">巷子工坊</text>
</tm-listitem>
<tm-listitem title="开源作者" :font-size="28" @click="$utils.copyText('https://b.925i.cn', '作者博客地址已复制')">
<text class="text-size-s" slot="rightValue">小莫唐尼</text>
</tm-listitem>
<tm-listitem title="作者博客" :font-size="28" @click="$utils.copyText('https://b.925i.cn', '作者博客地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://b.925i.cn</text>
</tm-listitem>
<tm-listitem title="文档地址" :font-size="28" @click="$utils.copyText('https://uni-halo.925i.cn', '项目码云仓库已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://uni-halo.925i.cn</text>
</tm-listitem>
<tm-listitem title="码云仓库" :font-size="28"
@click="$utils.copyText('https://gitee.com/ialley-workshop-open/uni-halo', '码云仓库地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://gitee.com/ialley-workshop-open/uni-halo</text>
</tm-listitem>
<tm-listitem title="Github" :font-size="28"
@click="$utils.copyText('https://github.com/ialley-workshop-open/uni-halo', 'Github地址已复制')">
<text class="text-size-s text-overflow" slot="rightValue">https://github.com/ialley-workshop-open/uni-halo</text>
</tm-listitem>
</tm-grouplist>
</view>
<view class="copyright bg-white text-size-xs text-align-center text-grey-darken-1 pa-36">
<view class="">根据 AGPL-3.0 协议开源</view>
<view class="mt-8">「 2022 uni-halo 丨 开源项目丨巷子工坊@小莫唐尼 」</view>
</view>
</view>
</template>
<script>
import tmGrouplist from '@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue';
import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
export default {
components: {
tmGrouplist,
tmListitem
},
computed: {
uni_halo_logo() {
return getApp().globalData.uni_halo_logo;
}
},
onLoad() {
this.fnSetPageTitle('关于项目');
},
methods: {}
components: {
tmGrouplist,
tmListitem
},
onLoad() {
this.fnSetPageTitle('关于项目');
},
methods: {}
};
</script>
<style scoped lang="scss">
.app-page {
width: 100vw;
height: 100vh;
box-sizing: border-box;
align-items: center;
.logo-img {
width: 160rpx;
height: 160rpx;
}
.info {
margin-left: 90rpx;
margin-right: 90rpx;
}
.copyright {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
}
width: 100vw;
height: 100vh;
box-sizing: border-box;
align-items: center;
.label {
display: inline-block;
min-width: 140rpx;
}
.logo-img {
width: 160rpx;
height: 160rpx;
}
.info {
margin-left: 90rpx;
margin-right: 90rpx;
}
.copyright {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
}
.label {
display: inline-block;
min-width: 140rpx;
}
}
.text-overflow {
width: calc(100vw - 300rpx);
text-align: right;
width: calc(100vw - 300rpx);
text-align: right;
}
.list-group {
::v-deep {
.left {
width: 160rpx;
min-width: 160rpx;
}
}
::v-deep {
.left {
width: 160rpx;
min-width: 160rpx;
}
}
}
</style>
pagesA/advertise/advertise.vue
+7 -6
View File
@@ -54,6 +54,11 @@ export default {
}
}
},
computed: {
adConfigs() {
return this.$tm.vx.getters().getConfigs.adConfig;
}
},
onLoad(options) {
// #ifdef MP-WEIXIN
wx.hideShareMenu();
@@ -71,7 +76,7 @@ export default {
adLoad() {
if (wx.createRewardedVideoAd) {
videoAd = wx.createRewardedVideoAd({
adUnitId: this.$haloAdConfig.rewardedVideoAd //你的广告key
adUnitId: this.adConfigs.rewardedVideoAdId //你的广告key
})
videoAd.onError(err => {
})
@@ -86,7 +91,7 @@ export default {
}
},
openVideoAd: function () {
if (videoAd && this.$haloAdConfig.rewardedVideoAd != '') {
if (videoAd && this.adConfigs.rewardedVideoAdId != '') {
videoAd.show().catch(err => {
// 失败重试
console.log("广告拉取失败")
@@ -138,7 +143,3 @@ export default {
}
}
</script>
<style>
</style>
pagesA/archives/archives.vue
+328 -316
View File
@@ -1,367 +1,379 @@
<template>
<view class="app-page">
<view class="e-fixed"><tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs></view>
<!-- 占位区域 -->
<view style="width: 100vw;height: 90rpx;"></view>
<view class="app-page">
<view class="e-fixed">
<tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
</view>
<!-- 占位区域 -->
<view style="width: 100vw;height: 90rpx;"></view>
<!-- 骨架屏：加载区域 -->
<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>
</view>
<!-- 骨架屏：加载区域 -->
<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>
</view>
<!-- 加载完成区域 -->
<block v-else>
<view v-if="dataList.length == 0" class="list-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无归档的文章"></tm-empty></view>
<view v-else class="e-timeline tm-timeline mt-24">
<block v-for="(item, index) in dataList" :key="index">
<view class="tm-timeline-item tm-timeline-item--leftDir">
<view style="width: 160rpx;">
<view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']" class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"></view>
<view :style="{ marginTop: '-24rpx' }" :class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']" class="grey-lighten-2"></view>
</view>
<view class="tm-timeline-item-content relative">
<view class="tm-timeline-item-left">
<view class="time text-weight-b mb-24">
{{ item.year }}年
<block v-if="tab.activeIndex == 0">{{ item.month }}月</block>
<text class="text-size-s text-grey-darken-1 ml-24">（共发布 {{ item.posts.length }} 篇文章）</text>
</view>
<block v-if="item.posts.length != 0">
<block v-for="(post, postIndex) in item.posts" :key="post.id">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(postIndex)">
<view class="flex post shadow-3 pa-24 mb-24" :class="[globalAppSettings.layout.cardType]" @click="fnToArticleDetail(post)">
<image class="post-thumbnail" :src="$utils.checkThumbnailUrl(post.thumbnail)" mode="aspectFill"></image>
<view class="post-info pl-20">
<view class="post-info_title text-overflow">{{ post.title }}</view>
<view class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1">{{ post.summary }}</view>
<view class="post-info_time mt-12 text-size-s text-grey-darken-1">
<text class="iconfont icon-clock text-size-s mr-6"></text>
<text class="time-label">发布时间：</text>
{{ { d: post.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}
</view>
</view>
</view>
</tm-translate>
</block>
</block>
<view v-else class="post-empty text-size-m text-grey-darken-1">该日期下暂无归档文章！</view>
</view>
</view>
</view>
</block>
</view>
<!-- 返回顶部 -->
<tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent" icon="icon-angle-up"></tm-flotbutton>
</block>
</view>
<!-- 加载完成区域 -->
<block v-else>
<view v-if="dataList.length == 0" class="list-empty flex flex-center">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无归档的文章"></tm-empty>
</view>
<view v-else class="e-timeline tm-timeline mt-24">
<block v-for="(item, index) in dataList" :key="index">
<view class="tm-timeline-item tm-timeline-item--leftDir">
<view style="width: 160rpx;">
<view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']"
class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"></view>
<view :style="{ marginTop: '-24rpx' }"
:class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']"
class="grey-lighten-2"></view>
</view>
<view class="tm-timeline-item-content relative">
<view class="tm-timeline-item-left">
<view class="time text-weight-b mb-24">
{{ item.year }}年
<block v-if="tab.activeIndex == 0">{{ item.month }}月</block>
<text class="text-size-s text-grey-darken-1 ml-24">（共发布 {{ item.posts.length }} 篇文章）</text>
</view>
<block v-if="item.posts.length != 0">
<block v-for="(post, postIndex) in item.posts" :key="post.id">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(postIndex)">
<view class="flex post shadow-3 pa-24 mb-24" :class="[globalAppSettings.layout.cardType]"
@click="fnToArticleDetail(post)">
<image class="post-thumbnail" :src="$utils.checkThumbnailUrl(post.thumbnail)"
mode="aspectFill"></image>
<view class="post-info pl-20">
<view class="post-info_title text-overflow">{{ post.title }}</view>
<view class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1">
{{ post.summary }}
</view>
<view class="post-info_time mt-12 text-size-s text-grey-darken-1">
<text class="iconfont icon-clock text-size-s mr-6"></text>
<text class="time-label">发布时间：</text>
{{ {d: post.createTime, f: 'yyyy年MM月dd日 星期w'} | formatTime }}
</view>
</view>
</view>
</tm-translate>
</block>
</block>
<view v-else class="post-empty text-size-m text-grey-darken-1">该日期下暂无归档文章！</view>
</view>
</view>
</view>
</block>
</view>
<!-- 返回顶部 -->
<tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent" icon="icon-angle-up"></tm-flotbutton>
</block>
</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 tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.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 tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmTabs,
tmEmpty
},
data() {
return {
loading: 'loading',
tab: {
activeIndex: 0,
list: ['按月份查看', '按年份查看']
},
queryParams: {
size: 10,
page: 0
},
result: null,
dataList: [],
api: 'getMonthArchives'
};
},
computed: {
black_tmeme: function() {
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: function() {
return this.$tm.vx.state().tmVuetify.color;
}
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.fnGetData();
this.queryParams.page = 0;
},
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmTabs,
tmEmpty
},
data() {
return {
loading: 'loading',
tab: {
activeIndex: 0,
list: ['按月份查看', '按年份查看']
},
queryParams: {
size: 10,
page: 0
},
result: null,
dataList: [],
api: 'getMonthArchives'
};
},
computed: {
black_tmeme: function () {
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: function () {
return this.$tm.vx.state().tmVuetify.color;
}
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.fnGetData();
this.queryParams.page = 0;
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
const _api = ['getMonthArchives', 'getYearArchives'];
this.api = _api[index];
this.queryParams.page = 0;
this.fnGetData();
},
fnGetData() {
this.loading = 'loading';
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
this.$httpApi[this.api](this.queryParams)
.then(res => {
this.result = res.data;
this.dataList = res.data;
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
animationType: 'slide-in-right'
});
}
}
};
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
const _api = ['getMonthArchives', 'getYearArchives'];
this.api = _api[index];
this.queryParams.page = 0;
this.fnGetData();
},
fnGetData() {
this.loading = 'loading';
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
this.$httpApi[this.api](this.queryParams)
.then(res => {
this.result = res.data;
this.dataList = res.data;
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
animationType: 'slide-in-right'
});
}
}
};
</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;
}
.loading-wrap {
padding: 24rpx;
}
.list-empty {
width: 100vw;
height: 100vh;
}
.list-empty {
width: 100vw;
height: 100vh;
}
.statistics {
background-color: #ffffff;
}
.statistics {
background-color: #ffffff;
}
.e-timeline {
::v-deep {
.tm-timeline-item>view:first-child {
width: 110rpx !important;
}
.e-timeline {
::v-deep {
.tm-timeline-item > view:first-child {
width: 110rpx !important;
}
.tm-timeline-item-left {
max-width: 580rpx !important;
width: 100% !important;
}
}
}
.tm-timeline-item-left {
max-width: 580rpx !important;
width: 100% !important;
}
}
}
.tm-timeline {
.tm-timeline-item {
.tm-timeline {
.tm-timeline-item {
.tm-timeline-item-left,
.tm-timeline-item-right {
width: 200rpx;
flex-shrink: 0;
}
.tm-timeline-item-left,
.tm-timeline-item-right {
width: 200rpx;
flex-shrink: 0;
}
.tm-timeline-item-content {
display: flex;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
}
.tm-timeline-item-content {
display: flex;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
}
.tm-timeline-jidian {
margin: auto;
}
.tm-timeline-jidian {
margin: auto;
}
&.tm-timeline-item--leftDir {
display: flex;
flex-flow: row;
&.tm-timeline-item--leftDir {
display: flex;
flex-flow: row;
&.endright {
justify-content: flex-end;
}
&.endright {
justify-content: flex-end;
}
.tm-timeline-item-left,
.tm-timeline-item-right {
width: auto;
max-width: 400rpx;
}
.tm-timeline-item-left,
.tm-timeline-item-right {
width: auto;
max-width: 400rpx;
}
.tm-timeline-item-boder {
height: 100%;
width: 1px;
margin: auto;
}
.tm-timeline-item-boder {
height: 100%;
width: 1px;
margin: auto;
}
.tm-timeline-jidian {
position: relative;
margin: auto;
z-index: 2;
}
.tm-timeline-jidian {
position: relative;
margin: auto;
z-index: 2;
}
.tm-timeline-item-content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
}
}
}
.tm-timeline-item-content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
}
}
}
.post {
width: 560rpx;
border-radius: 12rpx;
background-color: #fff;
.post {
width: 560rpx;
border-radius: 12rpx;
background-color: #fff;
&.lr_image_text {}
&.lr_image_text {
}
&.lr_text_image {
.post-thumbnail {
order: 2;
}
&.lr_text_image {
.post-thumbnail {
order: 2;
}
.post-info {
order: 1;
padding-left: 0;
padding-right: 24rpx;
}
}
.post-info {
order: 1;
padding-left: 0;
padding-right: 24rpx;
}
}
&.tb_image_text {
flex-direction: column;
&.tb_image_text {
flex-direction: column;
.post-thumbnail {
width: 100%;
height: 220rpx;
}
.post-thumbnail {
width: 100%;
height: 220rpx;
}
.post-info {
width: 100%;
padding-left: 0;
.post-info {
width: 100%;
padding-left: 0;
&_title {
margin-top: 12rpx;
}
&_title {
margin-top: 12rpx;
}
&_time {
.iconfont {
display: none;
}
&_time {
.iconfont {
display: none;
}
.time-label {
display: inline-block;
}
}
}
}
.time-label {
display: inline-block;
}
}
}
}
&.tb_text_image {
flex-direction: column;
&.tb_text_image {
flex-direction: column;
.post-thumbnail {
order: 2;
width: 100%;
height: 220rpx;
margin-top: 12rpx;
}
.post-thumbnail {
order: 2;
width: 100%;
height: 220rpx;
margin-top: 12rpx;
}
.post-info {
order: 1;
width: 100%;
padding-left: 0;
.post-info {
order: 1;
width: 100%;
padding-left: 0;
&_time {
.iconfont {
display: none;
}
&_time {
.iconfont {
display: none;
}
.time-label {
display: inline-block;
}
}
}
}
.time-label {
display: inline-block;
}
}
}
}
&.only_text {
.post-info {
padding: 6rpx;
&.only_text {
.post-info {
padding: 6rpx;
&_time {
margin-top: 20rpx;
&_time {
margin-top: 20rpx;
.iconfont {
display: none;
}
.iconfont {
display: none;
}
.time-label {
display: inline-block;
}
}
}
.time-label {
display: inline-block;
}
}
}
.post-thumbnail {
display: none;
}
}
}
.post-thumbnail {
display: none;
}
}
}
.post-thumbnail {
border-radius: 6rpx;
width: 200rpx;
height: 170rpx;
}
.post-thumbnail {
border-radius: 6rpx;
width: 200rpx;
height: 170rpx;
}
.post-info {
width: 0;
flex-grow: 1;
.post-info {
width: 0;
flex-grow: 1;
&_title {
color: #303133;
font-size: 28rpx;
font-weight: bold;
}
&_title {
color: #303133;
font-size: 28rpx;
font-weight: bold;
}
&_summary {
display: -webkit-box;
line-height: 1.6;
}
&_summary {
display: -webkit-box;
line-height: 1.6;
}
&_time {
.time-label {
display: none;
}
}
}
</style>
&_time {
.time-label {
display: none;
}
}
}
</style>
pagesA/article-detail/article-detail.vue
+71 -91
View File
@@ -65,12 +65,10 @@
<view v-if="originalURL" class="mt-18 category-type original-url">
<view class="original-url_left text-weight-b">原文：</view>
<view class="original-url_right text-grey">
<text class="original-url_right__link"
@click.stop="fnToOriginal(originalURL)">{{ originalURL }}
<text class="original-url_right__link" @click.stop="fnToOriginal(originalURL)">{{ originalURL }}
</text>
<text class="original-url_right__btn" @click.stop="fnToOriginal(originalURL)">阅读原文
<text
class="iconfont icon-angle-right ml-5 text-size-s"></text>
<text class="iconfont icon-angle-right ml-5 text-size-s"></text>
</text>
</view>
</view>
@@ -82,8 +80,8 @@
<mp-html class="evan-markdown" lazy-load :domain="markdownConfig.domain"
:loading-img="markdownConfig.loadingGif" :scroll-table="true" :selectable="true"
:tag-style="markdownConfig.tagStyle" :container-style="markdownConfig.containStyle"
:content="result.content.raw" :markdown="true" :showLineNumber="true"
:showLanguageName="true" :copyByLongPress="true"/>
:content="result.content.raw" :markdown="true" :showLineNumber="true" :showLanguageName="true"
:copyByLongPress="true"/>
<tm-more v-if="showValidVisitMore" :disabled="true" :maxHeight="1" :isRemovBar="true"
@click="showValidVisitMorePop()">
<view class="text-size-n pa-24">
@@ -97,44 +95,32 @@
</template>
</tm-more>
</view>
<!-- 广告区域：自定义广告位 -->
<view class="ad-card mt-24" v-if="haloAdConfig.articleDetail.use">
<text class="ad-card_tip">广告</text>
<image class="ad-card_cover" :src="haloAdConfig.articleDetail.cover" mode="scaleToFill">
</image>
<view class="ad-card_info">
<view class="ad-card_info-title">{{ haloAdConfig.articleDetail.title }}</view>
<view class="ad-card_info-desc">{{ haloAdConfig.articleDetail.content }}</view>
<view v-if="haloAdConfig.articleDetail.url" class="ad-card_info-link"
@click="fnToWebview(haloAdConfig.articleDetail)">
立即查看
</view>
</view>
</view>
<!-- 版权声明 -->
<view v-if="copyright.use" class="copyright-wrap bg-white mt-24 pa-24 round-4">
<view v-if="postDetailConfig && postDetailConfig.copyrightEnabled" class="copyright-wrap bg-white mt-24 pa-24 round-4">
<view class="copyright-title text-weight-b">版权声明</view>
<view
class="copyright-content mt-12 grey-lighten-5 text-grey-darken-2 round-4 pt-12 pb-12 pl-24 pr-24 ">
<view v-if="copyright.author" class="copyright-text text-size-s ">
版权归属：{{ copyright.author }}
<view v-if="postDetailConfig.copyrightAuthor" class="copyright-text text-size-s ">
版权归属：{{ postDetailConfig.copyrightAuthor }}
</view>
<view v-if="copyright.description" class="copyright-text text-size-s mt-12">
版权说明：{{ copyright.description }}
<view v-if="postDetailConfig.copyrightDesc" class="copyright-text text-size-s mt-12">
版权说明：{{ postDetailConfig.copyrightDesc }}
</view>
<view v-if="copyright.violation" class="copyright-text text-size-s mt-12 text-red">
侵权处理：{{ copyright.violation }}
<view v-if="postDetailConfig.copyrightViolation" class="copyright-text text-size-s mt-12 text-red">
侵权处理：{{ postDetailConfig.copyrightViolation }}
</view>
</view>
</view>
<!-- 评论展示区域 -->
<view v-if="result" class="comment-wrap bg-white mt-24 pa-24 round-4">
<commentList :disallowComment="!result.spec.allowComment" :postName="result.metadata.name"
:post="result" @on-comment-detail="fnOnShowCommentDetail" @on-loaded="fnOnCommentLoaded">
</commentList>
</view>
<block v-if="postDetailConfig && postDetailConfig.showComment">
<view v-if="result" class="comment-wrap bg-white mt-24 pa-24 round-4">
<commentList :disallowComment="!result.spec.allowComment" :postName="result.metadata.name"
:post="result" @on-comment-detail="fnOnShowCommentDetail" @on-loaded="fnOnCommentLoaded">
</commentList>
</view>
</block>
</view>
<!-- 弹幕效果 -->
@@ -238,9 +224,7 @@ import commentItem from '@/components/comment-item/comment-item.vue';
import rCanvas from '@/components/r-canvas/r-canvas.vue';
import barrage from '@/components/barrage/barrage.vue';
import {
haloWxShareMixin
} from '@/common/mixins/wxshare.mixin.js';
import {haloWxShareMixin} from '@/common/mixins/wxshare.mixin.js';
export default {
components: {
@@ -311,8 +295,11 @@ export default {
};
},
computed: {
copyright() {
return getApp().globalData.copyright;
haloConfigs() {
return this.$tm.vx.getters().getConfigs;
},
postDetailConfig() {
return this.$tm.vx.getters().getConfigs.postDetailConfig;
},
calcUrl() {
return url => {
@@ -324,10 +311,11 @@ export default {
},
// 获取博主信息
bloggerInfo() {
let blogger = this.$tm.vx.getters().getBlogger;
let blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger;
},
// 原文链接：个人资质=可以打开公众号文章；非个人：任意链接地址（需在小程序后台配置）
originalURL() {
if ('unihalo_originalURL' in this.result?.metadata?.annotations) {
@@ -357,14 +345,15 @@ export default {
this.result = res;
const openid = uni.getStorageSync('openid');
if (openid == '' || openid == null) {
if (openid === '' || openid === null) {
this.fnGetOpenid();
}
const visitFlag = uni.getStorageSync('visit_' + this.result?.metadata?.name);
if (!visitFlag) {
const annotationsMap = res?.metadata?.annotations;
if (('restrictReadEnable' in annotationsMap) && annotationsMap.restrictReadEnable === 'true') {
if (('restrictReadEnable' in annotationsMap) && annotationsMap.restrictReadEnable ===
'true') {
this.visitType = 1;
this.showValidVisitMorePop();
} else if ('unihalo_useVisitMorePwd' in annotationsMap) {
@@ -375,9 +364,10 @@ export default {
this.visitType = 3;
this.visitPwd = annotationsMap.unihalo_useVisitPwd;
this.showValidVisitPop();
} else if (('restrictReadEnable' in annotationsMap) && annotationsMap.restrictReadEnable === 'password') {
this.visitType = 4;
this.showValidVisitPop();
} else if (('restrictReadEnable' in annotationsMap) && annotationsMap
.restrictReadEnable === 'password') {
this.visitType = 4;
this.showValidVisitPop();
} else {
this.visitType = 0;
this.showValidVisitMore = false;
@@ -425,6 +415,9 @@ export default {
},
fnToComment() {
if (!this.haloConfig.basicConfig.postDetailConfig.showComment) {
return;
}
if (!this.result.spec.allowComment) {
return uni.$tm.toast('文章已开启禁止评论！');
}
@@ -615,7 +608,7 @@ export default {
// 小程序信息
await this.$refs.rCanvas
.drawImage({
url: this.$haloConfig.miniCodeImageUrl,
url: this.haloConfig.imagesConfig.miniCodeImageUrl,
x: 20,
y: 360,
w: 80,
@@ -681,23 +674,6 @@ export default {
// #ifdef MP-WEIXIN
uni.$tm.toast('点击右上角分享给好友！');
// #endif
// #ifdef APP-PLUS
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 0,
href: this.$baseApiUrl,
title: this.result.spec.title,
summary: this.result.content.raw,
imageUrl: this.poster.res.tempFilePath,
success: function (res) {
console.log('success:' + JSON.stringify(res));
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
// #endif
},
fnOnShowCommentDetail(data) {
const {
@@ -723,7 +699,7 @@ export default {
this.commentDetail.list = res.items;
})
.catch(err => {
console.log('getPostChildrenCommentList err', error);
console.log('getPostChildrenCommentList err', err);
this.commentDetail.loading = 'error';
});
},
@@ -742,12 +718,12 @@ export default {
const _list = [];
const _handleData = list => {
return new Promise(resolve => {
if (list.length == 0) {
if (list.length === 0) {
resolve();
} else {
list.forEach(item => {
_list.push(item);
if (item.replies && item.replies.length != 0) {
if (item.replies && item.replies.length !== 0) {
_handleData(item.replies.items);
}
resolve();
@@ -833,6 +809,7 @@ export default {
},
// 获取openid
fnGetOpenid() {
// #ifdef MP-WEIXIN
uni.login({
provider: 'weixin',
success: function (loginRes) {
@@ -844,6 +821,7 @@ export default {
}
}
})
// #endif
},
// 隐藏内容
fnHideContent() {
@@ -872,18 +850,19 @@ export default {
case 0:
return;
case 1:
this.$httpApi.v2.checkPostVerifyCode(this.validVisitModal.value, this.result?.metadata?.name).then(res => {
if (res.code === 200) {
uni.setStorageSync('visit_' + this.result?.metadata?.name, true)
this.closeAllPop();
this.fnGetData();
} else {
uni.showToast({
title: '密码错误',
icon: 'none'
});
}
}).catch(err => {
this.$httpApi.v2.checkPostVerifyCode(this.validVisitModal.value, this.result?.metadata?.name).then(
res => {
if (res.code === 200) {
uni.setStorageSync('visit_' + this.result?.metadata?.name, true)
this.closeAllPop();
this.fnGetData();
} else {
uni.showToast({
title: '密码错误',
icon: 'none'
});
}
}).catch(err => {
console.log(err);
});
return;
@@ -900,22 +879,23 @@ export default {
});
}
return;
case 4:
this.$httpApi.v2.checkPostPasswordAccess(this.validVisitModal.value, this.result?.metadata?.name).then(res => {
if (res.code === 200) {
uni.setStorageSync('visit_' + this.result?.metadata?.name, true)
this.closeAllPop();
this.fnGetData();
} else {
uni.showToast({
title: '密码错误',
icon: 'none'
case 4:
this.$httpApi.v2.checkPostPasswordAccess(this.validVisitModal.value, this.result?.metadata?.name)
.then(res => {
if (res.code === 200) {
uni.setStorageSync('visit_' + this.result?.metadata?.name, true)
this.closeAllPop();
this.fnGetData();
} else {
uni.showToast({
title: '密码错误',
icon: 'none'
});
}
}).catch(err => {
console.log(err);
});
}
}).catch(err => {
console.log(err);
});
return;
return;
default:
return;
}
pagesA/articles/articles.vue
+198 -198
View File
@@ -1,214 +1,214 @@
<template>
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
<!-- 顶部切换 -->
<view class="e-fixed shadow-2">
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue"
insert-color="light-blue" :clear="true" @input="fnOnSearch" @confirm="fnOnSearch"></tm-search>
<tm-tabs v-if="false" color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list"
align="center" @change="fnOnTabChange"></tm-tabs>
</view>
<!-- 占位区域 -->
<view style="width: 100vw;height: 100rpx;"></view>
<!-- 加载区域 -->
<view v-if="loading != 'success'" class="loading-wrap pa-24">
<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">
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
<!-- 空布局 -->
<tm-empty v-if="!queryParams.keyword" icon="icon-shiliangzhinengduixiang-" label="请输入关键词搜索"></tm-empty>
<tm-empty v-else icon="icon-shiliangzhinengduixiang-"
:label="`未搜到 ${queryParams.keyword} 相关文章`"></tm-empty>
</view>
<block v-else>
<!-- 文章卡片 -->
<tm-translate v-for="(article, index) in dataList" :key="article.name" animation-name="fadeUp"
:wait="calcAniWait(index)">
<view class="article-card" @click="fnToArticleDetail(article)">
<rich-text style="font-size: 32rpx;font-weight: bold;color: #333;"
:nodes="article.title"> </rich-text>
<rich-text style="font-size: 28rpx;margin-top: 16rpx;color: #555;"
:nodes="article.content"> </rich-text>
<text style="font-size: 24rpx;margin-top: 24rpx;color:#888">
发布日期：{{ { d: article.publishTimestamp, f: 'yyyy年MM月dd日' } | formatTime }}
</text>
</view>
</tm-translate>
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
<!-- 顶部切换 -->
<view class="e-fixed shadow-2">
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue"
insert-color="light-blue" :clear="true" @input="fnOnSearch" @confirm="fnOnSearch"></tm-search>
<tm-tabs v-if="false" color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list"
align="center" @change="fnOnTabChange"></tm-tabs>
</view>
<!-- 占位区域 -->
<view style="width: 100vw;height: 100rpx;"></view>
<!-- 加载区域 -->
<view v-if="loading != 'success'" class="loading-wrap pa-24">
<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">
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
<!-- 空布局 -->
<tm-empty v-if="!queryParams.keyword" icon="icon-shiliangzhinengduixiang-" label="请输入关键词搜索"></tm-empty>
<tm-empty v-else icon="icon-shiliangzhinengduixiang-"
:label="`未搜到 ${queryParams.keyword} 相关文章`"></tm-empty>
</view>
<block v-else>
<!-- 文章卡片 -->
<tm-translate v-for="(article, index) in dataList" :key="article.name" animation-name="fadeUp"
:wait="calcAniWait(index)">
<view class="article-card" @click="fnToArticleDetail(article)">
<rich-text style="font-size: 32rpx;font-weight: bold;color: #333;"
:nodes="article.title"></rich-text>
<rich-text style="font-size: 28rpx;margin-top: 16rpx;color: #555;"
:nodes="article.content"></rich-text>
<text style="font-size: 24rpx;margin-top: 24rpx;color:#888">
发布日期：{{ {d: article.publishTimestamp, f: 'yyyy年MM月dd日'} | formatTime }}
</text>
</view>
</tm-translate>
<tm-flotbutton @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
<tm-flotbutton @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
export default {
components: {
tmSkeleton,
tmSearch,
tmTranslate,
tmTabs,
tmFlotbutton,
tmEmpty
},
data() {
return {
isBlackTheme: false,
loading: 'loading',
tab: {
activeIndex: 0,
list: ['全部', '最新文章', '热门文章', '最近更新', '最多点赞']
},
queryParams: {
keyword: "",
limit: 5,
highlightPreTag: "<text>",
highlightPostTag: "</text>"
},
cache: {
dataList: [],
total: 0
},
hasNext: false,
isLoadMore: false,
loadMoreText: '加载中...',
dataList: []
};
},
onLoad() {
this.fnSetPageTitle('文章列表');
},
created() {
if (!this.queryParams.keyword) {
this.loading = 'success'
} else {
this.fnGetData();
}
},
onPullDownRefresh() {
this.fnResetSetAniWaitIndex();
this.isLoadMore = false;
this.fnGetData();
},
export default {
components: {
tmSkeleton,
tmSearch,
tmTranslate,
tmTabs,
tmFlotbutton,
tmEmpty
},
data() {
return {
isBlackTheme: false,
loading: 'loading',
tab: {
activeIndex: 0,
list: ['全部', '最新文章', '热门文章', '最近更新', '最多点赞']
},
queryParams: {
keyword: "",
limit: 5,
highlightPreTag: "<text>",
highlightPostTag: "</text>"
},
cache: {
dataList: [],
total: 0
},
hasNext: false,
isLoadMore: false,
loadMoreText: '加载中...',
dataList: []
};
},
onLoad() {
this.fnSetPageTitle('文章列表');
},
created() {
if (!this.queryParams.keyword) {
this.loading = 'success'
} else {
this.fnGetData();
}
},
onPullDownRefresh() {
this.fnResetSetAniWaitIndex();
this.isLoadMore = false;
this.fnGetData();
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.dataList = [];
const _sorts = {
0: '',
1: 'topPriority,createTime,desc',
2: 'topPriority,visits,desc',
3: 'topPriority,updateTime,desc',
4: 'topPriority,likes,desc'
};
this.queryParams.sort = _sorts[index];
this.dataList = [];
this.fnToTopPage();
this.fnGetData();
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.isLoadMore = false;
if (!this.queryParams.keyword) {
this.dataList = []
} else {
this.fnGetData();
}
},
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getPostListByKeyword(this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.dataList = [];
const _sorts = {
0: '',
1: 'topPriority,createTime,desc',
2: 'topPriority,visits,desc',
3: 'topPriority,updateTime,desc',
4: 'topPriority,likes,desc'
};
this.queryParams.sort = _sorts[index];
this.dataList = [];
this.fnToTopPage();
this.fnGetData();
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.isLoadMore = false;
if (!this.queryParams.keyword) {
this.dataList = []
} else {
this.fnGetData();
}
},
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getPostListByKeyword(this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
this.loading = 'success';
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.hits);
} else {
this.dataList = res.hits;
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
this.loading = 'success';
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.hits);
} else {
this.dataList = res.hits;
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.name,
animationType: 'slide-in-right'
});
}
}
};
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.name,
animationType: 'slide-in-right'
});
}
}
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 24rpx;
background-color: #fafafd;
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 24rpx;
background-color: #fafafd;
&.is-balck {
background-color: #212121;
}
}
&.is-balck {
background-color: #212121;
}
}
.content {
padding-top: 24rpx;
.content {
padding-top: 24rpx;
.content-empty {
height: 60vh;
}
}
.content-empty {
height: 60vh;
}
}
.article-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0 24rpx;
padding: 24rpx;
border-radius: 12rpx;
background-color: #ffff;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
overflow: hidden;
margin-bottom: 24rpx;
}
</style>
.article-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0 24rpx;
padding: 24rpx;
border-radius: 12rpx;
background-color: #ffff;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
overflow: hidden;
margin-bottom: 24rpx;
}
</style>
pagesA/category-detail/category-detail.vue
+143 -138
View File
@@ -1,149 +1,154 @@
<template>
<view class="app-page">
<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>
</view>
<block v-else>
<view class="empty" v-if="dataList.length == 0"><tm-empty icon="icon-shiliangzhinengduixiang-"
label="该分类下暂无文章"></tm-empty></view>
<block v-else>
<block v-for="(article, index) in dataList" :key="article.createTime">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)"><article-card :article="article"
@on-click="fnToArticleDetail"></article-card></tm-translate>
</block>
<view class="load-text">{{ loadMoreText }}</view>
</block>
<view class="app-page">
<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>
</view>
<block v-else>
<view class="empty" v-if="dataList.length == 0">
<tm-empty icon="icon-shiliangzhinengduixiang-"
label="该分类下暂无文章"></tm-empty>
</view>
<block v-else>
<block v-for="(article, index) in dataList" :key="article.createTime">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<article-card :article="article"
@on-click="fnToArticleDetail"></article-card>
</tm-translate>
</block>
<view class="load-text">{{ loadMoreText }}</view>
</block>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
</block>
</view>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
</block>
</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 tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import ArticleCard from '@/components/article-card/article-card.vue';
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmEmpty,
ArticleCard
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
name: '',
pageTitle: '加载中...',
hasNext: false,
dataList: [],
isLoadMore: false,
loadMoreText: ''
};
},
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 tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import ArticleCard from '@/components/article-card/article-card.vue';
onLoad(e) {
this.name = e.name;
this.pageTitle = e.title;
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getCategoryPostList(this.name, this.queryParams)
.then(res => {
console.log("请求成功：", res)
this.fnSetPageTitle(`${this.pageTitle} （共${res.total}篇）`);
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.items);
} else {
this.dataList = res.items;
}
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right'
});
}
}
};
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmEmpty,
ArticleCard
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
name: '',
pageTitle: '加载中...',
hasNext: false,
dataList: [],
isLoadMore: false,
loadMoreText: ''
};
},
onLoad(e) {
this.name = e.name;
this.pageTitle = e.title;
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getCategoryPostList(this.name, this.queryParams)
.then(res => {
console.log("请求成功：", res)
this.fnSetPageTitle(`${this.pageTitle} （共${res.total}篇）`);
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.items);
} else {
this.dataList = res.items;
}
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right'
});
}
}
};
</script>
<style lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24rpx 0;
background-color: #fafafd;
}
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24rpx 0;
background-color: #fafafd;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
.empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
pagesA/comment/comment.vue
+185 -181
View File
@@ -1,197 +1,201 @@
<template>
<view class="app-page pa-6">
<view class="content pt-24 pb-24 round-4">
<!-- 表单区域 -->
<tm-form @submit="fnOnSubmit">
<tm-input :auto-focus="true" name="content" :vertical="true" required :height="220"
input-type="textarea" bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false"
placeholder="请输入内容,不超过200字符..." v-model="form.content"></tm-input>
<tm-input name="author" align="right" required title="我的昵称" placeholder="请输入您的昵称..."
v-model="form.author"></tm-input>
<tm-input name="avatar" align="right" required title="我的头像" placeholder="请输入您的头像..."
v-model="form.avatar"></tm-input>
<tm-input name="email" align="right" required title="邮箱地址" placeholder="请输入您的邮箱..."
v-model="form.email"></tm-input>
<tm-input name="authorUrl" align="right" required title="我的网站" placeholder="请输入您的网址..."
v-model="form.authorUrl"></tm-input>
<view class="pa-24 pl-30 pr-30"><tm-button navtie-type="form" theme="bg-gradient-blue-accent"
block>提交</tm-button></view>
</tm-form>
</view>
</view>
<view class="app-page pa-6">
<view class="content pt-24 pb-24 round-4">
<!-- 表单区域 -->
<tm-form @submit="fnOnSubmit">
<tm-input :auto-focus="true" name="content" :vertical="true" required :height="220"
input-type="textarea" bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false"
placeholder="请输入内容,不超过200字符..." v-model="form.content"></tm-input>
<tm-input name="author" align="right" required title="我的昵称" placeholder="请输入您的昵称..."
v-model="form.author"></tm-input>
<tm-input name="avatar" align="right" required title="我的头像" placeholder="请输入您的头像..."
v-model="form.avatar"></tm-input>
<tm-input name="email" align="right" required title="邮箱地址" placeholder="请输入您的邮箱..."
v-model="form.email"></tm-input>
<tm-input name="authorUrl" align="right" required title="我的网站" placeholder="请输入您的网址..."
v-model="form.authorUrl"></tm-input>
<view class="pa-24 pl-30 pr-30">
<tm-button navtie-type="form" theme="bg-gradient-blue-accent"
block>提交
</tm-button>
</view>
</tm-form>
</view>
</view>
</template>
<script>
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
export default {
components: {
tmForm,
tmInput,
tmSwitch,
tmButton
},
data() {
return {
isComment: true,
params: {
postName: '',
title: '', // 被回复的标题 type=user =用户名 否则为文章标题
form: '',
formPage: '', // 来自哪个页面
type: 'post' // 来源文章/页面 还是用户 user=用户
},
form: {
allowNotification: true,
author: '', // 作者
avatar: '',
authorUrl: '', // 作者主页
content: '', // 评论内容
email: '', // 邮件
postName: ""
}
};
},
onLoad() {
this.params = this.$Route.query;
this.isComment = this.params.isComment;
this.form.postName = this.params.postName;
export default {
components: {
tmForm,
tmInput,
tmSwitch,
tmButton
},
data() {
return {
isComment: true,
params: {
postName: '',
title: '', // 被回复的标题 type=user =用户名 否则为文章标题
form: '',
formPage: '', // 来自哪个页面
type: 'post' // 来源文章/页面 还是用户 user=用户
},
form: {
allowNotification: true,
author: '', // 作者
avatar: '',
authorUrl: '', // 作者主页
content: '', // 评论内容
email: '', // 邮件
postName: ""
}
};
},
onLoad() {
this.params = this.$Route.query;
this.isComment = this.params.isComment;
this.form.postName = this.params.postName;
if (!this.isComment) {
this.fnSetPageTitle('回复用户：' + this.params.title);
} else {
this.fnSetPageTitle(this.params.title);
}
if (!this.isComment) {
this.fnSetPageTitle('回复用户：' + this.params.title);
} else {
this.fnSetPageTitle(this.params.title);
}
try {
let visitor = uni.getStorageSync('Visitor')
if (visitor) {
visitor = JSON.parse(visitor)
this.form.author = visitor.author;
this.form.avatar = visitor.avatar;
this.form.email = visitor.email;
this.form.authorUrl = visitor.authorUrl;
}
} catch (e) {}
},
methods: {
fnOnSubmit(e) {
if (e === false) {
return uni.$tm.toast('请检查所有的必填项是否填写完整！');
}
if (!this.form.email) {
return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
}
if (this.form.email && !uni.$tm.test.email(this.form.email)) {
return uni.$tm.toast('请填写正确的邮箱地址！');
}
if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
return uni.$tm.toast('请输入正确的Url地址！');
}
this.fnHandle();
},
handleSetVisitor() {
uni.setStorageSync('Visitor', JSON.stringify({
author: this.form.author,
avatar: this.form.avatar,
email: this.form.email,
authorUrl: this.form.authorUrl,
}))
},
fnHandle() {
uni.showLoading({
title: '正在提交...'
});
try {
let visitor = uni.getStorageSync('Visitor')
if (visitor) {
visitor = JSON.parse(visitor)
this.form.author = visitor.author;
this.form.avatar = visitor.avatar;
this.form.email = visitor.email;
this.form.authorUrl = visitor.authorUrl;
}
} catch (e) {
}
},
methods: {
fnOnSubmit(e) {
if (e === false) {
return uni.$tm.toast('请检查所有的必填项是否填写完整！');
}
if (!this.form.email) {
return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
}
if (this.form.email && !uni.$tm.test.email(this.form.email)) {
return uni.$tm.toast('请填写正确的邮箱地址！');
}
if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
return uni.$tm.toast('请输入正确的Url地址！');
}
this.fnHandle();
},
handleSetVisitor() {
uni.setStorageSync('Visitor', JSON.stringify({
author: this.form.author,
avatar: this.form.avatar,
email: this.form.email,
authorUrl: this.form.authorUrl,
}))
},
fnHandle() {
uni.showLoading({
title: '正在提交...'
});
// 评论
if (this.isComment) {
const commentForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
subjectRef: {
group: "content.halo.run",
kind: "Post",
name: this.form.postName,
version: "v1alpha1",
}
}
this.$httpApi.v2.addPostComment(commentForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("评论失败");
});
return;
}
// 评论
if (this.isComment) {
const commentForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
subjectRef: {
group: "content.halo.run",
kind: "Post",
name: this.form.postName,
version: "v1alpha1",
}
}
this.$httpApi.v2.addPostComment(commentForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("评论失败");
});
return;
}
// 回复
const replyForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
quoteReply: this.form.postName
}
this.$httpApi.v2.addPostCommentReply(this.form.postName, replyForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("回复失败");
});
}
}
};
// 回复
const replyForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
quoteReply: this.form.postName
}
this.$httpApi.v2.addPostCommentReply(this.form.postName, replyForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("回复失败");
});
}
}
};
</script>
<style scoped lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
// background-color: #fafafd;
background-color: #ffffff;
.app-page {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
// background-color: #fafafd;
background-color: #ffffff;
.content {
overflow: hidden;
background-color: #fff;
// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
}
}
.content {
overflow: hidden;
background-color: #fff;
// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
}
}
.poup-content {
width: 500rpx;
.poup-content {
width: 500rpx;
::v-deep {
.slider_id {
width: 100% !important;
}
}
}
::v-deep {
.slider_id {
width: 100% !important;
}
}
}
</style>
pagesA/contact/contact.vue
+251 -238
View File
@@ -1,256 +1,269 @@
<template>
<view class="app-page flex flex-col felx-center bg-white">
<!-- 信息 -->
<view class="profile flex flex-col flex-center pa-36">
<view class="avatar"><image class="avatar-img" :src="bloggerInfo.avatar" mode="aspectFill"></image></view>
<view class="nickname mt-24 text-weight-b text-size-g">{{ bloggerInfo.nickname }}</view>
<view class="desc mt-24 text-size-m text-grey-darken-3">
{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
</view>
<!-- 联系图标 -->
<view class="mt-24 contact-icons">
<!-- 放全部：似乎显得有点拥挤 -->
<!-- <block v-for="(item, index) in result" :key="index"><text v-if="item.value" class="halocoloricon" :class="[item.icon, { 'ml-12': index != 0 }]"></text></block> -->
<!-- 考虑放几个常用的就行 -->
<text class="halocoloricon halocoloricon-qq"></text>
<!-- #ifndef MP-QQ -->
<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
<!-- #endif -->
<text class="ml-12 halocoloricon halocoloricon-GitHub"></text>
<text class="ml-12 halocoloricon halocoloricon-gitee"></text>
<text class="ml-12 halocoloricon halocoloricon-ic_email_round"></text>
</view>
<view v-if="false" class="mt-24 ">
<tm-button theme="bg-gradient-light-blue-accent" size="m" openType="contact">在线客服联系</tm-button>
<tm-button theme="bg-gradient-orange-accent" size="m" @click="fnOnToWeb">访问PC端博客</tm-button>
</view>
</view>
<!-- 社交联系方式列表 -->
<view class="contact ma-50 mt-0 pt-12">
<block v-for="(item, index) in result" :key="index">
<view v-if="item.value" class="item mt-24 flex" @click="fnOnClick(item)">
<view class="left">
<text class="icon halocoloricon" :class="[item.icon]"></text>
<text class="name">{{ item.name }}</text>
</view>
<view class="right flex-1">{{ item.value }}</view>
</view>
</block>
</view>
</view>
<view class="app-page flex flex-col felx-center bg-white">
<!-- 信息 -->
<view class="profile flex flex-col flex-center pa-36">
<view class="avatar">
<image class="avatar-img" :src="bloggerInfo.avatar" mode="aspectFill"></image>
</view>
<view class="nickname mt-24 text-weight-b text-size-g">{{ bloggerInfo.nickname }}</view>
<view class="desc mt-24 text-size-m text-grey-darken-3">
{{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
</view>
<!-- 联系图标 -->
<view class="mt-24 contact-icons">
<!-- 放全部：似乎显得有点拥挤 -->
<!-- <block v-for="(item, index) in result" :key="index"><text v-if="item.value" class="halocoloricon" :class="[item.icon, { 'ml-12': index != 0 }]"></text></block> -->
<!-- 考虑放几个常用的就行 -->
<text class="halocoloricon halocoloricon-qq"></text>
<!-- #ifndef MP-QQ -->
<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
<!-- #endif -->
<text class="ml-12 halocoloricon halocoloricon-GitHub"></text>
<text class="ml-12 halocoloricon halocoloricon-gitee"></text>
<text class="ml-12 halocoloricon halocoloricon-ic_email_round"></text>
</view>
</view>
<!-- 社交联系方式列表 -->
<view class="contact ma-50 mt-0 pt-12">
<block v-if="calcIsNotEmpty">
<block v-for="(item, index) in result" :key="index">
<view v-if="item.value" class="item mt-24 flex" @click="fnOnClick(item)">
<view class="left">
<text class="icon halocoloricon" :class="[item.icon]"></text>
<text class="name">{{ item.name }}</text>
</view>
<view class="right flex-1">{{ item.value }}</view>
</view>
</block>
</block>
<view v-else class="mt-12 pt-12">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无联系方式"/>
</view>
</view>
</view>
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
export default {
components: {
tmSkeleton,
tmButton
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
result: [
{
key: 'qq',
icon: 'halocoloricon-qq',
name: '企鹅号',
value: ''
},
{
key: 'wechat',
icon: 'halocoloricon-wechat',
name: '微信号',
value: ''
},
{
key: 'github',
icon: 'halocoloricon-GitHub',
name: 'Github',
value: ''
},
{
key: 'gitee',
icon: 'halocoloricon-gitee',
name: 'Gitee',
value: ''
},
{
key: 'bilibili',
icon: 'halocoloricon-bilibili',
name: 'Bilibili',
value: ''
},
{
key: 'csdn',
icon: 'halocoloricon-csdn1',
name: 'CSDN',
value: ''
},
{
key: 'blog',
icon: 'halocoloricon-url-monitor',
name: '博客地址',
value: ''
},
{
key: 'juejin',
icon: 'halocoloricon-juejin',
name: '掘金地址',
value: ''
},
components: {
tmSkeleton,
tmButton,
tmEmpty
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
result: [
{
key: 'qq',
icon: 'halocoloricon-qq',
name: '企鹅号',
value: ''
},
{
key: 'wechat',
icon: 'halocoloricon-wechat',
name: '微信号',
value: ''
},
{
key: 'github',
icon: 'halocoloricon-GitHub',
name: 'Github',
value: ''
},
{
key: 'gitee',
icon: 'halocoloricon-gitee',
name: 'Gitee',
value: ''
},
{
key: 'bilibili',
icon: 'halocoloricon-bilibili',
name: 'Bilibili',
value: ''
},
{
key: 'csdn',
icon: 'halocoloricon-csdn1',
name: 'CSDN',
value: ''
},
{
key: 'blog',
icon: 'halocoloricon-url-monitor',
name: '博客地址',
value: ''
},
{
key: 'juejin',
icon: 'halocoloricon-juejin',
name: '掘金地址',
value: ''
},
{
key: 'weibo',
icon: 'halocoloricon-social-weibo',
name: '微博地址',
value: ''
},
{
key: 'email',
icon: 'halocoloricon-ic_email_round',
name: '邮箱地址',
value: ''
}
]
};
},
computed: {
// 获取博主信息
bloggerInfo() {
let blogger = this.$tm.vx.getters().getBlogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger;
}
},
onLoad() {
this.fnSetPageTitle('联系博主');
},
created() {
this.fnGetData();
},
methods: {
fnGetData() {
for (let key in this.$haloConfig.social) {
this.result.find(x => x.key == key).value = this.$haloConfig.social[key];
}
},
fnOnToWeb() {
uni.navigateTo({
url:
'/pagesC/website/website?data=' +
JSON.stringify({
title: this.$haloConfig.title,
url: this.$haloConfig.social.blog
})
});
},
fnOnClick(item) {
if (this.globalAppSettings.contact.isLinkCopy && this.$utils.checkIsUrl(item.value)) {
uni.navigateTo({
url:
'/pagesC/website/website?data=' +
JSON.stringify({
title: item.name,
url: item.value
})
});
} else {
this.$utils.copyText(item.value, item.name + ' 已复制！');
}
}
}
{
key: 'weibo',
icon: 'halocoloricon-social-weibo',
name: '微博地址',
value: ''
},
{
key: 'email',
icon: 'halocoloricon-ic_email_round',
name: '邮箱地址',
value: ''
}
]
};
},
computed: {
authorConfig() {
return this.$tm.vx.getters().getConfigs.authorConfig;
},
bloggerInfo() {
let blogger = this.authorConfig.blogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger;
},
socialConfig() {
return this.authorConfig.social
},
calcIsNotEmpty() {
return this.result.some((item) => item.value !== "");
}
},
onLoad() {
this.fnSetPageTitle('联系博主');
},
created() {
this.fnGetData();
},
methods: {
fnGetData() {
for (let key in this.socialConfig) {
this.result.find(x => x.key === key).value = this.socialConfig[key];
}
},
fnOnClick(item) {
if (this.globalAppSettings.contact.isLinkCopy && this.$utils.checkIsUrl(item.value)) {
uni.navigateTo({
url: '/pagesC/website/website?data=' +
JSON.stringify({
title: item.name,
url: item.value
})
});
} else {
this.$utils.copyText(item.value, item.name + ' 已复制！');
}
}
}
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding-top: 160rpx;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding-top: 160rpx;
}
.profile {
.avatar {
width: 170rpx;
height: 170rpx;
position: relative;
box-sizing: border-box;
border-radius: 50%;
border: 6rpx solid #fff;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.07);
overflow: hidden;
&-img {
width: 100%;
height: 100%;
}
}
.nickname {
font-size: 38rpx;
}
}
.contact-icons {
.halocoloricon {
font-size: 42rpx;
}
}
.contact {
box-sizing: border-box;
border-top: 2rpx solid #f2f2f2;
.item {
box-sizing: border-box;
border-radius: 12rpx;
background-color: #fafafa;
// background-color: rgba(0, 0, 0, 0.05);
// padding-bottom: 12rpx;
// border-bottom: 2rpx solid #eee;
padding: 16rpx;
.left {
position: relative;
width: 140rpx;
display: flex;
align-items: center;
box-sizing: border-box;
// background-color: rgba(0, 0, 0, 0.03);
border-radius: 12rpx 0 0 12rpx;
&::after {
display: none;
content: ':';
position: absolute;
right: 18rpx;
top: 50%;
transform: translateY(-50%);
font-size: 24rpx;
color: #666;
}
.icon {
font-size: 24rpx;
}
.name {
margin-left: 10rpx;
color: #555;
font-size: 24rpx;
}
}
.right {
width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-all;
font-size: 24rpx;
box-sizing: border-box;
padding-left: 12rpx;
}
}
.profile {
.avatar {
width: 170rpx;
height: 170rpx;
position: relative;
box-sizing: border-box;
border-radius: 50%;
border: 6rpx solid #fff;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.07);
overflow: hidden;
&-img {
width: 100%;
height: 100%;
}
}
.nickname {
font-size: 38rpx;
}
}
.contact-icons {
.halocoloricon {
font-size: 42rpx;
}
}
.contact {
box-sizing: border-box;
border-top: 2rpx solid #f2f2f2;
.item {
box-sizing: border-box;
border-radius: 12rpx;
background-color: #fafafa;
// background-color: rgba(0, 0, 0, 0.05);
// padding-bottom: 12rpx;
// border-bottom: 2rpx solid #eee;
padding: 16rpx;
.left {
position: relative;
width: 140rpx;
display: flex;
align-items: center;
box-sizing: border-box;
// background-color: rgba(0, 0, 0, 0.03);
border-radius: 12rpx 0 0 12rpx;
&::after {
display: none;
content: ':';
position: absolute;
right: 18rpx;
top: 50%;
transform: translateY(-50%);
font-size: 24rpx;
color: #666;
}
.icon {
font-size: 24rpx;
}
.name {
margin-left: 10rpx;
color: #555;
font-size: 24rpx;
}
}
.right {
width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-all;
font-size: 24rpx;
box-sizing: border-box;
padding-left: 12rpx;
}
}
}
</style>
pagesA/disclaimers/disclaimers.vue
+39 -30
View File
@@ -1,42 +1,51 @@
<template>
<view class="app-page bg-white round-3 pa-46">
<view class="text-weight-b text-size-lg text-align-center">《 本博客免责声明 》</view>
<view v-if="false" class="text-size-s text-align-center mt-12 text-grey-darken-1">—— 博主：{{ bloggerInfo.nickname }} ——</view>
<view class="mt-32">1、本博客属于个人非赢利性质的网站，所有转载的文章都以遵循原作者的版权声明注明了文章来源。</view>
<view class="mt-24">2、如果原文没有版权声明，按照目前互联网开放的原则，本博客将在不通知作者的情况下转载文章。</view>
<view class="mt-24">3、如果原文明确注明“禁止转载”，本博客将不会转载。</view>
<view class="mt-24">
4、如果本博客转载的文章不符合作者的版权声明或者作者不想让本博客转载您的文章，请邮件告知
<text class="text-bg-gradient-light-blue-accent ml-12 mr-12 " @click="$utils.copyText(bloggerInfo.email, '邮箱复制成功！')">
<text class="iconfont icon-mail-fill text-size-m mr-6"></text>
{{ bloggerInfo.email }}
</text>
，博主将会在第一时间删除相关信息！
</view>
<view class="mt-24">5、本博客转载文章仅为留作备份和知识点分享的目的。</view>
<view class="mt-24">6、本博客将尽力确保所提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何损失或损害承担相关责任。</view>
<view class="mt-24">
7、本博客所发布、转载的文章，其版权均归原作者所有。如其他自媒体、网站或个人从本博客下载使用，请在转载有关文章时务必尊重该文章的著作权，保留本博客注明的“原文来源”或者自行去原文处复制版权声明，并自负版权等法律责任。
</view>
<view class="mt-24">8、本博客的所有原创文章皆可以任意转载，但转载时务必请注明出处。</view>
<view class="mt-24">9、尊重原创，知识共享！</view>
</view>
<view class="app-page bg-white round-3 pa-46">
<!-- 通过配置 -->
<view style="min-height: 100%;" v-html="disclaimersContent"></view>
<!-- 静态写法 -->
<block v-if="false">
<view class="text-weight-b text-size-lg text-align-center">《 本博客免责声明 》</view>
<view v-if="false" class="text-size-s text-align-center mt-12 text-grey-darken-1">—— 博主：{{ bloggerInfo.nickname }} ——</view>
<view class="mt-32">1、本博客属于个人非赢利性质的网站，所有转载的文章都以遵循原作者的版权声明注明了文章来源。</view>
<view class="mt-24">2、如果原文没有版权声明，按照目前互联网开放的原则，本博客将在不通知作者的情况下转载文章。</view>
<view class="mt-24">3、如果原文明确注明“禁止转载”，本博客将不会转载。</view>
<view class="mt-24">
4、如果本博客转载的文章不符合作者的版权声明或者作者不想让本博客转载您的文章，请邮件告知
<text class="text-bg-gradient-light-blue-accent ml-12 mr-12 ">
<text class="iconfont icon-mail-fill text-size-m mr-6"></text>
studio@925i.cn
</text>
，博主将会在第一时间删除相关信息！
</view>
<view class="mt-24">5、本博客转载文章仅为留作备份和知识点分享的目的。</view>
<view class="mt-24">
6、本博客将尽力确保所提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何损失或损害承担相关责任。
</view>
<view class="mt-24">
7、本博客所发布、转载的文章，其版权均归原作者所有。如其他自媒体、网站或个人从本博客下载使用，请在转载有关文章时务必尊重该文章的著作权，保留本博客注明的“原文来源”或者自行去原文处复制版权声明，并自负版权等法律责任。
</view>
<view class="mt-24">8、本博客的所有原创文章皆可以任意转载，但转载时务必请注明出处。</view>
<view class="mt-24">9、尊重原创，知识共享！</view>
</block>
</view>
</template>
<script>
export default {
computed: {
bloggerInfo() {
return this.$tm.vx.getters().getBlogger;
}
}
computed: {
disclaimersContent() {
const configs = this.$tm.vx.getters().getAppConfigs;
return configs.basicConfig.disclaimers.content
}
}
};
</script>
<style scoped lang="scss">
.app-page {
line-height: 1.65;
font-size: 30rpx;
color: var(--main-text-color);
line-height: 1.65;
font-size: 30rpx;
color: var(--main-text-color);
}
</style>
pagesA/friend-links/friend-links.vue
+21 -13
View File
@@ -26,8 +26,8 @@
</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">
<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 }}
@@ -120,7 +120,8 @@
<!-- 返回顶部 -->
<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"
<tm-flotbutton v-if="haloPluginConfigs.submitLink.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">
@@ -152,7 +153,7 @@
<!-- 博客预览图 -->
<view class="mt-24">
<tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)"
<tm-images :width="568" :round="2" :src="calcSiteThumbnail(detail.data.url)"
mode="aspectFill"></tm-images>
</view>
</view>
@@ -172,7 +173,6 @@ 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 {
@@ -200,14 +200,25 @@ export default {
isLoadMore: false,
loadMoreText: '',
dataList: [],
cacheDataList: []
cacheDataList: [],
colors: [
'#39B449',
'#E44C41',
'#8698A2',
'#0080FE',
'#1CBCB4',
'#6638B5'
]
};
},
computed: {
caclSiteThumbnail(val) {
haloPluginConfigs(){
return this.$tm.vx.getters().getConfigs.pluginConfig;
},
calcSiteThumbnail(val) {
return val => {
if (!val) return '';
if (val.charAt(val.length - 1) != '/') {
if (val.charAt(val.length - 1) !== '/') {
val = val + '/';
}
return 'https://image.thum.io/get/width/1000/crop/800/' + val;
@@ -239,8 +250,8 @@ export default {
},
methods: {
fnRandomColor() {
const _r = GetRandomNumberByRange(0, this.$haloConfig.colors.length - 1);
return this.$haloConfig.colors[_r];
const _r = GetRandomNumberByRange(0, this.colors.length - 1);
return this.colors[_r];
},
fnGetData() {
if (!this.isLoadMore) {
@@ -259,9 +270,6 @@ export default {
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 ? '上拉加载更多' : '呜呜，没有更多数据啦~';
pagesA/journal/journal.vue
+123 -121
View File
@@ -1,135 +1,137 @@
<template>
<view class="app-page">
<view v-if="loading != 'success'" class="loading-wrap pa-24">
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
</view>
<!-- 内容区域 -->
<view v-else class="app-page-content pa-24">
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
<!-- 空布局 -->
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有写任何日记"></tm-empty>
</view>
<block v-else>
<block v-for="(journal, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 日记卡片 -->
<journal-card :journal="journal" :useLike="true"></journal-card>
</tm-translate>
</block>
<view class="app-page">
<view v-if="loading != 'success'" class="loading-wrap pa-24">
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
</view>
<!-- 内容区域 -->
<view v-else class="app-page-content pa-24">
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
<!-- 空布局 -->
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有写任何日记"></tm-empty>
</view>
<block v-else>
<block v-for="(journal, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 日记卡片 -->
<journal-card :journal="journal" :useLike="true"></journal-card>
</tm-translate>
</block>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
</template>
<script>
import MarkdownConfig from '@/common/markdown/markdown.config.js';
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
import journalCard from '@/components/journal-card/journal-card.vue';
import MarkdownConfig from '@/common/markdown/markdown.config.js';
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
import journalCard from '@/components/journal-card/journal-card.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
export default {
components: { mpHtml, tmSkeleton, tmEmpty, tmTranslate, tmFlotbutton, journalCard },
data() {
return {
loading: 'loading',
markdownConfig: MarkdownConfig,
queryParams: {
size: 10,
page: 0
},
dataList: [],
hasNext:false,
isLoadMore: false,
loadMoreText: '加载中...'
};
},
export default {
components: {mpHtml, tmSkeleton, tmEmpty, tmTranslate, tmFlotbutton, journalCard},
data() {
return {
loading: 'loading',
markdownConfig: MarkdownConfig,
queryParams: {
size: 10,
page: 0
},
onLoad() {
this.fnSetPageTitle('个人日记');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi
.getJournals(this.queryParams)
.then(res => {
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.data.content);
} else {
this.dataList = res.data.content;
}
this.loading = 'success';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
}
}
};
dataList: [],
hasNext: false,
isLoadMore: false,
loadMoreText: '加载中...'
};
},
onLoad() {
this.fnSetPageTitle('个人日记');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi
.getJournals(this.queryParams)
.then(res => {
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.data.content);
} else {
this.dataList = res.data.content;
}
this.loading = 'success';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
}
}
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
display: flex;
flex-direction: column;
}
.app-page {
width: 100vw;
display: flex;
flex-direction: column;
}
.loading-wrap {}
.loading-wrap {
}
.app-page-content {}
.app-page-content {
}
.content-empty {
height: 60vh;
}
</style>
.content-empty {
height: 60vh;
}
</style>
pagesA/love/album.vue
+340 -333
View File
@@ -1,78 +1,69 @@
<template>
<view class="app-page">
<view v-if="loading != 'success'" class="loading-wrap">
<view v-if="loading == 'loading'" class="loading">
<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
<view class="loadig-text ">相册正在努力加载中啦~</view>
</view>
<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
</tm-empty>
</view>
<!-- 内容区域 -->
<view v-else class="app-page-content">
<view v-if="dataList.length == 0" color="light-blue" class="content-empty flex flex-center">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
</tm-empty>
</view>
<block v-else>
<swiper
class="swiper-album"
:current="swiperIndex"
:acceleration="true"
:circular="true"
:vertical="false"
:indicator-dots="false"
:autoplay="false"
@change="fnOnChange"
>
<block v-for="(item, index) in dataList" :key="index">
<swiper-item class="swiper-album-item">
<view class="scroll-wrap">
<view class="card">
<cache-image
class="card-image"
width="100%"
height="46vh"
radius="12rpx"
:url="item.image"
:fileMd5="item.image"
mode="aspectFill"
@on-click="fnOnPreview(item)"
></cache-image>
<view v-if="item.description" class="card-desc">{{ item.description }}</view>
<view v-else class="card-desc is-empty flex flex-col">
<view class="text-grey-darken-1">该照片没有记录任何信息</view>
<view class="text-size-m mt-24 text-grey-darken-1">记录一下拍照的瞬间，会更精彩哟</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="tabbar">
<view class="pre" @click="fnChange(false)">
<text class="icon"><text class="iconfont icon-arrow-left"></text></text>
<text class="text">上一张</text>
</view>
<view class="refresh" @click="fnRefresh()">
<text class="refresh-text">点击</text>
<text class="refresh-heart iconfont icon-diagnose"></text>
<text class="refresh-text">刷新</text>
</view>
<view class="next" @click="fnChange(true)">
<text class="text">下一张</text>
<text class="icon"><text class="iconfont icon-arrow-right"></text></text>
</view>
</view>
</block>
</view>
</view>
<view class="app-page">
<view v-if="loading !== 'success'" class="loading-wrap">
<view v-if="loading === 'loading'" class="loading">
<view class="loading-icon flex flex-center">
<text class="e-loading-icon iconfont icon-loading"></text>
</view>
<view class="loadig-text ">相册正在努力加载中啦~</view>
</view>
<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
</tm-empty>
</view>
<!-- 内容区域 -->
<view v-else class="app-page-content">
<view v-if="dataList.length === 0" color="light-blue" class="content-empty flex flex-center">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
</tm-empty>
</view>
<block v-else>
<swiper class="swiper-album" :current="swiperIndex" :acceleration="true" :circular="true"
:vertical="false" :indicator-dots="false" :autoplay="false" @change="fnOnChange">
<block v-for="(item, index) in dataList" :key="index">
<swiper-item class="swiper-album-item">
<view class="scroll-wrap">
<view class="card">
<cache-image class="card-image" width="100%" height="46vh" radius="12rpx"
:url="item.image" :fileMd5="item.image" mode="aspectFill"
@on-click="fnOnPreview(item)"></cache-image>
<view v-if="item.spec.description" class="card-desc">{{ item.spec.description }}
</view>
<view v-else class="card-desc is-empty flex flex-col">
<view class="text-grey-darken-1">该照片没有记录任何信息</view>
<view class="text-size-m mt-24 text-grey-darken-1">记录一下拍照的瞬间，会更精彩哟</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="tabbar">
<view class="pre" @click="fnChange(false)">
<text class="icon">
<text class="iconfont icon-arrow-left"></text>
</text>
<text class="text">上一张</text>
</view>
<view class="refresh" @click="fnRefresh()">
<text class="refresh-text">点击</text>
<text class="refresh-heart iconfont icon-diagnose"></text>
<text class="refresh-text">刷新</text>
</view>
<view class="next" @click="fnChange(true)">
<text class="text">下一张</text>
<text class="icon">
<text class="iconfont icon-arrow-right"></text>
</text>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
import LoveConfig from '@/config/love.config.js';
import throttle from '@/utils/throttle.js';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
@@ -80,298 +71,314 @@ import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
export default {
components: {
tmButton,
tmFlotbutton,
tmTranslate,
tmEmpty
},
data() {
return {
loading: 'loading',
loveConfig: LoveConfig,
queryParams: {
size: 99,
page: 0,
sort: 'takeTime',
team: LoveConfig.albumKeyName
},
result: {},
dataList: [],
cache: {
dataList: [],
total: 0
},
swiperIndex: 0,
tabbar: {
list: []
}
};
},
components: {
tmButton,
tmFlotbutton,
tmTranslate,
tmEmpty
},
data() {
return {
loading: 'loading',
queryParams: {
size: 100,
page: 1,
group: ""
},
result: {},
dataList: [],
swiperIndex: 0,
tabbar: {
list: []
}
};
},
computed: {
loveConfig() {
return this.$tm.vx.getters().getConfigs.loveConfig;
}
},
watch: {
loveConfig: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
this.fnGetData()
}
}
},
onLoad() {
this.fnSetPageTitle('恋爱相册');
},
onLoad() {
this.fnSetPageTitle('恋爱相册');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.fnRefresh();
},
onPullDownRefresh() {
this.fnRefresh();
},
methods: {
fnRefresh() {
this.queryParams.page = 0;
this.fnGetData();
},
fnGetData() {
this.loading = 'loading';
this.$httpApi
.getPhotoListByPage(this.queryParams)
.then(res => {
if (res.status == 200) {
this.loading = 'success';
if (res.data.content.length != 0) {
const _list = res.data.content.map((item, index) => {
item['image'] = this.$utils.checkImageUrl(item.thumbnail);
item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
return item;
});
this.dataList = _list;
this.swiperIndex = 0;
}
} else {
this.loading = 'error';
uni.$tm.toast('加载失败，请下拉刷新重试！');
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
uni.$tm.toast('加载失败，请下拉刷新重试！');
})
.finally(() => {
setTimeout(() => {
uni.stopPullDownRefresh();
}, 200);
});
},
// 缓存数据
fnCacheDataList(dataList) {
if (this.queryParams.page == 0) {
this.cache.dataList = dataList;
} else {
this.cache.dataList = [...this.cache.dataList, ...dataList];
}
},
fnOnPreview(item) {
uni.previewImage({
current: item.image,
urls: this.dataList.map(x => x.image)
});
},
fnOnChange(e) {
this.swiperIndex = e.detail.current;
},
fnChange(isNext) {
throttle(() => {
if (isNext) {
if (this.swiperIndex == this.dataList.length - 1) {
this.swiperIndex = 0;
} else {
this.swiperIndex += 1;
}
} else {
if (this.swiperIndex == 0) {
this.swiperIndex = this.dataList.length - 1;
} else {
this.swiperIndex -= 1;
}
}
});
}
}
methods: {
fnRefresh() {
this.queryParams.page = 0;
this.fnGetData();
},
fnGetData() {
this.loading = 'loading';
this.queryParams.group = this.loveConfig.lovePhoto.groupName
console.log('this.loveConfig------------',this.loveConfig)
this.$httpApi.v2
.getPhotoListByGroupName(this.queryParams)
.then(res => {
console.log("相册 res", res)
this.loading = 'success';
this.dataList = res.items.map((item, index) => {
item['image'] = this.$utils.checkImageUrl(item.spec.cover);
item['takeTime'] = this.$tm.dayjs(item.metadata.creationTimestamp).format(
'DD/MM/YYYY');
return item;
});
this.swiperIndex = 0;
})
.catch(err => {
console.error(err);
this.loading = 'error';
uni.$tm.toast('加载失败，请下拉刷新重试！');
})
.finally(() => {
setTimeout(() => {
uni.stopPullDownRefresh();
}, 200);
});
},
fnOnPreview(item) {
uni.previewImage({
current: item.image,
urls: this.dataList.map(x => x.image)
});
},
fnOnChange(e) {
this.swiperIndex = e.detail.current;
},
fnChange(isNext) {
throttle(() => {
if (isNext) {
if (this.swiperIndex == this.dataList.length - 1) {
this.swiperIndex = 0;
} else {
this.swiperIndex += 1;
}
} else {
if (this.swiperIndex == 0) {
this.swiperIndex = this.dataList.length - 1;
} else {
this.swiperIndex -= 1;
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 24rpx 0;
padding-bottom: 144rpx;
background: linear-gradient(
-135deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1)
);
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 24rpx 0;
padding-bottom: 144rpx;
background: linear-gradient(-135deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1));
}
.app-page-content {
}
.loading-wrap {
width: 100vw;
height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 36rpx;
::v-deep {
.tm-icons {
margin-right: -20rpx;
}
}
.loading-wrap {
width: 100vw;
height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 36rpx;
::v-deep {
.tm-icons {
margin-right: -20rpx;
}
}
}
.e-loading-icon {
font-size: 120rpx;
// color: #f88ca2;
color: #56bbf9;
font-size: 120rpx;
// color: #f88ca2;
color: #56bbf9;
}
.loadig-text {
margin-top: 28rpx;
font-size: 28rpx;
// color: #f88ca2;
color: #56bbf9;
margin-top: 28rpx;
font-size: 28rpx;
// color: #f88ca2;
color: #56bbf9;
}
.content-empty {
width: 100%;
height: 60vh;
width: 100%;
height: 60vh;
}
.swiper-album {
width: 100vw;
height: calc(100vh - 24rpx - 144rpx);
width: 100vw;
height: calc(100vh - 24rpx - 144rpx);
}
.swiper-album-item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef H5 */
padding-bottom: 110rpx;
/* #endif */
/* #ifndef H5 */
padding-bottom: 60rpx;
/* #endif */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef H5 */
padding-bottom: 110rpx;
/* #endif */
/* #ifndef H5 */
padding-bottom: 60rpx;
/* #endif */
}
.scroll-wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 36rpx;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 36rpx;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
}
.card {
display: flex;
flex-direction: column;
width: 100%;
// height: 65vh;
height: 100%;
max-height: 100%;
border-radius: 12rpx;
background-color: #ffffff;
box-sizing: border-box;
// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
overflow: hidden;
overflow-y: auto;
::v-deep {
.cache-image {
height: initial !important;
}
}
&-image {
width: 100%;
height: initial !important;
border-radius: 12rpx;
}
&-desc {
margin-top: 24rpx;
line-height: 1.6;
font-size: 30rpx;
color: rgba(26, 26, 26, 0.9);
&.is-empty {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
font-size: 32rpx;
}
}
display: flex;
flex-direction: column;
width: 100%;
// height: 65vh;
height: 100%;
max-height: 100%;
border-radius: 12rpx;
background-color: #ffffff;
box-sizing: border-box;
// box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
overflow: hidden;
overflow-y: auto;
::v-deep {
.cache-image {
height: initial !important;
}
}
&-image {
width: 100%;
height: initial !important;
border-radius: 12rpx;
}
&-desc {
margin-top: 24rpx;
line-height: 1.6;
font-size: 30rpx;
color: rgba(26, 26, 26, 0.9);
&.is-empty {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
font-size: 32rpx;
}
}
}
.tabbar {
width: 90vw;
position: fixed;
left: 50%;
bottom: 40rpx;
transform: translateX(-50%);
border-radius: 25rpx;
box-sizing: border-box;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
// background-color: rgba(0, 0, 0, 0.5);
background-color: #ffffff;
color: #333;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
.refresh {
animation: refreshAni 6s ease-in-out infinite;
color: #56bbf9;
&-heart {
font-size: 42rpx;
color: inherit;
margin: 0 6rpx;
}
&-text {
font-size: 24rpx;
}
}
.pre {
color: #56bbf9;
transition: transform 0.1s ease-in-out;
&:hover {
transform: scale(1.05);
}
.text {
padding-left: 12rpx;
}
}
.next {
color: #f88ca2;
transition: transform 0.1s ease-in-out;
&:hover {
transform: scale(1.03);
}
.text {
padding-right: 12rpx;
}
}
width: 90vw;
position: fixed;
left: 50%;
bottom: 40rpx;
transform: translateX(-50%);
border-radius: 25rpx;
box-sizing: border-box;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
// background-color: rgba(0, 0, 0, 0.5);
background-color: #ffffff;
color: #333;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
.refresh {
animation: refreshAni 6s ease-in-out infinite;
color: #56bbf9;
&-heart {
font-size: 42rpx;
color: inherit;
margin: 0 6rpx;
}
&-text {
font-size: 24rpx;
}
}
.pre {
color: #56bbf9;
transition: transform 0.1s ease-in-out;
&:hover {
transform: scale(1.05);
}
.text {
padding-left: 12rpx;
}
}
.next {
color: #f88ca2;
transition: transform 0.1s ease-in-out;
&:hover {
transform: scale(1.03);
}
.text {
padding-right: 12rpx;
}
}
}
@keyframes refreshAni {
0% {
color: #f88ca2;
}
50% {
color: #56bbf9;
}
100% {
color: #f88ca2;
}
0% {
color: #f88ca2;
}
50% {
color: #56bbf9;
}
100% {
color: #f88ca2;
}
}
</style>
pagesA/love/journey.vue
+88 -74
View File
@@ -1,92 +1,106 @@
<template>
<view class="app-page">
<view class="page-title">我们的故事</view>
<view class="html-typed" v-html="html">内容渲染</view>
<view class="app-page">
<view class="page-title">我们的故事</view>
<view class="html-typed" v-html="html">内容渲染</view>
<scroll-btn bottom="160rpx" :scrollTop.sync="scrollTop"></scroll-btn>
</view>
<scroll-btn bottom="160rpx" :scrollTop.sync="scrollTop"></scroll-btn>
</view>
</template>
<script>
import LoveConfig from '@/config/love.config.js';
import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
export default {
components: { ScrollBtn },
data() {
return {
scrollTop: 0,
html: '',
timer: null
};
},
created() {
this.fnInit();
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onBackPress() {
clearTimeout(this.timer);
},
methods: {
fnInit() {
clearTimeout(this.timer);
const _html = LoveConfig.journey;
let _index = 0;
const _typing = () => {
this.timer = setTimeout(() => {
if (_index >= _html.length) {
clearTimeout(this.timer);
} else {
this.html += _html.substring(_index, _index + 1);
_index += 1;
_typing();
}
}, 100);
};
_typing();
}
}
components: {
ScrollBtn
},
data() {
return {
scrollTop: 0,
html: '',
timer: null
};
},
computed: {
loveConfig() {
return this.$tm.vx.getters().getConfigs.loveConfig;
}
},
watch: {
loveConfig: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
if (!newVal) return;
this.fnInit();
}
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onBackPress() {
clearTimeout(this.timer);
},
methods: {
fnInit() {
clearTimeout(this.timer);
const _html = this.loveConfig.ourStory.content;
let _index = 0;
const _typing = () => {
this.timer = setTimeout(() => {
if (_index >= _html.length) {
clearTimeout(this.timer);
} else {
this.html += _html.substring(_index, _index + 1);
_index += 1;
_typing();
}
}, 100);
};
_typing();
}
}
};
</script>
<style scoped lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef APP-PLUS */
padding-top: 100rpx;
/* #endif */
/* #ifdef H5 */
padding-top: 80rpx;
/* #endif */
/* #ifdef MP-WEIXIN */
padding-top: 120rpx;
/* #endif */
background: linear-gradient(
-45deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1)
);
color: rgba(26, 26, 26, 1);
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef APP-PLUS */
padding-top: 100rpx;
/* #endif */
/* #ifdef H5 */
padding-top: 80rpx;
/* #endif */
/* #ifdef MP-WEIXIN */
padding-top: 120rpx;
/* #endif */
background: linear-gradient(-45deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1));
color: rgba(26, 26, 26, 1);
}
.page-title {
font-size: 42rpx;
font-weight: bold;
text-align: center;
text-shadow: 0rpx 4rpx 24rpx #bfe9ef;
font-size: 42rpx;
font-weight: bold;
text-align: center;
text-shadow: 0rpx 4rpx 24rpx #bfe9ef;
}
.html-typed {
margin-top: 52rpx;
line-height: 1.8;
font-size: 30rpx;
margin-top: 52rpx;
line-height: 1.8;
font-size: 30rpx;
}
</style>
pagesA/love/list.vue
+394 -385
View File
@@ -1,421 +1,430 @@
<template>
<view class="app-page" @touchstart="fnOnTouchstart" @touchend="fnOnTouchend" @touchcancel="fnOnTouchend">
<view class="love-card" :class="{ ani: isDoAni }">
<view class="head">
<image class="avatar" :src="loveConfig.boy.avatar" mode="scaleToFill"></image>
<view class="love-days">
<view class="tip-text">相恋</view>
<view class="number">
<text class="boy">-</text>
<text class="days">{{ calcLoveDays }}</text>
<text class="girl">-</text>
</view>
<view class="tip-text">天</view>
</view>
<image class="avatar" :src="loveConfig.girl.avatar" mode="scaleToFill"></image>
</view>
<view class="foot">
<view class="text" v-if="false">
我们已经相恋
<text class="number">- {{ calcLoveDays }} -</text>
天啦
</view>
看看我们的恋爱清单都完成了哪些吧
</view>
</view>
<view v-if="list.length == 0" class="list empty">
<view class="card">
<image class="empty-image" :src="loveConfig.loveImageUrl" mode="scaleToFill"></image>
<view class="empty-text">暂时还没有恋爱清单，快去制定你们的恋爱清单吧~</view>
</view>
</view>
<view v-else class="list">
<block v-for="(item, index) in list" :key="index">
<view class="card" :class="{ ani: isDoAni }" :style="{ '--delay': calcCardDelay(index) }">
<view class="head">
<view class="status">
<view v-if="!item.finish" class="text">进行中</view>
<view v-else class="text finish">已完成</view>
</view>
<view class="title">
<view class="title-name">{{ item.title }}</view>
<view class="title-desc">{{ item.desc }}</view>
</view>
<view class="actions" @click="fnOnItemOpen(item)">
<text class="icon">{{ item.open ? '-' : '+' }}</text>
</view>
</view>
<view v-if="item.open" class="body">
<view class="desc">
<view class="desc-label">开始时间：</view>
<view class="desc-value">{{ item.detail.start || '暂无计划' }}</view>
</view>
<view class="desc" v-if="item.detail.desc">
<view class="desc-label">事件描述：</view>
<view class="desc-value">{{ item.detail.desc }}</view>
</view>
<view class="desc">
<view class="desc-label">完成时间：</view>
<view class="desc-value">{{ item.detail.end || '未开始或正在进行中...' }}</view>
</view>
<view class="desc">
<view class="desc-label">完成打卡：</view>
<view class="desc-value">{{ item.detail.moment || '未开始或正在进行中...' }}</view>
</view>
<view class="desc" v-if="item.detail.other">
<view class="desc-label">爱心备注：</view>
<view class="desc-value">{{ item.detail.other }}</view>
</view>
</view>
</view>
</block>
</view>
<scroll-btn :scrollTop.sync="scrollTop" @on-status="fnOnScrollStatus"></scroll-btn>
</view>
<view class="app-page" @touchstart="fnOnTouchstart" @touchend="fnOnTouchend" @touchcancel="fnOnTouchend">
<view class="love-card" :class="{ ani: isDoAni }">
<view class="head">
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="scaleToFill"></image>
<view class="love-days">
<view class="tip-text">相恋</view>
<view class="number">
<text class="boy">-</text>
<text class="days">{{ calcLoveDays }}</text>
<text class="girl">-</text>
</view>
<view class="tip-text">天</view>
</view>
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="scaleToFill"></image>
</view>
<view class="foot">
<view class="text" v-if="false">
我们已经相恋
<text class="number">- {{ calcLoveDays }} -</text>
天啦
</view>
看看我们的恋爱清单都完成了哪些吧
</view>
</view>
<view v-if="list.length == 0" class="list empty">
<view class="card">
<image class="empty-image" :src="$utils.checkImageUrl(loveConfig.pageImages.heartImageUrl)" mode="scaleToFill"></image>
<view class="empty-text">暂时还没有恋爱清单，快去制定你们的恋爱清单吧~</view>
</view>
</view>
<view v-else class="list">
<block v-for="(item, index) in list" :key="index">
<view class="card" :class="{ ani: isDoAni }" :style="{ '--delay': calcCardDelay(index) }">
<view class="head">
<view class="status">
<view v-if="item.status==='wait'" class="text">未开始</view>
<view v-else-if="item.status==='doing'" class="text">进行中</view>
<view v-else-if="item.status==='complete'" class="text finish">已完成</view>
</view>
<view class="title">
<view class="title-name">{{ item.title }}</view>
</view>
<view class="actions" @click="fnOnItemOpen(item)">
<text class="icon">{{ item.open ? '-' : '+' }}</text>
</view>
</view>
<view v-if="item.open && item.content" class="body">
<view v-if="item.content" class="desc">
<view class="desc-label">事件内容：</view>
<view class="desc-value">{{ item.content || "-" }}</view>
</view>
<view v-if="item.status==='complete' && item.completeDate" class="desc">
<view class="desc-label">完成时间：</view>
<view class="desc-value">{{ item.completeDate || '-' }}</view>
</view>
</view>
</view>
</block>
</view>
<scroll-btn :scrollTop.sync="scrollTop" @on-status="fnOnScrollStatus"></scroll-btn>
</view>
</template>
<script>
import LoveConfig from '@/config/love.config.js';
import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
export default {
components: { ScrollBtn },
data() {
return {
isDoAni: true,
scrollTop: 0,
loveConfig: LoveConfig,
list: []
};
},
computed: {
calcLoveDays() {
const formatStartDate = this.loveConfig.loveStartDate.replace(/-/g, '/');
const start = new Date(formatStartDate),
now = new Date();
const T = now.getTime() - start.getTime();
const i = 24 * 60 * 60 * 1000;
const d = T / i;
const D = Math.floor(d);
return D;
},
calcCardDelay() {
return index => {
return Math.random() * index + 1 + 's';
};
}
},
created() {
this.fnGetList();
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
methods: {
fnGetList() {
if (LoveConfig.loveList.useApi && LoveConfig.loveList.api) {
uni.request({
url: LoveConfig.loveList.api,
header: {
ContentType: 'application/json'
},
method: 'GET',
dataType: 'json',
success: res => {
if (res.statusCode == 200 && res.data.status == 200) {
this.list = res.data.data.map(item => {
item['open'] = false;
return item;
});
} else {
uni.$tm.toast('数据请求失败，请检查接口！');
}
},
fail: err => {
uni.$tm.toast('数据请求失败，请检查接口！');
}
});
} else {
this.list = LoveConfig.loveList.data.map(item => {
item['open'] = false;
return item;
});
}
},
fnOnItemOpen(item) {
item.open = !item.open;
this.$forceUpdate();
},
fnOnScrollStatus(isEnd) {
this.isDoAni = isEnd;
},
fnOnTouchstart() {
this.isDoAni = false;
},
fnOnTouchend() {
this.isDoAni = true;
}
}
components: {
ScrollBtn
},
data() {
return {
isDoAni: true,
scrollTop: 0,
list: []
};
},
computed: {
loveConfig() {
return this.$tm.vx.getters().getConfigs.loveConfig;
},
calcLoveDays() {
const formatStartDate = this.loveConfig.loveDate.replace(/-/g, '/');
const start = new Date(formatStartDate),
now = new Date();
const T = now.getTime() - start.getTime();
const i = 24 * 60 * 60 * 1000;
const d = T / i;
const D = Math.floor(d);
return D;
},
calcCardDelay() {
return index => {
return Math.random() * index + 1 + 's';
};
}
},
watch: {
loveConfig: {
deep: true,
immediate: true,
handler(newVal) {
if (!newVal) return;
this.fnGetList();
}
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
methods: {
fnGetList() {
this.list = this.loveConfig.loveDaily.list.map(item => {
item['open'] = false;
return item;
});
},
fnOnItemOpen(item) {
item.open = !item.open;
this.$forceUpdate();
},
fnOnScrollStatus(isEnd) {
this.isDoAni = isEnd;
},
fnOnTouchstart() {
this.isDoAni = false;
},
fnOnTouchend() {
this.isDoAni = true;
}
}
};
</script>
<style scoped lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef H5 */
padding-top: 60rpx;
/* #endif */
/* #ifndef H5 */
padding-top: 180rpx;
/* #endif */
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding: 36rpx;
/* #ifdef H5 */
padding-top: 60rpx;
/* #endif */
/* #ifndef H5 */
padding-top: 180rpx;
/* #endif */
background: linear-gradient(
135deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1)
);
background: linear-gradient(135deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1));
}
.love-card {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 0 24rpx;
padding-top: 66rpx;
padding-bottom: 52rpx;
border-radius: 50rpx;
border: 4rpx solid rgba(96, 77, 68, 0.9);
border-color: #faf8eb;
background-color: rgba(255, 199, 184, 0.9);
margin-bottom: 52rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
&.ani {
animation: loveCardAni 3s ease-in-out infinite;
}
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 0 24rpx;
padding-top: 66rpx;
padding-bottom: 52rpx;
border-radius: 50rpx;
border: 4rpx solid rgba(96, 77, 68, 0.9);
border-color: #faf8eb;
background-color: rgba(255, 199, 184, 0.9);
margin-bottom: 52rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
.head {
display: flex;
.avatar {
width: 150rpx;
height: 150rpx;
box-sizing: border-box;
border-radius: 50%;
border: 6rpx solid rgba(255, 255, 255, 0.7);
&.ani {
animation: loveCardAni 3s ease-in-out infinite;
}
&.boy {
border-color: #56bbf9;
}
&.girl {
border-color: #f88ca2;
}
}
.love-days {
margin: 0 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
.tip-text {
color: #333;
}
.number {
font-size: 46rpx;
padding: 12rpx 0;
> .boy {
color: #56bbf9;
margin-right: 12rpx;
}
> .girl {
color: #f88ca2;
margin-left: 12rpx;
}
}
.days {
animation: daysAni 6s ease-in-out infinite;
font-weight: bold;
}
}
}
.foot {
display: none;
margin-top: 36rpx;
font-size: 24rpx;
}
.head {
display: flex;
.avatar {
width: 150rpx;
height: 150rpx;
box-sizing: border-box;
border-radius: 50%;
border: 6rpx solid rgba(255, 255, 255, 0.7);
&.boy {
border-color: #56bbf9;
}
&.girl {
border-color: #f88ca2;
}
}
.love-days {
margin: 0 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
.tip-text {
color: #333;
}
.number {
font-size: 46rpx;
padding: 12rpx 0;
> .boy {
color: #56bbf9;
margin-right: 12rpx;
}
> .girl {
color: #f88ca2;
margin-left: 12rpx;
}
}
.days {
animation: daysAni 6s ease-in-out infinite;
font-weight: bold;
}
}
}
.foot {
display: none;
margin-top: 36rpx;
font-size: 24rpx;
}
}
@keyframes daysAni {
0% {
color: #f88ca2;
}
50% {
color: #56bbf9;
}
100% {
color: #f88ca2;
}
0% {
color: #f88ca2;
}
50% {
color: #56bbf9;
}
100% {
color: #f88ca2;
}
}
@keyframes loveCardAni {
0% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
0% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
.list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.empty {
height: calc(100vh - 180rpx - 280rpx - 36rpx);
.card {
height: 100%;
padding: 100rpx;
margin-bottom: 0;
text-align: center;
justify-content: center;
color: rgba(96, 77, 68, 0.9);
}
&-image {
width: 300rpx;
height: 300rpx;
}
&-text {
margin-top: 36rpx;
line-height: 50rpx;
}
height: calc(100vh - 180rpx - 280rpx - 36rpx);
.card {
height: 100%;
padding: 100rpx;
margin-bottom: 0;
text-align: center;
justify-content: center;
color: rgba(96, 77, 68, 0.9);
}
&-image {
width: 300rpx;
height: 300rpx;
}
&-text {
margin-top: 36rpx;
line-height: 50rpx;
}
}
.card {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 24rpx;
border-radius: 50rpx;
border: 4rpx solid rgba(96, 77, 68, 0.9);
border-color: #fff;
// background-color: #faf8eb;
background-color: #ffffff;
margin-bottom: 36rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
animation-delay: var(--delay);
&.ani {
animation: cardAni 3s ease-in-out infinite;
}
.head {
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
.status {
width: 100rpx;
display: flex;
.text {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: #ffc6ba;
font-size: 24rpx;
line-height: 100rpx;
text-align: center;
color: #55423b;
&.finish {
background-color: #bfe9ef;
}
}
}
.title {
width: 0;
flex-grow: 1;
box-sizing: border-box;
padding-left: 30rpx;
padding-right: 24rpx;
&-name {
font-weight: bold;
font-size: 30rpx;
color: #333;
}
&-desc {
margin-top: 8rpx;
font-size: 26rpx;
color: #555;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.actions {
width: 50rpx;
.icon {
display: inline-block;
width: 45rpx;
height: 45rpx;
background-color: rgba(96, 77, 68, 0.2);
border-radius: 50%;
text-align: center;
line-height: 45rpx;
font-size: 32rpx;
font-weight: bold;
}
}
}
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 24rpx;
border-radius: 50rpx;
border: 4rpx solid rgba(96, 77, 68, 0.9);
border-color: #fff;
// background-color: #faf8eb;
background-color: #ffffff;
margin-bottom: 36rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
animation-delay: var(--delay);
.body {
margin-top: 24rpx;
width: 100%;
background-color: #ffffff;
// background-color: #faf8eb;
background-color: rgba(96, 77, 68, 0.05);
border-radius: 24rpx;
box-sizing: border-box;
padding: 24rpx;
padding-bottom: 12rpx;
font-size: 26rpx;
}
&.ani {
// animation: cardAni 3s ease-in-out infinite;
}
.head {
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
.status {
width: 100rpx;
display: flex;
.text {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: #ffc6ba;
font-size: 24rpx;
line-height: 100rpx;
text-align: center;
color: #55423b;
&.finish {
background-color: #bfe9ef;
}
}
}
.title {
width: 0;
flex-grow: 1;
box-sizing: border-box;
padding-left: 30rpx;
padding-right: 24rpx;
&-name {
font-weight: bold;
font-size: 30rpx;
color: #333;
}
&-desc {
margin-top: 8rpx;
font-size: 26rpx;
color: #555;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.actions {
width: 50rpx;
.icon {
display: inline-block;
width: 45rpx;
height: 45rpx;
background-color: rgba(96, 77, 68, 0.2);
border-radius: 50%;
text-align: center;
line-height: 45rpx;
font-size: 32rpx;
font-weight: bold;
}
}
}
.body {
margin-top: 24rpx;
width: 100%;
background-color: #ffffff;
// background-color: #faf8eb;
background-color: rgba(96, 77, 68, 0.05);
border-radius: 24rpx;
box-sizing: border-box;
padding: 24rpx;
padding-bottom: 12rpx;
font-size: 26rpx;
}
}
@keyframes cardAni {
0% {
transform: translateY(0rpx);
}
0% {
transform: translateY(0rpx);
}
50% {
transform: translateY(-10rpx);
}
50% {
transform: translateY(-10rpx);
}
100% {
transform: translateY(0rpx);
}
100% {
transform: translateY(0rpx);
}
}
.desc {
display: flex;
margin-bottom: 12rpx;
&-label {
color: #333;
width: 140rpx;
// font-weight: bold;
}
&-value {
width: 0;
flex-grow: 1;
line-height: 1.5;
color: #333;
}
display: flex;
margin-bottom: 12rpx;
&-label {
color: #333;
width: 140rpx;
// font-weight: bold;
}
&-value {
width: 0;
flex-grow: 1;
line-height: 1.5;
color: #333;
}
}
</style>
pagesA/love/love.vue
+382 -322
View File
@@ -1,358 +1,418 @@
<template>
<view class="app-page bg-white">
<!-- 情侣信息 -->
<view class="lover-wrap" :style="[loveWrapStyle]">
<view class="lover-card">
<view class="boy">
<image class="avatar" :src="loveConfig.boy.avatar" mode="aspectFit"></image>
<view class="name">{{ loveConfig.boy.name }}</view>
</view>
<image class="like" :src="loveConfig.loveImageUrl" mode="scaleToFill"></image>
<view class="girl">
<image class="avatar" :src="loveConfig.girl.avatar" mode="aspectFit"></image>
<view class="name">{{ loveConfig.girl.name }}</view>
</view>
</view>
<image class="wave-image" :src="loveConfig.waveImageUrl" mode="scaleToFill"></image>
</view>
<!-- 恋爱记时 -->
<view class="love-time-wrap">
<view class="title">{{ loveConfig.timeTitle }}</view>
<view class="content">
<text class="text">
第
<text class="number">{{ loveDayCount.d }}</text>
天
</text>
<text class="text">
<text class="number">{{ loveDayCount.h }}</text>
小时
</text>
<text class="text">
<text class="number">{{ loveDayCount.m }}</text>
分钟
</text>
<text class="text">
<text class="number">{{ loveDayCount.s }}</text>
秒
</text>
</view>
</view>
<!-- 功能导航 -->
<view class="list-wrap">
<block v-for="(nav, index) in loveConfig.nav" :key="index">
<view v-if="nav.use" class="list-item" @click="fnToPage(nav.key)">
<view class="left"><image class="icon" :src="nav.iconImageUrl" mode="aspectFit"></image></view>
<view class="right">
<view class="name">{{ nav.title }}</view>
<view class="desc">{{ nav.desc }}</view>
</view>
</view>
</block>
</view>
</view>
<view class="app-page bg-white">
<!-- 情侣信息 -->
<view class="lover-wrap" :style="[loveWrapStyle]">
<view class="lover-card">
<view class="boy">
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="aspectFit"></image>
<view class="name">{{ loveConfig.loveInfo.boyNickname }}</view>
</view>
<image class="like" :src="$utils.checkImageUrl(loveConfig.loveImageUrl)" mode="scaleToFill"></image>
<view class="girl">
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFit"></image>
<view class="name">{{ loveConfig.loveInfo.girlNickname }}</view>
</view>
</view>
<image class="wave-image" :src="$utils.checkImageUrl(loveConfig.pageImages.waveImageUrl)" mode="scaleToFill"></image>
</view>
<!-- 恋爱记时 -->
<view class="love-time-wrap">
<view class="title">{{ loveConfig.loveDateTitle }}</view>
<view class="content">
<text class="text">
第
<text class="number">{{ loveDayCount.d }}</text>
天
</text>
<text class="text">
<text class="number">{{ loveDayCount.h }}</text>
小时
</text>
<text class="text">
<text class="number">{{ loveDayCount.m }}</text>
分钟
</text>
<text class="text">
<text class="number">{{ loveDayCount.s }}</text>
秒
</text>
</view>
</view>
<!-- 功能导航 -->
<view class="list-wrap">
<block v-for="(nav, index) in navList" :key="index">
<view v-if="nav.use" class="list-item" @click="fnToPage(nav.key)">
<view class="left">
<image class="icon" :src="nav.iconImageUrl" mode="aspectFit"></image>
</view>
<view class="right">
<view class="name">{{ nav.title }}</view>
<view class="desc">{{ nav.desc }}</view>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
import LoveConfig from '@/config/love.config.js';
export default {
data() {
return {
loveConfig: LoveConfig,
loveDayTimer: null,
loveDayCount: {
d: 0,
h: 0,
m: 0,
s: 0
}
};
},
computed: {
loveWrapStyle() {
return {
backgroundImage: `url(${this.loveConfig.bgImageUrl})`
};
}
},
onLoad() {
this.fnSetPageTitle('恋爱日记');
this.fnInitLoveDayCount();
},
methods: {
fnInitLoveDayCount() {
clearTimeout(this.loveDayTimer);
const _countDownFn = () => {
this.loveDayTimer = setTimeout(_countDownFn, 1000);
const formatStartDate = this.loveConfig.loveStartDate.replace(/-/g, '/');
const start = new Date(formatStartDate),
now = new Date();
const T = now.getTime() - start.getTime();
const i = 24 * 60 * 60 * 1000;
const d = T / i;
const D = Math.floor(d);
const h = (d - D) * 24;
const H = Math.floor(h);
const m = (h - H) * 60;
const M = Math.floor(m);
const s = (m - M) * 60;
const S = Math.floor(s);
this.loveDayCount = {
d: D,
h: H,
m: M,
s: S
};
};
_countDownFn();
},
fnToPage(pageName) {
uni.navigateTo({
url: `/pagesA/love/${pageName}`
});
}
}
data() {
return {
loveDayTimer: null,
loveDayCount: {
d: 0,
h: 0,
m: 0,
s: 0
},
navList: []
};
},
computed: {
loveConfig() {
return this.$tm.vx.getters().getConfigs.loveConfig;
},
loveWrapStyle() {
return {
backgroundImage: `url(${this.$utils.checkImageUrl(this.loveConfig.pageImages.bgImageUrl)})`
};
}
},
watch: {
loveConfig: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
if (!newVal) return;
this.initList(newVal)
this.fnInitLoveDayCount();
}
}
},
onLoad() {
this.fnSetPageTitle('恋爱日记');
},
methods: {
initList(configs) {
this.navList = [
{
key: 'journey',
use: configs.ourStory.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
title: '关于我们',
desc: '我们一起度过的那些经历'
},
{
key: 'album',
use: configs.lovePhoto.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
title: '恋爱相册',
desc: '定格了我们的那些小美好'
},
{
key: 'list',
use: configs.loveDaily.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png',
title: '恋爱清单',
desc: '你我之间的约定我们都在努力实现'
},
]
},
fnInitLoveDayCount() {
clearTimeout(this.loveDayTimer);
const _countDownFn = () => {
this.loveDayTimer = setTimeout(_countDownFn, 1000);
const formatStartDate = this.loveConfig.loveDate.replace(/-/g, '/');
const start = new Date(formatStartDate),
now = new Date();
const T = now.getTime() - start.getTime();
const i = 24 * 60 * 60 * 1000;
const d = T / i;
const D = Math.floor(d);
const h = (d - D) * 24;
const H = Math.floor(h);
const m = (h - H) * 60;
const M = Math.floor(m);
const s = (m - M) * 60;
const S = Math.floor(s);
this.loveDayCount = {
d: D,
h: H,
m: M,
s: S
};
};
_countDownFn();
},
fnToPage(pageName) {
uni.navigateTo({
url: `/pagesA/love/${pageName}`
});
}
}
};
</script>
<style scoped lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
background: linear-gradient(
-45deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1)
);
width: 100vw;
min-height: 100vh;
background: linear-gradient(
-45deg,
rgba(247, 149, 51, 0.1),
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1)
);
}
.lover-wrap {
position: relative;
width: 100vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
width: 100vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
&::before {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
background-color: rgba(255, 255, 255, 0.1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
z-index: 0;
backdrop-filter: blur(4rpx);
overflow: hidden;
}
&::after {
content: '';
position: absolute;
left: 0;
bottom: -60rpx;
width: 100vw;
height: 60rpx;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.lover-card {
position: absolute;
left: 50%;
top: 58%;
transform: translate(-50%, -50%);
width: 90vw;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 12rpx;
z-index: 2;
.avatar {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
box-sizing: border-box;
// border: 8rpx solid transparent;
// border: 8rpx solid rgba(255, 255, 255, 0.7) !important;
border: 8rpx solid rgba(255, 255, 255, 1) !important;
}
.name {
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
text-align: center;
letter-spacing: 2rpx;
}
.boy {
color: #3ab8e4;
.avatar {
border-color: rgba(58, 184, 228, 0.7);
}
}
.girl {
color: #f57ab3;
.avatar {
border-color: rgba(245, 122, 179, 0.7);
}
}
&::before {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
background-color: rgba(255, 255, 255, 0.1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
z-index: 0;
backdrop-filter: blur(4rpx);
overflow: hidden;
}
.like {
width: 120rpx;
height: 120rpx;
animation: likeani 1s ease-in-out infinite;
}
}
.wave-image {
width: 100%;
height: 120rpx;
position: absolute;
left: 0;
bottom: 0;
mix-blend-mode: screen;
}
&::after {
content: '';
position: absolute;
left: 0;
bottom: -60rpx;
width: 100vw;
height: 60rpx;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.lover-card {
position: absolute;
left: 50%;
top: 58%;
transform: translate(-50%, -50%);
width: 90vw;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 12rpx;
z-index: 2;
.avatar {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
box-sizing: border-box;
// border: 8rpx solid transparent;
// border: 8rpx solid rgba(255, 255, 255, 0.7) !important;
border: 8rpx solid rgba(255, 255, 255, 1) !important;
}
.name {
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
text-align: center;
letter-spacing: 2rpx;
}
.boy {
color: #3ab8e4;
.avatar {
border-color: rgba(58, 184, 228, 0.7);
}
}
.girl {
color: #f57ab3;
.avatar {
border-color: rgba(245, 122, 179, 0.7);
}
}
.like {
width: 120rpx;
height: 120rpx;
animation: likeani 1s ease-in-out infinite;
}
}
.wave-image {
width: 100%;
height: 120rpx;
position: absolute;
left: 0;
bottom: 0;
mix-blend-mode: screen;
}
}
.love-time-wrap {
margin-top: 80rpx;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 80rpx;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title {
font-size: 46rpx;
letter-spacing: 4rpx;
// background-image: linear-gradient(270deg, #ff4500, #ffa500, #ffd700, #90ee90, #00ffff, #1e90ff, #9370db, #ff69b4, #ff4500);
// -webkit-background-clip: text;
// color: #000;
color: #333;
font-size: 42rpx;
font-weight: bold;
// animation: loveTimeTitleAni 80s linear infinite;
}
.content {
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: center;
.title {
font-size: 46rpx;
letter-spacing: 4rpx;
// background-image: linear-gradient(270deg, #ff4500, #ffa500, #ffd700, #90ee90, #00ffff, #1e90ff, #9370db, #ff69b4, #ff4500);
// -webkit-background-clip: text;
// color: #000;
color: #333;
font-size: 42rpx;
font-weight: bold;
// animation: loveTimeTitleAni 80s linear infinite;
}
.text {
font-size: 28rpx;
}
.number {
margin: 0 8rpx;
font-size: 46rpx;
// color: #ff69b4;
color: #f83856;
font-weight: bold;
}
}
.content {
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: center;
.text {
font-size: 28rpx;
}
.number {
margin: 0 8rpx;
font-size: 46rpx;
// color: #ff69b4;
color: #f83856;
font-weight: bold;
}
}
}
.list-wrap {
margin-top: 75rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 36rpx;
margin-top: 75rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 36rpx;
.list-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 28rpx 32rpx;
background-color: #ffffff;
border-radius: 50rpx;
margin-bottom: 32rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
.list-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 28rpx 32rpx;
background-color: #ffffff;
border-radius: 50rpx;
margin-bottom: 32rpx;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
&:nth-child(1) {
animation: listItemAni1 3s ease-in-out infinite;
}
&:nth-child(2) {
animation: listItemAni1 3s ease-in-out infinite;
animation-delay: 1.5s;
}
&:nth-child(3) {
animation: listItemAni1 3s ease-in-out infinite;
animation-delay: 2s;
}
.left {
width: 120rpx;
height: 120rpx;
.icon {
width: 100%;
height: 100%;
}
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding-left: 40rpx;
.name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.desc {
margin-top: 8px;
font-size: 26rpx;
color: #777777;
}
}
}
&:nth-child(1) {
animation: listItemAni1 3s ease-in-out infinite;
}
&:nth-child(2) {
animation: listItemAni1 3s ease-in-out infinite;
animation-delay: 1.5s;
}
&:nth-child(3) {
animation: listItemAni1 3s ease-in-out infinite;
animation-delay: 2s;
}
.left {
width: 120rpx;
height: 120rpx;
.icon {
width: 100%;
height: 100%;
}
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding-left: 40rpx;
.name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.desc {
margin-top: 8px;
font-size: 26rpx;
color: #777777;
}
}
}
}
@keyframes likeani {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes loveTimeTitleAni {
to {
background-position: -200rem;
}
to {
background-position: -200rem;
}
}
@keyframes listItemAni1 {
0% {
transform: translateY(0rpx);
}
0% {
transform: translateY(0rpx);
}
50% {
transform: translateY(-10rpx);
}
50% {
transform: translateY(-10rpx);
}
100% {
transform: translateY(0rpx);
}
100% {
transform: translateY(0rpx);
}
}
</style>
pagesA/start/start.vue
+316 -273
View File
@@ -1,400 +1,443 @@
<template>
<view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle">
<view class="tn-satr">
<view class="sky"></view>
<view class="stars">
<view class="falling-stars">
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
</view>
<view class="small-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
<view class="medium-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
</view>
</view>
<view class="app-page bg-gradient-blue-lighten-b" :style="pageStyle">
<view class="tn-satr">
<view class="sky"></view>
<view class="stars">
<view class="falling-stars">
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
</view>
<view class="small-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
<view class="medium-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
</view>
</view>
<view class="user-info__container flex flex-col flex-center">
<image class="user-info__avatar" :src="startInfo.logo" mode="aspectFill"></image>
<view class="user-info__nick-name">「 {{ startInfo.title }} 」</view>
</view>
<view class="user-info__container flex flex-col flex-center">
<image class="user-info__avatar" :src="startConfig.logo" mode="aspectFill"></image>
<view class="user-info__nick-name">「 {{ startConfig.title }} 」</view>
</view>
<view class="text-align-center text-white" style="padding: 60vh 0 0 0;">
<view class="" style="font-size: 44rpx;" v-if="startInfo.desc1">{{ startInfo.desc1 }}</view>
<view class="mt-30 text-size-m" v-if="startInfo.desc2">{{ startInfo.desc2 }}</view>
</view>
<view class="text-align-center text-white" style="padding: 60vh 0 0 0;">
<view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }}</view>
<view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</view>
</view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<view class="start-btn" @click="fnStart()">{{ startInfo.btnText || '开始体验' }}</view>
</view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<view class="start-btn" @click="fnStart()">{{ startConfig.btnText || '开始体验' }}</view>
</view>
<!-- 波浪效果 -->
<wave></wave>
</view>
<!-- 波浪效果 -->
<wave></wave>
</view>
</template>
<script>
import wave from '@/components/wave/wave.vue';
export default {
components: { wave },
computed: {
startInfo() {
return getApp().globalData.start;
},
pageStyle() {
if (this.startInfo.bg) {
const _bg = this.$utils.checkIsUrl(this.startInfo.bg) ? `url(${this.startInfo.bg})` : this.startInfo.bg;
return {
background: _bg + '!important'
};
}
return {};
}
},
methods: {
fnStart() {
uni.switchTab({
url: '/pages/tabbar/home/home',
success: () => {
uni.setStorageSync('APP_HAS_STARTED', true);
}
});
}
}
components: {
wave
},
computed: {
startConfig() {
return this.$tm.vx.getters().getConfigs.startConfig;
},
pageStyle() {
if (this.startConfig.bg) {
const _bg = this.$utils.checkIsUrl(this.startConfig.bg) ? `url(${this.startConfig.bg})` : this
.startConfig.bg;
return {
background: _bg + '!important'
};
}
return {};
}
},
methods: {
fnStart() {
uni.switchTab({
url: '/pages/tabbar/home/home',
success: () => {
uni.setStorageSync('APP_HAS_STARTED', true);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
height: 100vh;
width: 100vw;
height: 100vh;
}
.start-btn {
box-sizing: border-box;
background-color: transparent;
padding: 16rpx 50rpx;
border-radius: 50rpx;
border: 2rpx solid #ffffff;
color: #ffffff;
text-align: center;
font-size: 28rpx;
box-sizing: border-box;
background-color: transparent;
padding: 16rpx 50rpx;
border-radius: 50rpx;
border: 2rpx solid #ffffff;
color: #ffffff;
text-align: center;
font-size: 28rpx;
}
/* 用户信息 start */
.user-info {
&__container {
position: absolute;
top: 25vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&__container {
position: absolute;
top: 25vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&__avatar {
width: 200rpx;
height: 200rpx;
border: 8rpx solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__avatar {
width: 200rpx;
height: 200rpx;
border: 8rpx solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
color: #ffffff;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
&__nick-name {
color: #ffffff;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 流星*/
.tn-satr {
position: fixed;
width: 100%;
height: 600px;
overflow: hidden;
flex-shrink: 0;
z-index: 998;
position: fixed;
width: 100%;
height: 600px;
overflow: hidden;
flex-shrink: 0;
z-index: 998;
}
.stars {
position: absolute;
z-index: 1;
width: 100%;
height: 400px;
position: absolute;
z-index: 1;
width: 100%;
height: 400px;
}
.star {
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
}
.small-stars .star {
position: absolute;
width: 3px;
height: 3px;
position: absolute;
width: 3px;
height: 3px;
}
.small-stars .star:nth-child(2n) {
opacity: 0;
-webkit-animation: star-blink 1.2s linear infinite alternate;
animation: star-blink 1.2s linear infinite alternate;
opacity: 0;
-webkit-animation: star-blink 1.2s linear infinite alternate;
animation: star-blink 1.2s linear infinite alternate;
}
.small-stars .star:nth-child(1) {
left: 40px;
bottom: 50px;
left: 40px;
bottom: 50px;
}
.small-stars .star:nth-child(2) {
left: 200px;
bottom: 40px;
left: 200px;
bottom: 40px;
}
.small-stars .star:nth-child(3) {
left: 60px;
bottom: 120px;
left: 60px;
bottom: 120px;
}
.small-stars .star:nth-child(4) {
left: 140px;
bottom: 250px;
left: 140px;
bottom: 250px;
}
.small-stars .star:nth-child(5) {
left: 400px;
bottom: 300px;
left: 400px;
bottom: 300px;
}
.small-stars .star:nth-child(6) {
left: 170px;
bottom: 80px;
left: 170px;
bottom: 80px;
}
.small-stars .star:nth-child(7) {
left: 200px;
bottom: 360px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
left: 200px;
bottom: 360px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.small-stars .star:nth-child(8) {
left: 250px;
bottom: 320px;
left: 250px;
bottom: 320px;
}
.small-stars .star:nth-child(9) {
left: 300px;
bottom: 340px;
left: 300px;
bottom: 340px;
}
.small-stars .star:nth-child(10) {
left: 130px;
bottom: 320px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
left: 130px;
bottom: 320px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.small-stars .star:nth-child(11) {
left: 230px;
bottom: 330px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
left: 230px;
bottom: 330px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.small-stars .star:nth-child(12) {
left: 300px;
bottom: 360px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
left: 300px;
bottom: 360px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
@keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
.medium-stars .star {
position: absolute;
width: 3px;
height: 3px;
opacity: 0;
-webkit-animation: star-blink 1.2s ease-in infinite alternate;
animation: star-blink 1.2s ease-in infinite alternate;
position: absolute;
width: 3px;
height: 3px;
opacity: 0;
-webkit-animation: star-blink 1.2s ease-in infinite alternate;
animation: star-blink 1.2s ease-in infinite alternate;
}
.medium-stars .star:nth-child(1) {
left: 300px;
bottom: 50px;
left: 300px;
bottom: 50px;
}
.medium-stars .star:nth-child(2) {
left: 400px;
bottom: 40px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
left: 400px;
bottom: 40px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.medium-stars .star:nth-child(3) {
left: 330px;
bottom: 300px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
left: 330px;
bottom: 300px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.medium-stars .star:nth-child(4) {
left: 460px;
bottom: 300px;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
left: 460px;
bottom: 300px;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.medium-stars .star:nth-child(5) {
left: 300px;
bottom: 150px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
left: 300px;
bottom: 150px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(6) {
left: 440px;
bottom: 120px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
left: 440px;
bottom: 120px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(7) {
left: 200px;
bottom: 140px;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
left: 200px;
bottom: 140px;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.medium-stars .star:nth-child(8) {
left: 30px;
bottom: 480px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
left: 30px;
bottom: 480px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.medium-stars .star:nth-child(9) {
left: 460px;
bottom: 400px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
left: 460px;
bottom: 400px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(10) {
left: 150px;
bottom: 10px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
left: 150px;
bottom: 10px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(11) {
left: 420px;
bottom: 450px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
left: 420px;
bottom: 450px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(12) {
left: 340px;
bottom: 180px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
left: 340px;
bottom: 180px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
@keyframes star-blink {
50% {
width: 4px;
height: 4px;
opacity: 1;
}
50% {
width: 4px;
height: 4px;
opacity: 1;
}
}
.star-fall {
position: relative;
border-radius: 2px;
width: 80px;
height: 2px;
overflow: hidden;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
position: relative;
border-radius: 2px;
width: 80px;
height: 2px;
overflow: hidden;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.star-fall:after {
content: '';
position: absolute;
width: 50px;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
left: 100%;
-webkit-animation: star-fall 3.6s linear infinite;
animation: star-fall 3.6s linear infinite;
content: '';
position: absolute;
width: 50px;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
left: 100%;
-webkit-animation: star-fall 3.6s linear infinite;
animation: star-fall 3.6s linear infinite;
}
.star-fall:nth-child(1) {
left: 80px;
bottom: -100px;
left: 80px;
bottom: -100px;
}
.star-fall:nth-child(1):after {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.star-fall:nth-child(2) {
left: 200px;
bottom: -200px;
left: 200px;
bottom: -200px;
}
.star-fall:nth-child(2):after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.star-fall:nth-child(3) {
left: 430px;
bottom: -50px;
left: 430px;
bottom: -50px;
}
.star-fall:nth-child(3):after {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.star-fall:nth-child(4) {
left: 400px;
bottom: 100px;
left: 400px;
bottom: 100px;
}
.star-fall:nth-child(4):after {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
20% {
left: -100%;
}
100% {
left: -100%;
}
}
@keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
20% {
left: -100%;
}
100% {
left: -100%;
}
}
</style>
pagesA/submit-link/submit-link.vue
+20 -15
View File
@@ -53,12 +53,12 @@
<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>
<image :src="blogDetail.blogLogo" 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-name text-size-lg text-weight-b">{{ blogDetail.blogName }}</view>
<view class="poup-tag ml--10 text-size-n mt-10 text-grey">
{{ blogDetail.description }}
{{ blogDetail.blogDesc }}
</view>
</view>
</view>
@@ -69,12 +69,12 @@
<!-- 博客预览图 -->
<view class="mt-24">
<tm-images :round="2" :src="caclSiteThumbnail(blogDetail.url)" :width="568"
<tm-images :round="2" :src="calcSiteThumbnail(blogDetail.blogUrl)" :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 theme="light-blue" size="n" @click="fnCopyLink(blogDetail.blogUrl)">复制友链交换信息</tm-button>
<tm-button text theme="white" @click="blogDetailPoupShow = false">关闭</tm-button>
</view>
</tm-poup>
@@ -117,7 +117,6 @@ export default {
data() {
return {
blogDetailPoupShow: false,
blogDetail: this.$haloPluginsConfig.autoSubmitLink.blogDetail,
form: {
url: '', // 网址
name: '', // 名称
@@ -129,10 +128,16 @@ export default {
};
},
computed: {
caclSiteThumbnail(val) {
haloPluginConfigs(){
return this.$tm.vx.getters().getConfigs.pluginConfig;
},
blogDetail() {
return this.haloPluginConfigs.submitLink;
},
calcSiteThumbnail(val) {
return val => {
if (!val) return '';
if (val.charAt(val.length - 1) != '/') {
if (val.charAt(val.length - 1) !== '/') {
val = val + '/';
}
return 'https://image.thum.io/get/width/1000/crop/800/' + val;
@@ -140,17 +145,17 @@ export default {
},
calcBlogContent() {
return `
博客名称：${this.blogDetail.name}
博客地址：${this.blogDetail.url}
博客logo：${this.blogDetail.logo}
博客简介：${this.blogDetail.description}
博客名称：${this.blogDetail.blogName}
博客地址：${this.blogDetail.blogUrl}
博客logo：${this.blogDetail.blogLogo}
博客简介：${this.blogDetail.blogDesc}
`
},
calcBlogCoupon() {
return {
img: this.blogDetail.logo,
title: this.blogDetail.name,
time: this.blogDetail.description,
img: this.blogDetail.blogLogo,
title: this.blogDetail.blogName,
time: this.blogDetail.blogDesc,
btnText: '友链详情'
}
}
pagesA/tag-detail/tag-detail.vue
+144 -140
View File
@@ -1,151 +1,155 @@
<template>
<view class="app-page">
<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>
</view>
<block v-else>
<view class="empty" v-if="dataList.length == 0"><tm-empty icon="icon-shiliangzhinengduixiang-"
label="该标签下暂无文章"></tm-empty></view>
<block v-else>
<block v-for="(article, index) in dataList" :key="article.metadata.name">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
</block>
<view class="load-text">{{ loadMoreText }}</view>
</block>
<view class="app-page">
<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>
</view>
<block v-else>
<view class="empty" v-if="dataList.length == 0">
<tm-empty icon="icon-shiliangzhinengduixiang-"
label="该标签下暂无文章"></tm-empty>
</view>
<block v-else>
<block v-for="(article, index) in dataList" :key="article.metadata.name">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<article-card :article="article" @on-click="fnToArticleDetail"></article-card>
</tm-translate>
</block>
<view class="load-text">{{ loadMoreText }}</view>
</block>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
</block>
</view>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
</block>
</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 tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import ArticleCard from '@/components/article-card/article-card.vue';
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmEmpty,
ArticleCard
},
data() {
return {
loading: 'loading',
queryParams: {
name: "",
size: 10,
page: 0
},
name: '',
pageTitle: '加载中...',
dataList: [],
hasNext:false,
isLoadMore: false,
loadMoreText: ''
};
},
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 tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import ArticleCard from '@/components/article-card/article-card.vue';
onLoad(e) {
this.name = e.name;
this.queryParams.name = this.name;
this.pageTitle = e.title;
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getPostByTagName(this.name, this.queryParams)
.then(res => {
this.fnSetPageTitle(`${this.pageTitle} （共${res.total}篇）`);
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.items);
} else {
this.dataList = res.items;
}
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right'
});
}
}
};
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmEmpty,
ArticleCard
},
data() {
return {
loading: 'loading',
queryParams: {
name: "",
size: 10,
page: 0
},
name: '',
pageTitle: '加载中...',
dataList: [],
hasNext: false,
isLoadMore: false,
loadMoreText: ''
};
},
onLoad(e) {
this.name = e.name;
this.queryParams.name = this.name;
this.pageTitle = e.title;
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
// uni.showLoading({
// mask: true,
// title: '加载中...'
// });
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getPostByTagName(this.name, this.queryParams)
.then(res => {
this.fnSetPageTitle(`${this.pageTitle} （共${res.total}篇）`);
this.hasNext = res.hasNext;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.items);
} else {
this.dataList = res.items;
}
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
setTimeout(() => {
this.loading = 'success';
}, 500);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
//跳转文章详情
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right'
});
}
}
};
</script>
<style lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24rpx 0;
background-color: #fafafd;
}
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24rpx 0;
background-color: #fafafd;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
.empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
pagesA/tags/tags.vue
+5 -5
View File
@@ -1,13 +1,13 @@
<template>
<view>文章标签页面</view>
<view>文章标签页面</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
data() {
return {};
},
methods: {}
};
</script>