mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,94 @@
|
||||
<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="">根据 MIT 许可证发布</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: {}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
}
|
||||
.text-overflow {
|
||||
width: calc(100vw - 300rpx);
|
||||
text-align: right;
|
||||
}
|
||||
.list-group {
|
||||
::v-deep {
|
||||
.left {
|
||||
width: 160rpx;
|
||||
min-width: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,340 @@
|
||||
<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 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="(postIndex + 1) * 50">
|
||||
<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';
|
||||
|
||||
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) {
|
||||
// todo:
|
||||
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;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.list-empty {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.statistics {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.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 {
|
||||
.tm-timeline-item {
|
||||
.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-jidian {
|
||||
margin: auto;
|
||||
}
|
||||
&.tm-timeline-item--leftDir {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
&.endright {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
width: 560rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
&.lr_image_text {
|
||||
}
|
||||
&.lr_text_image {
|
||||
.post-thumbnail {
|
||||
order: 2;
|
||||
}
|
||||
.post-info {
|
||||
order: 1;
|
||||
padding-left: 0;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
}
|
||||
&.tb_image_text {
|
||||
flex-direction: column;
|
||||
.post-thumbnail {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
}
|
||||
.post-info {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
&_title {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
&_time {
|
||||
.iconfont {
|
||||
display: none;
|
||||
}
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tb_text_image {
|
||||
flex-direction: column;
|
||||
.post-thumbnail {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.post-info {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
|
||||
&_time {
|
||||
.iconfont {
|
||||
display: none;
|
||||
}
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.only_text {
|
||||
.post-info {
|
||||
padding: 6rpx;
|
||||
&_time {
|
||||
margin-top: 20rpx;
|
||||
.iconfont {
|
||||
display: none;
|
||||
}
|
||||
.time-label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-thumbnail {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-thumbnail {
|
||||
border-radius: 6rpx;
|
||||
width: 200rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
.post-info {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
&_title {
|
||||
color: #303133;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&_summary {
|
||||
display: -webkit-box;
|
||||
line-height: 1.6;
|
||||
}
|
||||
&_time {
|
||||
.time-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,771 @@
|
||||
<template>
|
||||
<view class="app-page">
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
</view>
|
||||
<block v-else>
|
||||
<!-- 顶部信息 -->
|
||||
<view class="head ma-24">
|
||||
<view class="title">{{ result.title }}</view>
|
||||
<view class="detail">
|
||||
<view class="author">
|
||||
<text class="author-name">{{ author.name }}</text>
|
||||
<text class="author-time">发布于：{{ { d: result.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}</text>
|
||||
</view>
|
||||
|
||||
<view class="cover" v-if="result.thumbnail"><image class="cover-img" mode="aspectFill" :src="calcUrl(result.thumbnail)"></image></view>
|
||||
<!-- <view class="mt-24">
|
||||
<text class="category-tag" v-for="(item, index) in result.tags" :key="index">{{ item.name }}</text>
|
||||
</view> -->
|
||||
<view class="count" :class="{ 'no-thumbnail': !result.thumbnail }">
|
||||
<view class="count-item">
|
||||
<text class="value">{{ result.visits }}</text>
|
||||
<text class="label">阅读</text>
|
||||
</view>
|
||||
<view class="count-item">
|
||||
<text class="value">{{ result.likes }}</text>
|
||||
<text class="label">喜欢</text>
|
||||
</view>
|
||||
<view class="count-item">
|
||||
<text class="value">{{ result.commentCount }}</text>
|
||||
<text class="label">评论</text>
|
||||
</view>
|
||||
<view class="count-item">
|
||||
<text class="value">{{ result.wordCount }}</text>
|
||||
<text class="label">字数</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
<view class="category">
|
||||
<view class="">
|
||||
分类：
|
||||
<text class="category-tag" v-for="(item, index) in result.categories" :key="index">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="mt-18">
|
||||
标签：
|
||||
<text class="category-tag" v-for="(item, index) in result.tags" :key="index">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 广告区域 -->
|
||||
<view v-if="haloAdConfig.articleDetail.use" class="ad-wrap ma-24 mb-0">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.unitId" :unit-id="haloAdConfig.unitId"></ad>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.adpid" :adpid="haloAdConfig.adpid"></ad>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<view class="content ml-24 mr-24">
|
||||
<!-- markdown渲染 -->
|
||||
<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"
|
||||
:markdown="true"
|
||||
:showLineNumber="true"
|
||||
:showLanguageName="true"
|
||||
:copyByLongPress="true"
|
||||
/>
|
||||
|
||||
<!-- 广告区域 -->
|
||||
<view v-if="haloAdConfig.articleDetail.use" class="ad-wrap mt-24 mb-24 ">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.unitId" :unit-id="haloAdConfig.unitId"></ad>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.adpid" :adpid="haloAdConfig.adpid"></ad>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- 免责声明：todo -->
|
||||
|
||||
<!-- 评论展示区域 -->
|
||||
<view class="comment-wrap mt-24 pa-24 round-4"><commentList :postId="result.id" :post="result" @on-comment-detail="fnOnShowCommentDetail"></commentList></view>
|
||||
</view>
|
||||
|
||||
<!-- 返回顶部 -->
|
||||
<tm-flotbutton :offset="[16, 80]" icon="icon-angle-up" color="bg-gradient-light-blue-accent" @click="fnToTopPage()"></tm-flotbutton>
|
||||
<tm-flotbutton :actions="btnOption.actions" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @change="fnOnFlotButtonChange"></tm-flotbutton>
|
||||
</block>
|
||||
|
||||
<!-- 评论详情 -->
|
||||
<tm-poup v-model="commentDetail.show" height="auto" :round="6" :over-close="true" position="bottom">
|
||||
<view class="pa-24">
|
||||
<view class="poup-head pb-24">
|
||||
<view class="poup-title text-align-center text-size-g text-weight-b mb-32">评论详情</view>
|
||||
<comment-item :useContentBg="false" :useActions="false" :isChild="false" :comment="commentDetail.comment" :postId="result.id"></comment-item>
|
||||
</view>
|
||||
|
||||
<scroll-view :scroll-y="true" class="poup-body">
|
||||
<view v-if="commentDetail.loading != 'success'" class="poup-loading-wrap flex flex-center">
|
||||
<view v-if="commentDetail.loading == 'loading'" class="loading flex flex-center flex-col">
|
||||
<text class="e-loading-icon iconfont icon-loading text-blue"></text>
|
||||
<view class="text-size-n text-grey-lighten-1 py-12 mt-12">加载中，请稍等...</view>
|
||||
</view>
|
||||
<view v-else-if="commentDetail.loading == 'error'" class="error">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败">
|
||||
<tm-button theme="bg-gradient-light-blue-accent" size="m" v-if="!disallowComment" @click="fnGetChildComments()">刷新试试</tm-button>
|
||||
</tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<block v-else>
|
||||
<view v-if="commentDetail.list.length == 0" class="poup-empty flex flex-center">
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="没有更多评论啦~"></tm-empty>
|
||||
</view>
|
||||
|
||||
<block v-else>
|
||||
<comment-item
|
||||
v-for="(comment, index) in commentDetail.list"
|
||||
:useContentBg="false"
|
||||
:useSolid="false"
|
||||
:useActions="false"
|
||||
:key="index"
|
||||
:isChild="false"
|
||||
:comment="comment"
|
||||
:postId="result.id"
|
||||
></comment-item>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
|
||||
<!-- 海报 -->
|
||||
<tm-poup v-model="poster.show" width="90vw" height="auto" :round="6" :over-close="true" position="center">
|
||||
<view class="poster-content pt-12 bg-white">
|
||||
<view v-if="poster.loading" class="poster-loading flex flex-center text-grey-darken-1">
|
||||
<text class="e-loading-icon iconfont icon-loading"></text>
|
||||
<text class="ml-6">海报正在生成...</text>
|
||||
</view>
|
||||
<block v-if="poster.showCanvas">
|
||||
<r-canvas ref="rCanvas"></r-canvas>
|
||||
<view class="poster-save ma-24 mt-0 pt-20 flex flex-center">
|
||||
<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnSavePoster()">保存到相册</tm-button>
|
||||
<tm-button v-if="false" theme="bg-gradient-orange-accent" size="m" @click="fnShareTo()">分享给好友</tm-button>
|
||||
<tm-button theme="bg-gradient-blue-grey-accent" size="m" @click="fnOnPosterClose()">关 闭</tm-button>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownConfig from '@/common/markdown/markdown.config.js';
|
||||
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
|
||||
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
|
||||
import commentList from '@/components/comment-list/comment-list.vue';
|
||||
import commentItem from '@/components/comment-item/comment-item.vue';
|
||||
|
||||
import rCanvas from '@/components/r-canvas/r-canvas.vue';
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmPoup,
|
||||
tmFlotbutton,
|
||||
tmButton,
|
||||
tmEmpty,
|
||||
mpHtml,
|
||||
commentList,
|
||||
commentItem,
|
||||
rCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
markdownConfig: MarkdownConfig,
|
||||
btnOption: {
|
||||
actions: [
|
||||
{
|
||||
icon: 'icon-like',
|
||||
color: 'bg-gradient-orange-accent'
|
||||
},
|
||||
{
|
||||
icon: 'icon-commentdots-fill',
|
||||
color: 'bg-gradient-green-accent'
|
||||
},
|
||||
{
|
||||
icon: 'icon-share1',
|
||||
color: 'bg-gradient-blue-accent'
|
||||
}
|
||||
]
|
||||
},
|
||||
queryParams: {
|
||||
articleId: null
|
||||
},
|
||||
result: {},
|
||||
|
||||
commentDetail: {
|
||||
loading: 'loading',
|
||||
show: false,
|
||||
comment: {},
|
||||
postId: undefined,
|
||||
list: []
|
||||
},
|
||||
poster: {
|
||||
show: false,
|
||||
showCanvas: false,
|
||||
loading: true,
|
||||
res: null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
calcUrl() {
|
||||
return url => {
|
||||
if (this.$utils.checkIsUrl(url)) {
|
||||
return url;
|
||||
}
|
||||
return getApp().globalData.baseApiUrl + url;
|
||||
};
|
||||
},
|
||||
// 获取博主信息
|
||||
bloggerInfo() {
|
||||
let blogger = this.$tm.vx.getters().blogger.getBlogger;
|
||||
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
|
||||
return blogger;
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.fnSetPageTitle('文章加载中...');
|
||||
this.queryParams.articleId = e.articleId;
|
||||
this.fnGetData();
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
this.loading = 'loading';
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$httpApi
|
||||
.getArticleDetail(this.queryParams.articleId)
|
||||
.then(res => {
|
||||
this.result = res.data;
|
||||
this.fnSetPageTitle('文章详情');
|
||||
this.loading = 'success';
|
||||
this.fnSetWxShareInfo();
|
||||
})
|
||||
.catch(err => {
|
||||
this.loading = 'error';
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
fnSetWxShareInfo() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.$tm.vx.commit('setWxShare', {
|
||||
title: this.result.title,
|
||||
desc: this.result.summary,
|
||||
// imageUrl: this.poster.res.tempFilePath,
|
||||
imageUrl: this.$utils.checkThumbnailUrl(this.result.thumbnail),
|
||||
path: `/pagesA/article-detail/article-detail?articleId=${this.queryParams.articleId}`,
|
||||
copyLink: this.$haloConfig.apiUrl,
|
||||
query: {}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 浮动按钮点击
|
||||
fnOnFlotButtonChange(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
this.fnDoLikes();
|
||||
break;
|
||||
case 1:
|
||||
this.fnToComment();
|
||||
break;
|
||||
case 2:
|
||||
this.fnShowShare();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
fnToComment() {
|
||||
this.$Router.push({
|
||||
path: '/pagesA/comment/comment',
|
||||
query: {
|
||||
id: this.result.id,
|
||||
parentId: 0,
|
||||
title: this.result.title,
|
||||
from: 'posts',
|
||||
formPage: 'comment_list',
|
||||
type: 'post'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fnDoLikes() {
|
||||
this.$httpApi
|
||||
.postLikePost(this.result.id)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.result.likes += 1;
|
||||
uni.$tm.toast('\(^o^)/~点赞成功!');
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
});
|
||||
});
|
||||
},
|
||||
fnShowShare() {
|
||||
this.poster.show = true;
|
||||
setTimeout(() => {
|
||||
this.poster.showCanvas = true;
|
||||
this.fnCreatePoster(res => {
|
||||
this.poster.res = res;
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
// 绘制虚线：https://blog.csdn.net/a460550542/article/details/124821248
|
||||
drawDashedLine(ctx, x, y, w, h, pattern, color) {
|
||||
ctx.lineWidth = h;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.setLineDash(pattern);
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(w, y);
|
||||
ctx.stroke();
|
||||
y += 20;
|
||||
},
|
||||
fnCreatePoster(callback) {
|
||||
this.$nextTick(async () => {
|
||||
const systemInfo = await uni.getSystemInfoSync();
|
||||
// 初始化
|
||||
await this.$refs.rCanvas.init({
|
||||
canvas_id: 'rCanvas',
|
||||
// canvas_width: systemInfo.windowWidth - uni.upx2px(76),
|
||||
canvas_width: 337,
|
||||
canvas_height: 460,
|
||||
background_color: 'rgba(255,255,255,0)'
|
||||
});
|
||||
// 画圆角背景
|
||||
await this.$refs.rCanvas
|
||||
.fillRoundRect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 337,
|
||||
h: 460,
|
||||
radius: 12,
|
||||
fill_color: '#fff'
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
console.log(this.$utils.checkAvatarUrl(this.bloggerInfo.avatar, true));
|
||||
// 博主信息
|
||||
await this.$refs.rCanvas
|
||||
.drawImage({
|
||||
url: this.$utils.checkAvatarUrl(this.bloggerInfo.avatar, true),
|
||||
x: 12,
|
||||
y: 12,
|
||||
w: 48,
|
||||
h: 48,
|
||||
border_radius: 24
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: this.bloggerInfo.nickname,
|
||||
max_width: 0,
|
||||
x: 70,
|
||||
y: 30,
|
||||
font_color: '#000',
|
||||
font_size: 15
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: this.bloggerInfo.description,
|
||||
max_width: 0,
|
||||
x: 70,
|
||||
y: 52,
|
||||
font_color: '#666',
|
||||
font_size: 12
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
// 文章封面图
|
||||
await this.$refs.rCanvas
|
||||
.drawImage({
|
||||
url: this.$utils.checkThumbnailUrl(this.result.thumbnail),
|
||||
x: 12,
|
||||
y: 75,
|
||||
w: 312,
|
||||
h: 180,
|
||||
border_radius: 6
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
// 文章标题
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: this.result.title,
|
||||
max_width: 312,
|
||||
line_clamp: 1,
|
||||
x: 12,
|
||||
y: 285,
|
||||
font_weight: 'bold',
|
||||
font_color: '#333',
|
||||
font_size: 14
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: this.result.summary,
|
||||
max_width: 312,
|
||||
line_clamp: 2,
|
||||
x: 12,
|
||||
y: 310,
|
||||
font_color: '#333',
|
||||
font_size: 13,
|
||||
line_height: 20
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
this.drawDashedLine(this.$refs.rCanvas.ctx, 14, 356, 332, 0.5, [8, 5, 5, 5], '#999');
|
||||
|
||||
// 小程序信息
|
||||
await this.$refs.rCanvas
|
||||
.drawImage({
|
||||
url: this.$haloConfig.miniCodeImageUrl,
|
||||
x: 20,
|
||||
y: 360,
|
||||
w: 80,
|
||||
h: 80
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: '长按识别小程序',
|
||||
x: 150,
|
||||
y: 390,
|
||||
font_color: '#333',
|
||||
font_size: 15,
|
||||
font_weight: 'bold',
|
||||
line_height: 22
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
await this.$refs.rCanvas
|
||||
.drawText({
|
||||
text: '关注我，给你分享更多有趣的知识',
|
||||
x: 115,
|
||||
y: 425,
|
||||
font_color: '#333',
|
||||
font_size: 12,
|
||||
line_height: 22
|
||||
})
|
||||
.catch(err_msg => {
|
||||
uni.showToast({
|
||||
title: err_msg,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
// 生成海报
|
||||
await this.$refs.rCanvas.draw(res => {
|
||||
//res.tempFilePath：生成成功，返回base64图片
|
||||
// 保存图片
|
||||
this.poster.loading = false;
|
||||
callback(res);
|
||||
});
|
||||
});
|
||||
},
|
||||
fnOnPosterClose() {
|
||||
this.poster.show = false;
|
||||
this.poster.showCanvas = false;
|
||||
this.poster.loading = true;
|
||||
},
|
||||
fnSavePoster() {
|
||||
this.$refs.rCanvas.saveImage(this.poster.res.tempFilePath);
|
||||
},
|
||||
fnShareTo() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.$tm.toast('点击右上角分享给好友！');
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: this.$haloConfig.apiUrl,
|
||||
title: this.result.title,
|
||||
summary: this.result.summary,
|
||||
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 { postId, comment } = data;
|
||||
this.commentDetail.comment = comment;
|
||||
this.commentDetail.postId = postId;
|
||||
this.commentDetail.list = [];
|
||||
this.commentDetail.show = true;
|
||||
this.fnGetChildComments();
|
||||
},
|
||||
fnGetChildComments() {
|
||||
this.commentDetail.loading = 'loading';
|
||||
this.$httpApi
|
||||
.getPostChildrenCommentList(this.commentDetail.postId, this.commentDetail.comment.id, {})
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.commentDetail.loading = 'success';
|
||||
this.commentDetail.list = res.data;
|
||||
} else {
|
||||
this.commentDetail.loading = 'error';
|
||||
}
|
||||
console.log('getPostChildrenCommentList', res);
|
||||
})
|
||||
.catch(err => {
|
||||
this.commentDetail.loading = 'error';
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fafafd;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 0 24rpx;
|
||||
height: inherit;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 36rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
// box-shadow: 0rpx 6rpx 30rpx rgba(182, 223, 255, 0.3);
|
||||
|
||||
border-radius: 24rpx;
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.detail {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
font-size: 26rpx;
|
||||
.author {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
&-name {
|
||||
}
|
||||
&-time {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
.count {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&.no-thumbnail {
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
padding-top: 12rpx;
|
||||
.count-item {
|
||||
position: relative;
|
||||
color: #666;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #eee;
|
||||
width: 2rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.category {
|
||||
margin: 0 24rpx;
|
||||
padding: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
// box-shadow: 0rpx 0rpx 24rpx rgba(182, 223, 255, 0.3);
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
// border: 2rpx solid #f8f8f8;
|
||||
font-size: 28rpx;
|
||||
&-tag {
|
||||
background-color: #5bb8fa;
|
||||
color: #fff;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.category-tag + .category-tag {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.content {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.ad-wrap {
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.comment-wrap {
|
||||
background-color: #fff;
|
||||
}
|
||||
.poup-head {
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
.poup-body {
|
||||
height: 50vh;
|
||||
}
|
||||
.poup-empty {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
.poup-loading-wrap {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
|
||||
.e-loading-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
.poster-content {
|
||||
width: 100%;
|
||||
min-height: 60vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.poster-loading {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background-color: rgba(0, 0, 0, 0.1);
|
||||
z-index: 666;
|
||||
}
|
||||
.poster-save {
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx dashed #eee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<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" @confirm="fnOnSearch"></tm-search>
|
||||
<tm-tabs color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
|
||||
</view>
|
||||
<!-- 占位区域 -->
|
||||
<view style="width: 100vw;height: 184rpx;"></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 icon="icon-shiliangzhinengduixiang-" label="该分类下暂无数据"></tm-empty>
|
||||
</view>
|
||||
<block v-else>
|
||||
<block v-for="(article, index) in dataList" :key="article.id">
|
||||
<!-- 文章卡片 -->
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<article-card :article="article" @on-click="fnToArticleDetail"></article-card>
|
||||
<!-- 广告区域 -->
|
||||
<view v-if="haloAdConfig.articles.use && (index + 1) % haloAdConfig.frequency == 0" class="ad-wrap ma-24">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.unitId" :unit-id="haloAdConfig.unitId"></ad>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.adpid" :adpid="haloAdConfig.adpid"></ad>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<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';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmSearch,
|
||||
tmTranslate,
|
||||
tmTabs,
|
||||
tmFlotbutton,
|
||||
tmEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBlackTheme: false,
|
||||
loading: 'loading',
|
||||
tab: {
|
||||
activeIndex: 0,
|
||||
list: ['全部', '最新文章', '热门文章', '最近更新', '最多点赞']
|
||||
},
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0,
|
||||
sort: 'topPriority,createTime,desc',
|
||||
keyword: ''
|
||||
},
|
||||
cache: {
|
||||
dataList: [],
|
||||
total: 0
|
||||
},
|
||||
isLoadMore: false,
|
||||
loadMoreText: '加载中...',
|
||||
result: {},
|
||||
dataList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('文章列表');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnGetData();
|
||||
},
|
||||
|
||||
onReachBottom(e) {
|
||||
if (this.result.hasNext) {
|
||||
this.queryParams.page += 1;
|
||||
this.isLoadMore = true;
|
||||
this.fnGetData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '没有更多数据了'
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnOnTabChange(index) {
|
||||
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.queryParams.page = 0;
|
||||
this.dataList = [];
|
||||
this.fnToTopPage();
|
||||
this.fnGetData();
|
||||
},
|
||||
fnOnSearch() {
|
||||
this.queryParams.page = 0;
|
||||
this.isLoadMore = false;
|
||||
this.fnGetData();
|
||||
},
|
||||
fnGetData() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
// 设置状态为加载中
|
||||
if (!this.isLoadMore) {
|
||||
this.loading = 'loading';
|
||||
}
|
||||
this.loadMoreText = '加载中...';
|
||||
this.$httpApi
|
||||
.getPostList(this.queryParams)
|
||||
.then(res => {
|
||||
console.log('请求结果：');
|
||||
console.log(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;
|
||||
}
|
||||
})
|
||||
.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?articleId=' + article.id,
|
||||
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;
|
||||
|
||||
&.is-balck {
|
||||
background-color: #212121;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding-top: 24rpx;
|
||||
|
||||
.content-empty {
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,144 @@
|
||||
<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="(index + 1) * 50"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
|
||||
</block>
|
||||
<view class="load-text">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" 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
|
||||
},
|
||||
slug: '',
|
||||
pageTitle: '加载中...',
|
||||
result: null,
|
||||
dataList: [],
|
||||
isLoadMore: false,
|
||||
loadMoreText: ''
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(e) {
|
||||
this.slug = e.slug;
|
||||
this.pageTitle = e.name;
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnGetData();
|
||||
},
|
||||
onReachBottom(e) {
|
||||
if (this.result.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
|
||||
.getCategoryPostList(this.slug, this.queryParams)
|
||||
.then(res => {
|
||||
this.fnSetPageTitle(this.pageTitle + ` （共${res.data.total}篇）`);
|
||||
this.result = res.data;
|
||||
if (this.isLoadMore) {
|
||||
this.dataList = this.dataList.concat(res.data.content);
|
||||
} else {
|
||||
this.dataList = res.data.content;
|
||||
}
|
||||
this.loadMoreText = res.data.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?articleId=' + article.id,
|
||||
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;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 0 24rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.empty {
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<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="email" align="right" title="邮箱地址" placeholder="请输入您的邮箱..." v-model="form.email"></tm-input>
|
||||
<tm-input name="authorUrl" align="right" title="我的网站" placeholder="请输入您的网址..." v-model="form.authorUrl"></tm-input>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-n ">接收提醒</text>
|
||||
<view><tm-switch :text="['是', '否']" v-model="form.allowNotification" color="bg-gradient-blue-accent"></tm-switch></view>
|
||||
</view>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmForm,
|
||||
tmInput,
|
||||
tmSwitch,
|
||||
tmButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
postId: '',
|
||||
parentId: '',
|
||||
title: '', // 被回复的标题 type=user =用户名 否则为文章标题
|
||||
form: '',
|
||||
formPage: '', // 来自哪个页面
|
||||
type: 'post' // 来源文章/页面 还是用户 user=用户
|
||||
},
|
||||
form: {
|
||||
allowNotification: true,
|
||||
author: '', // 作者
|
||||
avatar: '',
|
||||
authorUrl: '', // 作者主页
|
||||
content: '', // 评论内容
|
||||
email: '', // 邮件
|
||||
parentId: 0,
|
||||
postId: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 评论游客信息
|
||||
wxLoginVisitorUser() {
|
||||
return uni.$tm.vx.getters().user.getWxLoginInfo;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.params = this.$Route.query;
|
||||
this.form.postId = this.params.id;
|
||||
if (this.params.type == 'user') {
|
||||
this.form.parentId = this.params.parentId;
|
||||
this.fnSetPageTitle('回复用户：' + this.params.title);
|
||||
} else {
|
||||
this.form.parentId = 0;
|
||||
this.fnSetPageTitle(this.params.title);
|
||||
}
|
||||
this.form.author = this.wxLoginVisitorUser.nickName;
|
||||
this.form.avatar = this.wxLoginVisitorUser.avatarUrl;
|
||||
this.form.email = this.wxLoginVisitorUser.email;
|
||||
this.form.authorUrl = this.wxLoginVisitorUser.url;
|
||||
},
|
||||
methods: {
|
||||
fnOnSubmit(e) {
|
||||
if (e === false) {
|
||||
return uni.$tm.toast('请检查所有的必填项是否填写完整！');
|
||||
}
|
||||
if (this.form.allowNotification && !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();
|
||||
},
|
||||
|
||||
fnHandle() {
|
||||
uni.showLoading({
|
||||
title: '正在提交...'
|
||||
});
|
||||
const _api = {
|
||||
sheets: this.$httpApi.postSheetsComments,
|
||||
posts: this.$httpApi.postCommentPost
|
||||
};
|
||||
_api[this.params.from](this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('提交成功，待博主审核通过后即可展示！');
|
||||
// 更新评论者信息
|
||||
uni.$tm.vx.commit('user/setWxLoginInfo', {
|
||||
avatarUrl: this.wxLoginVisitorUser.avatarUrl,
|
||||
nickName: this.form.author,
|
||||
email: this.form.email,
|
||||
url: this.form.authorUrl
|
||||
});
|
||||
// 清空评论内容
|
||||
this.form.content = '';
|
||||
// 触发刷新评论（可能需要评论审核不会有改变）
|
||||
// uni.$emit(this.params.formPage + '_refresh');
|
||||
} else {
|
||||
uni.$tm.toast('操作失败，请重试！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast(err.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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);
|
||||
}
|
||||
}
|
||||
.poup-content {
|
||||
width: 500rpx;
|
||||
|
||||
::v-deep {
|
||||
.slider_id {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<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">
|
||||
<text v-if="false" class="icon flex flex-center"><text class="iconfont icon-check text-size-s"></text></text>
|
||||
<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>
|
||||
<text class="ml-12 halocoloricon halocoloricon-wechat"></text>
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.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: ''
|
||||
},
|
||||
|
||||
{
|
||||
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().blogger.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 + ' 已复制！');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
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;
|
||||
.icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
right: 6rpx;
|
||||
bottom: 0rpx;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
background-color: #03b0fd;
|
||||
border: 4rpx solid #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
&-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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
bloggerInfo() {
|
||||
return this.$tm.vx.getters().blogger.getBlogger;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
line-height: 1.65;
|
||||
font-size: 30rpx;
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<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="(index + 1) * 50">
|
||||
<!-- 日记卡片 -->
|
||||
<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>
|
||||
</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 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
|
||||
},
|
||||
result: null,
|
||||
dataList: [],
|
||||
isLoadMore: false,
|
||||
loadMoreText: '加载中...'
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('个人日记');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnGetData();
|
||||
},
|
||||
onReachBottom(e) {
|
||||
if (this.result.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;
|
||||
}
|
||||
.loading-wrap {
|
||||
}
|
||||
.app-page-content {
|
||||
}
|
||||
.content-empty {
|
||||
height: 60vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<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 bg-white 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="(item, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<!-- 列表项 -->
|
||||
<comment-item
|
||||
class="mb-12"
|
||||
:isChild="false"
|
||||
:comment="item"
|
||||
:postId="sheetId"
|
||||
:useSolid="false"
|
||||
@on-copy="fnCopyContent"
|
||||
@on-comment="fnToComment"
|
||||
@on-detail="fnOnShowCommentDetail"
|
||||
></comment-item>
|
||||
</tm-translate>
|
||||
</block>
|
||||
<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @click="fnToComment(null)"></tm-flotbutton>
|
||||
<view class="load-text">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 评论详情 -->
|
||||
<tm-poup v-model="commentDetail.show" height="auto" :round="6" :over-close="true" position="bottom">
|
||||
<view class="pa-24">
|
||||
<view class="poup-head pb-24">
|
||||
<view class="poup-title text-align-center text-size-g text-weight-b mb-32">留言详情</view>
|
||||
<comment-item :useActions="false" :isChild="false" :comment="commentDetail.comment" :postId="sheetId"></comment-item>
|
||||
</view>
|
||||
|
||||
<scroll-view :scroll-y="true" class="poup-body">
|
||||
<view v-if="commentDetail.loading != 'success'" class="poup-loading-wrap flex flex-center">
|
||||
<view v-if="commentDetail.loading == 'loading'" class="loading flex flex-center flex-col">
|
||||
<text class="e-loading-icon iconfont icon-loading text-blue"></text>
|
||||
<view class="text-size-n text-grey-lighten-1 py-12 mt-12">加载中，请稍等...</view>
|
||||
</view>
|
||||
<view v-else-if="commentDetail.loading == 'error'" class="error">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败">
|
||||
<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnGetChildComments()">刷新试试</tm-button>
|
||||
</tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<block v-else>
|
||||
<view v-if="commentDetail.list.length == 0" class="poup-empty flex flex-center">
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="没有更多评论啦~"></tm-empty>
|
||||
</view>
|
||||
|
||||
<block v-else>
|
||||
<comment-item
|
||||
v-for="(comment, index) in commentDetail.list"
|
||||
:useSolid="false"
|
||||
:useActions="false"
|
||||
:key="index"
|
||||
:isChild="false"
|
||||
:comment="comment"
|
||||
:postId="sheetId"
|
||||
></comment-item>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppKeys from '@/config//keys.js';
|
||||
import SheetConfig from '@/config/sheets.config.js';
|
||||
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import commentItem from '@/components/comment-item/comment-item.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmFlotbutton,
|
||||
tmTranslate,
|
||||
tmEmpty,
|
||||
tmPoup,
|
||||
tmButton,
|
||||
commentItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
result: null,
|
||||
dataList: [],
|
||||
isLoadMore: false,
|
||||
loadMoreText: '加载中...',
|
||||
sheetId: SheetConfig[AppKeys.SHEET_LEAVING],
|
||||
commentDetail: {
|
||||
loading: 'loading',
|
||||
show: false,
|
||||
comment: {},
|
||||
postId: undefined,
|
||||
list: []
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('留言板');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
uni.$on('leaving_refresh', () => {
|
||||
this.fnGetData();
|
||||
});
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnGetData();
|
||||
},
|
||||
|
||||
onReachBottom(e) {
|
||||
if (this.result.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
|
||||
.getSheetsCommentsTreeBySheetId(this.sheetId, this.queryParams)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
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;
|
||||
}
|
||||
} else {
|
||||
this.loading = 'error';
|
||||
this.loadMoreText = '加载失败，请下拉刷新！';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
this.loadMoreText = '加载失败，请下拉刷新！';
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
fnToComment(data) {
|
||||
let _comment = {};
|
||||
if (data) {
|
||||
_comment = {
|
||||
id: this.sheetId,
|
||||
parentId: data.comment.id,
|
||||
title: data.comment.author,
|
||||
from: 'sheets',
|
||||
formPage: 'leaving',
|
||||
type: 'user'
|
||||
};
|
||||
} else {
|
||||
_comment = {
|
||||
id: this.sheetId,
|
||||
parentId: 0,
|
||||
title: '留言板留言',
|
||||
from: 'sheets',
|
||||
formPage: 'leaving',
|
||||
type: 'post'
|
||||
};
|
||||
}
|
||||
|
||||
uni.$tm.vx.commit('comment/setCommentInfo', _comment);
|
||||
this.$Router.push({
|
||||
path: '/pagesA/comment/comment',
|
||||
query: _comment
|
||||
});
|
||||
},
|
||||
fnCopyContent(content) {
|
||||
uni.$tm.u.setClipboardData(content);
|
||||
uni.$tm.toast('内容已复制成功！');
|
||||
},
|
||||
fnOnShowCommentDetail(comment) {
|
||||
this.commentDetail.comment = comment;
|
||||
this.commentDetail.list = [];
|
||||
this.commentDetail.show = true;
|
||||
this.fnGetChildComments();
|
||||
},
|
||||
fnGetChildComments() {
|
||||
this.commentDetail.loading = 'loading';
|
||||
this.$httpApi
|
||||
.getSheetsChildrenCommentList(this.sheetId, this.commentDetail.comment.id, {})
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.commentDetail.loading = 'success';
|
||||
this.commentDetail.list = res.data;
|
||||
} else {
|
||||
this.commentDetail.loading = 'error';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.commentDetail.loading = 'error';
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-page-content {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="app-page bg-white flex flex-center"><text class="text-bg-gradient-red-accent-b">祝有情人👩❤👨终成眷属</text></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('恋爱日记');
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
|
||||
<tm-form v-if="!loading" ref="formData">
|
||||
<!-- <tm-sheet :shadow="24" :padding="[12, 24]" :margin="[24, 24]">
|
||||
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
|
||||
<text class="text-size-n text-weight-b ">标题</text>
|
||||
<text class="text-grey text-size-xs px-10">副标题/描述</text>
|
||||
</view>
|
||||
<view class="sheet-content">内容区域</view>
|
||||
</tm-sheet> -->
|
||||
<tm-sheet :shadow="6" :padding="[12, 24]" :margin="[24, 24]">
|
||||
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
|
||||
<text class="text-size-n text-weight-b ">布局</text>
|
||||
<text class="text-grey text-size-xs px-10 ml-12">应用以及文章列表布局设置</text>
|
||||
</view>
|
||||
<view class="sheet-content">
|
||||
<tm-pickers
|
||||
title="请选择首页布局"
|
||||
btn-color="light-blue"
|
||||
:default-value.sync="homeLayout.selectDefault"
|
||||
rang-key="name"
|
||||
:list="homeLayout.list"
|
||||
@confirm="fnOnHomeLayoutConfirm"
|
||||
>
|
||||
<tm-input
|
||||
name="status"
|
||||
required
|
||||
title="首页布局"
|
||||
placeholder="请选择首页布局"
|
||||
disabled
|
||||
:value="homeLayout.selectLabel"
|
||||
right-icon="icon-angle-right"
|
||||
></tm-input>
|
||||
</tm-pickers>
|
||||
<tm-pickers
|
||||
title="请选择文章卡片样式"
|
||||
btn-color="light-blue"
|
||||
:default-value.sync="articleCardStyle.selectDefault"
|
||||
rang-key="name"
|
||||
:list="articleCardStyle.list"
|
||||
@confirm="fnOnArticleCardStyleConfirm"
|
||||
>
|
||||
<tm-input
|
||||
name="status"
|
||||
required
|
||||
title="卡片样式"
|
||||
placeholder="请选择文章卡片样式"
|
||||
disabled
|
||||
:value="articleCardStyle.selectLabel"
|
||||
right-icon="icon-angle-right"
|
||||
></tm-input>
|
||||
</tm-pickers>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
|
||||
<tm-sheet v-if="false" :shadow="24" :padding="[12, 24]" :margin="[24, 24]">
|
||||
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
|
||||
<text class="text-size-n text-weight-b ">外观</text>
|
||||
<text class="text-grey text-size-xs px-10">设置应用主题色/暗黑模式等</text>
|
||||
</view>
|
||||
<view class="sheet-content">
|
||||
<!-- 内容区域 -->
|
||||
<text class="ma-24">todo</text>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
|
||||
<tm-sheet :shadow="6" :padding="[12, 24]" :margin="[24, 24]">
|
||||
<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
|
||||
<text class="text-size-n text-weight-b ">功能</text>
|
||||
<text class="text-grey text-size-xs px-10 ml-12">一些常用的功能性设置</text>
|
||||
</view>
|
||||
<view class="sheet-content">
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m">显示完整统计</text>
|
||||
<tm-switch v-model="appSettings.about.showAllCount" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">链接直接打开</text>
|
||||
<tm-switch v-model="appSettings.contact.isLinkCopy" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">图库瀑布流模式</text>
|
||||
<tm-switch v-model="appSettings.gallery.useWaterfull" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">友链简洁模式</text>
|
||||
<tm-switch v-model="appSettings.links.useSimple" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">轮播图指示器</text>
|
||||
<tm-switch v-model="appSettings.banner.useDot" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view v-if="appSettings.banner.useDot" class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">轮播图指示器位置</text>
|
||||
<tm-groupradio name="dotPosition" @change="fnOnBannerDotChange">
|
||||
<tm-radio
|
||||
:name="item.name"
|
||||
:size="28"
|
||||
color="light-blue"
|
||||
v-for="(item, index) in dotPositionList"
|
||||
:key="index"
|
||||
v-model="item.checked"
|
||||
:label="item.name"
|
||||
></tm-radio>
|
||||
</tm-groupradio>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">显示后台入口</text>
|
||||
<tm-switch v-model="appSettings.about.showAdmin" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
</tm-form>
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<view v-if="!loading" class="btn-bar flex flex-center bg-white">
|
||||
<tm-button theme="light-blue" :shadow="0" block :height="70" @click="fnOnSave()">保存设置</tm-button>
|
||||
<tm-button theme="red" :shadow="0" block :height="70" @click="fnOnSaveDefault()">恢复默认设置</tm-button>
|
||||
<tm-button theme="blue-grey" :shadow="0" block :height="70" @click="fnOnBack()">返回</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { _DefaultAppSettings } from '@/utils/app.js';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
|
||||
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
|
||||
import tmGroupradio from '@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue';
|
||||
import tmRadio from '@/tm-vuetify/components/tm-radio/tm-radio.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmButton,
|
||||
tmForm,
|
||||
tmPickers,
|
||||
tmInput,
|
||||
tmSwitch,
|
||||
tmSheet,
|
||||
tmGroupradio,
|
||||
tmRadio
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBlackTheme: false,
|
||||
loading: true,
|
||||
appSettings: {},
|
||||
homeLayout: {
|
||||
list: [{ name: '一行一列', value: 'h_row_col1' }, { name: '一行两列', value: 'h_row_col2' }],
|
||||
selectDefault: ['一行一列'],
|
||||
selectLabel: '一行一列',
|
||||
selectValue: 'h_row_col1'
|
||||
},
|
||||
articleCardStyle: {
|
||||
list: [
|
||||
{ name: '左图右文', value: 'lr_image_text' },
|
||||
{ name: '左文右图', value: 'lr_text_image' },
|
||||
{ name: '上图下文', value: 'tb_image_text' },
|
||||
{ name: '上文下图', value: 'tb_text_image' },
|
||||
{ name: '只有文字', value: 'only_text' }
|
||||
],
|
||||
selectDefault: ['左图右文'],
|
||||
selectLabel: '左图右文',
|
||||
selectValue: 'lr_image_text'
|
||||
},
|
||||
dotPositionList: [{ name: '右边', value: 'right', checked: true }, { name: '下边', value: 'bottom', checked: false }]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取设置
|
||||
_appSettings() {
|
||||
return uni.$tm.vx.getters().setting.getSettings;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
_appSettings(val) {
|
||||
this.appSettings = val;
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(e) {
|
||||
this.fnSetPageTitle('应用设置');
|
||||
},
|
||||
created() {
|
||||
this.appSettings = this._appSettings;
|
||||
this.fnHandleFormatSelect();
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 统一处理选择框的内容
|
||||
fnHandleFormatSelect() {
|
||||
// 首页布局
|
||||
const _homeLayout = this.fnFindObjInList(this.homeLayout.list, 'value', this.appSettings.layout.home);
|
||||
this.homeLayout.selectDefault = [_homeLayout.name];
|
||||
this.homeLayout.selectLabel = _homeLayout.name;
|
||||
this.homeLayout.selectValue = _homeLayout.value;
|
||||
|
||||
const _articleCardStyle = this.fnFindObjInList(this.articleCardStyle.list, 'value', this.appSettings.layout.cardType);
|
||||
this.articleCardStyle.selectDefault = [_articleCardStyle.name];
|
||||
this.articleCardStyle.selectLabel = _articleCardStyle.name;
|
||||
this.articleCardStyle.selectValue = _articleCardStyle.value;
|
||||
},
|
||||
// 在集合中找匹配的对象
|
||||
fnFindObjInList(list, key, value) {
|
||||
return list.find(x => x[key] == value);
|
||||
},
|
||||
fnOnBannerDotChange(e) {
|
||||
const _select = e[0];
|
||||
if (_select.index == 0 && _select.checked) {
|
||||
this.appSettings.banner.dotPosition = 'right';
|
||||
}
|
||||
if (_select.index == 1 && _select.checked) {
|
||||
this.appSettings.banner.dotPosition = 'bottom';
|
||||
}
|
||||
},
|
||||
// 首页布局
|
||||
fnOnHomeLayoutConfirm(e) {
|
||||
const _select = e[0].data;
|
||||
this.homeLayout.selectDefault = [_select.name];
|
||||
this.homeLayout.selectLabel = _select.name;
|
||||
this.homeLayout.selectValue = _select.value;
|
||||
this.appSettings.layout.home = _select.value;
|
||||
},
|
||||
// 文章卡片样式
|
||||
fnOnArticleCardStyleConfirm(e) {
|
||||
const _select = e[0].data;
|
||||
this.articleCardStyle.selectDefault = [_select.name];
|
||||
this.articleCardStyle.selectLabel = _select.name;
|
||||
this.articleCardStyle.selectValue = _select.value;
|
||||
this.appSettings.layout.cardType = _select.value;
|
||||
},
|
||||
// 保存
|
||||
fnOnSave() {
|
||||
this.$tm.vx.commit('setting/setSettings', this.appSettings);
|
||||
uni.$tm.toast('保存成功，部分设置在重启后生效！');
|
||||
},
|
||||
// 使用默认配置
|
||||
fnOnSaveDefault() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '您确定要恢复为默认的设置吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.$tm.vx.actions('setting/updateDefaultAppSettings');
|
||||
uni.$tm.toast('系统设置已恢复为默认配置，部分设置在重启后生效！');
|
||||
})
|
||||
.catch(err => {});
|
||||
},
|
||||
fnOnBack() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '您当前可能有未保存的数据，确定返回吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.navigateBack();
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
.btn-bar {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
gap: 0 24rpx;
|
||||
box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
.required {
|
||||
position: relative;
|
||||
padding-left: 18rpx;
|
||||
&:before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -4rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: rgba(244, 67, 54, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<view class="app-page bg-gradient-blue-lighten-b">
|
||||
<!-- 流星-->
|
||||
<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="https://blog-oss.925i.cn/blog-files/d500acd35e8b6d24bbfa2dabd2a605e6.png" mode="aspectFill"></image>
|
||||
<view class="user-info__nick-name">「 uni-halo 」</view>
|
||||
</view>
|
||||
|
||||
<view class="text-align-center text-white" style="padding: 60vh 0 0 0;">
|
||||
<view class="" style="font-size: 44rpx;">全新UI，准备出发</view>
|
||||
<view class="mt-30 text-size-m">新触动 新感受 新体验</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;"><view class="start-btn" @click="fnStart()">全新出发</view></view>
|
||||
|
||||
<!-- 波浪效果 -->
|
||||
<wave></wave>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wave from '@/components/wave/wave.vue';
|
||||
export default {
|
||||
components: { wave },
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 用户信息 start */
|
||||
.user-info {
|
||||
&__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);
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
.stars {
|
||||
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);
|
||||
}
|
||||
|
||||
.small-stars .star {
|
||||
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;
|
||||
}
|
||||
.small-stars .star:nth-child(1) {
|
||||
left: 40px;
|
||||
bottom: 50px;
|
||||
}
|
||||
.small-stars .star:nth-child(2) {
|
||||
left: 200px;
|
||||
bottom: 40px;
|
||||
}
|
||||
.small-stars .star:nth-child(3) {
|
||||
left: 60px;
|
||||
bottom: 120px;
|
||||
}
|
||||
.small-stars .star:nth-child(4) {
|
||||
left: 140px;
|
||||
bottom: 250px;
|
||||
}
|
||||
.small-stars .star:nth-child(5) {
|
||||
left: 400px;
|
||||
bottom: 300px;
|
||||
}
|
||||
.small-stars .star:nth-child(6) {
|
||||
left: 170px;
|
||||
bottom: 80px;
|
||||
}
|
||||
.small-stars .star:nth-child(7) {
|
||||
left: 200px;
|
||||
bottom: 360px;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.small-stars .star:nth-child(8) {
|
||||
left: 250px;
|
||||
bottom: 320px;
|
||||
}
|
||||
.small-stars .star:nth-child(9) {
|
||||
left: 300px;
|
||||
bottom: 340px;
|
||||
}
|
||||
.small-stars .star:nth-child(10) {
|
||||
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;
|
||||
}
|
||||
.small-stars .star:nth-child(12) {
|
||||
left: 300px;
|
||||
bottom: 360px;
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
@-webkit-keyframes star-blink {
|
||||
50% {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes star-blink {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(1) {
|
||||
left: 300px;
|
||||
bottom: 50px;
|
||||
}
|
||||
.medium-stars .star:nth-child(2) {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(4) {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(6) {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(8) {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(10) {
|
||||
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;
|
||||
}
|
||||
.medium-stars .star:nth-child(12) {
|
||||
left: 340px;
|
||||
bottom: 180px;
|
||||
-webkit-animation-delay: 1.1s;
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
@keyframes star-blink {
|
||||
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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.star-fall:nth-child(1) {
|
||||
left: 80px;
|
||||
bottom: -100px;
|
||||
}
|
||||
.star-fall:nth-child(1):after {
|
||||
-webkit-animation-delay: 2.4s;
|
||||
animation-delay: 2.4s;
|
||||
}
|
||||
|
||||
.star-fall:nth-child(2) {
|
||||
left: 200px;
|
||||
bottom: -200px;
|
||||
}
|
||||
.star-fall:nth-child(2):after {
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.star-fall:nth-child(3) {
|
||||
left: 430px;
|
||||
bottom: -50px;
|
||||
}
|
||||
.star-fall:nth-child(3):after {
|
||||
-webkit-animation-delay: 3.6s;
|
||||
animation-delay: 3.6s;
|
||||
}
|
||||
|
||||
.star-fall:nth-child(4) {
|
||||
left: 400px;
|
||||
bottom: 100px;
|
||||
}
|
||||
.star-fall:nth-child(4):after {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes star-fall {
|
||||
20% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes star-fall {
|
||||
20% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user