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
pagesB/articles/articles.vue
+279 -269
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)">
@@ -110,295 +110,305 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
export default {
components: {
tmSkeleton,
tmSearch,
tmTranslate,
tmTabs,
tmFlotbutton,
tmEmpty,
tmTags,
tmButton,
tmPickers
},
data() {
return {
isBlackTheme: false,
loading: 'loading',
tab: {
activeIndex: 0,
list: ['全部', '已发布', '私密', '草稿', '回收站']
},
queryParams: {
size: 10,
page: 0,
status: '',
keyword: '',
categoryId: undefined
},
cache: {
dataList: [],
total: 0
},
isLoadMore: false,
loadMoreText: '加载中...',
result: {},
dataList: [],
category: {
export default {
components: {
tmSkeleton,
tmSearch,
tmTranslate,
tmTabs,
tmFlotbutton,
tmEmpty,
tmTags,
tmButton,
tmPickers
},
data() {
return {
isBlackTheme: false,
loading: 'loading',
show: false,
list: [],
selected: [0]
}
};
},
onLoad() {
this.fnSetPageTitle('文章管理');
this.fnGetCategoryList();
},
created() {
this.fnGetData();
uni.$on('refresh-article-list', () => {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
});
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnOnTabChange(index) {
this.dataList = [];
const _status = {
0: '',
1: 'PUBLISHED',
2: 'INTIMATE',
3: 'DRAFT',
4: 'RECYCLE'
tab: {
activeIndex: 0,
list: ['全部', '已发布', '私密', '草稿', '回收站']
},
queryParams: {
size: 10,
page: 0,
status: '',
keyword: '',
categoryId: undefined
},
cache: {
dataList: [],
total: 0
},
isLoadMore: false,
loadMoreText: '加载中...',
result: {},
dataList: [],
category: {
loading: 'loading',
show: false,
list: [],
selected: [0]
}
};
this.queryParams.status = _status[index];
this.queryParams.page = 0;
this.fnToTopPage();
},
onLoad() {
this.fnSetPageTitle('文章管理');
this.fnGetCategoryList();
},
created() {
this.fnGetData();
uni.$on('refresh-article-list', () => {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
});
},
// 获取分类列表
fnGetCategoryList() {
this.category.loading = 'loading';
this.$httpApi.admin
.getCategoryList()
.then(res => {
if (res.status == 200) {
let _list = res.data;
_list.unshift({ id: undefined, name: '全部' });
this.category.list = _list;
this.category.loading = 'success';
} else {
this.category.loading = 'error';
}
})
.catch(err => {
this.category.loading = 'error';
});
},
// 显示分类选择
fnOnCategoryConfirm(e) {
this.category.selected = [e[0].index];
this.queryParams.categoryId = e[0].data.id;
},
fnOnSearch() {
this.queryParams.page = 0;
onPullDownRefresh() {
this.isLoadMore = false;
this.fnToTopPage();
this.queryParams.page = 0;
this.fnGetData();
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getPostsByPage(this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
if (res.status == 200) {
// 处理数据
this.result = res.data;
const _dataList = res.data.content.map(item => {
item.hasThumbnail = item.thumbnail != '';
if (item.thumbnail) {
item.thumbnail = this.$utils.checkThumbnailUrl(item.thumbnail);
}
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_dataList);
} else {
this.dataList = _dataList;
}
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
} else {
this.loading = 'error';
this.loadMoreText = '呜呜，加载失败了~';
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
// 跳转文章详情（预览）
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
animationType: 'slide-in-right'
});
},
// 新增
fnOnAddArticle() {
this.$Router.push({ path: '/pagesB/articles/article-edit', query: {} });
},
// 文章编辑
fnOnEditArticle(article) {
this.$Router.push({ path: '/pagesB/articles/article-edit', query: { postsId: article.id } });
},
// 设置文章信息
fnOnSetArticle(article, index) {
this.$Router.push({ path: '/pagesB/articles/article-setting', query: { postsId: article.id, postTitle: article.title, isEdit: 1, from: 'list' } });
},
// 删除文章
fnOnDelArticle(article, index) {
uni.$eShowModal({
title: '提示',
content: '是否确定要删除该文章？',
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
uni.showLoading({
mask: true,
title: '删除中...'
methods: {
fnOnTabChange(index) {
this.dataList = [];
const _status = {
0: '',
1: 'PUBLISHED',
2: 'INTIMATE',
3: 'DRAFT',
4: 'RECYCLE'
};
this.queryParams.status = _status[index];
this.queryParams.page = 0;
this.fnToTopPage();
this.fnGetData();
},
// 获取分类列表
fnGetCategoryList() {
this.category.loading = 'loading';
this.$httpApi.admin
.getCategoryList()
.then(res => {
if (res.status == 200) {
let _list = res.data;
_list.unshift({ id: undefined, name: '全部' });
this.category.list = _list;
this.category.loading = 'success';
} else {
this.category.loading = 'error';
}
})
.catch(err => {
this.category.loading = 'error';
});
this.$httpApi.admin
.deletePostsByIds([article.id])
.then(res => {
if (res.status == 200) {
uni.$tm.toast('文章已删除成功！');
this.dataList.splice(index, 1);
},
// 显示分类选择
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();
this.fnGetData();
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getPostsByPage(this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
if (res.status == 200) {
// 处理数据
this.result = res.data;
const _dataList = res.data.content.map(item => {
item.hasThumbnail = item.thumbnail != '';
if (item.thumbnail) {
item.thumbnail = this.$utils.checkThumbnailUrl(item.thumbnail);
}
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_dataList);
} else {
uni.$tm.toast('操作失败，请重试！');
this.dataList = _dataList;
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
} else {
this.loading = 'error';
this.loadMoreText = '呜呜，加载失败了~';
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
// 跳转文章详情（预览）
fnToArticleDetail(article) {
uni.navigateTo({
url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
animationType: 'slide-in-right'
});
},
// 新增
fnOnAddArticle() {
this.$Router.push({ path: '/pagesB/articles/article-edit', query: {} });
},
// 文章编辑
fnOnEditArticle(article) {
this.$Router.push({ path: '/pagesB/articles/article-edit', query: { postsId: article.id } });
},
// 设置文章信息
fnOnSetArticle(article, index) {
this.$Router.push({ path: '/pagesB/articles/article-setting', query: { postsId: article.id, postTitle: article.title, isEdit: 1, from: 'list' } });
},
// 删除文章
fnOnDelArticle(article, index) {
uni.$eShowModal({
title: '提示',
content: '是否确定要删除该文章？',
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
uni.showLoading({
mask: true,
title: '删除中...'
});
})
.catch(err => {});
this.$httpApi.admin
.deletePostsByIds([article.id])
.then(res => {
if (res.status == 200) {
uni.$tm.toast('文章已删除成功！');
this.dataList.splice(index, 1);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 24rpx;
background-color: #fafafd;
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 24rpx;
background-color: #fafafd;
&.is-balck {
background-color: #212121;
}
}
.app-page-content {
box-sizing: border-box;
.content-empty {
height: 60vh;
}
}
.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);
&.is-balck {
background-color: #212121;
}
}
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
}
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
.foot {
.app-page-content {
box-sizing: border-box;
border-top: 2rpx solid rgba(0, 0, 0, 0.03);
.content-empty {
height: 60vh;
}
}
}
</style>
.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;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
}
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
.foot {
box-sizing: border-box;
border-top: 2rpx solid rgba(0, 0, 0, 0.03);
}
}
</style>
pagesB/attachment/attachment.vue
+620 -636
View File
File diff suppressed because it is too large Load Diff
pagesB/category/category.vue
+283 -308
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">
@@ -122,207 +86,163 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTranslate,
tmFlotbutton,
tmPoup,
tmInput,
AttachmentSelect
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0,
more: true
},
dataList: [],
poupShow: false,
attachmentsSelectShow: false,
form: {
description: undefined,
password: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
}
};
},
onLoad() {
this.fnSetPageTitle('分类管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getCategoryList(this.queryParams)
.then(res => {
console.log('getCategoryList：');
console.log(res);
if (res.status == 200) {
this.loading = 'success';
this.dataList = res.data.map(item => {
if (item.thumbnail) {
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
} else {
item['showThumbnail'] = '';
}
return item;
});
} else {
this.loading = 'error';
}
console.log(this.dataList);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTranslate,
tmFlotbutton,
tmPoup,
tmInput,
AttachmentSelect
},
fnSelectColor() {
this.$refs.colorPicker.open();
},
fnOnConfirmSelectColor(e) {
this.selectColor = e.rgba;
this.$set(this.form, 'color', e.hex);
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
this.form.thumbnail = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
this.attachmentsSelectShow = false;
},
fnShowFormModal(category) {
if (category) {
this.form = Object.assign({}, {}, category);
if (category.thumbnail) {
this.form.showThumbnail = this.$utils.checkThumbnailUrl(category.thumbnail);
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0,
more: true
},
dataList: [],
poupShow: false,
attachmentsSelectShow: false,
form: {
description: undefined,
password: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnResetForm() {
this.form = {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('分类名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.createCategory(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
} else {
this.$httpApi.admin
.updateCategoryById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
onLoad() {
this.fnSetPageTitle('分类管理');
},
// 删除
fnDelete(category) {
const _category = category || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_category.name} 的分类删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getCategoryList(this.queryParams)
.then(res => {
console.log('getCategoryList：');
console.log(res);
if (res.status == 200) {
this.loading = 'success';
this.dataList = res.data.map(item => {
if (item.thumbnail) {
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
} else {
item['showThumbnail'] = '';
}
return item;
});
} else {
this.loading = 'error';
}
console.log(this.dataList);
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
fnSelectColor() {
this.$refs.colorPicker.open();
},
fnOnConfirmSelectColor(e) {
this.selectColor = e.rgba;
this.$set(this.form, 'color', e.hex);
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
this.form.thumbnail = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
this.attachmentsSelectShow = false;
},
fnShowFormModal(category) {
if (category) {
this.form = Object.assign({}, {}, category);
if (category.thumbnail) {
this.form.showThumbnail = this.$utils.checkThumbnailUrl(category.thumbnail);
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnResetForm() {
this.form = {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('分类名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.deleteCategoryById(_category.id)
.createCategory(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_category.name} 分类已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _category.id);
this.dataList.splice(delIndex, 1);
uni.$tm.toast(`保存成功！`);
uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
@@ -330,91 +250,146 @@ export default {
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
} else {
this.$httpApi.admin
.updateCategoryById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
},
// 删除
fnDelete(category) {
const _category = category || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_category.name} 的分类删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin
.deleteCategoryById(_category.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_category.name} 分类已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _category.id);
this.dataList.splice(delIndex, 1);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
.loading-error {
height: 65vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
}
.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;
position: absolute;
right: 24rpx;
top: 24rpx;
border-radius: 50%;
box-sizing: border-box;
border: 4rpx solid #fff;
background-color: #ff8177;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
font-size: 32rpx;
color: #fff;
}
.left {
width: 200rpx;
height: 190rpx;
.cover {
width: 100%;
height: inherit;
background-color: #607d8b;
.loading-wrap {
.loading-error {
height: 65vh;
}
}
.right {
width: 0;
flex-grow: 1;
.content-empty {
width: 100%;
height: 60vh;
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 71vh;
box-sizing: border-box;
.color {
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;
position: absolute;
right: 24rpx;
top: 24rpx;
border-radius: 50%;
box-sizing: border-box;
border: 4rpx solid #fff;
background-color: #ff8177;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
font-size: 32rpx;
color: #fff;
}
}
}
.desc-box {
box-sizing: border-box;
.label {
width: 86rpx;
.left {
width: 200rpx;
height: 190rpx;
.cover {
width: 100%;
height: inherit;
background-color: #607d8b;
}
}
.right {
width: 0;
flex-grow: 1;
box-sizing: border-box;
.color {
color: #fff;
}
}
}
.value {
width: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
.desc-box {
box-sizing: border-box;
.label {
width: 86rpx;
}
.value {
width: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
}
}
}
</style>
</style>
pagesB/comments/comments.vue
+331 -334
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">
<!-- 审核状态 -->
@@ -129,347 +119,354 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTabs,
tmTranslate,
tmFlotbutton,
tmTags,
tmPoup,
tmInput
},
data() {
return {
loading: 'loading',
tab: {
adtiveIndex: 0,
list: ['文章评论', '页面评论', '日记评论']
},
queryParams: {
size: 10,
page: 0
},
result: {},
dataList: [],
queryType: 'Posts',
isLoadMore: false,
loadMoreText: '加载中...',
reply: {
show: false,
data: {},
form: {
allowNotification: true,
author: '',
authorUrl: '',
content: '',
email: '',
parentId: 0,
postId: 0
}
}
};
},
computed: {
// 获取博主信息
bloggerInfo() {
return this.$tm.vx.getters().getBlogger;
}
},
onLoad() {
this.fnSetPageTitle('评论管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnOnTabChange(index) {
this.fnResetReply();
this.dataList = [];
this.queryType = ['Posts', 'Sheets', 'Journals'][index];
this.fnToTopPage();
this.fnGetData();
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTabs,
tmTranslate,
tmFlotbutton,
tmTags,
tmPoup,
tmInput
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin[`get${this.queryType}Comments`](this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
const _list = res.data.content.map(x => {
x.avatar = this.$utils.checkAvatarUrl(x.avatar, x.isAdmin);
return x;
});
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_list);
} else {
this.dataList = _list;
data() {
return {
loading: 'loading',
tab: {
adtiveIndex: 0,
list: ['文章评论', '页面评论', '日记评论']
},
queryParams: {
size: 10,
page: 0
},
result: {},
dataList: [],
queryType: 'Posts',
isLoadMore: false,
loadMoreText: '加载中...',
reply: {
show: false,
data: {},
form: {
allowNotification: true,
author: '',
authorUrl: '',
content: '',
email: '',
parentId: 0,
postId: 0
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
fnShowReplyModal(comment) {
this.reply.data = comment;
this.reply.form.parentId = comment.id;
switch (this.queryType) {
case 'Posts':
this.reply.form.postId = comment.post.id;
break;
case 'Sheets':
this.reply.form.postId = comment.sheet.id;
break;
case 'Journals':
this.reply.form.postId = comment.journal.id;
break;
}
this.reply.show = true;
},
fnResetReply() {
this.reply = {
show: false,
data: {},
form: {
allowNotification: true,
author: '',
authorUrl: '',
content: '',
email: '',
parentId: 0,
postId: 0
}
};
},
// 审核通过
fnReplyPass(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要通过 ${comment.author} 的评论？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'PUBLISHED')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`操作成功！`);
comment.status = 'PUBLISHED';
// uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
computed: {
// 获取博主信息
bloggerInfo() {
return this.$tm.vx.getters().getBlogger;
}
},
// 回复评论
fnReplySubmit() {
this.reply.form.author = this.bloggerInfo.nickname;
this.reply.form.authorUrl = this.$haloConfig.social.blog || this.$haloConfig.apiUrl;
this.reply.form.email = this.bloggerInfo.email;
uni.showLoading({
title: '正在回复中...'
});
this.$httpApi.admin[`post${this.queryType}Comments`](this.reply.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast('回复成功');
this.fnResetReply();
this.fnToTopPage();
uni.startPullDownRefresh();
} else {
uni.$tm.toast('回复失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('回复失败，请重试！');
onLoad() {
this.fnSetPageTitle('评论管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
// 还原
fnRestore(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论还原？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'PUBLISHED')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`已将 ${comment.author} 的评论还原！`);
// uni.startPullDownRefresh();
comment.status = 'PUBLISHED';
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.fnResetReply();
this.dataList = [];
this.queryType = ['Posts', 'Sheets', 'Journals'][index];
this.fnToTopPage();
this.fnGetData();
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin[`get${this.queryType}Comments`](this.queryParams)
.then(res => {
console.log('请求结果：');
console.log(res);
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
const _list = res.data.content.map(x => {
x.avatar = this.$utils.checkAvatarUrl(x.avatar, x.isAdmin);
return x;
});
})
.catch(err => {});
},
// 移到回收站
fnRecycle(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论移到回收站？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'RECYCLE')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`已将 ${comment.author} 的评论移到回收站！`);
comment.status = 'RECYCLE';
// uni.startPullDownRefresh();
} else {
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_list);
} else {
this.dataList = _list;
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
fnShowReplyModal(comment) {
this.reply.data = comment;
this.reply.form.parentId = comment.id;
switch (this.queryType) {
case 'Posts':
this.reply.form.postId = comment.post.id;
break;
case 'Sheets':
this.reply.form.postId = comment.sheet.id;
break;
case 'Journals':
this.reply.form.postId = comment.journal.id;
break;
}
this.reply.show = true;
},
fnResetReply() {
this.reply = {
show: false,
data: {},
form: {
allowNotification: true,
author: '',
authorUrl: '',
content: '',
email: '',
parentId: 0,
postId: 0
}
};
},
// 审核通过
fnReplyPass(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要通过 ${comment.author} 的评论？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'PUBLISHED')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`操作成功！`);
comment.status = 'PUBLISHED';
// uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
},
// 删除评论（永久删除）
fnDelete(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`delete${this.queryType}CommentsById`](comment.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${comment.author} 的评论已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == comment.id);
this.dataList.splice(delIndex, 1);
// uni.startPullDownRefresh();
} else {
});
})
.catch(err => {});
},
// 回复评论
fnReplySubmit() {
this.reply.form.author = this.bloggerInfo.nickname;
this.reply.form.authorUrl = this.$haloConfig.social.blog || this.$haloConfig.apiUrl;
this.reply.form.email = this.bloggerInfo.email;
uni.showLoading({
title: '正在回复中...'
});
this.$httpApi.admin[`post${this.queryType}Comments`](this.reply.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast('回复成功');
this.fnResetReply();
this.fnToTopPage();
uni.startPullDownRefresh();
} else {
uni.$tm.toast('回复失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('回复失败，请重试！');
});
},
// 还原
fnRestore(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论还原？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'PUBLISHED')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`已将 ${comment.author} 的评论还原！`);
// uni.startPullDownRefresh();
comment.status = 'PUBLISHED';
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
});
})
.catch(err => {});
},
// 移到回收站
fnRecycle(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论移到回收站？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`update${this.queryType}CommentsStatus`](comment.id, 'RECYCLE')
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`已将 ${comment.author} 的评论移到回收站！`);
comment.status = 'RECYCLE';
// uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
},
// 删除评论（永久删除）
fnDelete(comment) {
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${comment.author} 的评论删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin[`delete${this.queryType}CommentsById`](comment.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${comment.author} 的评论已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == comment.id);
this.dataList.splice(delIndex, 1);
// uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
}
.comment-card {
box-sizing: border-box;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
margin-bottom: 24rpx;
.loading-wrap {
padding: 24rpx;
.avatar {
width: 56rpx;
height: 56rpx;
.loading-error {
height: 65vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
}
.comment-card {
box-sizing: border-box;
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.05);
margin-bottom: 24rpx;
.avatar {
width: 56rpx;
height: 56rpx;
box-sizing: border-box;
border: 4rpx solid #fff;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.15);
}
.comment-content {
line-height: 1.6;
}
}
.comment-content {
line-height: 1.6;
.poup-content {
overflow: hidden;
}
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 60vh;
box-sizing: border-box;
}
</style>
.poup-body {
height: 60vh;
box-sizing: border-box;
}
</style>
pagesB/journal/journal.vue
+127 -132
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>
@@ -38,139 +30,142 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTranslate,
tmFlotbutton
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
form: {
status: true,
content: '',
keepRaw: true,
sourceContent: '',
type: 'PUBLIC'
},
result: {},
dataList: [],
isLoadMore: false,
loadMoreText: '加载中...'
};
},
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTranslate,
tmFlotbutton
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
form: {
status: true,
content: '',
keepRaw: true,
sourceContent: '',
type: 'PUBLIC'
},
result: {},
dataList: [],
isLoadMore: false,
loadMoreText: '加载中...'
};
},
onLoad() {
this.fnSetPageTitle('日记管理');
},
created() {
this.fnGetData();
uni.$on('journals_refresh', () => {
onLoad() {
this.fnSetPageTitle('日记管理');
},
created() {
this.fnGetData();
uni.$on('journals_refresh', () => {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData(false);
});
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData(false);
});
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
// 调用编辑操作
fnOnToolBarEdit(e) {
this.$refs.article[e.currentTarget.dataset.method]();
},
fnGetData(useTip = true) {
if (useTip) {
uni.showLoading({
mask: true,
title: '加载中...'
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi
.getJournals(this.queryParams)
.then(res => {
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.data.content);
} else {
this.dataList = res.data.content;
}
this.loading = 'success';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
},
methods: {
// 调用编辑操作
fnOnToolBarEdit(e) {
this.$refs.article[e.currentTarget.dataset.method]();
},
fnGetData(useTip = true) {
if (useTip) {
uni.showLoading({
mask: true,
title: '加载中...'
});
}
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi
.getJournals(this.queryParams)
.then(res => {
this.loading = 'success';
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
// 处理数据
this.result = res.data;
if (this.isLoadMore) {
this.dataList = this.dataList.concat(res.data.content);
} else {
this.dataList = res.data.content;
}
this.loading = 'success';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
fnOnJournalDel(journal) {
this.dataList.splice(this.dataList.findIndex(x => x.id == journal.id), 1);
},
fnOnJournalEdit(data) {
uni.$tm.vx.commit('journal/setJournalInfo', data);
this.$Router.push({
path: '/pagesB/journal/journal-edit',
query: data
});
},
fnOnJournalDel(journal) {
this.dataList.splice(this.dataList.findIndex(x => x.id == journal.id), 1);
},
fnOnJournalEdit(data) {
uni.$tm.vx.commit('journal/setJournalInfo', data);
this.$Router.push({
path: '/pagesB/journal/journal-edit',
query: data
});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 40vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.edit-wrap {
box-sizing: border-box;
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
}
</style>
.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);
}
</style>
pagesB/links/links.vue
+286 -317
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 ">
@@ -153,215 +109,172 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmFlotbutton,
tmPoup,
tmInput,
tmPickers,
tmTags,
tmTabs,
tmTranslate
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
dataList: [],
filterList: [],
poupShow: false,
form: {
id: undefined,
description: '',
logo: '',
name: '',
team: '',
url: '',
priority: 0
},
tab: {
activeIndex: 0,
list: []
},
selectTeam: [],
teamList: []
};
},
onLoad() {
this.fnSetPageTitle('友链管理');
this.fnGetTeamData();
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.fnGetData();
},
methods: {
fnOnTabChange(index) {
this.fnToTopPage();
let _filterData = [];
if (index == 0) {
_filterData = this.dataList;
} else {
_filterData = this.dataList.filter(x => x.team == this.teamList[index - 1]);
}
this.filterList = JSON.parse(JSON.stringify(_filterData));
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmFlotbutton,
tmPoup,
tmInput,
tmPickers,
tmTags,
tmTabs,
tmTranslate
},
fnGetTeamData() {
this.$httpApi.admin
.getLinkTeamList()
.then(res => {
if (res.status == 200) {
this.tab.list = ['全部', ...res.data];
this.teamList = res.data;
} else {
uni.$tm.toast('友链分组数据加载失败！');
}
})
.catch(err => {
uni.$tm.toast('友链分组数据加载失败！');
});
},
fnGetData() {
this.loading = 'loading';
uni.showLoading({
mask: true,
title: '加载中...'
});
this.tab.activeIndex = 0;
this.$httpApi.admin
.getLinkList(this.queryParams)
.then(res => {
if (res.status == 200) {
const _dataList = res.data.map(item => {
item.logo = this.$utils.checkUrl(item.logo);
return item;
});
this.dataList = _dataList;
this.filterList = _dataList;
this.loading = 'success';
} else {
this.loading = 'error';
uni.$tm.toast('加载失败，请重试！');
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
uni.$tm.toast('加载失败，请重试！');
})
.finally(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
});
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
fnShowFormModal(link) {
if (link) {
this.form = Object.assign({}, {}, link);
if (link.team) {
this.selectTeam = [link.team];
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnOnSelectTeam(e) {
this.form.team = e[0].data;
this.selectTeam = [e[0].data];
},
fnResetForm() {
this.form = {
id: undefined,
description: '',
logo: '',
name: '',
team: '',
url: '',
priority: 0
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0
},
dataList: [],
filterList: [],
poupShow: false,
form: {
id: undefined,
description: '',
logo: '',
name: '',
team: '',
url: '',
priority: 0
},
tab: {
activeIndex: 0,
list: []
},
selectTeam: [],
teamList: []
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('友链名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.addLink(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
setTimeout(() => {
uni.startPullDownRefresh();
}, 1200);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
} else {
this.$httpApi.admin
.updateLink(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
onLoad() {
this.fnSetPageTitle('友链管理');
this.fnGetTeamData();
},
// 删除
fnDelete(link) {
const _link = link || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_link.name} 删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.fnGetData();
},
methods: {
fnOnTabChange(index) {
this.fnResetSetAniWaitIndex();
this.fnToTopPage();
let _filterData = [];
if (index == 0) {
_filterData = this.dataList;
} else {
_filterData = this.dataList.filter(x => x.team == this.teamList[index - 1]);
}
this.filterList = JSON.parse(JSON.stringify(_filterData));
},
fnGetTeamData() {
this.$httpApi.admin
.getLinkTeamList()
.then(res => {
if (res.status == 200) {
this.tab.list = ['全部', ...res.data];
this.teamList = res.data;
} else {
uni.$tm.toast('友链分组数据加载失败！');
}
})
.catch(err => {
uni.$tm.toast('友链分组数据加载失败！');
});
},
fnGetData() {
this.loading = 'loading';
uni.showLoading({
mask: true,
title: '加载中...'
});
this.tab.activeIndex = 0;
this.$httpApi.admin
.getLinkList(this.queryParams)
.then(res => {
if (res.status == 200) {
const _dataList = res.data.map(item => {
item.logo = this.$utils.checkUrl(item.logo);
return item;
});
this.dataList = _dataList;
this.filterList = _dataList;
this.loading = 'success';
} else {
this.loading = 'error';
uni.$tm.toast('加载失败，请重试！');
}
})
.catch(err => {
console.error(err);
this.loading = 'error';
uni.$tm.toast('加载失败，请重试！');
})
.finally(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
});
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
fnShowFormModal(link) {
if (link) {
this.form = Object.assign({}, {}, link);
if (link.team) {
this.selectTeam = [link.team];
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnOnSelectTeam(e) {
this.form.team = e[0].data;
this.selectTeam = [e[0].data];
},
fnResetForm() {
this.form = {
id: undefined,
description: '',
logo: '',
name: '',
team: '',
url: '',
priority: 0
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('友链名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.deleteLink(_link.id)
.addLink(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_link.name} 已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _link.id);
this.dataList.splice(delIndex, 1);
uni.$tm.toast(`保存成功！`);
setTimeout(() => {
uni.startPullDownRefresh();
}, 1200);
} else {
uni.$tm.toast('操作失败，请重试！');
}
@@ -369,78 +282,134 @@ export default {
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
} else {
this.$httpApi.admin
.updateLink(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
},
// 删除
fnDelete(link) {
const _link = link || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_link.name} 删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin
.deleteLink(_link.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_link.name} 已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _link.id);
this.dataList.splice(delIndex, 1);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.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;
.name {
width: 0;
flex-grow: 1;
display: flex;
align-items: center;
}
.label {
width: 84rpx;
}
.value {
width: 0;
flex-grow: 1;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
}
}
.foot {
.link-card {
box-sizing: border-box;
// border-top: 2rpx solid rgba(0, 0, 0, 0.03);
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;
.name {
width: 0;
flex-grow: 1;
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);
}
}
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 71vh;
box-sizing: border-box;
touch-action: none;
}
.thumbnail {
width: 100%;
height: 260rpx;
}
.poup-content {
overflow: hidden;
}
.update-btn {
background-color: rgba(240, 250, 255, 1);
}
.del-btn {
background-color: rgba(254, 241, 240, 1) !important;
}
</style>
.poup-body {
height: 71vh;
box-sizing: border-box;
touch-action: none;
}
.thumbnail {
width: 100%;
height: 260rpx;
}
.update-btn {
background-color: rgba(240, 250, 255, 1);
}
.del-btn {
background-color: rgba(254, 241, 240, 1) !important;
}
</style>
pagesB/logs/logs.vue
+234 -228
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>
@@ -59,245 +59,251 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
export default {
components: {
tmSkeleton,
tmEmpty,
tmButton,
tmTags,
tmFlotbutton,
tmTranslate
},
data() {
return {
loading: 'loading',
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
export default {
components: {
tmSkeleton,
tmEmpty,
tmButton,
tmTags,
tmFlotbutton,
tmTranslate
},
data() {
return {
loading: 'loading',
queryParams: {
size: 8,
page: 0,
sort: undefined
},
queryParams: {
size: 8,
page: 0,
sort: undefined
},
result: {},
dataList: [],
total: 0,
isLoadMore: false,
loadMoreText: '加载中...'
};
},
filters: {
formatLogType(val) {
const logTypes = {
BLOG_INITIALIZED: {
value: 0,
text: '博客初始化'
},
POST_PUBLISHED: {
value: 5,
text: '文章发布'
},
POST_EDITED: {
value: 15,
text: '文章修改'
},
POST_DELETED: {
value: 20,
text: '文章删除'
},
LOGGED_IN: {
value: 25,
text: '用户登录'
},
LOGGED_OUT: {
value: 30,
text: '注销登录'
},
LOGIN_FAILED: {
value: 35,
text: '登录失败'
},
PASSWORD_UPDATED: {
value: 40,
text: '修改密码'
},
PROFILE_UPDATED: {
value: 45,
text: '资料修改'
},
SHEET_PUBLISHED: {
value: 50,
text: '页面发布'
},
SHEET_EDITED: {
value: 55,
text: '页面修改'
},
SHEET_DELETED: {
value: 60,
text: '页面删除'
},
MFA_UPDATED: {
value: 65,
text: '两步验证'
},
LOGGED_PRE_CHECK: {
value: 70,
text: '登录验证'
}
result: {},
dataList: [],
total: 0,
isLoadMore: false,
loadMoreText: '加载中...'
};
return logTypes[val].text;
}
},
onLoad() {
this.fnSetPageTitle('日志管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getLogsListByPage(this.queryParams)
.then(res => {
if (res.status == 200) {
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.result = res.data;
this.total = res.data.total;
const _tempDataList = res.data.content.map(item => {
item['time'] = uni.$tm.dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_tempDataList);
} else {
this.dataList = _tempDataList;
}
this.loading = 'success';
} else {
uni.$tm.toast('加载失败，请重试！');
thi.loading = 'error';
},
filters: {
formatLogType(val) {
const logTypes = {
BLOG_INITIALIZED: {
value: 0,
text: '博客初始化'
},
POST_PUBLISHED: {
value: 5,
text: '文章发布'
},
POST_EDITED: {
value: 15,
text: '文章修改'
},
POST_DELETED: {
value: 20,
text: '文章删除'
},
LOGGED_IN: {
value: 25,
text: '用户登录'
},
LOGGED_OUT: {
value: 30,
text: '注销登录'
},
LOGIN_FAILED: {
value: 35,
text: '登录失败'
},
PASSWORD_UPDATED: {
value: 40,
text: '修改密码'
},
PROFILE_UPDATED: {
value: 45,
text: '资料修改'
},
SHEET_PUBLISHED: {
value: 50,
text: '页面发布'
},
SHEET_EDITED: {
value: 55,
text: '页面修改'
},
SHEET_DELETED: {
value: 60,
text: '页面删除'
},
MFA_UPDATED: {
value: 65,
text: '两步验证'
},
LOGGED_PRE_CHECK: {
value: 70,
text: '登录验证'
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('加载失败，请重试！');
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 300);
});
};
return logTypes[val].text;
}
},
// 删除
fnOnClear() {
uni.$eShowModal({
title: '提示',
content: `您确定要清空所有的日志记录吗？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
uni.showLoading({
mask: true,
title: '正在清空...'
});
this.$httpApi.admin
.deleteAllLogs()
.then(res => {
if (res.status == 200) {
uni.$tm.toast('操作成功！');
setTimeout(() => {
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
}, 1000);
onLoad() {
this.fnSetPageTitle('日志管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getLogsListByPage(this.queryParams)
.then(res => {
if (res.status == 200) {
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.result = res.data;
this.total = res.data.total;
const _tempDataList = res.data.content.map(item => {
item['time'] = uni.$tm.dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_tempDataList);
} else {
uni.$tm.toast('操作失败，请重试！');
this.dataList = _tempDataList;
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('操作失败，请重试！');
this.loading = 'success';
} else {
uni.$tm.toast('加载失败，请重试！');
thi.loading = 'error';
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('加载失败，请重试！');
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 300);
});
},
// 删除
fnOnClear() {
uni.$eShowModal({
title: '提示',
content: `您确定要清空所有的日志记录吗？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
uni.showLoading({
mask: true,
title: '正在清空...'
});
})
.catch(err => {});
this.$httpApi.admin
.deleteAllLogs()
.then(res => {
if (res.status == 200) {
uni.$tm.toast('操作成功！');
setTimeout(() => {
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
}, 1000);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
}
.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;
right: 0px;
top: 0rpx;
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
}
.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;
right: 0px;
top: 0rpx;
}
}
.desc-value {
word-wrap: break-word;
word-break: break-all;
padding-left: 6rpx;
}
}
.desc-value {
word-wrap: break-word;
word-break: break-all;
padding-left: 6rpx;
}
}
</style>
</style>
pagesB/photos/photos.vue
+355 -432
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>
@@ -181,316 +95,273 @@
</template>
<script>
import throttle from '@/utils/throttle.js';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import throttle from '@/utils/throttle.js';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmSearch,
tmTabs,
tmEmpty,
tmFlotbutton,
tmTranslate,
tmPoup,
tmInput,
tmPickersDate,
tmPickers,
AttachmentSelect
},
data() {
return {
loading: 'loading',
team: {
activeIndex: 0,
list: [],
selected: [],
selectList: []
},
queryParams: {
size: 10,
page: 0,
sort: 'createTime,desc',
sort: 'id,asc'
},
result: null,
dataList: [],
total: 0,
isLoadMore: false,
loadMoreText: '加载中...',
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmSearch,
tmTabs,
tmEmpty,
tmFlotbutton,
tmTranslate,
tmPoup,
tmInput,
tmPickersDate,
tmPickers,
AttachmentSelect
},
data() {
return {
loading: 'loading',
team: {
activeIndex: 0,
list: [],
selected: [],
selectList: []
},
queryParams: {
size: 10,
page: 0,
sort: 'createTime,desc',
sort: 'id,asc'
},
result: null,
dataList: [],
total: 0,
isLoadMore: false,
loadMoreText: '加载中...',
poupShow: false,
attachmentsSelectShow: false,
selectAttachmentsType: 'url',
takeTime: undefined,
form: {
id: undefined,
location: undefined,
name: undefined,
poupShow: false,
attachmentsSelectShow: false,
selectAttachmentsType: 'url',
takeTime: undefined,
team: undefined,
thumbnail: undefined,
url: undefined,
description: undefined
},
poupBodyScrollTop: 0
};
},
form: {
id: undefined,
location: undefined,
name: undefined,
takeTime: undefined,
team: undefined,
thumbnail: undefined,
url: undefined,
description: undefined
},
poupBodyScrollTop: 0
};
},
onLoad() {
this.fnSetPageTitle('图库管理');
this.fnGetTeamList();
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.queryParams.page = 0;
this.dataList = [];
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
// 获取分类列表
fnGetTeamList() {
this.$httpApi.admin
.getPhotosTeams()
.then(res => {
if (res.status == 200) {
let _list = res.data;
this.team.selectList = _list.map((item, index) => {
return {
id: index,
name: item,
value: item
};
});
if (_list.length > 1) {
_list.unshift('全部');
this.team.list = _list;
}
}
})
.catch(err => {});
onLoad() {
this.fnSetPageTitle('图库管理');
this.fnGetTeamList();
},
fnOnSearch() {
this.queryParams.page = 0;
this.isLoadMore = false;
this.fnToTopPage();
created() {
this.fnGetData();
},
fnOnTabChange(index) {
this.queryParams.team = index == 0 ? undefined : this.team.list[index];
onPullDownRefresh() {
this.queryParams.page = 0;
this.dataList = [];
this.fnToTopPage();
this.fnGetData();
},
fnOnTakeTimeConfirm(e) {
this.takeTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.min}:${e.sec}`;
this.form.takeTime = new Date(this.takeTime).getTime();
},
fnOnSelectTeamConfirm(e) {
const _select = e[0].data;
this.form.team = _select.value;
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getPhotos(this.queryParams)
.then(res => {
if (res.status == 200) {
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.result = res.data;
this.total = res.data.total;
let _list = res.data.content.map(item => {
// 处理显示的图片
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_list);
} else {
this.dataList = _list;
},
methods: {
// 获取分类列表
fnGetTeamList() {
this.$httpApi.admin
.getPhotosTeams()
.then(res => {
if (res.status == 200) {
let _list = res.data;
this.team.selectList = _list.map((item, index) => {
return {
id: index,
name: item,
value: item
};
});
if (_list.length > 1) {
_list.unshift('全部');
this.team.list = _list;
}
}
this.loading = 'success';
} else {
})
.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 = [];
this.fnToTopPage();
this.fnGetData();
},
fnOnTakeTimeConfirm(e) {
this.takeTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.min}:${e.sec}`;
this.form.takeTime = new Date(this.takeTime).getTime();
},
fnOnSelectTeamConfirm(e) {
const _select = e[0].data;
this.form.team = _select.value;
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getPhotos(this.queryParams)
.then(res => {
if (res.status == 200) {
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
this.result = res.data;
this.total = res.data.total;
let _list = res.data.content.map(item => {
// 处理显示的图片
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
return item;
});
if (this.isLoadMore) {
this.dataList = this.dataList.concat(_list);
} else {
this.dataList = _list;
}
this.loading = 'success';
} else {
uni.$tm.toast('加载失败，请重试！');
this.loading = 'error';
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('加载失败，请重试！');
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 300);
});
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
},
fnOnPoupBodyScroll(e) {
throttle(() => {
this.poupBodyScrollTop = e.detail.scrollTop;
}, 1000);
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
fnOnUrlInputChange() {
if (this.form.url) {
this.$set(this.form, 'showThumbnail', this.$utils.checkThumbnailUrl(this.form.url));
}
},
fnShowAttachmentsSelect(type) {
this.selectAttachmentsType = type;
this.attachmentsSelectShow = true;
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
if (this.selectAttachmentsType == 'url') {
this.form.url = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
if (!this.form.thumbnail) {
this.form.thumbnail = file.path;
}
})
.catch(err => {
console.error(err);
uni.$tm.toast('加载失败，请重试！');
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 300);
});
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
},
fnOnPoupBodyScroll(e) {
throttle(() => {
this.poupBodyScrollTop = e.detail.scrollTop;
}, 1000);
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
fnOnUrlInputChange() {
if (this.form.url) {
this.$set(this.form, 'showThumbnail', this.$utils.checkThumbnailUrl(this.form.url));
}
},
fnShowAttachmentsSelect(type) {
this.selectAttachmentsType = type;
this.attachmentsSelectShow = true;
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
if (this.selectAttachmentsType == 'url') {
this.form.url = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
if (!this.form.thumbnail) {
} else {
this.form.thumbnail = file.path;
}
} else {
this.form.thumbnail = file.path;
}
this.attachmentsSelectShow = false;
},
fnResetForm() {
this.form = { id: undefined, location: undefined, name: undefined, takeTime: undefined, team: undefined, thumbnail: undefined, url: undefined, description: undefined };
this.takeTime = uni.$tm.dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
},
fnEdit(item) {
this.poupBodyScrollTop = 0;
if (!item.takeTime) {
item.takeTime = new Date().getTime();
}
this.takeTime = uni.$tm.dayjs(item.takeTime).format('YYYY-MM-DD HH:mm:ss');
this.form = item;
if (this.form.team) {
this.team.selected = [this.team.selectList.findIndex(x => x.name == this.form.team)];
} else {
this.team.selected = [];
}
this.poupShow = true;
},
// 新增
fnAdd() {
this.fnResetForm();
this.poupBodyScrollTop = 0;
this.poupShow = true;
},
// 保存
fnSave() {
if (!this.form.name) {
return uni.$tm.toast('请填写图片名称！');
}
if (!this.$utils.checkIsUrl(this.form.url)) {
return uni.$tm.toast('请选择或输入正确的图片地址！');
}
if (!this.$utils.checkIsUrl(this.form.thumbnail)) {
return uni.$tm.toast('请选择或输入正确的缩略图地址！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.createPhotos(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
this.poupShow = false;
setTimeout(() => {
this.fnResetForm();
this.fnGetTeamList();
uni.startPullDownRefresh();
}, 1000);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
} else {
this.$httpApi.admin
.updatePhotosById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
setTimeout(() => {
this.fnGetTeamList();
}, 500);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
},
// 删除
fnDelete(item, index) {
uni.$eShowModal({
title: '提示',
content: `您是否删除名为 ${item.name} 的图片？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.attachmentsSelectShow = false;
},
fnResetForm() {
this.form = { id: undefined, location: undefined, name: undefined, takeTime: undefined, team: undefined, thumbnail: undefined, url: undefined, description: undefined };
this.takeTime = uni.$tm.dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
},
fnEdit(item) {
this.poupBodyScrollTop = 0;
if (!item.takeTime) {
item.takeTime = new Date().getTime();
}
this.takeTime = uni.$tm.dayjs(item.takeTime).format('YYYY-MM-DD HH:mm:ss');
this.form = item;
if (this.form.team) {
this.team.selected = [this.team.selectList.findIndex(x => x.name == this.form.team)];
} else {
this.team.selected = [];
}
this.poupShow = true;
},
// 新增
fnAdd() {
this.fnResetForm();
this.poupBodyScrollTop = 0;
this.poupShow = true;
},
// 保存
fnSave() {
if (!this.form.name) {
return uni.$tm.toast('请填写图片名称！');
}
if (!this.$utils.checkIsUrl(this.form.url)) {
return uni.$tm.toast('请选择或输入正确的图片地址！');
}
if (!this.$utils.checkIsUrl(this.form.thumbnail)) {
return uni.$tm.toast('请选择或输入正确的缩略图地址！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.deletePhotosById(item.id)
.createPhotos(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${item.name} 分类已删除！`);
this.dataList.splice(index, 1);
uni.$tm.toast(`保存成功！`);
this.poupShow = false;
setTimeout(() => {
this.fnResetForm();
this.fnGetTeamList();
uni.startPullDownRefresh();
}, 1000);
} else {
uni.$tm.toast('操作失败，请重试！');
}
@@ -498,56 +369,108 @@ export default {
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
},
// 预览
fnPreview(item, index) {
uni.previewImage({
current: index,
urls: this.dataList.map(x => x.url),
indicator: 'number',
loop: true
});
} else {
this.$httpApi.admin
.updatePhotosById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
setTimeout(() => {
this.fnGetTeamList();
}, 500);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
},
// 删除
fnDelete(item, index) {
uni.$eShowModal({
title: '提示',
content: `您是否删除名为 ${item.name} 的图片？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin
.deletePhotosById(item.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${item.name} 分类已删除！`);
this.dataList.splice(index, 1);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
},
// 预览
fnPreview(item, index) {
uni.previewImage({
current: index,
urls: this.dataList.map(x => x.url),
indicator: 'number',
loop: true
});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
padding: 24rpx;
.loading-error {
height: 65vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.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;
}
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 69vh;
box-sizing: border-box;
touch-action: none;
}
</style>
.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;
}
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 69vh;
box-sizing: border-box;
touch-action: none;
}
</style>
pagesB/tags/tags.vue
+263 -279
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">
选择颜色
@@ -108,206 +83,162 @@
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTabs,
tmTranslate,
tmFlotbutton,
tmTags,
tmPoup,
tmInput,
tColorPicker,
AttachmentSelect
},
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0,
more: true
},
dataList: [],
poupShow: false,
selectColor: { r: 255, g: 255, b: 255, a: 1 },
attachmentsSelectShow: false,
form: {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
}
};
},
onLoad() {
this.fnSetPageTitle('标签管理');
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getTagsList(this.queryParams)
.then(res => {
this.loading = 'success';
this.dataList = res.data.map(item => {
if (item.thumbnail) {
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
} else {
item['showThumbnail'] = '';
}
return item;
});
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
export default {
components: {
tmSkeleton,
tmButton,
tmEmpty,
tmTabs,
tmTranslate,
tmFlotbutton,
tmTags,
tmPoup,
tmInput,
tColorPicker,
AttachmentSelect
},
fnSelectColor() {
this.$refs.colorPicker.open();
},
fnOnConfirmSelectColor(e) {
this.selectColor = e.rgba;
this.$set(this.form, 'color', e.hex);
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
console.log('this.attachmentsSelectShow', this.attachmentsSelectShow);
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
this.form.thumbnail = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
this.attachmentsSelectShow = false;
},
fnShowFormModal(tag) {
if (tag) {
this.form = Object.assign({}, {}, tag);
if (tag.thumbnail) {
this.form.showThumbnail = this.$utils.checkThumbnailUrl(tag.thumbnail);
data() {
return {
loading: 'loading',
queryParams: {
size: 10,
page: 0,
more: true
},
dataList: [],
poupShow: false,
selectColor: { r: 255, g: 255, b: 255, a: 1 },
attachmentsSelectShow: false,
form: {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnResetForm() {
this.form = {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('标签名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.createTags(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
} else {
this.$httpApi.admin
.updateTagsById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
onLoad() {
this.fnSetPageTitle('标签管理');
},
// 删除
fnDelete(tag) {
const _tag = tag || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_tag.name} 的标签删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
methods: {
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.admin
.getTagsList(this.queryParams)
.then(res => {
this.loading = 'success';
this.dataList = res.data.map(item => {
if (item.thumbnail) {
item['showThumbnail'] = this.$utils.checkThumbnailUrl(item.thumbnail);
} else {
item['showThumbnail'] = '';
}
return item;
});
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 800);
});
},
fnSelectColor() {
this.$refs.colorPicker.open();
},
fnOnConfirmSelectColor(e) {
this.selectColor = e.rgba;
this.$set(this.form, 'color', e.hex);
},
fnOnAttachmentsSelectClose() {
this.attachmentsSelectShow = false;
console.log('this.attachmentsSelectShow', this.attachmentsSelectShow);
},
fnOnPoupChange(e) {
if (!e) {
this.fnResetForm();
}
},
// 监听附件选择
fnOnAttachmentsSelect(file) {
this.form.thumbnail = file.path;
this.form.showThumbnail = this.$utils.checkThumbnailUrl(file.path);
this.attachmentsSelectShow = false;
},
fnShowFormModal(tag) {
if (tag) {
this.form = Object.assign({}, {}, tag);
if (tag.thumbnail) {
this.form.showThumbnail = this.$utils.checkThumbnailUrl(tag.thumbnail);
}
} else {
this.fnResetForm();
}
this.poupShow = true;
},
fnResetForm() {
this.form = {
color: undefined,
createTime: undefined,
fullPath: undefined,
id: undefined,
name: '',
slug: undefined,
thumbnail: undefined,
showThumbnail: undefined
};
},
fnSubmit() {
if (this.form.name.trim() == '') {
return uni.$tm.toast('标签名称未填写！');
}
if (this.form.id == undefined) {
this.$httpApi.admin
.deleteTagsById(_tag.id)
.createTags(this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_tag.name} 标签已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _tag.id);
this.dataList.splice(delIndex, 1);
uni.$tm.toast(`保存成功！`);
uni.startPullDownRefresh();
} else {
uni.$tm.toast('操作失败，请重试！');
}
@@ -315,73 +246,126 @@ export default {
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
} else {
this.$httpApi.admin
.updateTagsById(this.form.id, this.form)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`保存成功！`);
let updateIndex = this.dataList.findIndex(x => x.id == this.form.id);
this.$set(this.dataList, updateIndex, this.form);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
}
},
// 删除
fnDelete(tag) {
const _tag = tag || this.form;
uni.$eShowModal({
title: '提示',
content: `您是否要将 ${_tag.name} 的标签删除？`,
showCancel: true,
cancelText: '否',
cancelColor: '#999999',
confirmText: '是',
confirmColor: '#03a9f4'
})
.then(res => {
this.$httpApi.admin
.deleteTagsById(_tag.id)
.then(res => {
if (res.status == 200) {
uni.$tm.toast(`${_tag.name} 标签已删除！`);
const delIndex = this.dataList.findIndex(x => x.id == _tag.id);
this.dataList.splice(delIndex, 1);
} else {
uni.$tm.toast('操作失败，请重试！');
}
})
.catch(err => {
uni.$tm.toast('操作失败，请重试！');
});
})
.catch(err => {});
}
}
}
};
};
</script>
<style lang="scss" scoped>
.app-page {
width: 100vw;
min-height: 100vh;
}
.loading-wrap {
.loading-error {
height: 65vh;
.app-page {
width: 100vw;
min-height: 100vh;
}
}
.content-empty {
width: 100%;
height: 60vh;
}
.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;
position: absolute;
right: 24rpx;
top: 24rpx;
border-radius: 50%;
box-sizing: border-box;
border: 4rpx solid #fff;
background-color: #ff8177;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
font-size: 32rpx;
color: #fff;
}
.left {
width: 160rpx;
height: 140rpx;
.cover {
width: 100%;
height: inherit;
// background-color: #788ea7;
background-color: #607d8b;
.loading-wrap {
.loading-error {
height: 65vh;
}
}
.right {
.content-empty {
width: 100%;
height: 60vh;
}
.poup-content {
overflow: hidden;
}
.poup-body {
height: 58vh;
box-sizing: border-box;
.color {
}
.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;
position: absolute;
right: 24rpx;
top: 24rpx;
border-radius: 50%;
box-sizing: border-box;
border: 4rpx solid #fff;
background-color: #ff8177;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
font-size: 32rpx;
color: #fff;
}
.left {
width: 160rpx;
height: 140rpx;
.cover {
width: 100%;
height: inherit;
// background-color: #788ea7;
background-color: #607d8b;
}
}
.right {
box-sizing: border-box;
.color {
color: #fff;
}
}
}
}
</style>
</style>