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

修改：优化列表动画效果

Browse Source
This commit is contained in:
小莫唐尼
2023-06-08 21:23:21 +08:00
parent 21d723d260
commit f838da43d8
21 changed files with 4725 additions and 4865 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/mixins/index.js
+24 -2
View File
@@ -18,14 +18,30 @@ export default {
return {
author: HaloConfig.author,
_isWechat: true,
haloAdConfig: HaloAdConfig
haloAdConfig: HaloAdConfig,
_aniWaitIndex: 0, // 动画索引
};
},
computed: {
// 获取全局应用设置
globalAppSettings() {
return uni.$tm.vx.getters().getSettings;
},
// 计算动画索引
calcAniWait() {
return (index) => {
if ((index + 1) % 10 == 0) {
this._aniWaitIndex = 1;
} else {
this._aniWaitIndex += 1;
}
console.log('this._aniWaitIndex', this._aniWaitIndex);
return this._aniWaitIndex * 50
}
}
},
onLoad() {
this.fnResetSetAniWaitIndex()
},
created() {
// #ifdef MP-WEIXIN
@@ -36,7 +52,9 @@ export default {
this._isWechat = false;
// #endif
},
onShow() {
this.fnResetSetAniWaitIndex()
},
methods: {
/**
* 设置页面标题
@@ -60,6 +78,10 @@ export default {
console.log('err：', err);
},
});
},
// 初始化动画索引值（需要在每个页面调用）
fnResetSetAniWaitIndex() {
this._aniWaitIndex = 0
}
},
});
components/cache-image/cache-image.vue
-1
View File
@@ -106,7 +106,6 @@
}
},
created() {
console.log('cache-image', this.url);
this.imgStyle = {
width: this.width,
height: this.height,
pages/tabbar/category/category.vue
+8 -18
View File
@@ -12,23 +12,7 @@
</view>
<block v-else>
<tm-sliderNav :list="categoryList" bg-color="white" color="light-blue" rang-key="name" @change="fnOnCategoryChange"></tm-sliderNav>
<scroll-view
class="right-content pt-12 pb-12"
:scroll-y="true"
:scroll-top="scrollTop"
:scroll-with-animation="true"
:refresher-enabled="true"
:refresher-triggered="triggered"
:refresher-threshold="60"
refresher-background="#fafafa"
@refresherrefresh="fnGetData(true)"
@scrolltolower="fnGetData(false)"
@scroll="fnOnScroll"
@touchmove.stop
@touchstart="fnOnTouchStart"
@touchend="fnOnTouchEnd"
@touchcancel="fnOnTouchEnd"
>
<scroll-view class="right-content pt-12 pb-12" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" :refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="60" refresher-background="#fafafa" @refresherrefresh="fnGetData(true)" @scrolltolower="fnGetData(false)" @scroll="fnOnScroll" @touchmove.stop @touchstart="fnOnTouchStart" @touchend="fnOnTouchEnd" @touchcancel="fnOnTouchEnd">
<view v-if="dataList.length == 0" class="article-empty flex flex-center">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无文章~"></tm-empty>
</view>
@@ -36,7 +20,7 @@
<block v-else>
<block v-for="(article, index) in dataList" :key="article.createTime">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<article-min-card :article="article" @on-click="fnToArticleDetail"></article-min-card>
</tm-translate>
</block>
@@ -112,6 +96,7 @@ export default {
},
methods: {
fnOnCategoryChange(e) {
this.fnResetSetAniWaitIndex();
this.queryParams.slug = this.categoryList[e].slug;
this.fnToTopScroll();
this.dataList = [];
@@ -218,18 +203,22 @@ export default {
flex-direction: column;
background-color: #fff;
}
.content {
height: 100vh;
background-color: #fafafa;
}
.category-empty {
width: 100%;
height: 70vh;
}
.article-empty {
width: 100%;
height: 70vh;
}
.right-content {
// width: calc(100vw - 144rpx);
width: calc(100vw - 190rpx);
@@ -238,6 +227,7 @@ export default {
white-space: nowrap;
background-color: #fafafa;
}
.loading-wrap {
padding: 24rpx;
}
pages/tabbar/gallery/gallery.vue
+5 -1
View File
@@ -74,7 +74,7 @@
</tm-flowLayout>
<block v-else>
<block v-for="(item, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="round-3 shadow-2 overflow white mb-24">
<tm-images :previmage="false" :src="item.image" @click="fnPreview(item)"></tm-images>
<view class="pa-24 text-size-m">
@@ -197,6 +197,7 @@ export default {
},
methods: {
fnOnCategoryChange(index) {
this.fnResetSetAniWaitIndex();
this.dataList = [];
if (index == 0) {
this.queryParams.team = null;
@@ -305,6 +306,7 @@ export default {
background-color: #212121;
}
}
.content {
box-sizing: border-box;
padding: 0 24rpx;
@@ -317,10 +319,12 @@ export default {
justify-content: center;
}
}
.loading-wrap {
box-sizing: border-box;
padding: 24rpx;
}
.card {
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
}
pages/tabbar/home/home.vue
+20 -13
View File
@@ -22,13 +22,7 @@
<view class="bg-white pb-24">
<!-- 轮播图+广告 -->
<view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0">
<e-swiper
:dotPosition="globalAppSettings.banner.dotPosition"
:autoplay="true"
:useDot="globalAppSettings.banner.useDot"
:list="bannerList"
@on-click="fnOnBannerClick"
></e-swiper>
<e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true" :useDot="globalAppSettings.banner.useDot" :list="bannerList" @on-click="fnOnBannerClick"></e-swiper>
</view>
<!-- 快捷导航 -->
<!-- <view v-if="useQuickNav" class="quick-nav flex-between round-3 flex mt-12 ml-12 mr-12 pa-24">
@@ -73,7 +67,7 @@
<block v-else>
<view :class="globalAppSettings.layout.home">
<block v-for="(article, index) in articleList" :key="article.createTime">
<tm-translate class="ani-item" animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate class="ani-item" animation-name="fadeUp" :wait="calcAniWait(index)">
<article-card from="home" :article="article" @on-click="fnToArticleDetail"></article-card>
<!-- 广告区域 -->
<view v-if="haloAdConfig.home.use && (index + 1) % haloAdConfig.frequency == 0" class="ad-wrap ma-24">
@@ -140,7 +134,8 @@ export default {
let blogger = this.$tm.vx.getters().getBlogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger;
}
},
},
onLoad() {
this.fnSetPageTitle();
@@ -380,50 +375,60 @@ export default {
}
}
}
.loading-wrap {
padding: 24rpx;
}
.search-input {
background-color: #f5f5f5;
align-items: center;
/* #ifdef MP-WEIXIN */
margin-right: 24rpx;
/* #endif */
&_icon {
}
&_text {
}
&_icon {}
&_text {}
}
.show-more {
width: 42rpx;
height: 42rpx;
box-sizing: border-box;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
}
.banner {
overflow: hidden;
}
.quick-nav {
background-color: #fff;
box-sizing: border-box;
// box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
.name {
color: var(--main-text-color);
}
}
.category {
width: 94vw;
display: flex;
height: 200rpx;
white-space: nowrap;
margin: 0 24rpx;
.content {
display: inline-block;
padding-left: 24rpx;
&:first-child {
padding-left: 0;
}
}
.cate-empty {
height: inherit;
}
@@ -436,6 +441,7 @@ export default {
font-size: 32rpx;
z-index: 1;
color: var(--main-text-color);
&:before {
content: '';
position: absolute;
@@ -455,6 +461,7 @@ export default {
flex-wrap: wrap;
box-sizing: border-box;
padding: 0 12rpx;
.ani-item {
width: 50%;
}
pages/tabbar/links/links.vue
+28 -54
View File
@@ -16,22 +16,11 @@
<!-- 如果只有一个分组：使用列表的形式 result.length == 1 -->
<view v-else-if="result.length == 1" class="flex flex-col pb-24">
<block v-for="(link, index) in result[0].children" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 色彩版本 -->
<view
v-if="!globalAppSettings.links.useSimple"
class="info flex pt-24 pb-24 pl-12 pr-12"
:class="{ 'border-b-1': index != result[0].children.length - 1 }"
@click="fnOnLinkEvent(link)"
>
<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12" :class="{ 'border-b-1': index != result[0].children.length - 1 }" @click="fnOnLinkEvent(link)">
<view class="link-logo">
<cache-image
class="link-logo_img"
radius="12rpx"
:url="link.logo"
:fileMd5="link.logo"
mode="aspectFill"
></cache-image>
<cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image>
</view>
<view class="flex flex-col pl-30 info-detail">
<view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
@@ -67,28 +56,17 @@
<!-- 如果大于一个分组：使用联系人的索引形式 result.length > 1 -->
<block v-else>
<block v-for="(team, index) in result" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="grey-lighten-4 text text-size-s text-weight-b px-32 py-12">{{ team.title }}</view>
<block v-for="(link, linkIndex) in team.children" :key="link.id">
<tm-translate animation-name="fadeUp" :wait="(linkIndex + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(linkIndex)">
<!-- 色彩版本 -->
<view
v-if="!globalAppSettings.links.useSimple"
class="info flex pt-24 pb-24 pl-12 pr-12"
:class="{
<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12" :class="{
'border-b-1':
linkIndex != team.children.length - 1 || index == result.length - 1
}"
@click="fnOnLinkEvent(link)"
>
}" @click="fnOnLinkEvent(link)">
<view class="link-logo">
<cache-image
class="link-logo_img"
radius="12rpx"
:url="link.logo"
:fileMd5="link.logo"
mode="aspectFill"
></cache-image>
<cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image>
</view>
<view class="flex flex-col pl-30 info-detail">
<view class="link-card_name text-size-l text-weight-b text-red">
@@ -98,12 +76,7 @@
<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">
ID：{{ link.id }}
</tm-tags>
<tm-tags
color=" bg-gradient-light-blue-lighten"
:shadow="0"
size="s"
model="fill"
>
<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">
{{ link.team || '暂未分组' }}
</tm-tags>
</view>
@@ -113,11 +86,7 @@
</view>
</view>
<!-- 简洁版本 -->
<view
v-else
class="link-card flex ml-24 mr-24 pt-24 pb-24"
@click="fnOnLinkEvent(link)"
>
<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">
<image class="logo shadow-6" :src="link.logo" mode="aspectFill"></image>
<view class="info pl-24">
<view class="name text-size-g">{{ link.name }}</view>
@@ -137,13 +106,7 @@
</block>
<!-- 返回顶部 -->
<tm-flotbutton
v-if="linkTotal > 10"
color="light-blue"
@click="fnToTopPage"
size="m"
icon="icon-angle-up"
></tm-flotbutton>
<tm-flotbutton v-if="linkTotal > 10" color="light-blue" @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>
<!-- 详情弹窗 -->
<tm-poup v-model="detail.show" :width="640" height="auto" position="center" :round="6">
@@ -175,12 +138,7 @@
<!-- 博客预览图 -->
<view class="mt-24">
<tm-images
:width="568"
:round="2"
:src="caclSiteThumbnail(detail.data.url)"
mode="aspectFill"
></tm-images>
<tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)" mode="aspectFill"></tm-images>
</view>
</view>
</tm-poup>
@@ -331,6 +289,7 @@ export default {
flex-direction: column;
background-color: #fafafd;
}
.loading-wrap {
padding: 24rpx;
min-height: 100vh;
@@ -347,16 +306,20 @@ export default {
justify-content: center;
}
}
.link-card {
border-bottom: 2rpx solid #f5f5f5;
background-color: #ffffff;
&.one {
border: 0;
box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);
.logo {
box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
}
.logo {
// width: 126rpx;
// height: 126rpx;
@@ -370,6 +333,7 @@ export default {
.info {
width: 0;
flex-grow: 1;
.name {
white-space: nowrap;
overflow: hidden;
@@ -378,6 +342,7 @@ export default {
font-size: 30rpx;
font-weight: bold;
}
.desc {
white-space: nowrap;
overflow: hidden;
@@ -387,43 +352,52 @@ export default {
}
}
}
.link-card_name {
// color: #303133;
// color: #0080fe;
}
.link-card_desc {
font-size: 24rpx;
line-height: 1.6;
color: #303133;
}
.link-logo {
width: 140rpx;
height: 140rpx;
&_img {
width: 100%;
height: 100%;
}
}
.poup-logo {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
&_img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.info-detail {
width: 0;
flex-grow: 1;
justify-content: center;
}
.poup-desc {
font-size: 28rpx;
line-height: 1.6;
color: #555 !important;
}
.preview-site {
width: 100%;
height: 300rpx;
pagesA/archives/archives.vue
+41 -14
View File
@@ -18,16 +18,8 @@
<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 :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">
@@ -38,7 +30,7 @@
</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">
<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">
@@ -115,7 +107,7 @@ export default {
methods: {
fnOnTabChange(index) {
// todo:
this.fnResetSetAniWaitIndex();
const _api = ['getMonthArchives', 'getYearArchives'];
this.api = _api[index];
this.queryParams.page = 0;
@@ -165,21 +157,26 @@ export default {
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;
@@ -189,6 +186,7 @@ export default {
.tm-timeline {
.tm-timeline-item {
.tm-timeline-item-left,
.tm-timeline-item-right {
width: 200rpx;
@@ -201,30 +199,37 @@ export default {
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;
@@ -239,48 +244,59 @@ export default {
width: 560rpx;
border-radius: 12rpx;
background-color: #fff;
&.lr_image_text {
}
&.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%;
@@ -290,47 +306,58 @@ export default {
.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;
pagesA/articles/articles.vue
+4 -1
View File
@@ -23,7 +23,7 @@
<block v-else>
<block v-for="(article, index) in dataList" :key="article.id">
<!-- 文章卡片 -->
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<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">
@@ -111,6 +111,7 @@ export default {
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.dataList = [];
const _sorts = {
0: '',
@@ -126,6 +127,7 @@ export default {
this.fnGetData();
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.queryParams.page = 0;
this.isLoadMore = false;
this.fnGetData();
@@ -193,6 +195,7 @@ export default {
background-color: #212121;
}
}
.content {
padding-top: 24rpx;
pagesA/category-detail/category-detail.vue
+3 -1
View File
@@ -11,7 +11,7 @@
<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>
<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>
@@ -131,10 +131,12 @@ export default {
padding: 24rpx 0;
background-color: #fafafd;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.empty {
height: 60vh;
display: flex;
pagesA/journal/journal.vue
+6 -5
View File
@@ -13,7 +13,7 @@
</view>
<block v-else>
<block v-for="(journal, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 日记卡片 -->
<journal-card :journal="journal" :useLike="true"></journal-card>
</tm-translate>
@@ -123,10 +123,11 @@ export default {
display: flex;
flex-direction: column;
}
.loading-wrap {
}
.app-page-content {
}
.loading-wrap {}
.app-page-content {}
.content-empty {
height: 60vh;
}
pagesA/leaving/leaving.vue
+6 -20
View File
@@ -13,18 +13,9 @@
</view>
<block v-else>
<block v-for="(item, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 列表项 -->
<comment-item
class="mb-12"
:isChild="false"
:comment="item"
:postId="sheetId"
:useSolid="false"
@on-copy="fnCopyContent"
@on-comment="fnToComment"
@on-detail="fnOnShowCommentDetail"
></comment-item>
<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>
@@ -59,15 +50,7 @@
</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>
<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>
@@ -255,14 +238,17 @@ export default {
flex-direction: column;
background-color: #fafafd;
}
.app-page-content {
box-sizing: border-box;
// box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
}
.content-empty {
width: 100%;
height: 60vh;
}
.loading-wrap {
box-sizing: border-box;
padding: 24rpx;
pagesA/tag-detail/tag-detail.vue
+3 -1
View File
@@ -11,7 +11,7 @@
<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>
<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>
@@ -131,10 +131,12 @@ export default {
padding: 24rpx 0;
background-color: #fafafd;
}
.loading-wrap {
padding: 0 24rpx;
min-height: 100vh;
}
.empty {
height: 60vh;
display: flex;
pagesB/articles/articles.vue
+11 -1
View File
@@ -29,7 +29,7 @@
</view>
<block v-else>
<block v-for="(article, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<!-- 文章卡片 -->
<view class="article-card mt-24 bg-white pa-24 round-3">
<view class="thumbnail round-2" @click="fnToArticleDetail(article)">
@@ -229,10 +229,12 @@ export default {
},
// 显示分类选择
fnOnCategoryConfirm(e) {
this.fnResetSetAniWaitIndex();
this.category.selected = [e[0].index];
this.queryParams.categoryId = e[0].data.id;
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.queryParams.page = 0;
this.isLoadMore = false;
this.fnToTopPage();
@@ -357,8 +359,10 @@ export default {
background-color: #212121;
}
}
.app-page-content {
box-sizing: border-box;
.content-empty {
height: 60vh;
}
@@ -367,20 +371,24 @@ export default {
.article-card {
box-sizing: border-box;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
.thumbnail {
width: 100%;
height: 280rpx;
&-img {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.03);
}
&-not {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.03);
}
}
.title {
overflow: hidden;
white-space: nowrap;
@@ -388,6 +396,7 @@ export default {
word-wrap: break-word;
word-break: break-all;
}
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -396,6 +405,7 @@ export default {
word-wrap: break-word;
word-break: break-all;
}
.foot {
box-sizing: border-box;
border-top: 2rpx solid rgba(0, 0, 0, 0.03);
pagesB/attachment/attachment.vue
+29 -45
View File
@@ -25,7 +25,7 @@
<block v-else>
<!-- 内容区域 -->
<block v-for="(item, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="attachment-card mb-24 flex bg-white pa-24 round-3" @click="fnShowDetail(item)">
<view class="cover round-3 flex flex-center" :class="[fnGetIconClass(item.mediaType)]">
<text class="icon iconfont">{{ item.suffix }}</text>
@@ -52,22 +52,9 @@
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
<view class="preview-file pl-24 pr-24">
<!-- 图片预览 -->
<tm-images
v-if="$utils.fnCheckIsFileType('image', detail.form)"
:width="700"
:height="350"
:round="3"
:src="$utils.checkThumbnailUrl(detail.form.path)"
model="aspectFill"
></tm-images>
<tm-images v-if="$utils.fnCheckIsFileType('image', detail.form)" :width="700" :height="350" :round="3" :src="$utils.checkThumbnailUrl(detail.form.path)" model="aspectFill"></tm-images>
<!-- 视频 -->
<video
v-else-if="$utils.fnCheckIsFileType('video', detail.form)"
class="round-3"
style="width: 100%;height: 350rpx;"
:src="$utils.checkUrl(detail.form.path)"
controls
></video>
<video v-else-if="$utils.fnCheckIsFileType('video', detail.form)" class="round-3" style="width: 100%;height: 350rpx;" :src="$utils.checkUrl(detail.form.path)" controls></video>
<view v-else class="flex flex-center border-a-1 round-3 text-align-center text-grey-darken-1" style="height: 280rpx;background-color: #f2f2f2;">
该文件暂不支持预览
</view>
@@ -78,17 +65,7 @@
<tm-input :disabled="true" color="grey" title="附件位置" v-model="detail.form.type"></tm-input>
<tm-input :disabled="true" color="grey" title="附件大小" v-model="detail.form.sizeText"></tm-input>
<tm-input :disabled="true" color="grey" title="上传日期" v-model="detail.form.createTime"></tm-input>
<tm-input
:disabled="true"
:vertical="true"
:borderBottom="false"
input-type="textarea"
title="文件地址"
color="grey"
bg-color="grey-lighten-5"
:height="120"
v-model="detail.form.path"
>
<tm-input :disabled="true" :vertical="true" :borderBottom="false" input-type="textarea" title="文件地址" color="grey" bg-color="grey-lighten-5" :height="120" v-model="detail.form.path">
<template v-slot:default="{ title }">
{{ title }}
<tm-button text theme="light-blue" size="xs" @click="$utils.copyText(detail.form.path, '复制成功！')">复制</tm-button>
@@ -153,8 +130,7 @@ export default {
loading: 'loading',
filterLoading: 'loading',
btnOption: {
actions: [
{
actions: [{
icon: 'icon-like',
color: 'bg-gradient-orange-accent'
},
@@ -168,28 +144,23 @@ export default {
}
]
},
filterList: [
{
filterList: [{
title: '存储位置',
children: [
{
children: [{
title: '',
name: 'attachmentType',
model: 'radio',
children: []
}
]
}]
},
{
title: '文件类型',
children: [
{
children: [{
title: '',
name: 'mediaType',
model: 'radio',
children: []
}
]
}]
}
],
queryParams: {
@@ -307,11 +278,13 @@ export default {
// 搜索区域确定
fnOnConfirm(e) {
this.fnResetSetAniWaitIndex();
this.queryParams.attachmentType = e[0].children.map(x => x.id).join('') || undefined;
this.queryParams.mediaType = e[1].children.map(x => x.id).join('') || undefined;
this.fnOnSearch();
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
@@ -524,12 +497,10 @@ export default {
case 2:
// 上传文件：
// todo:使用第三方控件
AfDocument.openMode(
{
AfDocument.openMode({
size: 1,
isDown: true,
types: [
{
types: [{
name: '文档',
value: ['doc', 'wps', 'docx', 'xls', 'xlsx', 'pdf']
},
@@ -689,9 +660,11 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
}
.filter-wrap {
position: fixed;
left: 0;
@@ -705,29 +678,36 @@ export default {
width: 100vw;
z-index: 6;
}
.page-content {
}
.page-content {}
.content-empty {
width: 100vw;
height: 65vh;
}
.attachment-card {
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
.cover {
width: 170rpx;
height: 160rpx;
background-color: rgb(104, 136, 151);
// box-shadow: 0 6rpx 10rpx rgba(51, 154, 204, 0.2);
&.is-video {
background-color: rgb(3, 174, 252);
}
&.is-image {
background-color: #1cbcb4;
}
.icon {
font-size: 40rpx;
color: #fff;
}
.thumbnai {
width: 100%;
height: 100%;
@@ -736,6 +716,7 @@ export default {
border: 6rpx solid #fff;
}
}
.info {
width: 0;
flex-grow: 1;
@@ -750,13 +731,16 @@ export default {
box-sizing: border-box;
height: 66vh;
}
.poup-content {
width: 100%;
overflow: hidden;
}
.btn-wrap {
width: 100%;
}
.file-name {
white-space: nowrap;
overflow: hidden;
pagesB/category/category.vue
+16 -41
View File
@@ -16,7 +16,7 @@
<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="(category, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="category-card flex round-3 bg-white pa-24 mb-24" @click="fnShowFormModal(category)">
<text class="del-icon flex flex-center" @click.stop="fnDelete(category, index)">×</text>
<view class="left">
@@ -52,49 +52,13 @@
<view class="poup-content">
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑分类' : '新增分类' }}</view>
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
<tm-input
required
:adjust-position="true"
:round="3"
:borderBottom="false"
title="名称"
bg-color="grey-lighten-5"
v-model="form.name"
placeholder="请输入分类名称"
></tm-input>
<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入分类名称"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：页面上所显示的名称</view>
<tm-input
:borderBottom="false"
:adjust-position="true"
:round="3"
title="别名"
bg-color="grey-lighten-5"
v-model="form.slug"
placeholder="请输入分类别名"
></tm-input>
<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="别名" bg-color="grey-lighten-5" v-model="form.slug" placeholder="请输入分类别名"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：一般为单个分类页面的标识，最好为英文</view>
<tm-input
:borderBottom="false"
:adjust-position="true"
:round="3"
title="密码"
bg-color="grey-lighten-5"
v-model="form.password"
placeholder="请输入分类密码"
></tm-input>
<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="密码" bg-color="grey-lighten-5" v-model="form.password" placeholder="请输入分类密码"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：分类的访问密码</view>
<tm-input
:borderBottom="false"
:vertical="true"
:adjust-position="true"
inputType="textarea"
:round="3"
title="描述"
:height="160"
bg-color="grey-lighten-5"
v-model="form.description"
placeholder="请输入分类描述"
></tm-input>
<tm-input :borderBottom="false" :vertical="true" :adjust-position="true" inputType="textarea" :round="3" title="描述" :height="160" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入分类描述"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：分类的描述信息</view>
<view class="ma-30 mt-12 pb-12">
<view class="mb-12">
@@ -342,11 +306,13 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
.loading-error {
height: 65vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
@@ -355,19 +321,23 @@ export default {
.poup-content {
overflow: hidden;
}
.poup-body {
height: 71vh;
box-sizing: border-box;
touch-action: none;
}
.thumbnail {
width: 100%;
height: 260rpx;
}
.category-card {
position: relative;
box-sizing: border-box;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
.del-icon {
width: 46rpx;
height: 46rpx;
@@ -382,6 +352,7 @@ export default {
font-size: 32rpx;
color: #fff;
}
.left {
width: 200rpx;
height: 190rpx;
@@ -392,10 +363,12 @@ export default {
background-color: #607d8b;
}
}
.right {
width: 0;
flex-grow: 1;
box-sizing: border-box;
.color {
color: #fff;
}
@@ -404,9 +377,11 @@ export default {
.desc-box {
box-sizing: border-box;
.label {
width: 86rpx;
}
.value {
width: 0;
flex-grow: 1;
pagesB/comments/comments.vue
+9 -12
View File
@@ -19,7 +19,7 @@
<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="(comment, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="comment-card bg-white round-3 pt-24 pb-24">
<view class="head flex flex-between pl-24 pr-24">
<view class="left flex flex-center">
@@ -96,17 +96,7 @@
<view class="mb-24">评论内容</view>
<view class="pa-24 pt-12 pb-12 grey-lighten-5 text-grey round-3">{{ reply.data.content }}</view>
</view>
<tm-input
:vertical="true"
:borderBottom="false"
input-type="textarea"
title="我的回复"
bg-color="grey-lighten-5"
v-model="reply.form.content"
:height="150"
:focus="true"
:adjustPosition="true"
></tm-input>
<tm-input :vertical="true" :borderBottom="false" input-type="textarea" title="我的回复" bg-color="grey-lighten-5" v-model="reply.form.content" :height="150" :focus="true" :adjustPosition="true"></tm-input>
</scroll-view>
<view class="btn-wrap flex flex-center">
<!-- 审核状态 -->
@@ -213,6 +203,7 @@ export default {
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.fnResetReply();
this.dataList = [];
this.queryType = ['Posts', 'Sheets', 'Journals'][index];
@@ -438,12 +429,15 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
@@ -461,13 +455,16 @@ export default {
border: 4rpx solid #fff;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.15);
}
.comment-content {
line-height: 1.6;
}
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 60vh;
box-sizing: border-box;
pagesB/journal/journal.vue
+5 -10
View File
@@ -17,16 +17,8 @@
</view>
<block v-else>
<block v-for="(journal, index) in dataList" :key="journal.id">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<journal-card
:isAdmin="true"
:journal="journal"
:useLike="false"
:useEdit="true"
:useDel="true"
@on-del="fnOnJournalDel"
@on-edit="fnOnJournalEdit"
></journal-card>
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<journal-card :isAdmin="true" :journal="journal" :useLike="false" :useEdit="true" :useDel="true" @on-del="fnOnJournalDel" @on-edit="fnOnJournalEdit"></journal-card>
</tm-translate>
</block>
<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
@@ -163,12 +155,15 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 40vh;
}
}
.edit-wrap {
box-sizing: border-box;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
pagesB/links/links.vue
+22 -53
View File
@@ -23,10 +23,12 @@
<view v-if="filterList.lenght == 0" class="empty"><tm-empty icon="icon-wind-cry" label="无数据"></tm-empty></view>
<block v-else>
<block v-for="(item, index) in filterList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="link-card round-3 bg-white flex flex-col mt-24 ml-24 mr-24 pa-24">
<view class="head flex">
<view class="left round-2 flex flex-col flex-center"><image class="logo round-2 " :src="item.logo" mode="aspectFill"></image></view>
<view class="left round-2 flex flex-col flex-center">
<image class="logo round-2 " :src="item.logo" mode="aspectFill"></image>
</view>
<view class="right pl-24 text-size-m">
<view class="title flex flex-between ">
<view class="name flex text-overflow mr-6 text-weight-b">
@@ -71,27 +73,9 @@
<view class="poup-content">
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑友链' : '新增友链' }}</view>
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
<tm-input
required
:adjust-position="true"
:round="3"
:borderBottom="false"
title="网站名称"
bg-color="grey-lighten-5"
v-model="form.name"
placeholder="请输入网站名称"
></tm-input>
<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="网站名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入网站名称"></tm-input>
<tm-input
required
:borderBottom="false"
:adjust-position="true"
:round="3"
title="网站地址"
bg-color="grey-lighten-5"
v-model="form.url"
placeholder="请输入网站地址"
></tm-input>
<tm-input required :borderBottom="false" :adjust-position="true" :round="3" title="网站地址" bg-color="grey-lighten-5" v-model="form.url" placeholder="请输入网站地址"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：需要加上 http://</view>
<tm-input :borderBottom="false" :round="3" bg-color="grey-lighten-5" title="网站分组" placeholder="请输入选择网站分组" :value="form.team">
@@ -101,38 +85,10 @@
</tm-pickers>
</template>
</tm-input>
<tm-input
input-type="number"
:borderBottom="false"
:adjust-position="true"
:round="3"
title="排序编号"
bg-color="grey-lighten-5"
v-model.number="form.priority"
placeholder="请输入排序"
></tm-input>
<tm-input
:borderBottom="false"
:vertical="true"
:adjust-position="true"
inputType="textarea"
:round="3"
title="网站描述"
:height="120"
bg-color="grey-lighten-5"
v-model="form.description"
placeholder="请输入描述"
></tm-input>
<tm-input input-type="number" :borderBottom="false" :adjust-position="true" :round="3" title="排序编号" bg-color="grey-lighten-5" v-model.number="form.priority" placeholder="请输入排序"></tm-input>
<tm-input :borderBottom="false" :vertical="true" :adjust-position="true" inputType="textarea" :round="3" title="网站描述" :height="120" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入描述"></tm-input>
<tm-input
:borderBottom="false"
:adjust-position="true"
:round="3"
title="LOGO"
bg-color="grey-lighten-5"
v-model="form.logo"
placeholder="请输入LOGO地址"
></tm-input>
<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="LOGO" bg-color="grey-lighten-5" v-model="form.logo" placeholder="请输入LOGO地址"></tm-input>
<view class="ma-30 mt-12 pb-12 bg-grey">
<image v-if="form.logo" class="thumbnail round-3" :src="form.logo" mode="aspectFill" @click="$utils.previewImage([form.logo])"></image>
<view v-else class="thumbnail round-3 text-grey grey-lighten-5 flex flex-col flex-center ">
@@ -217,6 +173,7 @@ export default {
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.fnToTopPage();
let _filterData = [];
if (index == 0) {
@@ -381,24 +338,30 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
}
}
.link-card {
box-sizing: border-box;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
.head {
.left {
width: 166rpx;
height: 166rpx;
.logo {
width: 100%;
height: 100%;
}
}
.right {
width: 0;
flex-grow: 1;
@@ -409,15 +372,18 @@ export default {
display: flex;
align-items: center;
}
.label {
width: 84rpx;
}
.value {
width: 0;
flex-grow: 1;
}
}
}
.foot {
box-sizing: border-box;
// border-top: 2rpx solid rgba(0, 0, 0, 0.03);
@@ -427,11 +393,13 @@ export default {
.poup-content {
overflow: hidden;
}
.poup-body {
height: 71vh;
box-sizing: border-box;
touch-action: none;
}
.thumbnail {
width: 100%;
height: 260rpx;
@@ -440,6 +408,7 @@ export default {
.update-btn {
background-color: rgba(240, 250, 255, 1);
}
.del-btn {
background-color: rgba(254, 241, 240, 1) !important;
}
pagesB/logs/logs.vue
+9 -3
View File
@@ -12,7 +12,7 @@
<block v-else>
<block v-for="(item, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="card mb-24 bg-white pa-24 round-3">
<view class="border-b-1 pb-20 text-size-l text-weight-b">
<tm-tags :dense="true" :shadow="0" color="bg-gradient-light-blue-accent" size="s" model="fill">ID：{{ item.id }}</tm-tags>
@@ -271,22 +271,27 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
}
.page-content {
}
.page-content {}
.content-empty {
width: 100vw;
height: 65vh;
}
.card {
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
}
.desc-item {
.desc-label {
width: 150rpx;
position: relative;
&::after {
content: '：';
position: absolute;
@@ -294,6 +299,7 @@ export default {
top: 0rpx;
}
}
.desc-value {
word-wrap: break-word;
word-break: break-all;
pagesB/photos/photos.vue
+19 -96
View File
@@ -1,17 +1,7 @@
<template>
<view class="app-page flex flex-col">
<view class="e-fixed shadow-2 bg-white">
<tm-search
:clear="true"
v-model="queryParams.keyword"
:round="24"
:shadow="0"
confirmText="搜索"
color="light-blue"
insertColor="light-blue"
align="center"
@confirm="fnOnSearch()"
></tm-search>
<tm-search :clear="true" v-model="queryParams.keyword" :round="24" :shadow="0" confirmText="搜索" color="light-blue" insertColor="light-blue" align="center" @confirm="fnOnSearch()"></tm-search>
<tm-tabs v-if="team.list.length != 0" color="light-blue" :shadow="0" v-model="team.activeIndex" :list="team.list" align="center" @change="fnOnTabChange"></tm-tabs>
</view>
@@ -35,7 +25,7 @@
<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">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="card mb-24 flex flex-col bg-white pa-24 round-3">
<view class="thumbnail round-2" @click="fnPreview(item, index)">
<image class="thumbnail-img round-2" :src="item.showThumbnail" mode="aspectFill"></image>
@@ -66,99 +56,23 @@
<view class="poup-content">
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑图片' : '新增图片' }}</view>
<scroll-view :enable-flex="true" class="poup-body pa-24 pt-0 pb-0" :scroll-y="true" :scroll-top="poupBodyScrollTop" @touchmove.stop @scroll="fnOnPoupBodyScroll">
<tm-input
:adjust-position="true"
:round="3"
clear
:borderBottom="false"
title="图片名称"
bg-color="grey-lighten-5"
v-model="form.name"
placeholder="请输入图片名称"
></tm-input>
<tm-input :adjust-position="true" :round="3" clear :borderBottom="false" title="图片名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入图片名称"></tm-input>
<tm-input
name="team"
:adjust-position="true"
:round="3"
bg-color="grey-lighten-5"
:borderBottom="false"
title="图片分组"
placeholder="请选择输入或分组"
v-model="form.team"
>
<tm-input name="team" :adjust-position="true" :round="3" bg-color="grey-lighten-5" :borderBottom="false" title="图片分组" placeholder="请选择输入或分组" v-model="form.team">
<tm-pickers slot="rightBtn" rang-key="name" :default-value.sync="team.selected" :list="team.selectList" @confirm="fnOnSelectTeamConfirm">
<tm-button size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent">选择</tm-button>
</tm-pickers>
</tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：图片分组可选择，也可以输入新的分组名称</view>
<tm-pickersDate
:full-number="true"
:show-detail="{ year: true, month: true, day: true, hour: true, min: true, sec: true }"
:default-value="takeTime"
@confirm="fnOnTakeTimeConfirm"
>
<tm-input
title="拍摄时间"
:adjust-position="true"
:round="3"
bg-color="grey-lighten-5"
:borderBottom="false"
placeholder="请选择拍摄时间"
disabled
:value="takeTime"
></tm-input>
<tm-pickersDate :full-number="true" :show-detail="{ year: true, month: true, day: true, hour: true, min: true, sec: true }" :default-value="takeTime" @confirm="fnOnTakeTimeConfirm">
<tm-input title="拍摄时间" :adjust-position="true" :round="3" bg-color="grey-lighten-5" :borderBottom="false" placeholder="请选择拍摄时间" disabled :value="takeTime"></tm-input>
</tm-pickersDate>
<tm-input
:borderBottom="false"
:adjust-position="true"
:round="3"
clear
title="拍摄地点"
bg-color="grey-lighten-5"
v-model="form.location"
placeholder="请输入拍摄地点"
></tm-input>
<tm-input
:borderBottom="false"
:vertical="false"
clear
:adjust-position="true"
inputType="textarea"
:round="3"
title="图片描述"
:height="160"
bg-color="grey-lighten-5"
v-model="form.description"
placeholder="请输入图片描述"
></tm-input>
<tm-input
name="url"
clear
:borderBottom="false"
:adjust-position="true"
:round="3"
title="图片地址"
bg-color="grey-lighten-5"
v-model="form.url"
placeholder="请输入或选择图片"
@clear="fnOnUrlInputChange"
@blur="fnOnUrlInputChange"
@input="fnOnUrlInputChange"
>
<tm-input :borderBottom="false" :adjust-position="true" :round="3" clear title="拍摄地点" bg-color="grey-lighten-5" v-model="form.location" placeholder="请输入拍摄地点"></tm-input>
<tm-input :borderBottom="false" :vertical="false" clear :adjust-position="true" inputType="textarea" :round="3" title="图片描述" :height="160" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入图片描述"></tm-input>
<tm-input name="url" clear :borderBottom="false" :adjust-position="true" :round="3" title="图片地址" bg-color="grey-lighten-5" v-model="form.url" placeholder="请输入或选择图片" @clear="fnOnUrlInputChange" @blur="fnOnUrlInputChange" @input="fnOnUrlInputChange">
<tm-button slot="rightBtn" size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent" @click="fnShowAttachmentsSelect('url')">选择</tm-button>
</tm-input>
<tm-input
name="thumbnail"
:borderBottom="false"
:adjust-position="true"
:round="3"
clear
title="缩略图片"
bg-color="grey-lighten-5"
v-model="form.thumbnail"
placeholder="请输入或选择缩略图"
>
<tm-input name="thumbnail" :borderBottom="false" :adjust-position="true" :round="3" clear title="缩略图片" bg-color="grey-lighten-5" v-model="form.thumbnail" placeholder="请输入或选择缩略图">
<tm-button slot="rightBtn" size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent" @click="fnShowAttachmentsSelect('thumbnail')">
选择
</tm-button>
@@ -297,12 +211,14 @@ export default {
.catch(err => {});
},
fnOnSearch() {
this.fnResetSetAniWaitIndex();
this.queryParams.page = 0;
this.isLoadMore = false;
this.fnToTopPage();
this.fnGetData();
},
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.queryParams.team = index == 0 ? undefined : this.team.list[index];
this.queryParams.page = 0;
this.dataList = [];
@@ -519,23 +435,29 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
}
}
.btn-wrap {
box-sizing: border-box;
padding-top: 12rpx;
padding-bottom: 12rpx;
box-shadow: 0rpx -4rpx 24rpx rgba(0, 0, 0, 0.05);
}
.card {
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
}
.thumbnail {
width: 100%;
&-img {
width: 100%;
height: 300rpx;
@@ -545,6 +467,7 @@ export default {
.poup-content {
overflow: hidden;
}
.poup-body {
height: 69vh;
box-sizing: border-box;
pagesB/tags/tags.vue
+13 -29
View File
@@ -14,7 +14,7 @@
<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="(tag, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
<view class="tags-card flex round-3 bg-white pa-24 mb-24" @click="fnShowFormModal(tag)">
<text class="del-icon flex flex-center" @click.stop="fnDelete(tag, index)">×</text>
<view class="left">
@@ -46,36 +46,11 @@
<view class="poup-content">
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑标签' : '新增标签' }}</view>
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
<tm-input
required
:adjust-position="true"
:round="3"
:borderBottom="false"
title="名称"
bg-color="grey-lighten-5"
v-model="form.name"
placeholder="请输入标签名称"
></tm-input>
<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入标签名称"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：页面上所显示的名称</view>
<tm-input
:borderBottom="false"
:adjust-position="true"
:round="3"
title="别名"
bg-color="grey-lighten-5"
v-model="form.slug"
placeholder="请输入标签别名"
></tm-input>
<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="别名" bg-color="grey-lighten-5" v-model="form.slug" placeholder="请输入标签别名"></tm-input>
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：一般为单个标签页面的标识，最好为英文</view>
<tm-input
bg-color="grey-lighten-5"
:border-bottom="false"
:adjust-position="true"
:round="3"
title="颜色"
placeholder="点击右侧选择标签颜色"
v-model="form.color"
>
<tm-input bg-color="grey-lighten-5" :border-bottom="false" :adjust-position="true" :round="3" title="颜色" placeholder="点击右侧选择标签颜色" v-model="form.color">
<template v-slot:rightBtn>
<tm-button class="ml-12" theme="bg-gradient-blue-accent" :round="3" :font-size="24" :height="66" block :width="120" @click="fnSelectColor">
选择颜色
@@ -327,11 +302,13 @@ export default {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
.loading-error {
height: 65vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
@@ -340,18 +317,22 @@ export default {
.poup-content {
overflow: hidden;
}
.poup-body {
height: 58vh;
box-sizing: border-box;
}
.thumbnail {
width: 100%;
height: 260rpx;
}
.tags-card {
position: relative;
box-sizing: border-box;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
.del-icon {
width: 46rpx;
height: 46rpx;
@@ -366,6 +347,7 @@ export default {
font-size: 32rpx;
color: #fff;
}
.left {
width: 160rpx;
height: 140rpx;
@@ -377,8 +359,10 @@ export default {
background-color: #607d8b;
}
}
.right {
box-sizing: border-box;
.color {
color: #fff;
}