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

修改:优化列表动画效果

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