mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="app-page">
|
||||
<!-- 博主信息 -->
|
||||
<view class="blogger bg-white flex flex-center ma-24 mt-30 pa-24 round-3" @click="fnToModifyProfile">
|
||||
<image class="avatar" :src="$utils.checkAvatarUrl(bloggerInfo.avatar, true)" mode="aspectFill"></image>
|
||||
<view class="info pl-24">
|
||||
<view class="name text-weight-b text-grey-darken-5">☔️{{ bloggerInfo.nickname }} 欢迎回来！</view>
|
||||
<view class="mt-12 text-size-s text-grey-darken-1">{{ bloggerInfo.description || '这个人真懒，没填写描述~' }}</view>
|
||||
</view>
|
||||
<view class="modify"><text class="text-grey-darken-1 text-size-m iconfont icon-angle-right"></text></view>
|
||||
</view>
|
||||
|
||||
<!-- 工作台导航 -->
|
||||
<view class="works bg-white ma-24 mt-36 pt-24 pb-16 flex flex-wrap round-3">
|
||||
<view class="works-item pt-24 pb-24 flex flex-col flex-center " v-for="(item, index) in workList" :key="index">
|
||||
<view class="icon flex flex-center round-4" :style="{ backgroundColor: item.bgColor }" @click="fnOnNav(item)">
|
||||
<text class="haloicon" :class="[item.icon]"></text>
|
||||
</view>
|
||||
<view class="mt-12 title text-size-s text-grey-darken-1">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tm-bottomnavigation
|
||||
class="shadow-6"
|
||||
position="bottom"
|
||||
:bottom="24"
|
||||
:safe="false"
|
||||
:round="3"
|
||||
:offset-left="12"
|
||||
border=""
|
||||
icon-color="blue"
|
||||
icon-color-grey="blue"
|
||||
:list="quickBarList"
|
||||
@change="fnOnNavBar"
|
||||
></tm-bottomnavigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmBottomnavigation from '@/tm-vuetify/components/tm-bottomnavigation/tm-bottomnavigation.vue';
|
||||
export default {
|
||||
components: { tmBottomnavigation },
|
||||
data() {
|
||||
return {
|
||||
workList: [
|
||||
{
|
||||
icon: 'haloicon-shuxie1',
|
||||
name: '日记管理',
|
||||
bgColor: 'rgba(80,167,255,1)',
|
||||
path: '/pagesB/journal/journal',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-wenzhang1',
|
||||
name: '文章管理',
|
||||
bgColor: 'rgba(27,187,179,1)',
|
||||
path: '/pagesB/articles/articles',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-fenlei2',
|
||||
name: '分类管理',
|
||||
bgColor: 'rgba(253,103,132,1)',
|
||||
path: '/pagesB/category/category',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-biaoqian2',
|
||||
name: '标签管理',
|
||||
bgColor: '#6638B5',
|
||||
path: '/pagesB/tags/tags',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-fujian1',
|
||||
name: '附件管理',
|
||||
bgColor: 'rgba(253,103,132,1)',
|
||||
path: '/pagesB/attachment/attachment',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-links',
|
||||
name: '友链管理',
|
||||
bgColor: 'rgba(80,167,255,1)',
|
||||
path: '/pagesB/links/links',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-tukuguanli',
|
||||
name: '图库管理',
|
||||
bgColor: 'rgba(254,178,0,1) ',
|
||||
path: '/pagesB/photos/photos',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-pinglun1',
|
||||
name: '评论管理',
|
||||
bgColor: 'rgba(27,187,179,1)',
|
||||
path: '/pagesB/comments/comments',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-xitongrizhi',
|
||||
name: '日志管理',
|
||||
bgColor: '#6638B5',
|
||||
path: '/pagesB/logs/logs',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-caidan',
|
||||
name: '菜单设置',
|
||||
bgColor: 'rgba(254,178,0,1)',
|
||||
path: '/pagesB/menus/menus',
|
||||
todo: true
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-password',
|
||||
name: '修改密码',
|
||||
bgColor: 'rgba(27,187,179,1)',
|
||||
path: '/pagesB/password/password',
|
||||
todo: false
|
||||
},
|
||||
{
|
||||
icon: 'haloicon-shezhi',
|
||||
name: '系统设置',
|
||||
bgColor: '#8698A2',
|
||||
path: '/pagesB/settings/settings',
|
||||
todo: true
|
||||
}
|
||||
],
|
||||
quickBarList: [
|
||||
{ key: 'logout', iconSize: 36, icon: 'icon-poweroff', fontSize: 26, value: '退出登录' },
|
||||
{
|
||||
key: 'article-edit',
|
||||
iconSize: 36,
|
||||
icon: 'icon-plus',
|
||||
fontSize: 26,
|
||||
value: '写文章',
|
||||
custom: true,
|
||||
customColor: 'blue',
|
||||
customFontColor: 'white'
|
||||
},
|
||||
{ key: 'back-home', iconSize: 36, icon: 'icon-home', fontSize: 26, value: '返回首页' }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
bloggerInfo() {
|
||||
return this.$tm.vx.getters().blogger.getBlogger;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.fnGetData();
|
||||
this.fnSetPageTitle('欢迎登录工作台');
|
||||
console.log(this.bloggerInfo);
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
this.$httpApi.admin
|
||||
.getLinkList()
|
||||
.then(res => {
|
||||
console.log('getLinkList，success：', res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('getLinkList，error：', err);
|
||||
});
|
||||
},
|
||||
fnToModifyProfile() {
|
||||
this.$Router.push({
|
||||
path: '/pagesB/profile/profile'
|
||||
});
|
||||
},
|
||||
fnOnNav(item) {
|
||||
if (item.todo) return uni.$tm.toast('功能开发中...');
|
||||
this.$Router.push({
|
||||
path: item.path
|
||||
});
|
||||
},
|
||||
fnOnNavBar(e) {
|
||||
if (e.item.key == 'logout') {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '是否要退出当前后台管理登录？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.showLoading({
|
||||
title: '正在退出登录...'
|
||||
});
|
||||
uni.$tm.vx.actions('user/adminLogout');
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/about/about'
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
.catch(err => {});
|
||||
} else if (e.item.key == 'article-edit') {
|
||||
uni.$tm.toast(e.item.value);
|
||||
this.$Router.push({
|
||||
path: '/pagesB/articles/article-edit'
|
||||
});
|
||||
} else if (e.item.key == 'back-home') {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '是否返回首页？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/home/home'
|
||||
});
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
|
||||
::v-deep {
|
||||
.tm-bottomnavigation {
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blogger {
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #ffffff;
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.info {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.modify {
|
||||
width: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.works {
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
&-item {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
.haloicon {
|
||||
color: #ffffff;
|
||||
font-size: 66rpx;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: #55647a;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,687 @@
|
||||
<template>
|
||||
<view class="app-page bg-white pa-12">
|
||||
<!-- 工具栏区域 -->
|
||||
<view class="tool-bar-wrap e-fixed bg-white pt-12 pb-16 border-b-1">
|
||||
<view class="tool-bar flex flex-center text-grey-darken-2">
|
||||
<text class="halohtmlicon icon-undo" data-method="undo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-redo" data-method="redo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-img" data-method="insertImg" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-video" data-method="insertVideo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-link" data-method="insertLink" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-text" data-method="insertText" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-line" data-method="insertHtml" data-param="<hr style='margin:10px 0;'/>" @click="fnOnToolBarEdit"></text>
|
||||
</view>
|
||||
<view class="tool-bar flex flex-center text-grey-darken-2 mt-16">
|
||||
<text class="halohtmlicon icon-heading" @click="fnOnInsertHead"></text>
|
||||
<text
|
||||
class="halohtmlicon icon-quote"
|
||||
data-method="insertHtml"
|
||||
data-param="<blockquote style='padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5'>引用</blockquote>"
|
||||
@click="fnOnToolBarEdit"
|
||||
></text>
|
||||
<text class="halohtmlicon icon-table" @click="fnOnInsertTable"></text>
|
||||
<text class="halohtmlicon icon-code" @click="fnOnInsertCode"></text>
|
||||
<text class="halohtmlicon icon-emoji" data-type="emoji" data-title="插入表情" @click="fnOnOpenDialog"></text>
|
||||
<text class="halohtmlicon icon-template" data-type="template" data-title="插入模板" @click="fnOnOpenDialog"></text>
|
||||
<text v-if="editable" class="flex-1 text-align-center iconfont icon-eye" style="font-size: 44rpx;" @click="fnOnPreview()"></text>
|
||||
<text v-else class="halohtmlicon icon-edit" @click="fnOnPreview()"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 编辑区域 -->
|
||||
<view class="edit-wrap bg-white round-3">
|
||||
<mp-html
|
||||
class="evan-markdown"
|
||||
lazy-load
|
||||
ref="markdown"
|
||||
:editable="editable"
|
||||
:domain="markdownConfig.domain"
|
||||
:loading-img="markdownConfig.loadingGif"
|
||||
:scroll-table="true"
|
||||
selectable="force"
|
||||
:tag-style="markdownConfig.tagStyle"
|
||||
:container-style="markdownConfig.containStyle"
|
||||
:content="form.content"
|
||||
:markdown="true"
|
||||
:showLineNumber="true"
|
||||
:showLanguageName="true"
|
||||
:copyByLongPress="true"
|
||||
/>
|
||||
</view>
|
||||
<view class="fixed-bottom bg-white pa-24 ">
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<block v-if="queryParams.postsId">
|
||||
<tm-button :width="200" :height="75" block theme="light-blue" @click="fnSaveAtPublish()">我要发布</tm-button>
|
||||
<tm-button class="ml-24" :width="200" :height="75" block theme="blue-grey" @click="fnRefreshData()">重新加载</tm-button>
|
||||
<tm-button class="ml-24" :width="200" :height="75" block theme="red" @click="fnClear()">清空内容</tm-button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<tm-button :width="300" :height="75" block theme="light-blue" @click="fnSaveAtPublish()">我要发布</tm-button>
|
||||
<tm-button class="ml-24" theme="red" :width="300" :height="75" block @click="fnClear()">清空内容</tm-button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select
|
||||
v-if="attachmentsSelect.show"
|
||||
:title="attachmentsSelect.title"
|
||||
@on-select="fnOnAttachmentsSelect"
|
||||
@on-close="attachmentsSelect.show = false"
|
||||
></attachment-select>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<block v-if="modal">
|
||||
<view class="mask" />
|
||||
<view class="modal">
|
||||
<view class="modal_title">{{ modal.title }}</view>
|
||||
<view class="flex flex-col flex-center" v-if="modal.type == 'table'">
|
||||
<tm-input required title="输入行数" input-type="number" v-model="modal.rows"></tm-input>
|
||||
<tm-input required title="输入列数" input-type="number" v-model="modal.cols"></tm-input>
|
||||
</view>
|
||||
<block v-else><input class="modal_input" :value="modal.value" maxlength="-1" auto-focus @input="modalInput" /></block>
|
||||
|
||||
<view class="modal_foot">
|
||||
<view class="modal_button" @tap="modalCancel">取消</view>
|
||||
<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" @tap="modalConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 底部弹窗 -->
|
||||
<tm-poup v-model="dialog.show" position="bottom" height="auto" @change="fnOnCloseDialog()">
|
||||
<text class="poup-close" @click="fnOnCloseDialog(false)">×</text>
|
||||
<view class="poup-head pa-24 pb-0 text-align-center text-weight-b ">{{ dialog.title }}</view>
|
||||
<view class="poup-body pa-36">
|
||||
<!-- 表情区域 -->
|
||||
<block v-if="dialog.type == 'emoji'">
|
||||
<view class="flex" v-for="(item, index) in emojis" :key="index">
|
||||
<view class="flex-1 mt-6 mb-6 text-size-xl" v-for="(emoji, index) in item" :key="emoji" :data-emoji="emoji" @click="fnOnInsertEmoji">{{ emoji }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 模板区域 -->
|
||||
<block v-else-if="dialog.type == 'template'">
|
||||
<block v-for="(template, index) in templates" :key="index">
|
||||
<rich-text :nodes="template" data-method="insertHtml" :data-param="template" @click="fnOnToolBarEdit"></rich-text>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</tm-poup>
|
||||
|
||||
<!-- 发布设置弹窗 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||||
|
||||
import MarkdownConfig from '@/common/markdown/markdown.config.js';
|
||||
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.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';
|
||||
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.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: {
|
||||
mpHtml,
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmEmpty,
|
||||
tmTranslate,
|
||||
tmFlotbutton,
|
||||
tmSwitch,
|
||||
tmPoup,
|
||||
tmInput,
|
||||
attachmentSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
markdownConfig: MarkdownConfig,
|
||||
queryParams: {
|
||||
postsId: undefined
|
||||
},
|
||||
status: true,
|
||||
form: {
|
||||
content: '',
|
||||
keepRaw: true,
|
||||
sourceContent: '',
|
||||
type: 'PUBLIC'
|
||||
},
|
||||
modal: null,
|
||||
editable: true,
|
||||
attachmentsSelect: {
|
||||
title: '选择附件',
|
||||
show: false
|
||||
},
|
||||
dialog: {
|
||||
show: false,
|
||||
type: ''
|
||||
},
|
||||
|
||||
// 用于插入的 emoji 表情
|
||||
emojis: [
|
||||
['😄', '😷', '😂', '😝', '😳', '😱', '😔', '😒', '😉'],
|
||||
['😎', '😭', '😍', '😘', '🤔', '😕', '🙃', '🤑', '😲'],
|
||||
['🙄', '😤', '😴', '🤓', '😡', '😑', '😮', '🤒', '🤮']
|
||||
],
|
||||
// 用于插入的 html 模板
|
||||
templates: [
|
||||
'<section style="text-align: center; margin: 0px auto;"><section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"><span style="font-size: 18px; color: #595959;">标题</span></section></section>',
|
||||
'<div style="width: 100%; box-sizing: border-box; border-radius: 5px; background-color: #f6f6f6; padding: 10px; margin: 10px 0"><div>卡片</div><div style="font-size: 12px; color: gray">正文</div></div>',
|
||||
'<div style="border: 1px solid gray; box-shadow: 3px 3px 0px #cfcfce; padding: 10px; margin: 10px 0">段落</div>'
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const postsId = this.$Route.query.postsId;
|
||||
if (postsId == undefined) {
|
||||
this.fnSetPageTitle('新增文章');
|
||||
this.form.content = uni.getStorageSync('posts-content');
|
||||
} else {
|
||||
this.fnSetPageTitle('编辑文章');
|
||||
this.queryParams.postsId = postsId;
|
||||
this.fnGetData();
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
/**
|
||||
* @description 设置获取链接的方法
|
||||
* @param {String} type 链接的类型（img/video/audio/link）
|
||||
* @param {String} value 修改链接时，这里会传入旧值
|
||||
* @returns {Promise} 返回线上地址
|
||||
* type 为音视频时可以返回一个数组作为源地址
|
||||
* type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
|
||||
*/
|
||||
this.$refs.markdown.getSrc = (type, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.checkEditable()
|
||||
.then(res => {
|
||||
if (type === 'img' || type === 'video') {
|
||||
uni.showActionSheet({
|
||||
itemList: ['本地选取', '附件选取'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 本地选取
|
||||
if (type === 'img') {
|
||||
uni.chooseImage({
|
||||
count: value === undefined ? 9 : 1,
|
||||
success: res => {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (res.tempFilePaths.length == 1 && wx.editImage) {
|
||||
// 单张图片时进行编辑
|
||||
wx.editImage({
|
||||
src: res.tempFilePaths[0],
|
||||
complete: res2 => {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
this.fnFileUpload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
(async () => {
|
||||
const arr = [];
|
||||
for (let item of res.tempFilePaths) {
|
||||
// 依次上传
|
||||
const src = await this.fnFileUpload(item, type);
|
||||
arr.push(src);
|
||||
}
|
||||
return arr;
|
||||
})().then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
// #ifdef MP-WEIXIN
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
} else {
|
||||
uni.chooseVideo({
|
||||
success: res => {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
this.fnFileUpload(res.tempFilePath, type).then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 远程链接
|
||||
this.callback = {
|
||||
resolve,
|
||||
reject
|
||||
};
|
||||
|
||||
this.attachmentsSelect.title = type === 'img' ? '选取图片' : '选取视频';
|
||||
this.attachmentsSelect.show = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.callback = {
|
||||
resolve,
|
||||
reject
|
||||
};
|
||||
let title;
|
||||
if (type === 'audio') {
|
||||
title = '音频链接';
|
||||
} else if (type === 'link') {
|
||||
title = '链接地址';
|
||||
}
|
||||
this.$set(this, 'modal', {
|
||||
title,
|
||||
type: 'link',
|
||||
value
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {});
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载文章数据
|
||||
fnGetData(refresh = false) {
|
||||
this.loading = 'loading';
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.getPostsById(this.queryParams.postsId)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.fnSetPageTitle(`正在编辑 ${res.data.title}`);
|
||||
this.$set(this, 'form', res.data);
|
||||
if (refresh) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.markdown.setContent(res.data.content);
|
||||
});
|
||||
}
|
||||
this.loading = 'success';
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
this.loading = 'error';
|
||||
this.fnSetPageTitle(`文章加载失败`);
|
||||
uni.$tm.toast('文章加载失败，请点击下方重新加载!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
this.fnSetPageTitle(`文章加载失败`);
|
||||
uni.$tm.toast('文章加载失败，请点击下方重新加载!');
|
||||
});
|
||||
},
|
||||
fnRefreshData(showConfirm = true) {
|
||||
if (showConfirm) {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '您当前的编辑可能未保存，确定要重新加载吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
this.fnGetData(true);
|
||||
})
|
||||
.catch(err => {});
|
||||
} else {
|
||||
this.fnGetData(true);
|
||||
}
|
||||
},
|
||||
// 检查是否可编辑
|
||||
checkEditable() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.editable) {
|
||||
resolve();
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要继续编辑吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.editable = true;
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 调用编辑操作
|
||||
fnOnToolBarEdit(e) {
|
||||
this.$refs.markdown[e.currentTarget.dataset.method](e.currentTarget.dataset.param);
|
||||
},
|
||||
// 监听附件选择
|
||||
fnOnAttachmentsSelect(file) {
|
||||
this.attachmentsSelect.show = false;
|
||||
this.callback.resolve(file.path);
|
||||
},
|
||||
// 处理模态框
|
||||
modalInput(e) {
|
||||
this.value = e.detail.value;
|
||||
},
|
||||
modalConfirm() {
|
||||
if (this.modal.type == 'table') {
|
||||
if (this.modal.rows <= 0) {
|
||||
return uni.$tm.toast('行数必须大于0');
|
||||
}
|
||||
if (this.modal.cols <= 0) {
|
||||
return uni.$tm.toast('列数必须大于0');
|
||||
}
|
||||
}
|
||||
this.callback.resolve(this.value || this.modal.value || '');
|
||||
this.$set(this, 'modal', null);
|
||||
},
|
||||
modalCancel() {
|
||||
this.callback.reject();
|
||||
this.$set(this, 'modal', null);
|
||||
},
|
||||
// 上传图片方法
|
||||
fnFileUpload(src, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
filePath: src,
|
||||
header: {
|
||||
'admin-authorization': getAdminAccessToken()
|
||||
},
|
||||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||||
name: 'file',
|
||||
success: upladRes => {
|
||||
const _uploadRes = JSON.parse(upladRes.data);
|
||||
if (_uploadRes.status == 200) {
|
||||
resolve(_uploadRes.data.path);
|
||||
} else {
|
||||
uni.$tm.toast(_uploadRes.message);
|
||||
reject();
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.$tm.toast(err.message);
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 插入 head 系列标签
|
||||
fnOnInsertHead() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
const _hList = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
||||
wx.showActionSheet({
|
||||
itemList: _hList,
|
||||
success: res => {
|
||||
let tagName = _hList[res.tapIndex];
|
||||
this.$refs.markdown.insertHtml(`<${tagName}>标题</${tagName}>`);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 插入表格
|
||||
fnOnInsertTable() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
this.$set(this, 'modal', {
|
||||
title: '插入表格',
|
||||
type: 'table',
|
||||
rows: 1,
|
||||
cols: 1,
|
||||
value: this.value
|
||||
});
|
||||
this.callback = {
|
||||
resolve: () => {
|
||||
this.$refs.markdown.insertTable(this.modal.rows, this.modal.cols);
|
||||
},
|
||||
reject: () => {}
|
||||
};
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
// 保存插入表格
|
||||
fnOnSaveInsertTable() {
|
||||
this.callback.resolve(this.value || this.modal.value || '');
|
||||
},
|
||||
// 插入代码
|
||||
fnOnInsertCode() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['html', 'css', 'javascript', 'json'],
|
||||
success: res => {
|
||||
const lan = ['html', 'css', 'javascript', 'json'][res.tapIndex];
|
||||
this.$refs.markdown.insertHtml(`<pre><code class="language-${lan}">${lan} code</code></pre>`);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 插入 emoji
|
||||
fnOnInsertEmoji(e) {
|
||||
this.$refs.markdown.insertHtml(e.currentTarget.dataset.emoji);
|
||||
this.fnOnCloseDialog();
|
||||
},
|
||||
|
||||
// 处理底部弹窗
|
||||
fnOnOpenDialog(e) {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
this.dialog.type = e.currentTarget.dataset.type;
|
||||
this.dialog.title = e.currentTarget.dataset.title;
|
||||
this.dialog.show = true;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
fnOnCloseDialog(e) {
|
||||
if (e == false) {
|
||||
this.dialog.show = false;
|
||||
this.dialog.type = '';
|
||||
}
|
||||
},
|
||||
fnOnPreview() {
|
||||
this.editable = !this.editable;
|
||||
if (this.editable) {
|
||||
uni.$tm.toast('您已进入编辑模式！');
|
||||
} else {
|
||||
uni.$tm.toast('您已进入预览模式！');
|
||||
let _content = this.$refs.markdown.getContent();
|
||||
if (_content === '<p></p>') {
|
||||
_content = '';
|
||||
}
|
||||
this.form.content = _content;
|
||||
uni.setStorageSync('posts-content', _content);
|
||||
}
|
||||
},
|
||||
|
||||
// 发布
|
||||
fnSaveAtPublish() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '保存中...'
|
||||
});
|
||||
const _content = this.$refs.markdown.getContent();
|
||||
if (!_content.trim()) {
|
||||
return uni.$tm.toast('请输入内容!');
|
||||
}
|
||||
this.form.content = _content;
|
||||
this.form.sourceContent = this.$refs.markdown.getText();
|
||||
uni.setStorageSync('posts-content', _content);
|
||||
uni.setStorageSync('posts-content-source', this.form.sourceContent);
|
||||
if (this.form.id) {
|
||||
this.$Router.push({
|
||||
path: '/pagesB/articles/article-setting',
|
||||
query: { postsId: this.form.id, postTitle: this.form.title, isEdit: true, from: 'edit' }
|
||||
});
|
||||
} else {
|
||||
this.$Router.push({ path: '/pagesB/articles/article-setting', query: { postsId: '', postTitle: '', isEdit: false, from: 'edit' } });
|
||||
}
|
||||
|
||||
return;
|
||||
if (this.form) {
|
||||
this.$httpApi.admin
|
||||
.updatePostsById(this.form.id, this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功!');
|
||||
uni.setStorageSync('posts-content', '');
|
||||
|
||||
setTimeout(() => {
|
||||
uni.$emit('refresh-article-list');
|
||||
}, 500);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
});
|
||||
} else {
|
||||
this.$httpApi.admin
|
||||
.createPosts(this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功!');
|
||||
uni.setStorageSync('posts-content', '');
|
||||
setTimeout(() => {
|
||||
uni.$emit('refresh-article-list');
|
||||
}, 500);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
fnClear() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '确定清空当前内容吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
this.$refs.markdown.clear();
|
||||
uni.setStorageSync('posts-content', '');
|
||||
uni.setStorageSync('posts-content-source', '');
|
||||
this.fnToTopPage();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 236rpx;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx -4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
|
||||
.edit-wrap {
|
||||
box-sizing: border-box;
|
||||
padding-top: 150rpx;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 80vw;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.modal_title {
|
||||
padding-top: 42rpx;
|
||||
padding-bottom: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal_input {
|
||||
display: block;
|
||||
padding: 12rpx 12rpx;
|
||||
margin: 24rpx;
|
||||
margin-top: 0;
|
||||
font-size: 30rpx;
|
||||
border: 2rpx solid #dfe2e5;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.modal_foot {
|
||||
display: flex;
|
||||
line-height: 100rpx;
|
||||
font-weight: bold;
|
||||
border-top: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal_button {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 蒙版 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.poup-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 8rpx;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,760 @@
|
||||
<template>
|
||||
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
|
||||
<!-- 文章设置页面 -->
|
||||
<view class="e-fixed shadow-2"><tm-tabs color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list" align="center"></tm-tabs></view>
|
||||
<!-- 占位区域 -->
|
||||
<view style="width: 100vw;height: 90rpx;"></view>
|
||||
<view class="pa-24" v-if="loading != 'success'">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else class="flex flex-center" style="height:60vh;">
|
||||
<tm-empty color="blue"><tm-button theme="blue" @click="fnGetSettings()">刷新试试</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content ma-24 bg-white round-3 ">
|
||||
<!-- 表单区域 -->
|
||||
<tm-form ref="formData">
|
||||
<!-- 基本设置 -->
|
||||
<view v-show="tab.activeIndex == 0">
|
||||
<tm-input name="title" required title="文章标题" placeholder="请输入文章标题..." v-model="article.title"></tm-input>
|
||||
<tm-input name="slug" required title="文章别名" v-model="article.slug" placeholder="请输入文章别名..."></tm-input>
|
||||
<tm-pickers
|
||||
title="选择文章的状态"
|
||||
btn-color="light-blue"
|
||||
:default-value.sync="articleStatus.status"
|
||||
rang-key="name"
|
||||
:list="articleStatus.list"
|
||||
@confirm="fnOnArticleStatusConfirm"
|
||||
>
|
||||
<tm-input
|
||||
name="status"
|
||||
required
|
||||
title="文章状态"
|
||||
placeholder="请选择文章状态"
|
||||
disabled
|
||||
:value="articleStatus.selectText"
|
||||
right-icon="icon-angle-right"
|
||||
></tm-input>
|
||||
</tm-pickers>
|
||||
<tm-input
|
||||
v-if="articleStatus.selectValue == 'INTIMATE'"
|
||||
name="password"
|
||||
:password="true"
|
||||
required
|
||||
title="文章密码"
|
||||
placeholder="请输入密码..."
|
||||
v-model="article.password"
|
||||
></tm-input>
|
||||
<view v-if="articleStatus.selectValue == 'INTIMATE'" class="pl-32 mt-12 mb-24 input-tips text-grey text-size-s">
|
||||
填写提示：文章状态为【私有】的时候需要填写密码。
|
||||
</view>
|
||||
<view class="mx-32 my-24 pb-24 border-b-1">
|
||||
<view class="text-size-m required flex-between">
|
||||
<text>选择分类</text>
|
||||
<tm-button size="xs" theme="light-blue" :fab="true" :shadow="0" icon="icon-plus" @click="catePoupShow = true">新增</tm-button>
|
||||
</view>
|
||||
<view>
|
||||
<tm-groupcheckbox name="categoryIds">
|
||||
<tm-checkbox :dense="true" :name="item.id" v-for="(item, index) in categories" :key="index" v-model="item.checked">
|
||||
<template v-slot:default="{ checkData }">
|
||||
<tm-button :flat="true" size="s" :theme="checkData.checked ? 'light-blue' : 'grey-lighten-4'" :plan="true">{{ item.name }}</tm-button>
|
||||
</template>
|
||||
</tm-checkbox>
|
||||
</tm-groupcheckbox>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-32 my-24 pb-24">
|
||||
<view class="text-size-m required flex-between">
|
||||
<text>选择标签</text>
|
||||
<tm-button size="xs" theme="light-blue" :fab="true" :shadow="0" icon="icon-plus" @click="tagPoupShow = true">新增</tm-button>
|
||||
</view>
|
||||
<view>
|
||||
<tm-groupcheckbox name="tagIds">
|
||||
<tm-checkbox :dense="true" :name="item.id" v-for="(item, index) in tags" :key="index" v-model="item.checked">
|
||||
<template v-slot:default="{ checkData }">
|
||||
<tm-button :flat="true" size="s" :theme="checkData.checked ? 'light-blue' : 'grey-lighten-4'" :plan="true">{{ item.name }}</tm-button>
|
||||
</template>
|
||||
</tm-checkbox>
|
||||
</tm-groupcheckbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 高级设置 -->
|
||||
<view v-show="tab.activeIndex == 1" class="pt-6">
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">禁止评论</text>
|
||||
<tm-switch v-model="article.disallowComment" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<view class="mx-32 my-24 border-b-1 pb-24 flex-between">
|
||||
<text class="text-size-m ">是否置顶</text>
|
||||
<tm-switch v-model="topPriority" color="light-blue" :text="['是', '否']"></tm-switch>
|
||||
</view>
|
||||
<tm-pickersDate
|
||||
@confirm="fnOnConfirmPublishTime"
|
||||
:default-value="createTime"
|
||||
:show-detail="{ year: true, month: true, day: true, hour: false, min: false, sec: false }"
|
||||
>
|
||||
<tm-input name="createTime" title="发表时间" placeholder="请选择发表时间" disabled :value="createTime" right-icon="icon-angle-right"></tm-input>
|
||||
</tm-pickersDate>
|
||||
<tm-input
|
||||
:vertical="true"
|
||||
:height="150"
|
||||
input-type="textarea"
|
||||
bg-color="grey-lighten-5"
|
||||
:maxlength="200"
|
||||
title=" 文章摘要"
|
||||
placeholder="如不填写，会从文章中自动截取"
|
||||
v-model="article.summary"
|
||||
></tm-input>
|
||||
<view class="ma-30 mt-12 pb-12">
|
||||
<view class="mb-12">
|
||||
<text class="text-size-m">封面图</text>
|
||||
<text class="text-grey text-size-s">（点击下方图片区域选择封面）</text>
|
||||
</view>
|
||||
<image v-if="article.showThumbnail" class="thumbnail round-3" :src="article.showThumbnail" mode="aspectFill" @click="attachmentsSelectShow = true"></image>
|
||||
<view v-else class="thumbnail round-3 text-grey grey-lighten-5 flex flex-col flex-center " @click="attachmentsSelectShow = true">
|
||||
<text class="iconfont icon-picture" style="font-size: 46rpx;"></text>
|
||||
<text class="mt-12 text-size-m">选择文章封面图</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="tab.activeIndex == 2" class="pt-12">
|
||||
<tm-input
|
||||
:vertical="true"
|
||||
:height="150"
|
||||
input-type="textarea"
|
||||
bg-color="grey-lighten-5"
|
||||
:maxlength="200"
|
||||
title="自定义关键字"
|
||||
placeholder="多个关键词以英文逗号隔开，如不填写，将自动使用标签作为关键词"
|
||||
v-model="article.metaKeywords"
|
||||
></tm-input>
|
||||
<tm-input
|
||||
:vertical="true"
|
||||
:height="200"
|
||||
:borderBottom="false"
|
||||
input-type="textarea"
|
||||
bg-color="grey-lighten-5"
|
||||
:maxlength="200"
|
||||
title="自定义描述"
|
||||
placeholder="如不填写，会从文章中自动截取"
|
||||
v-model="article.metaDescription"
|
||||
></tm-input>
|
||||
</view>
|
||||
</tm-form>
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<view class="btn-bar flex flex-center bg-white">
|
||||
<tm-button theme="blue" :shadow="0" block :height="70" @click="fnOnSave(false, false)">立即保存</tm-button>
|
||||
<tm-button theme="light-blue" :shadow="0" block :height="70" @click="fnOnSave(false, true)">保存并返回</tm-button>
|
||||
<!-- <block v-if="from == 'edit' && isEdit">
|
||||
<tm-button
|
||||
v-if="article.status == 'DRAFT' || article.status == 'INTIMATE' || article.status == 'RECYCLE'"
|
||||
theme="light-blue"
|
||||
:shadow="0"
|
||||
block
|
||||
:height="60"
|
||||
size="m"
|
||||
@click="fnOnChangeStatus('PUBLISHED')"
|
||||
>
|
||||
转为发布
|
||||
</tm-button>
|
||||
<tm-button
|
||||
v-if="article.status == 'PUBLISHED' || article.status == 'RECYCLE'"
|
||||
theme="red"
|
||||
:shadow="0"
|
||||
block
|
||||
:height="60"
|
||||
size="m"
|
||||
@click="fnOnChangeStatus('DRAFT')"
|
||||
>
|
||||
转为草稿
|
||||
</tm-button>
|
||||
</block>
|
||||
<block v-else-if="from == 'edit' && isEdit == false">
|
||||
<tm-button theme="light-blue" :shadow="0" block :height="60" size="m" @click="fnOnChangeCreateStatus('PUBLISHED')">立即发布</tm-button>
|
||||
<tm-button theme="red" :shadow="0" block :height="60" size="m" @click="fnOnChangeCreateStatus('DRAFT')">存为草稿</tm-button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<tm-button
|
||||
v-if="article.status == 'DRAFT' || article.status == 'RECYCLE'"
|
||||
theme="light-blue"
|
||||
:shadow="0"
|
||||
block
|
||||
:height="60"
|
||||
size="m"
|
||||
@click="fnOnChangeStatus('PUBLISHED')"
|
||||
>
|
||||
转为发布
|
||||
</tm-button>
|
||||
<tm-button
|
||||
v-if="article.status == 'PUBLISHED' || article.status == 'RECYCLE'"
|
||||
theme="red"
|
||||
:shadow="0"
|
||||
block
|
||||
:height="60"
|
||||
size="m"
|
||||
@click="fnOnChangeStatus('DRAFT')"
|
||||
>
|
||||
转为草稿
|
||||
</tm-button>
|
||||
</block> -->
|
||||
|
||||
<tm-button theme="blue-grey" :shadow="0" block :height="70" @click="fnOnBack()">{{ from == 'list' ? '返回列表' : '返回编辑' }}</tm-button>
|
||||
</view>
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select selectType="image" v-if="attachmentsSelectShow" @on-select="fnOnAttachmentsSelect" @on-close="attachmentsSelectShow = false"></attachment-select>
|
||||
|
||||
<!-- 新增分类 -->
|
||||
<tm-poup v-model="catePoupShow" position="bottom" @change="fnOnCatePoupChange" height="45vh">
|
||||
<view class="poup-content">
|
||||
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">新增分类</view>
|
||||
<scroll-view class="poup-body pa-24 pt-0" style="height: 28vh;" :scroll-y="true" @touchmove.stop>
|
||||
<tm-input
|
||||
required
|
||||
:adjust-position="true"
|
||||
:round="3"
|
||||
:borderBottom="false"
|
||||
title="名称"
|
||||
bg-color="grey-lighten-5"
|
||||
v-model="cateForm.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="cateForm.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="cateForm.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="cateForm.description"
|
||||
placeholder="请输入分类描述"
|
||||
></tm-input>
|
||||
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：分类的描述信息</view> -->
|
||||
</scroll-view>
|
||||
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" theme="bg-gradient-blue-accent" @click="fnOnCateSave()">保 存</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="fnOnCatePoupHide()">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
|
||||
<!-- 新增标签 -->
|
||||
<tm-poup v-model="tagPoupShow" position="bottom" @change="fnOnTagPoupChange" height="45vh">
|
||||
<view class="poup-content">
|
||||
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">新增标签</view>
|
||||
<scroll-view class="poup-body pa-24 pt-0" style="height: 28vh;" :scroll-y="true" @touchmove.stop>
|
||||
<tm-input
|
||||
required
|
||||
:adjust-position="true"
|
||||
:round="3"
|
||||
:borderBottom="false"
|
||||
title="标签名称"
|
||||
bg-color="grey-lighten-5"
|
||||
v-model="tagForm.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="tagForm.slug"
|
||||
placeholder="请输入分类别名"
|
||||
></tm-input>
|
||||
<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：一般为单个标签页面的标识，最好为英文</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" theme="bg-gradient-blue-accent" @click="fnOnTagSave()">保 存</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="fnOnTagPoupHide()">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||||
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
|
||||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmGroupcheckbox from '@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue';
|
||||
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
|
||||
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
|
||||
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
|
||||
|
||||
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmButton,
|
||||
tmTabs,
|
||||
tmForm,
|
||||
tmGroupcheckbox,
|
||||
tmCheckbox,
|
||||
tmPickers,
|
||||
tmInput,
|
||||
tmPickersDate,
|
||||
tmPoup,
|
||||
tmSkeleton,
|
||||
tmEmpty,
|
||||
tmSwitch,
|
||||
AttachmentSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBlackTheme: false,
|
||||
loading: 'loading',
|
||||
uploadAvatarShow: false,
|
||||
attachmentsSelectShow: false,
|
||||
postsId: undefined,
|
||||
postTitle: undefined,
|
||||
createTime: undefined,
|
||||
isEdit: true,
|
||||
from: 'list',
|
||||
topPriority: false,
|
||||
sfList: [{ title: '是', checked: null }, { title: '否', checked: null }],
|
||||
tab: {
|
||||
activeIndex: 0,
|
||||
list: ['常规', '高级', 'SEO']
|
||||
},
|
||||
article: {
|
||||
content: '',
|
||||
keepRaw: true,
|
||||
sourceContent: '',
|
||||
type: 'PUBLIC'
|
||||
},
|
||||
articleStatus: {
|
||||
list: [{ name: '发布', value: 'PUBLISHED' }, { name: '私有', value: 'INTIMATE' }, { name: '草稿', value: 'DRAFT' }, { name: '回收站', value: 'RECYCLE' }],
|
||||
status: ['PUBLISHED'],
|
||||
selectText: '发布',
|
||||
selectValue: 'PUBLISHED'
|
||||
},
|
||||
// 分类
|
||||
categories: [],
|
||||
catePoupShow: false,
|
||||
cateForm: {
|
||||
name: undefined,
|
||||
slug: undefined,
|
||||
password: undefined,
|
||||
description: undefined
|
||||
},
|
||||
// 标签
|
||||
tags: [],
|
||||
tagPoupShow: false,
|
||||
tagForm: {
|
||||
name: undefined,
|
||||
slug: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
const postsId = this.$Route.query.postsId;
|
||||
const postTitle = this.$Route.query.postTitle;
|
||||
const isEdit = this.$Route.query.isEdit;
|
||||
const from = this.$Route.query.from;
|
||||
this.postsId = postsId;
|
||||
this.postTitle = postTitle || '';
|
||||
this.isEdit = isEdit;
|
||||
this.from = from;
|
||||
this.createTime = uni.$tm.dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
|
||||
this.fnGetSettings();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
if (this.isEdit == false) {
|
||||
uni.stopPullDownRefresh();
|
||||
return;
|
||||
}
|
||||
this.fnGetSettings();
|
||||
},
|
||||
methods: {
|
||||
fnOnCatePoupChange(e) {
|
||||
if (!e) {
|
||||
this.fnResetCateForm();
|
||||
}
|
||||
},
|
||||
fnResetCateForm() {
|
||||
this.cateForm = {
|
||||
color: undefined,
|
||||
createTime: undefined,
|
||||
fullPath: undefined,
|
||||
id: undefined,
|
||||
name: '',
|
||||
slug: undefined,
|
||||
thumbnail: undefined,
|
||||
showThumbnail: undefined
|
||||
};
|
||||
},
|
||||
fnOnCatePoupHide() {
|
||||
this.catePoupShow = false;
|
||||
this.fnResetCateForm();
|
||||
},
|
||||
fnOnCateSave() {
|
||||
if (this.cateForm.name.trim() == '') {
|
||||
return uni.$tm.toast('分类名称未填写！');
|
||||
}
|
||||
this.$httpApi.admin
|
||||
.createCategory(this.cateForm)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast(`保存成功！`);
|
||||
this.fnResetCateForm();
|
||||
// 将数据填充到列表
|
||||
this.categories.push({
|
||||
id: res.data.id,
|
||||
name: res.data.name,
|
||||
checked: false
|
||||
});
|
||||
} else {
|
||||
uni.$tm.toast('添加成功！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('添加失败，请重试！');
|
||||
});
|
||||
},
|
||||
fnOnTagPoupChange(e) {
|
||||
if (!e) {
|
||||
this.fnResetTagForm();
|
||||
}
|
||||
},
|
||||
fnResetTagForm() {
|
||||
this.tagForm = {
|
||||
color: undefined,
|
||||
createTime: undefined,
|
||||
fullPath: undefined,
|
||||
id: undefined,
|
||||
name: '',
|
||||
slug: undefined,
|
||||
thumbnail: undefined,
|
||||
showThumbnail: undefined
|
||||
};
|
||||
},
|
||||
fnOnTagPoupHide() {
|
||||
this.tagPoupShow = false;
|
||||
this.fnResetTagForm();
|
||||
},
|
||||
fnOnTagSave() {
|
||||
if (this.tagForm.name.trim() == '') {
|
||||
return uni.$tm.toast('标签名称未填写！');
|
||||
}
|
||||
this.$httpApi.admin
|
||||
.createTags(this.tagForm)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast(`保存成功！`);
|
||||
this.fnResetTagForm();
|
||||
// 将数据填充到列表
|
||||
this.tags.push({
|
||||
id: res.data.id,
|
||||
name: res.data.name,
|
||||
checked: false
|
||||
});
|
||||
} else {
|
||||
uni.$tm.toast('添加成功！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('添加失败，请重试！');
|
||||
});
|
||||
},
|
||||
fnOnArticleStatusConfirm(e) {
|
||||
const status = e[0].data;
|
||||
this.articleStatus.status = [status.value];
|
||||
this.articleStatus.selectText = status.name;
|
||||
this.articleStatus.selectValue = status.value;
|
||||
},
|
||||
// 获取文章的设置
|
||||
fnGetSettings() {
|
||||
// this.loading = 'loading';
|
||||
this.loading = 'success';
|
||||
const _post = this.isEdit ? this.$httpApi.admin.getPostsById(this.postsId) : Promise.resolve();
|
||||
const _cate = this.$httpApi.admin.getCategoryList({ more: true });
|
||||
const _tags = this.$httpApi.admin.getTagsList({ more: true });
|
||||
|
||||
const _apis = Promise.all([_post, _cate, _tags]);
|
||||
uni.showLoading({
|
||||
title: '加载中，请稍等...',
|
||||
mask: true
|
||||
});
|
||||
_apis
|
||||
.then(res => {
|
||||
if (this.isEdit) {
|
||||
const _postRes = res[0];
|
||||
this.article = _postRes.data;
|
||||
// 设置文章状态
|
||||
let _articleStatus = this.articleStatus.list.find(x => x.value == this.article.status);
|
||||
if (_articleStatus) {
|
||||
this.articleStatus.status = [_articleStatus.value];
|
||||
this.articleStatus.selectText = _articleStatus.name;
|
||||
this.articleStatus.selectValue = _articleStatus.value;
|
||||
}
|
||||
this.topPriority = this.article.topPriority == 0 ? false : true;
|
||||
if (this.article.thumbnail) {
|
||||
this.$set(this.article, 'showThumbnail', this.$utils.checkThumbnailUrl(this.article.thumbnail));
|
||||
}
|
||||
this.createTime = uni.$tm.dayjs(new Date(this.article.createTime).getTime()).format('YYYY-MM-DD HH:mm:ss');
|
||||
if (this.postTitle) {
|
||||
this.article.title = this.postTitle;
|
||||
}
|
||||
}
|
||||
const _cateRes = res[1];
|
||||
let _tempCategories = _cateRes.data.map((item, index) => {
|
||||
let _isCateCheck = false;
|
||||
if (this.isEdit) {
|
||||
_isCateCheck = this.article.categoryIds.some(x => x == item.id);
|
||||
}
|
||||
return {
|
||||
index: _isCateCheck ? 0 : index + 1,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
checked: _isCateCheck
|
||||
};
|
||||
});
|
||||
if (this.isEdit) {
|
||||
this.categories = _tempCategories.sort((a, b) => a.index - b.index);
|
||||
} else {
|
||||
this.categories = _tempCategories;
|
||||
}
|
||||
const _tagRes = res[2];
|
||||
let _tempTags = _tagRes.data.map((item, index) => {
|
||||
let _isTagCheck = false;
|
||||
if (this.isEdit) {
|
||||
_isTagCheck = this.article.tagIds.some(x => x == item.id);
|
||||
}
|
||||
return {
|
||||
index: _isTagCheck ? 0 : index + 1,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
checked: _isTagCheck
|
||||
};
|
||||
});
|
||||
if (this.isEdit) {
|
||||
this.tags = _tempTags.sort((a, b) => a.index - b.index);
|
||||
} else {
|
||||
this.tags = _tempTags;
|
||||
}
|
||||
this.loading = 'success';
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch(err => {
|
||||
this.$tm.toast('数据加载失败，请重试！');
|
||||
this.loading = 'error';
|
||||
})
|
||||
.finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
// 监听附件选择
|
||||
fnOnAttachmentsSelect(file) {
|
||||
this.article.thumbnail = file.path;
|
||||
this.$set(this.article, 'showThumbnail', this.$utils.checkThumbnailUrl(file.path));
|
||||
this.attachmentsSelectShow = false;
|
||||
},
|
||||
fnOnConfirmPublishTime(e) {
|
||||
this.createTime = `${e.year}-${e.month}-${e.day} 00:00:00`;
|
||||
this.article.createTime = new Date(`${e.year}-${e.month}-${e.day}`).getTime();
|
||||
},
|
||||
// 修改文章的状态
|
||||
fnOnChangeStatus(status) {
|
||||
if (this.article.status == 'INTIMATE') {
|
||||
this.article['password'] = '';
|
||||
}
|
||||
this.article.status = status;
|
||||
this.fnOnSave(true);
|
||||
},
|
||||
fnOnChangeCreateStatus(status) {
|
||||
this.article.status = status;
|
||||
this.fnOnSave();
|
||||
},
|
||||
// 保存文章设置
|
||||
fnOnSave(isChangeStatus = false, isBack = true) {
|
||||
// 校验数据
|
||||
if (!this.article.title) {
|
||||
return uni.$tm.toast('请输入文章标题！');
|
||||
}
|
||||
if (!this.article.slug) {
|
||||
return uni.$tm.toast('请输入文章别名！');
|
||||
}
|
||||
if (this.articleStatus.selectValue == 'INTIMATE' && !this.article.password) {
|
||||
return uni.$tm.toast('文章私有状态，缺少密码！');
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
// 设置文章内容
|
||||
if (this.from == 'edit') {
|
||||
this.article.content = uni.getStorageSync('posts-content');
|
||||
this.article.sourceContent = uni.getStorageSync('posts-content-source');
|
||||
}
|
||||
if (this.articleStatus.selectValue != 'INTIMATE') {
|
||||
this.article.password = '';
|
||||
}
|
||||
this.article.status = this.articleStatus.selectValue;
|
||||
this.article.topPriority = this.topPriority ? 1 : 0;
|
||||
this.article.tagIds = this.tags.filter(item => item.checked == true).map(item => item.id);
|
||||
this.article.categoryIds = this.categories.filter(item => item.checked == true).map(item => item.id);
|
||||
|
||||
if (this.isEdit) {
|
||||
this.$httpApi.admin
|
||||
.updatePostsById(this.postsId, this.article)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.$tm.toast('保存成功！');
|
||||
uni.setStorageSync('posts-html-edit', '');
|
||||
uni.setStorageSync('posts-content', '');
|
||||
uni.setStorageSync('posts-content-source', '');
|
||||
setTimeout(() => {
|
||||
if (isBack) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
uni.$emit('refresh-article-list');
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
if (isChangeStatus) {
|
||||
this.article.status = this.article.status == 'DRAFT' ? 'PUBLISHED' : 'DRAFT';
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
if (isChangeStatus) {
|
||||
this.article.status = this.article.status == 'DRAFT' ? 'PUBLISHED' : 'DRAFT';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.article.content = this.article.sourceContent = uni.getStorageInfoSync();
|
||||
this.$httpApi.admin
|
||||
.createPosts(this.article)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('发布成功!');
|
||||
uni.setStorageSync('posts-html-edit', '');
|
||||
uni.setStorageSync('posts-content', '');
|
||||
uni.setStorageSync('posts-content-source', '');
|
||||
setTimeout(() => {
|
||||
if (isBack) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
uni.$emit('refresh-article-list');
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('发布失败，请重试!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('发布失败，请重试!');
|
||||
});
|
||||
}
|
||||
},
|
||||
fnOnBack() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '您当前可能有未保存的数据，确定返回吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.navigateBack();
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
padding-bottom: 110rpx;
|
||||
.app-page-content {
|
||||
min-height: calc(100vh - 340rpx);
|
||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.btn-bar {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
gap: 0 24rpx;
|
||||
box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 260rpx;
|
||||
}
|
||||
}
|
||||
.required {
|
||||
position: relative;
|
||||
padding-left: 18rpx;
|
||||
&:before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -4rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: rgba(244, 67, 54, 1);
|
||||
}
|
||||
}
|
||||
.poup-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.poup-body {
|
||||
height: 60vh;
|
||||
box-sizing: border-box;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
|
||||
<!-- 顶部切换 -->
|
||||
<view class="e-fixed shadow-2">
|
||||
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue" insert-color="light-blue" :clear="true">
|
||||
<view slot="right" class="flex flex-center">
|
||||
<tm-pickers title="请选择分类" :default-value="category.selected" :list="category.list" rang-key="name" btn-color="blue" @confirm="fnOnCategoryConfirm">
|
||||
<text class="iconfont icon-filter text-size-lg text-grey-darken-2"></text>
|
||||
</tm-pickers>
|
||||
<text class="ml-16 text-size-g" style="min-width: 70rpx;" @click="fnOnSearch">搜索</text>
|
||||
</view>
|
||||
</tm-search>
|
||||
<tm-tabs color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
|
||||
</view>
|
||||
<!-- 占位区域 -->
|
||||
<view style="width: 100vw;height: 184rpx;"></view>
|
||||
<!-- 加载区域 -->
|
||||
<view v-if="loading != 'success'" class="loading-wrap pa-24">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<view v-else class="app-page-content pl-24 pr-24">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
|
||||
<!-- 空布局 -->
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无数据"></tm-empty>
|
||||
</view>
|
||||
<block v-else>
|
||||
<block v-for="(article, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<!-- 文章卡片 -->
|
||||
<view class="article-card mt-24 bg-white pa-24 round-3">
|
||||
<view class="thumbnail round-2" @click="fnToArticleDetail(article)">
|
||||
<image v-if="article.hasThumbnail" class="thumbnail-img round-2" :src="article.thumbnail" mode="aspectFill"></image>
|
||||
<view v-else class="thumbnail-not round-2 flex flex-center text-grey-darken-2">无封面图</view>
|
||||
</view>
|
||||
<view class="title mt-16 text-bg-gradient-blue-accent">{{ article.title }}</view>
|
||||
<view class="summary mt-16 text-grey-darken-2 text-size-m">{{ article.summary }}</view>
|
||||
<view class="flex mt-12 flex-start desc-box text-size-m">
|
||||
<view class="label text-grey-darken-2">分类：</view>
|
||||
<view class="value">
|
||||
<block v-if="article.categories.length != 0">
|
||||
<tm-tags v-for="(category, categoryIndex) in article.categories" :key="category.slug" color="light-blue" size="s" model="text">
|
||||
{{ category.name }}
|
||||
</tm-tags>
|
||||
</block>
|
||||
<text v-else class="ml-12 text-grey-darken-2">未选择分类</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-start desc-box text-size-m" :class="{ 'mt-12': article.tags.length == 0 }">
|
||||
<view class="label text-grey-darken-2">标签：</view>
|
||||
<view class="value">
|
||||
<block v-if="article.tags.length != 0">
|
||||
<tm-tags v-for="(tag, tagIndex) in article.tags" :key="tag.slug" color="orange" size="s" model="text">{{ tag.name }}</tm-tags>
|
||||
</block>
|
||||
<text v-else class="ml-12 text-grey-darken-2 ">未选择标签</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-start desc-box text-size-m" :class="{ 'mt-12': article.tags.length == 0 }">
|
||||
<view class="label text-grey-darken-2">状态：</view>
|
||||
<view class="value">
|
||||
<tm-tags v-if="article.status == 'PUBLISHED'" color="green" size="s" model="text">已发布（访客可见）</tm-tags>
|
||||
<tm-tags v-else-if="article.status == 'INTIMATE'" color="light-blue" size="s" model="text">私密（访客不可见）</tm-tags>
|
||||
<tm-tags v-else-if="article.status == 'DRAFT'" color="blue-grey" size="s" model="text">草稿（未发布）</tm-tags>
|
||||
<tm-tags v-else-if="article.status == 'RECYCLE'" color="deep-orange" size="s" model="text">回收站</tm-tags>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex mt-12 flex-start desc-box text-size-m">
|
||||
<view class="label text-grey-darken-2">日期：</view>
|
||||
<view class="value ml-12 text-grey-darken-2">{{ $tm.dayjs(article.createTime).format('YYYY年MM月DD日 HH点mm分ss秒') }}</view>
|
||||
</view>
|
||||
<view class="flex mt-12 flex-start desc-box text-size-m ">
|
||||
<view class="label text-grey-darken-2">统计：</view>
|
||||
<view class="value ml-12 text-grey-darken-2">
|
||||
<text class="">
|
||||
<text class="text-size-m text-weight-b text-bg-gradient-blue-accent">{{ article.wordCount }}</text>
|
||||
<text class="ml-6 text-size-s">字</text>
|
||||
</text>
|
||||
<text class="ml-20">
|
||||
<text class="text-size-m text-weight-b text-bg-gradient-light-blue-accent">{{ article.visits }}</text>
|
||||
<text class="ml-6 text-size-s">浏览</text>
|
||||
</text>
|
||||
<text class="ml-20">
|
||||
<text class="text-size-m text-weight-b text-bg-gradient-cyan-accent">{{ article.likes }}</text>
|
||||
<text class="ml-6 text-size-s">点赞</text>
|
||||
</text>
|
||||
<text class="ml-20">
|
||||
<text class="text-size-m text-weight-b text-bg-gradient-blue-grey-accent">{{ article.commentCount }}</text>
|
||||
<text class="ml-6 text-size-s">评论</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foot flex flex-between mt-20 pt-24 desc-box text-size-m">
|
||||
<tm-button theme="light-blue" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnEditArticle(article)">编辑</tm-button>
|
||||
<tm-button theme="red" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnDelArticle(article, index)">删除</tm-button>
|
||||
<tm-button theme="blue-grey" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnSetArticle(article, index)">设置</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton :show-text="true" color="bg-gradient-orange-accent" @click="fnOnAddArticle()"></tm-flotbutton>
|
||||
<view class="load-text">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import 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: {
|
||||
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'
|
||||
};
|
||||
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';
|
||||
});
|
||||
},
|
||||
// 显示分类选择
|
||||
fnOnCategoryConfirm(e) {
|
||||
this.category.selected = [e[0].index];
|
||||
this.queryParams.categoryId = e[0].data.id;
|
||||
},
|
||||
fnOnSearch() {
|
||||
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 {
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
// 跳转文章详情（预览）
|
||||
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: true, from: 'list' } });
|
||||
},
|
||||
// 删除文章
|
||||
fnOnDelArticle(article, index) {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '是否确定要删除该文章？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '删除中...'
|
||||
});
|
||||
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;
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,767 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<!-- 搜索区域 -->
|
||||
<view class="filter-wrap bg-white shadow-3">
|
||||
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue" insert-color="light-blue" :clear="true" @confirm="fnOnSearch"></tm-search>
|
||||
<tm-dropDownMenu :shadow="0" color="light-blue" @confirm="fnOnConfirm" :list="filterList"></tm-dropDownMenu>
|
||||
</view>
|
||||
|
||||
<!-- 占位区域 -->
|
||||
<view style="width: 100vw;height: 184rpx;"></view>
|
||||
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</view>
|
||||
|
||||
<view class="page-content pa-24 flex flex-col" v-else>
|
||||
<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">
|
||||
<view class="attachment-card mb-24 flex bg-white pa-24 round-3" @click="fnShowDetail(item)">
|
||||
<view class="cover round-3 flex flex-center" :class="[fnGetIconClass(item.mediaType)]">
|
||||
<text class="icon iconfont">{{ item.suffix }}</text>
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<view class="info pl-36">
|
||||
<view class="file-name text-size-m text-weight-b">{{ item.name }}</view>
|
||||
<view class="file-media mt-12 text-size-s text-grey-darken-1">附件类型：{{ item.mediaType }}</view>
|
||||
<view class="file-media mt-8 text-size-s text-grey-darken-1">附件大小：{{ item.sizeText }}</view>
|
||||
<view class="file-path mt-8 text-size-s text-grey-darken-1">上传日期：{{ { d: item.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||||
<view class="load-text ">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
|
||||
<!-- 弹窗详情 -->
|
||||
<tm-poup v-model="detail.show" position="bottom" height="80vh">
|
||||
<view class="poup-content">
|
||||
<view class="poup-head text-align-center text-weight-b text-size-g ma-24 ">附件详情</view>
|
||||
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
|
||||
<view class="preview-file pl-24 pr-24">
|
||||
<!-- 图片预览 -->
|
||||
<tm-images
|
||||
v-if="$utils.fnCheckIsFileType('image', detail.form)"
|
||||
:width="700"
|
||||
:height="350"
|
||||
:round="3"
|
||||
:src="$utils.checkThumbnailUrl(detail.form.path)"
|
||||
model="aspectFill"
|
||||
></tm-images>
|
||||
<!-- 视频 -->
|
||||
<video
|
||||
v-else-if="$utils.fnCheckIsFileType('video', detail.form)"
|
||||
class="round-3"
|
||||
style="width: 100%;height: 350rpx;"
|
||||
:src="$utils.checkUrl(detail.form.path)"
|
||||
controls
|
||||
></video>
|
||||
<view v-else class="flex flex-center border-a-1 round-3 text-align-center text-grey-darken-1" style="height: 280rpx;background-color: #f2f2f2;">
|
||||
该文件暂不支持预览
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tm-input title="附件名称" v-model="detail.form.name" :clear="true" placeholder="请输入附件名称..."></tm-input>
|
||||
<tm-input :disabled="true" color="grey" title="附件类型" v-model="detail.form.mediaType"></tm-input>
|
||||
<tm-input :disabled="true" color="grey" title="附件位置" v-model="detail.form.type"></tm-input>
|
||||
<tm-input :disabled="true" color="grey" title="附件大小" v-model="detail.form.sizeText"></tm-input>
|
||||
<tm-input :disabled="true" color="grey" title="上传日期" v-model="detail.form.createTime"></tm-input>
|
||||
<tm-input
|
||||
:disabled="true"
|
||||
:vertical="true"
|
||||
:borderBottom="false"
|
||||
input-type="textarea"
|
||||
title="文件地址"
|
||||
color="grey"
|
||||
bg-color="grey-lighten-5"
|
||||
:height="120"
|
||||
v-model="detail.form.path"
|
||||
>
|
||||
<template v-slot:default="{ title }">
|
||||
{{ title }}
|
||||
<tm-button text theme="light-blue" size="xs" @click="$utils.copyText(detail.form.path, '复制成功！')">复制</tm-button>
|
||||
</template>
|
||||
</tm-input>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" navtie-type="form" theme="bg-gradient-blue-accent" @click="fnOnUpdate()">保存</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-red-accent" @click="fnOnDelete()">删除</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="detail.show = false">关闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
|
||||
<tm-flotbutton :show-text="true" color="bg-gradient-orange-accent" @click="fnOnFlotButton"></tm-flotbutton>
|
||||
|
||||
<tm-actionSheetMenu title="文件上传操作" @change="fnOnFileSelectActionChange" v-model="fileSelectAction.show" :actions="fileSelectAction.list"></tm-actionSheetMenu>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-PLUS
|
||||
const AfDocument = uni.requireNativePlugin('Aq-ChooseFile'); // 临时替代
|
||||
// #endif
|
||||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||||
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
|
||||
import tmDropDownMenu from '@/tm-vuetify/components/tm-dropDownMenu/tm-dropDownMenu.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
||||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmActionSheetMenu from '@/tm-vuetify/components/tm-actionSheetMenu/tm-actionSheetMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmSearch,
|
||||
tmDropDownMenu,
|
||||
tmEmpty,
|
||||
tmButton,
|
||||
tmCheckbox,
|
||||
tmPoup,
|
||||
tmForm,
|
||||
tmUpload,
|
||||
tmInput,
|
||||
tmImages,
|
||||
tmFlotbutton,
|
||||
tmTranslate,
|
||||
tmActionSheetMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
filterLoading: 'loading',
|
||||
btnOption: {
|
||||
actions: [
|
||||
{
|
||||
icon: 'icon-like',
|
||||
color: 'bg-gradient-orange-accent'
|
||||
},
|
||||
{
|
||||
icon: 'icon-commentdots-fill',
|
||||
color: 'bg-gradient-green-accent'
|
||||
},
|
||||
{
|
||||
icon: 'icon-share1',
|
||||
color: 'bg-gradient-blue-accent'
|
||||
}
|
||||
]
|
||||
},
|
||||
filterList: [
|
||||
{
|
||||
title: '存储位置',
|
||||
children: [
|
||||
{
|
||||
title: '',
|
||||
name: 'attachmentType',
|
||||
model: 'radio',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文件类型',
|
||||
children: [
|
||||
{
|
||||
title: '',
|
||||
name: 'mediaType',
|
||||
model: 'radio',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
queryParams: {
|
||||
size: 8,
|
||||
page: 0,
|
||||
attachmentType: undefined,
|
||||
keyword: undefined,
|
||||
mediaType: undefined,
|
||||
sort: undefined
|
||||
},
|
||||
result: {},
|
||||
dataList: [],
|
||||
total: 0,
|
||||
detail: {
|
||||
params: {},
|
||||
form: {},
|
||||
show: false
|
||||
},
|
||||
isLoadMore: false,
|
||||
loadMoreText: '加载中...',
|
||||
|
||||
fileSelectAction: {
|
||||
show: false,
|
||||
list: []
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('附件管理');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
this.fnGetFilters();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.queryParams.page = 0;
|
||||
this.dataList = [];
|
||||
this.fnGetData();
|
||||
if (this.filterLoading != 'success') {
|
||||
this.fnGetFilters();
|
||||
}
|
||||
},
|
||||
onReachBottom(e) {
|
||||
if (this.result.hasNext) {
|
||||
this.queryParams.page += 1;
|
||||
this.isLoadMore = true;
|
||||
this.fnGetData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '没有更多数据了'
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 文件大小 字节转换单位
|
||||
* @param size
|
||||
* @returns {string|*}
|
||||
*/
|
||||
fnTransFileSize(size) {
|
||||
if (!size) return '';
|
||||
if (size < this.fnPow1024(1)) return size + ' B';
|
||||
if (size < this.fnPow1024(2)) return (size / this.fnPow1024(1)).toFixed(2) + ' KB';
|
||||
if (size < this.fnPow1024(3)) return (size / this.fnPow1024(2)).toFixed(2) + ' MB';
|
||||
if (size < this.fnPow1024(4)) return (size / this.fnPow1024(3)).toFixed(2) + ' GB';
|
||||
return (size / this.fnPow1024(4)).toFixed(2) + ' TB';
|
||||
},
|
||||
|
||||
// 求次幂
|
||||
fnPow1024(num) {
|
||||
return Math.pow(1024, num);
|
||||
},
|
||||
|
||||
fnGetIconClass(mediaType) {
|
||||
let _class = '';
|
||||
if (mediaType.indexOf('video/') != -1) {
|
||||
_class = 'is-video';
|
||||
} else if (mediaType.indexOf('image/') != -1) {
|
||||
_class = 'is-image';
|
||||
}
|
||||
return _class;
|
||||
},
|
||||
fnCheckIsFileType(type, attachment) {
|
||||
if (type == 'video') return attachment.mediaType.indexOf('video/') != -1;
|
||||
else if (type == 'image') return attachment.mediaType.indexOf('image/') != -1;
|
||||
else return false;
|
||||
},
|
||||
fnGetFilters() {
|
||||
this.filterLoading = 'loading';
|
||||
Promise.all([this.$httpApi.admin.getAttachmentsTypes(), this.$httpApi.admin.getAttachmentsMediaTypes()])
|
||||
.then(res => {
|
||||
const res1 = res[0];
|
||||
this.filterList[0].children[0].children = res1.data.map(item => {
|
||||
return {
|
||||
title: item,
|
||||
id: item
|
||||
};
|
||||
});
|
||||
const res2 = res[1];
|
||||
this.filterList[1].children[0].children = res2.data.map(item => {
|
||||
return {
|
||||
title: item,
|
||||
id: item
|
||||
};
|
||||
});
|
||||
this.filterLoading = 'success';
|
||||
})
|
||||
.catch(err => {
|
||||
this.filterLoading = 'error';
|
||||
uni.$tm.toast('搜索条件数据加载失败！');
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索区域确定
|
||||
fnOnConfirm(e) {
|
||||
this.queryParams.attachmentType = e[0].children.map(x => x.id).join('') || undefined;
|
||||
this.queryParams.mediaType = e[1].children.map(x => x.id).join('') || undefined;
|
||||
this.fnOnSearch();
|
||||
},
|
||||
fnOnSearch() {
|
||||
this.queryParams.page = 0;
|
||||
this.dataList = [];
|
||||
this.fnGetData();
|
||||
},
|
||||
|
||||
fnGetData() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
// 设置状态为加载中
|
||||
if (!this.isLoadMore) {
|
||||
this.loading = 'loading';
|
||||
}
|
||||
this.loadMoreText = '加载中...';
|
||||
this.$httpApi.admin
|
||||
.getAttachmentsByPage(this.queryParams)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
||||
this.result = res.data;
|
||||
this.total = res.data.total;
|
||||
if (this.isLoadMore) {
|
||||
let _list = this.dataList.concat(res.data.content);
|
||||
this.dataList = _list.map(item => {
|
||||
item['sizeText'] = this.fnTransFileSize(item.size);
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.dataList = res.data.content.map(item => {
|
||||
item['sizeText'] = this.fnTransFileSize(item.size);
|
||||
return item;
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
// 详情
|
||||
fnShowDetail(item) {
|
||||
this.detail.params = { ...item };
|
||||
this.detail.form = { ...item };
|
||||
this.detail.show = true;
|
||||
},
|
||||
// 删除
|
||||
fnOnDelete() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: `您确定要删除该附件吗？`,
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '正在删除...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.deleteAttachmentById(this.detail.params.id)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('删除成功！');
|
||||
setTimeout(() => {
|
||||
this.detail.show = false;
|
||||
this.detail.params = {};
|
||||
this.detail.form = {};
|
||||
this.fnGetData();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('删除失败，请重试！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
uni.$tm.toast('删除失败，请重试！');
|
||||
});
|
||||
})
|
||||
.catch(err => {});
|
||||
},
|
||||
fnOnUpdate() {
|
||||
if (this.detail.form.name == '') {
|
||||
return uni.$tm.toast('附件名称不能为空！');
|
||||
}
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '正在保存...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.updateAttachmentById(this.detail.params.id, this.detail.form.name)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功！');
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.detail.show = false;
|
||||
// this.detail.params = {};
|
||||
// this.detail.form = {};
|
||||
// this.fnGetData();
|
||||
// }, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试！');
|
||||
});
|
||||
},
|
||||
// 浮动按钮点击
|
||||
fnOnFlotButton() {
|
||||
// 微信小程序：提供从消息列表和媒体选择
|
||||
// #ifdef MP-WEIXIN
|
||||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||||
// #endif
|
||||
|
||||
// 安卓app：使用第三方上传
|
||||
// #ifdef APP-PLUS
|
||||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||||
// #endif
|
||||
|
||||
// h5
|
||||
// #ifdef H5
|
||||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||||
// #endif
|
||||
|
||||
// #ifndef H5||MP-WEIXIN||APP-PLUS
|
||||
this.fileSelectAction.list = ['上传照片', '上传视频'];
|
||||
// #endif
|
||||
|
||||
this.fileSelectAction.show = true;
|
||||
},
|
||||
fnOnFileSelectActionChange(e) {
|
||||
// 微信小程序：提供从消息列表和媒体选择
|
||||
// #ifdef MP-WEIXIN
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
// 上传照片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 上传视频
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
// 会话选择
|
||||
uni.chooseMessageFile({
|
||||
count: 1,
|
||||
success: res => {
|
||||
this.fnOnUploadFileByPath(res.tempFiles[0].path);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// 安卓app
|
||||
// #ifdef APP-PLUS
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
// 上传照片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 上传视频
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
// 上传文件：
|
||||
// todo:使用第三方控件
|
||||
AfDocument.openMode(
|
||||
{
|
||||
size: 1,
|
||||
isDown: true,
|
||||
types: [
|
||||
{
|
||||
name: '文档',
|
||||
value: ['doc', 'wps', 'docx', 'xls', 'xlsx', 'pdf']
|
||||
},
|
||||
{
|
||||
name: '视频',
|
||||
value: ['mp4']
|
||||
},
|
||||
{
|
||||
name: '音乐',
|
||||
value: ['mp3', 'flac']
|
||||
},
|
||||
{
|
||||
name: '图片',
|
||||
value: ['jpg', 'png']
|
||||
}
|
||||
]
|
||||
},
|
||||
res => {
|
||||
// this.data = JSON.stringify(res);
|
||||
this.fnOnUploadFileByFile(res[0].path);
|
||||
}
|
||||
);
|
||||
break;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// h5
|
||||
// #ifdef H5
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
// 上传照片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 上传视频
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
// 上传文件
|
||||
uni.chooseFile({
|
||||
count: 1,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef H5||MP-WEIXIN||APP-PLUS
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
// 上传照片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
this.fnOnUploadFileByFile(res.tempFiles[0]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 上传视频
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: res => {
|
||||
this.fnOnUploadFileByFile(res.tempFile);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 使用文件路径上传文件
|
||||
fnOnUploadFileByPath(path) {
|
||||
uni.showLoading({
|
||||
title: '文件上传中...',
|
||||
mask: true
|
||||
});
|
||||
uni.uploadFile({
|
||||
filePath: path,
|
||||
header: {
|
||||
'admin-authorization': getAdminAccessToken()
|
||||
},
|
||||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||||
name: 'file',
|
||||
success: upladRes => {
|
||||
const _uploadRes = JSON.parse(upladRes.data);
|
||||
if (_uploadRes.status == 200) {
|
||||
uni.$tm.toast('文件上传成功！');
|
||||
setTimeout(() => {
|
||||
this.fnGetData();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast(_uploadRes.message);
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.$tm.toast(err.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 使用文件对象上传文件
|
||||
fnOnUploadFileByFile(file) {
|
||||
uni.showLoading({
|
||||
title: '文件上传中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
uni.uploadFile({
|
||||
// #ifdef H5
|
||||
file: file,
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
files: [file],
|
||||
// #endif
|
||||
header: {
|
||||
'admin-authorization': getAdminAccessToken()
|
||||
},
|
||||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||||
name: 'file',
|
||||
success: upladRes => {
|
||||
const _uploadRes = JSON.parse(upladRes.data);
|
||||
if (_uploadRes.status == 200) {
|
||||
uni.$tm.toast('文件上传成功！');
|
||||
setTimeout(() => {
|
||||
this.fnGetData();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast(_uploadRes.message);
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.$tm.toast(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.filter-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifdef H5 */
|
||||
top: 88rpx;
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
width: 100vw;
|
||||
z-index: 6;
|
||||
}
|
||||
.page-content {
|
||||
}
|
||||
.content-empty {
|
||||
width: 100vw;
|
||||
height: 65vh;
|
||||
}
|
||||
.attachment-card {
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
.cover {
|
||||
width: 170rpx;
|
||||
height: 160rpx;
|
||||
background-color: rgb(104, 136, 151);
|
||||
// box-shadow: 0 6rpx 10rpx rgba(51, 154, 204, 0.2);
|
||||
&.is-video {
|
||||
background-color: rgb(3, 174, 252);
|
||||
}
|
||||
&.is-image {
|
||||
background-color: #1cbcb4;
|
||||
}
|
||||
.icon {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.thumbnai {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
border: 6rpx solid #fff;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
.time-icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poup-body {
|
||||
box-sizing: border-box;
|
||||
height: 66vh;
|
||||
}
|
||||
.poup-content {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.file-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view v-if="loading != 'success'" class="loading-wrap pa-24 pt-36">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content pa-24">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
|
||||
<block v-else>
|
||||
<block v-for="(category, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<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">
|
||||
<image v-if="category.showThumbnail" class="cover round-3" :src="category.showThumbnail" mode="aspectFill"></image>
|
||||
<view v-else class="cover round-3 flex flex-center text-weight-b text-white text-size-m">无封面</view>
|
||||
</view>
|
||||
<view class="right pl-24 text-size-m">
|
||||
<view class="text-weight-b">名称：{{ category.name }}</view>
|
||||
<view class="mt-12">
|
||||
<text class="text-grey-darken-1">别名：</text>
|
||||
{{ category.slug || '暂无别名' }}
|
||||
</view>
|
||||
<view class="mt-12 flex desc-box">
|
||||
<view class="label text-grey-darken-1">路径：</view>
|
||||
<view class="value text-size-s">{{ category.fullPath }}</view>
|
||||
</view>
|
||||
<view class="mt-12 flex desc-box">
|
||||
<view class="label text-grey-darken-1">描述：</view>
|
||||
<view class="value text-size-s">{{ category.description || '暂无描述' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton @click="fnShowFormModal()" size="m" color="orange" icon="icon-plus"></tm-flotbutton>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 编辑或新增 -->
|
||||
<tm-poup v-model="poupShow" position="bottom" height="85vh" @change="fnOnPoupChange">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<text class="text-size-m">封面图</text>
|
||||
<text class="text-grey text-size-s">（点击下方图片区域选择封面）</text>
|
||||
</view>
|
||||
<image v-if="form.showThumbnail" class="thumbnail round-3" :src="form.showThumbnail" mode="aspectFill" @click="attachmentsSelectShow = true"></image>
|
||||
<view v-else class="thumbnail round-3 text-grey grey-lighten-5 flex flex-col flex-center " @click="attachmentsSelectShow = true">
|
||||
<text class="iconfont icon-picture" style="font-size: 46rpx;"></text>
|
||||
<text class="mt-12 text-size-m">选择封面图</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" theme="bg-gradient-blue-accent" @click="fnSubmit()">保存</tm-button>
|
||||
<tm-button v-if="form.id != undefined" size="m" theme="bg-gradient-red-accent" @click="fnDelete()">删除</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="poupShow = false">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select selectType="image" v-if="attachmentsSelectShow" @on-select="fnOnAttachmentsSelect" @on-close="fnOnAttachmentsSelectClose"></attachment-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
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
|
||||
.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('操作失败，请重试！');
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
.color {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view class="e-fixed bg-white"><tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs></view>
|
||||
<!-- 占位区域 -->
|
||||
<view style="width: 100vw;height: 90rpx;"></view>
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content pa-24">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
|
||||
<block v-else>
|
||||
<block v-for="(comment, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<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">
|
||||
<image class="avatar round-24" :src="comment.avatar" mode="aspectFill"></image>
|
||||
<text class=" ml-12 text-weight-b text-grey-darken-2">{{ comment.author }}</text>
|
||||
<tm-tags v-if="comment.isAdmin" color="bg-gradient-orange-lighten" size="s" model="fill" :shadow="0">博主</tm-tags>
|
||||
</view>
|
||||
<view class="right flex">
|
||||
<!-- 待审核 -->
|
||||
<block v-if="comment.status == 'AUDITING'">
|
||||
<tm-button theme="light-blue" :shadow="0" size="s" @click="fnReplyPass(comment)">通过</tm-button>
|
||||
<tm-button theme="light-blue" :shadow="0" size="s" @click="fnShowReplyModal(comment)">回复</tm-button>
|
||||
<tm-button theme="orange" :shadow="0" size="s" @click="fnRecycle(comment)">回收站</tm-button>
|
||||
</block>
|
||||
<!-- 已发布 -->
|
||||
<block v-if="comment.status == 'PUBLISHED'">
|
||||
<tm-button theme="light-blue" :shadow="0" size="s" @click="fnShowReplyModal(comment)">回复</tm-button>
|
||||
<tm-button theme="orange" :shadow="0" size="s" @click="fnRecycle(comment)">回收站</tm-button>
|
||||
</block>
|
||||
<!-- 回收站 -->
|
||||
<block v-if="comment.status == 'RECYCLE'">
|
||||
<tm-button theme="light-blue" :shadow="0" size="s" @click="fnRestore(comment)">还原</tm-button>
|
||||
<tm-button theme="red" :shadow="0" size="s" @click="fnDelete(comment)">删除</tm-button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body pl-24 pr-24 mt-24 text-size-m">
|
||||
<view v-if="queryType == 'Posts'" class="text-grey-darken-1">文章：{{ comment.post.title }}</view>
|
||||
<view v-else-if="queryType == 'Sheets'" class="text-grey-darken-1">页面：{{ comment.sheet.title }}</view>
|
||||
<view v-else-if="queryType == 'Journals'" class="text-grey-darken-1">日记：{{ comment.journal.title }}</view>
|
||||
<view class="mt-16 comment-content">评论：{{ comment.content }}</view>
|
||||
</view>
|
||||
<view class="foot flex mt-24 pl-14 pr-14">
|
||||
<tm-tags color="bg-gradient-orange-accent" size="s" :round="6" model="text">ID：{{ comment.id }}</tm-tags>
|
||||
|
||||
<tm-tags v-if="comment.status == 'AUDITING'" color="bg-gradient-blue-accent" size="s" :round="6" model="text">状态：审核中</tm-tags>
|
||||
<tm-tags v-else-if="comment.status == 'PUBLISHED'" color="bg-gradient-green-accent" size="s" :round="6" model="text">状态：已发布</tm-tags>
|
||||
<tm-tags v-if="comment.status == 'RECYCLE'" color="bg-gradient-red-accent" size="s" :round="6" model="text">状态：回收站</tm-tags>
|
||||
|
||||
<tm-tags size="s" :round="6" color="bg-gradient-blue-grey-accent" model="text">
|
||||
{{ $tm.dayjs(comment.createTime).format('YYYY年MM月DD日 HH点mm分') }}
|
||||
</tm-tags>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
|
||||
<view class="load-text">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
|
||||
<!-- 回复框 -->
|
||||
<tm-poup v-model="reply.show" position="bottom" height="75vh">
|
||||
<view class="poup-content">
|
||||
<view class="poup-head text-align-center text-weight-b text-size-g ma-24">回复评论</view>
|
||||
<scroll-view class="poup-body pa-24" :scroll-y="true" @touchmove.stop>
|
||||
<view class="text-size-m pa-30 pt-0 flex flex-center">
|
||||
<view class="pr-12">访客昵称</view>
|
||||
<view class="flex-1 pa-24 pt-12 pb-12 grey-lighten-5 text-grey round-3">{{ reply.data.author }}</view>
|
||||
</view>
|
||||
<view class="text-size-m pa-30 pt-0 flex flex-center">
|
||||
<view class="pr-12">邮箱地址</view>
|
||||
<view class="flex-1 pa-24 pt-12 pb-12 grey-lighten-5 text-grey round-3" @click="$utils.copyText(reply.data.email, '邮箱地址复制成功！')">
|
||||
{{ reply.data.email }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-size-m pa-30 pt-0 flex flex-center">
|
||||
<view class="pr-12">网站地址</view>
|
||||
<view class="flex-1 pa-24 pt-12 pb-12 grey-lighten-5 text-grey round-3" @click="$utils.copyText(reply.data.authorUrl, '网站地址复制成功！')">
|
||||
{{ reply.data.authorUrl || '该访客未填写网站地址' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-size-m pa-30 pt-0">
|
||||
<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>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<!-- 审核状态 -->
|
||||
<block v-if="reply.data.status == 'AUDITING'">
|
||||
<tm-button size="m" navtie-type="form" theme="bg-gradient-blue-accent" @click="fnReplyPass()">通过</tm-button>
|
||||
<tm-button size="m" navtie-type="form" theme="bg-gradient-blue-accent" @click="fnReplySubmit()">通过并回复</tm-button>
|
||||
</block>
|
||||
<!-- 已发布状态 -->
|
||||
<block v-else-if="reply.data.status == 'PUBLISHED'">
|
||||
<tm-button size="m" navtie-type="form" theme="bg-gradient-blue-accent" @click="fnReplySubmit()">回复</tm-button>
|
||||
</block>
|
||||
<!-- 回收站 -->
|
||||
<block v-else-if="reply.data.status == 'RECYCLE'">暂无操作</block>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="reply.show = false">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
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().blogger.getBlogger;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('评论管理');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
console.log(this.bloggerInfo);
|
||||
},
|
||||
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();
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
})
|
||||
.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 => {});
|
||||
},
|
||||
// 回复评论
|
||||
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 => {});
|
||||
},
|
||||
// 移到回收站
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.poup-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.poup-body {
|
||||
height: 60vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<view class="app-page bg-white pa-12">
|
||||
<!-- 工具栏区域 -->
|
||||
<view class="tool-bar-wrap e-fixed bg-white pt-12 pb-16 border-b-1">
|
||||
<view class="tool-bar flex flex-center text-grey-darken-2">
|
||||
<text class="halohtmlicon icon-undo" data-method="undo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-redo" data-method="redo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-img" data-method="insertImg" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-video" data-method="insertVideo" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-link" data-method="insertLink" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-text" data-method="insertText" @click="fnOnToolBarEdit"></text>
|
||||
<text class="halohtmlicon icon-line" data-method="insertHtml" data-param="<hr style='margin:10px 0;'/>" @click="fnOnToolBarEdit"></text>
|
||||
</view>
|
||||
<view class="tool-bar flex flex-center text-grey-darken-2 mt-16">
|
||||
<text class="halohtmlicon icon-heading" @click="fnOnInsertHead"></text>
|
||||
<text
|
||||
class="halohtmlicon icon-quote"
|
||||
data-method="insertHtml"
|
||||
data-param="<blockquote style='padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5'>引用</blockquote>"
|
||||
@click="fnOnToolBarEdit"
|
||||
></text>
|
||||
<text class="halohtmlicon icon-table" @click="fnOnInsertTable"></text>
|
||||
<text class="halohtmlicon icon-code" @click="fnOnInsertCode"></text>
|
||||
<text class="halohtmlicon icon-emoji" data-type="emoji" data-title="插入表情" @click="fnOnOpenDialog"></text>
|
||||
<text class="halohtmlicon icon-template" data-type="template" data-title="插入模板" @click="fnOnOpenDialog"></text>
|
||||
<text v-if="editable" class="flex-1 text-align-center iconfont icon-eye" style="font-size: 44rpx;" @click="fnOnPreview()"></text>
|
||||
<text v-else class="halohtmlicon icon-edit" @click="fnOnPreview()"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 编辑区域 -->
|
||||
<view class="edit-wrap bg-white round-3">
|
||||
<mp-html
|
||||
class="evan-markdown"
|
||||
lazy-load
|
||||
ref="markdown"
|
||||
:editable="editable"
|
||||
:domain="markdownConfig.domain"
|
||||
:loading-img="markdownConfig.loadingGif"
|
||||
:scroll-table="true"
|
||||
selectable="force"
|
||||
:tag-style="markdownConfig.tagStyle"
|
||||
:container-style="markdownConfig.containStyle"
|
||||
:content="form.content"
|
||||
:markdown="true"
|
||||
:showLineNumber="true"
|
||||
:showLanguageName="true"
|
||||
:copyByLongPress="true"
|
||||
/>
|
||||
</view>
|
||||
<view class="fixed-bottom bg-white pa-24 ">
|
||||
<view class="ml-32 mr-32 border-b-1 pb-12 flex-between">
|
||||
<text class="text-size-n ">是否公开</text>
|
||||
<view><tm-switch color="light-blue" v-model="status" :text="['是', '否']"></tm-switch></view>
|
||||
</view>
|
||||
<view class="btn-wrap flex flex-center mt-24">
|
||||
<tm-button theme="light-blue" :width="300" :height="76" block @click="fnSave()">立即保存</tm-button>
|
||||
<tm-button class="ml-24" theme="red" :width="300" :height="76" block @click="fnClear()">清空内容</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select
|
||||
v-if="attachmentsSelect.show"
|
||||
:title="attachmentsSelect.title"
|
||||
@on-select="fnOnAttachmentsSelect"
|
||||
@on-close="attachmentsSelect.show = false"
|
||||
></attachment-select>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<block v-if="modal">
|
||||
<view class="mask" />
|
||||
<view class="modal">
|
||||
<view class="modal_title">{{ modal.title }}</view>
|
||||
<view class="flex flex-col flex-center" v-if="modal.type == 'table'">
|
||||
<tm-input required title="输入行数" input-type="number" v-model="modal.rows"></tm-input>
|
||||
<tm-input required title="输入列数" input-type="number" v-model="modal.cols"></tm-input>
|
||||
</view>
|
||||
<block v-else><input class="modal_input" :value="modal.value" maxlength="-1" auto-focus @input="modalInput" /></block>
|
||||
|
||||
<view class="modal_foot">
|
||||
<view class="modal_button" @tap="modalCancel">取消</view>
|
||||
<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" @tap="modalConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 底部弹窗 -->
|
||||
<tm-poup v-model="dialog.show" position="bottom" height="auto" @change="fnOnCloseDialog()">
|
||||
<text class="poup-close" @click="fnOnCloseDialog(false)">×</text>
|
||||
<view class="poup-head pa-24 pb-0 text-align-center text-weight-b ">{{ dialog.title }}</view>
|
||||
<view class="poup-body pa-36">
|
||||
<!-- 表情区域 -->
|
||||
<block v-if="dialog.type == 'emoji'">
|
||||
<view class="flex" v-for="(item, index) in emojis" :key="index">
|
||||
<view class="flex-1 mt-6 mb-6 text-size-xl" v-for="(emoji, index) in item" :key="emoji" :data-emoji="emoji" @click="fnOnInsertEmoji">{{ emoji }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 模板区域 -->
|
||||
<block v-else-if="dialog.type == 'template'">
|
||||
<block v-for="(template, index) in templates" :key="index">
|
||||
<rich-text :nodes="template" data-method="insertHtml" :data-param="template" @click="fnOnToolBarEdit"></rich-text>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||||
|
||||
import MarkdownConfig from '@/common/markdown/markdown.config.js';
|
||||
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.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';
|
||||
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.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: {
|
||||
mpHtml,
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmEmpty,
|
||||
tmTranslate,
|
||||
tmFlotbutton,
|
||||
tmSwitch,
|
||||
tmPoup,
|
||||
tmInput,
|
||||
attachmentSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
markdownConfig: MarkdownConfig,
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
status: true,
|
||||
form: {
|
||||
content: '',
|
||||
keepRaw: true,
|
||||
sourceContent: '',
|
||||
type: 'PUBLIC'
|
||||
},
|
||||
modal: null,
|
||||
editable: true,
|
||||
attachmentsSelect: {
|
||||
title: '选择附件',
|
||||
show: false
|
||||
},
|
||||
dialog: {
|
||||
show: false,
|
||||
type: ''
|
||||
},
|
||||
|
||||
// 用于插入的 emoji 表情
|
||||
emojis: [
|
||||
['😄', '😷', '😂', '😝', '😳', '😱', '😔', '😒', '😉'],
|
||||
['😎', '😭', '😍', '😘', '🤔', '😕', '🙃', '🤑', '😲'],
|
||||
['🙄', '😤', '😴', '🤓', '😡', '😑', '😮', '🤒', '🤮']
|
||||
],
|
||||
// 用于插入的 html 模板
|
||||
templates: [
|
||||
'<section style="text-align: center; margin: 0px auto;"><section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"><span style="font-size: 18px; color: #595959;">标题</span></section></section>',
|
||||
'<div style="width: 100%; box-sizing: border-box; border-radius: 5px; background-color: #f6f6f6; padding: 10px; margin: 10px 0"><div>卡片</div><div style="font-size: 12px; color: gray">正文</div></div>',
|
||||
'<div style="border: 1px solid gray; box-shadow: 3px 3px 0px #cfcfce; padding: 10px; margin: 10px 0">段落</div>'
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
journalInfo() {
|
||||
return uni.$tm.vx.getters().journal.getJournalInfo;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.journalInfo) {
|
||||
this.fnSetPageTitle('编辑日记');
|
||||
this.form = Object.assign({}, this.form, this.journalInfo);
|
||||
this.status = this.form.type == 'PUBLIC' ? true : false;
|
||||
} else {
|
||||
this.fnSetPageTitle('新增日记');
|
||||
this.form.content = uni.getStorageSync('html-edit');
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
/**
|
||||
* @description 设置获取链接的方法
|
||||
* @param {String} type 链接的类型（img/video/audio/link）
|
||||
* @param {String} value 修改链接时，这里会传入旧值
|
||||
* @returns {Promise} 返回线上地址
|
||||
* type 为音视频时可以返回一个数组作为源地址
|
||||
* type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
|
||||
*/
|
||||
this.$refs.markdown.getSrc = (type, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.checkEditable()
|
||||
.then(res => {
|
||||
if (type === 'img' || type === 'video') {
|
||||
uni.showActionSheet({
|
||||
itemList: ['本地选取', '附件选取'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 本地选取
|
||||
if (type === 'img') {
|
||||
uni.chooseImage({
|
||||
count: value === undefined ? 9 : 1,
|
||||
success: res => {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (res.tempFilePaths.length == 1 && wx.editImage) {
|
||||
// 单张图片时进行编辑
|
||||
wx.editImage({
|
||||
src: res.tempFilePaths[0],
|
||||
complete: res2 => {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
this.fnFileUpload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
(async () => {
|
||||
const arr = [];
|
||||
for (let item of res.tempFilePaths) {
|
||||
// 依次上传
|
||||
const src = await this.fnFileUpload(item, type);
|
||||
arr.push(src);
|
||||
}
|
||||
return arr;
|
||||
})().then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
// #ifdef MP-WEIXIN
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
} else {
|
||||
uni.chooseVideo({
|
||||
success: res => {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
this.fnFileUpload(res.tempFilePath, type).then(res => {
|
||||
uni.hideLoading();
|
||||
resolve(res);
|
||||
});
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 远程链接
|
||||
this.callback = {
|
||||
resolve,
|
||||
reject
|
||||
};
|
||||
|
||||
this.attachmentsSelect.title = type === 'img' ? '选取图片' : '选取视频';
|
||||
this.attachmentsSelect.show = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.callback = {
|
||||
resolve,
|
||||
reject
|
||||
};
|
||||
let title;
|
||||
if (type === 'audio') {
|
||||
title = '音频链接';
|
||||
} else if (type === 'link') {
|
||||
title = '链接地址';
|
||||
}
|
||||
this.$set(this, 'modal', {
|
||||
title,
|
||||
type: 'link',
|
||||
value
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {});
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 检查是否可编辑
|
||||
checkEditable() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.editable) {
|
||||
resolve();
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要继续编辑吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.editable = true;
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 调用编辑操作
|
||||
fnOnToolBarEdit(e) {
|
||||
this.$refs.markdown[e.currentTarget.dataset.method](e.currentTarget.dataset.param);
|
||||
},
|
||||
// 监听附件选择
|
||||
fnOnAttachmentsSelect(file) {
|
||||
this.attachmentsSelect.show = false;
|
||||
this.callback.resolve(file.path);
|
||||
},
|
||||
// 处理模态框
|
||||
modalInput(e) {
|
||||
this.value = e.detail.value;
|
||||
},
|
||||
modalConfirm() {
|
||||
if (this.modal.type == 'table') {
|
||||
if (this.modal.rows <= 0) {
|
||||
return uni.$tm.toast('行数必须大于0');
|
||||
}
|
||||
if (this.modal.cols <= 0) {
|
||||
return uni.$tm.toast('列数必须大于0');
|
||||
}
|
||||
}
|
||||
this.callback.resolve(this.value || this.modal.value || '');
|
||||
this.$set(this, 'modal', null);
|
||||
},
|
||||
modalCancel() {
|
||||
this.callback.reject();
|
||||
this.$set(this, 'modal', null);
|
||||
},
|
||||
// 上传图片方法
|
||||
fnFileUpload(src, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
filePath: src,
|
||||
header: {
|
||||
'admin-authorization': getAdminAccessToken()
|
||||
},
|
||||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||||
name: 'file',
|
||||
success: upladRes => {
|
||||
const _uploadRes = JSON.parse(upladRes.data);
|
||||
if (_uploadRes.status == 200) {
|
||||
resolve(_uploadRes.data.path);
|
||||
} else {
|
||||
uni.$tm.toast(_uploadRes.message);
|
||||
reject();
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.$tm.toast(err.message);
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 插入 head 系列标签
|
||||
fnOnInsertHead() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
const _hList = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
||||
wx.showActionSheet({
|
||||
itemList: _hList,
|
||||
success: res => {
|
||||
let tagName = _hList[res.tapIndex];
|
||||
this.$refs.markdown.insertHtml(`<${tagName}>标题</${tagName}>`);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 插入表格
|
||||
fnOnInsertTable() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
this.$set(this, 'modal', {
|
||||
title: '插入表格',
|
||||
type: 'table',
|
||||
rows: 1,
|
||||
cols: 1,
|
||||
value: this.value
|
||||
});
|
||||
this.callback = {
|
||||
resolve: () => {
|
||||
this.$refs.markdown.insertTable(this.modal.rows, this.modal.cols);
|
||||
},
|
||||
reject: () => {}
|
||||
};
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
// 保存插入表格
|
||||
fnOnSaveInsertTable() {
|
||||
this.callback.resolve(this.value || this.modal.value || '');
|
||||
},
|
||||
// 插入代码
|
||||
fnOnInsertCode() {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['html', 'css', 'javascript', 'json'],
|
||||
success: res => {
|
||||
const lan = ['html', 'css', 'javascript', 'json'][res.tapIndex];
|
||||
this.$refs.markdown.insertHtml(`<pre><code class="language-${lan}">${lan} code</code></pre>`);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 插入 emoji
|
||||
fnOnInsertEmoji(e) {
|
||||
this.$refs.markdown.insertHtml(e.currentTarget.dataset.emoji);
|
||||
this.fnOnCloseDialog();
|
||||
},
|
||||
|
||||
// 处理底部弹窗
|
||||
fnOnOpenDialog(e) {
|
||||
this.checkEditable()
|
||||
.then(() => {
|
||||
this.dialog.type = e.currentTarget.dataset.type;
|
||||
this.dialog.title = e.currentTarget.dataset.title;
|
||||
this.dialog.show = true;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
fnOnCloseDialog(e) {
|
||||
if (e == false) {
|
||||
this.dialog.show = false;
|
||||
this.dialog.type = '';
|
||||
}
|
||||
},
|
||||
fnOnPreview() {
|
||||
this.editable = !this.editable;
|
||||
if (this.editable) {
|
||||
uni.$tm.toast('您已进入编辑模式！');
|
||||
} else {
|
||||
uni.$tm.toast('您已进入预览模式！');
|
||||
let _content = this.$refs.markdown.getContent();
|
||||
if (_content === '<p></p>') {
|
||||
_content = '';
|
||||
}
|
||||
this.form.content = _content;
|
||||
uni.setStorageSync('html-edit', _content);
|
||||
}
|
||||
},
|
||||
fnSave() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '保存中...'
|
||||
});
|
||||
const _content = this.$refs.markdown.getContent();
|
||||
if (!_content.trim()) {
|
||||
return uni.$tm.toast('请输入内容!');
|
||||
}
|
||||
this.form.type = this.status ? 'PUBLIC' : 'INTIMATE';
|
||||
this.form.content = _content;
|
||||
this.form.sourceContent = this.$refs.markdown.getText();
|
||||
|
||||
if (this.journalInfo) {
|
||||
this.$httpApi.admin
|
||||
.updateJournalsById(this.form.id, this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功!');
|
||||
uni.setStorageSync('html-edit', '');
|
||||
setTimeout(() => {
|
||||
uni.$emit('journals_refresh');
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
});
|
||||
} else {
|
||||
this.$httpApi.admin
|
||||
.createJournals(this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功!');
|
||||
uni.setStorageSync('html-edit', '');
|
||||
setTimeout(() => {
|
||||
uni.$emit('journals_refresh');
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试!');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
fnClear() {
|
||||
uni.$eShowModal({
|
||||
title: '提示',
|
||||
content: '确定清空当前内容吗？',
|
||||
showCancel: true,
|
||||
cancelText: '否',
|
||||
cancelColor: '#999999',
|
||||
confirmText: '是',
|
||||
confirmColor: '#03a9f4'
|
||||
})
|
||||
.then(res => {
|
||||
this.$refs.markdown.clear();
|
||||
this.fnToTopPage();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 236rpx;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx -4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
|
||||
.edit-wrap {
|
||||
box-sizing: border-box;
|
||||
padding-top: 150rpx;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 80vw;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.modal_title {
|
||||
padding-top: 42rpx;
|
||||
padding-bottom: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal_input {
|
||||
display: block;
|
||||
padding: 12rpx 12rpx;
|
||||
margin: 24rpx;
|
||||
margin-top: 0;
|
||||
font-size: 30rpx;
|
||||
border: 2rpx solid #dfe2e5;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.modal_foot {
|
||||
display: flex;
|
||||
line-height: 100rpx;
|
||||
font-weight: bold;
|
||||
border-top: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal_button {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 蒙版 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.poup-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 8rpx;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col pt-24">
|
||||
<view v-if="loading != 'success'" class="loading-wrap pa-24 pt-0">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content pa-24 pt-0">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
|
||||
<!-- 空布局 -->
|
||||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有写任何日记"></tm-empty>
|
||||
</view>
|
||||
<block v-else>
|
||||
<block v-for="(journal, index) in dataList" :key="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>
|
||||
</block>
|
||||
<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||||
<view class="load-text">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
</view>
|
||||
<tm-flotbutton @click="fnOnJournalEdit(null)" color="orange" size="m" icon="icon-plus"></tm-flotbutton>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
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: '加载中...'
|
||||
};
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
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: '加载中...'
|
||||
});
|
||||
}
|
||||
// 设置状态为加载中
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
.loading-error {
|
||||
height: 40vh;
|
||||
}
|
||||
}
|
||||
.edit-wrap {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view v-if="tab.list.length > 3" class="e-fixed shadow-2">
|
||||
<tm-tabs color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
|
||||
</view>
|
||||
<!-- 占位区域 -->
|
||||
<view v-if="tab.list.length > 3" style="width: 100vw;height: 92rpx;"></view>
|
||||
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content">
|
||||
<!-- 内容区域 -->
|
||||
<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">
|
||||
<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="right pl-24 text-size-m">
|
||||
<view class="title flex flex-between ">
|
||||
<view class="name flex text-overflow mr-6 text-weight-b">
|
||||
<tm-tags :dense="true" :shadow="0" color="bg-gradient-blue-accent" size="xs" model="fill">ID:{{ item.id }}</tm-tags>
|
||||
<text class="text-size-l ml-12">{{ item.name }}</text>
|
||||
</view>
|
||||
<view v-if="false" class="icon text-grey-darken-2">
|
||||
<tm-button :shadow="0" :round="2" theme="light-blue" text size="xs" @click="fnShowFormModal(item)">修改</tm-button>
|
||||
<tm-button :shadow="0" :round="2" theme="red" text size="xs" @click="fnDelete(item)">删除</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-6 flex text-size-m">
|
||||
<view class="label text-grey-darken-2">分组：</view>
|
||||
<view class="value">{{ item.team || '无分组' }}</view>
|
||||
</view>
|
||||
<view class="mt-6 flex text-size-m">
|
||||
<view class="label text-grey-darken-2">地址：</view>
|
||||
<view class="value">
|
||||
<text>{{ item.url }}</text>
|
||||
<text class="ml-6 text-grey-darken-1 iconfont icon-copy" @click="$utils.copyText(item.url, '网站地址已复制')"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-6 flex text-size-m">
|
||||
<view class="label text-grey-darken-2">描述：</view>
|
||||
<view class="value text-overflow">{{ item.description || '该博主很懒，没有提供描述' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foot flex flex-between mt-20 pt-16 text-size-m">
|
||||
<view class="e-btn update-btn flex-1 round-2 pa-12 text-blue text-align-center mr-12" @click="fnShowFormModal(item)">修改</view>
|
||||
<view class="e-btn del-btn flex-1 round-2 pa-12 text-red text-align-center ml-12" @click="fnDelete(item)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
</block>
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton @click="fnShowFormModal()" size="m" color="orange" icon="icon-plus"></tm-flotbutton>
|
||||
|
||||
<!-- 编辑或新增 -->
|
||||
<tm-poup v-model="poupShow" position="bottom" height="85vh" @change="fnOnPoupChange">
|
||||
<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
|
||||
: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">
|
||||
<template v-slot:rightBtn>
|
||||
<tm-pickers :default-value.sync="selectTeam" :list="teamList" @confirm="fnOnSelectTeam">
|
||||
<tm-button class="ml-12" theme="bg-gradient-blue-accent" :round="3" :font-size="24" :height="70" block :width="120">选择</tm-button>
|
||||
</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
|
||||
: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 ">
|
||||
<text class="iconfont icon-picture" style="font-size: 46rpx;"></text>
|
||||
<text class="mt-12 text-size-m">LOGO预览图</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" theme="bg-gradient-blue-accent" @click="fnSubmit()">保存</tm-button>
|
||||
<tm-button v-if="form.id != undefined" size="m" theme="bg-gradient-red-accent" @click="fnDelete()">删除</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="poupShow = false">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
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));
|
||||
},
|
||||
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
|
||||
.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('操作失败，请重试！');
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
background-color: rgba(240, 250, 255, 1);
|
||||
}
|
||||
.del-btn {
|
||||
background-color: rgba(254, 241, 240, 1) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view class="app-page bg-white flex flex-col flex-center">
|
||||
<view class="content pt-36 pb-36 pl-12 pr-12 bg-white round-6">
|
||||
<tm-form @submit="submit">
|
||||
<tm-sheet :shadow="0" :margin="[0, 0]" :padding="[0, 0]">
|
||||
<view class="text-weight-b text-size-xl ma-24 mb-36 text-align-center text-bg-gradient-light-blue-accent">登录后台管理</view>
|
||||
<image v-if="false" class="avatar " :src="$utils.checkAvatarUrl(bloggerInfo.avatar)" mode="aspectFill" @click="miniProfileCard.show = true"></image>
|
||||
<tm-input
|
||||
:round="12"
|
||||
color="grey"
|
||||
bg-color="grey-lighten-5"
|
||||
:border-bottom="false"
|
||||
required
|
||||
prefixp-icon="icon-account"
|
||||
:vertical="true"
|
||||
:clear="true"
|
||||
name="username"
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名"
|
||||
:focus="true"
|
||||
:verify="verifyUsername"
|
||||
></tm-input>
|
||||
<tm-input
|
||||
:round="12"
|
||||
color="grey"
|
||||
bg-color="grey-lighten-5"
|
||||
:border-bottom="false"
|
||||
required
|
||||
prefixp-icon="icon-lock"
|
||||
:vertical="true"
|
||||
:clear="true"
|
||||
name="password"
|
||||
input-type="password"
|
||||
v-model="form.password"
|
||||
placeholder="请输入登录密码"
|
||||
:verify="verifyPassword"
|
||||
></tm-input>
|
||||
|
||||
<view class="pa-24 mt-12 pl-30 pr-30">
|
||||
<tm-button :round="25" navtie-type="form" theme="bg-gradient-blue-accent" block :loading="loading">立即登录</tm-button>
|
||||
<view v-if="false" class="mt-36 text-size-m text-grey-darken-1 text-align-center" @click="fnFindPassword()">忘记密码？立即重置</view>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
</tm-form>
|
||||
</view>
|
||||
<view v-if="showCopyright" class="copyright text-size-s text-grey text-align-center">「 2022 uni-halo 丨 开源项目@小莫唐尼 」</view>
|
||||
<image class="top" src="@/static/login/login_top2.jpg" mode="aspectFill"></image>
|
||||
<image class="bottom" src="@/static/login/login_bottom_bg.jpg" mode="aspectFill"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
|
||||
|
||||
export default {
|
||||
components: { tmSheet, tmForm, tmInput, tmButton },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
form: {
|
||||
// authcode: '', // 二次验证
|
||||
username: undefined,
|
||||
password: undefined
|
||||
},
|
||||
verifyUsername: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: val != ''
|
||||
// text: '错误提示：请输入用户名！'
|
||||
};
|
||||
};
|
||||
},
|
||||
verifyPassword: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: val != ''
|
||||
// text: '错误提示：请输入登录密码！'
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
bloggerInfo() {
|
||||
return this.$tm.vx.getters().blogger.getBlogger;
|
||||
},
|
||||
showCopyright() {
|
||||
return getApp().globalData.showCopyright;
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/about/about'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
submit(e) {
|
||||
if (e === false) return uni.$tm.toast('请检查用户名和密码！');
|
||||
uni.showLoading({
|
||||
title: '登录中...',
|
||||
mask: true
|
||||
});
|
||||
this.loading = true;
|
||||
uni.$tm.vx
|
||||
.actions('user/adminLogin', this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.showToast({
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
title: '登录成功，正在跳转...'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pagesB/admin/admin'
|
||||
});
|
||||
}, 1200);
|
||||
} else {
|
||||
uni.$tm.toast('登录失败：' + res.message);
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('登录失败：' + err.message);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
fnFindPassword() {
|
||||
uni.$tm.toast('找回密码功能');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 45vh;
|
||||
z-index: 0;
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.07);
|
||||
z-index: 2;
|
||||
width: 82vw;
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -75rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid #fff;
|
||||
box-shadow: 0rpx 4rpx 48rpx rgba(13, 179, 242, 0.07);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
position: absolute;
|
||||
bottom: 24rpx;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
</view>
|
||||
|
||||
<view class="page-content pa-24 flex flex-col" v-else>
|
||||
<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">
|
||||
<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>
|
||||
<tm-tags class="ml-24" :shadow="0" :dense="true" color="bg-gradient-orange-accent" size="s" model="fill">
|
||||
类型：{{ item.type | formatLogType }}
|
||||
</tm-tags>
|
||||
<tm-tags class="ml-24" v-if="false" :shadow="0" :dense="true" color="bg-gradient-blue-grey-accent" size="s" model="fill">
|
||||
关键值：{{ item.logKey }}
|
||||
</tm-tags>
|
||||
</view>
|
||||
<view class="mt-20 text-size-m">
|
||||
<view v-if="false" class="desc-item flex ">
|
||||
<view class="desc-label text-grey-darken-2">日志类型</view>
|
||||
<view class="desc-value">{{ item.type | formatLogType }}</view>
|
||||
</view>
|
||||
<view class="desc-item flex mt-12">
|
||||
<view class="desc-label text-grey-darken-2">关键值</view>
|
||||
<view class="desc-value">{{ item.logKey }}</view>
|
||||
</view>
|
||||
<view class="desc-item flex flex-top-start mt-12">
|
||||
<view class="desc-label text-grey-darken-2">IP地址</view>
|
||||
<view class="desc-value">{{ item.ipAddress }}</view>
|
||||
</view>
|
||||
|
||||
<view class="desc-item flex mt-12">
|
||||
<view class="desc-label text-grey-darken-2">日志内容</view>
|
||||
<view class="desc-value">{{ item.content }}</view>
|
||||
</view>
|
||||
<view class="desc-item flex mt-12">
|
||||
<view class="desc-label text-grey-darken-2">操作时间</view>
|
||||
<view class="desc-value">{{ item.time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton size="m" icon="icon-delete" color="bg-gradient-red-accent" @click="fnOnClear"></tm-flotbutton>
|
||||
<view class="load-text ">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import 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
|
||||
},
|
||||
|
||||
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: '登录验证'
|
||||
}
|
||||
};
|
||||
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';
|
||||
}
|
||||
})
|
||||
.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: '正在清空...'
|
||||
});
|
||||
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;
|
||||
}
|
||||
}
|
||||
.desc-value {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
padding-left: 6rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view class="content"><!-- 内容区域 --></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
result: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
// todo:
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="app-page pa-24 bg-white">
|
||||
<view class="app-page-content round-12 bg-white pa-46 pl-0 pr-0">
|
||||
<view v-if="false" class="mb-24 text-align-center text-weight-b text-size-g text-grey-darken-3">修改登录密码</view>
|
||||
<tm-form @submit="fnSubmit">
|
||||
<tm-sheet :shadow="0" :margin="[0, 0]" :padding="[0, 0]">
|
||||
<tm-input
|
||||
:password="true"
|
||||
name="oldPassword"
|
||||
input-type="password"
|
||||
required
|
||||
title="旧密码"
|
||||
placeholder="请输入旧密码"
|
||||
bg-color="grey-lighten-5"
|
||||
:border-bottom="false"
|
||||
:vertical="true"
|
||||
v-model="form.oldPassword"
|
||||
:verify="verifyOldPassword"
|
||||
></tm-input>
|
||||
<tm-input
|
||||
:password="true"
|
||||
name="newPassword"
|
||||
input-type="password"
|
||||
required
|
||||
title="新密码"
|
||||
placeholder="请输入新密码"
|
||||
bg-color="grey-lighten-5"
|
||||
:border-bottom="false"
|
||||
:vertical="true"
|
||||
v-model="form.newPassword"
|
||||
:verify="verifyNewPassword"
|
||||
></tm-input>
|
||||
<tm-input
|
||||
:password="true"
|
||||
name="confirmPassword"
|
||||
input-type="password"
|
||||
required
|
||||
title="确认密码"
|
||||
placeholder="请再次确认新密码"
|
||||
bg-color="grey-lighten-5"
|
||||
:border-bottom="false"
|
||||
:vertical="true"
|
||||
v-model="form.confirmPassword"
|
||||
:verify="verifyConfirmPassword"
|
||||
></tm-input>
|
||||
<view class="pa-30"><tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>确认修改</tm-button></view>
|
||||
</tm-sheet>
|
||||
</tm-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmCountdown from '@/tm-vuetify/components/tm-countdown/tm-countdown.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmForm,
|
||||
tmSheet,
|
||||
tmButton,
|
||||
tmInput,
|
||||
tmCountdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
form: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
verifyOldPassword: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: val != '',
|
||||
text: '请输入旧密码！'
|
||||
};
|
||||
};
|
||||
},
|
||||
verifyNewPassword: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: val != '',
|
||||
text: '请输入新密码！'
|
||||
};
|
||||
};
|
||||
},
|
||||
verifyConfirmPassword: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: this.form.newPassword == this.form.confirmPassword,
|
||||
text: '两次新密码不一致！'
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('修改密码');
|
||||
},
|
||||
|
||||
methods: {
|
||||
fnSubmit(e) {
|
||||
if (e === false) return uni.$tm.toast('请填写必填项。');
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.modifyAdminPassword(this.form)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('密码修改成功！');
|
||||
this.form = {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
};
|
||||
} else {
|
||||
uni.$tm.toast('密码修改失败:' + res.message);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('密码修改失败:' + err.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.app-page-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
// box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,553 @@
|
||||
<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-tabs v-if="team.list.length != 0" color="light-blue" :shadow="0" v-model="team.activeIndex" :list="team.list" align="center" @change="fnOnTabChange"></tm-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 占位区域 -->
|
||||
<view v-if="team.list.length != 0" style="width: 100vw;height: 184rpx;"></view>
|
||||
<view v-else style="width: 100vw;height: 94rpx;"></view>
|
||||
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content pa-24 flex flex-col" v-else>
|
||||
<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">
|
||||
<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>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class=" mt-12 text-size-m text-grey-darken-1">图片名称：{{ item.name }}</view>
|
||||
<view class=" mt-12 text-size-m text-grey-darken-1">图片分组：{{ item.team || '未分组' }}</view>
|
||||
<view class=" mt-8 text-size-m text-grey-darken-1">拍摄日期：{{ { d: item.takeTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}</view>
|
||||
|
||||
<view class=" mt-12 text-size-m text-grey-darken-1">拍摄地点：{{ item.location || '未填写拍摄地点' }}</view>
|
||||
</view>
|
||||
<view class="flex flex-center pt-24 desc-box text-size-m">
|
||||
<tm-button theme="light-blue" :shadow="0" block :width="300" :height="70" @click="fnEdit(item)">编辑</tm-button>
|
||||
<tm-button class="ml-36" theme="red" :shadow="0" block :width="300" :height="70" @click="fnDelete(item, index)">删除</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||||
<view class="load-text ">{{ loadMoreText }}</view>
|
||||
</block>
|
||||
<tm-flotbutton :show-text="true" color="bg-gradient-orange-accent" @click="fnAdd()"></tm-flotbutton>
|
||||
</view>
|
||||
|
||||
<!-- 编辑或新增 -->
|
||||
<tm-poup v-model="poupShow" position="bottom" height="85vh" @change="fnOnPoupChange">
|
||||
<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
|
||||
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>
|
||||
<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-button slot="rightBtn" size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent" @click="fnShowAttachmentsSelect('thumbnail')">
|
||||
选择
|
||||
</tm-button>
|
||||
</tm-input>
|
||||
<view class="ma-30 mt-12 pb-12">
|
||||
<view class="mb-12"><text class="text-size-m">图片预览</text></view>
|
||||
<image :src="form.showThumbnail" mode="aspectFit"></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center bg-white">
|
||||
<tm-button :width="300" :height="72" theme="bg-gradient-blue-accent" @click="fnSave()">保存</tm-button>
|
||||
<tm-button :width="300" :height="72" theme="bg-gradient-blue-grey-accent" @click="poupShow = false">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select selectType="image" v-if="attachmentsSelectShow" @on-select="fnOnAttachmentsSelect" @on-close="fnOnAttachmentsSelectClose"></attachment-select>
|
||||
</view>
|
||||
</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 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,
|
||||
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 => {});
|
||||
},
|
||||
fnOnSearch() {
|
||||
this.queryParams.page = 0;
|
||||
this.isLoadMore = false;
|
||||
this.fnToTopPage();
|
||||
this.fnGetData();
|
||||
},
|
||||
fnOnTabChange(index) {
|
||||
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;
|
||||
}
|
||||
} 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.$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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="app-page">
|
||||
<view v-if="loading != 'success'" class="loading-wrap pa-24">
|
||||
<block v-if="loading == 'loading'"></block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="app-page-content round-3 bg-white pa-46 pl-10 pr-10" v-else>
|
||||
<tm-form @submit="fnSubmit">
|
||||
<tm-sheet :shadow="0" :margin="[0, 0]" :padding="[0, 0]">
|
||||
<view class="avatar flex flex-center pa-12 bg-white">
|
||||
<text class="edit-icon flex flex-center"><text class=" iconfont icon-cloudupload"></text></text>
|
||||
<image class="avatar-img" :src="result.showAvatar" @click="fnShowUploadAvatarSelect()"></image>
|
||||
</view>
|
||||
|
||||
<tm-input name="username" required title="用户名" align="right" v-model="result.username"></tm-input>
|
||||
<tm-input name="nickname" required title="昵称" align="right" v-model="result.nickname"></tm-input>
|
||||
<tm-input name="email" required title="电子邮箱" align="right" v-model="result.email"></tm-input>
|
||||
<tm-input
|
||||
name="description"
|
||||
:vertical="true"
|
||||
required
|
||||
:height="150"
|
||||
input-type="textarea"
|
||||
bg-color="grey-lighten-5"
|
||||
:maxlength="200"
|
||||
title="个人说明"
|
||||
placeholder="请输入个人说明,不超过200字符"
|
||||
v-model="result.description"
|
||||
:borderBottom="false"
|
||||
:adjustPosition="true"
|
||||
></tm-input>
|
||||
|
||||
<view class="pa-30"><tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>保存修改</tm-button></view>
|
||||
</tm-sheet>
|
||||
</tm-form>
|
||||
|
||||
<tm-actionSheetMenu @change="fnOnUploadAvatarChange" v-model="uploadAvatarShow" title="请选择头像" :actions="['本地上传', '附件选择']"></tm-actionSheetMenu>
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select selectType="image" v-if="attachmentsSelectShow" @on-select="fnOnAttachmentsSelect" @on-close="attachmentsSelectShow = false"></attachment-select>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||||
|
||||
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 tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||||
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
|
||||
import tmActionSheetMenu from '@/tm-vuetify/components/tm-actionSheetMenu/tm-actionSheetMenu.vue';
|
||||
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
|
||||
import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmEmpty,
|
||||
tmForm,
|
||||
tmInput,
|
||||
tmImages,
|
||||
tmActionSheetMenu,
|
||||
tmSheet,
|
||||
AttachmentSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
result: {
|
||||
username: undefined,
|
||||
nickname: undefined,
|
||||
email: undefined,
|
||||
avatar: undefined,
|
||||
showAvatar: undefined,
|
||||
description: undefined
|
||||
},
|
||||
uploadAvatarShow: false,
|
||||
attachmentsSelectShow: false,
|
||||
verifyEmail: () => {
|
||||
return val => {
|
||||
return {
|
||||
check: uni.$tm.u.email(val),
|
||||
text: '请输入正确的邮箱'
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('我的个人信息');
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
this.loading = 'loading';
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.getAdminProfile()
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
let { avatar } = res.data;
|
||||
this.result = res.data;
|
||||
this.result.showAvatar = this.$utils.checkAvatarUrl(avatar);
|
||||
this.loading = 'success';
|
||||
} else {
|
||||
this.loading = 'error';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
fnShowUploadAvatarSelect() {
|
||||
this.uploadAvatarShow = true;
|
||||
},
|
||||
fnOnUploadAvatarChange(e) {
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
// 本地上传
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
uni.uploadFile({
|
||||
filePath: res.tempFilePaths[0],
|
||||
header: {
|
||||
'admin-authorization': getAdminAccessToken()
|
||||
},
|
||||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||||
name: 'file',
|
||||
success: upladRes => {
|
||||
const _uploadRes = JSON.parse(upladRes.data);
|
||||
if (_uploadRes.status == 200) {
|
||||
this.result.avatar = _uploadRes.data.path;
|
||||
this.result.showAvatar = this.$utils.checkAvatarUrl(_uploadRes.data.path);
|
||||
this.$focusUpdate();
|
||||
} else {
|
||||
uni.$tm.toast(_uploadRes.message);
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.$tm.toast(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 从附件库选择
|
||||
this.attachmentsSelectShow = true;
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 监听附件选择
|
||||
fnOnAttachmentsSelect(file) {
|
||||
this.result.avatar = file.path;
|
||||
this.result.showAvatar = this.$utils.checkAvatarUrl(file.path);
|
||||
this.attachmentsSelectShow = false;
|
||||
},
|
||||
fnSubmit(e) {
|
||||
if (e === false) return uni.$tm.toast('请填写必填项。');
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.updateAdminProfile(this.result)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.$tm.toast('保存成功');
|
||||
this.$tm.vx.commit('blogger/setBlogger', this.result);
|
||||
} else {
|
||||
uni.$tm.toast('保存失败，请重试！');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.$tm.toast('保存失败，请重试！');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.app-page-content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
// box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
.loading-error {
|
||||
height: 65vh;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
&-img {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.edit-icon {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
position: absolute;
|
||||
left: 390rpx;
|
||||
bottom: 15rpx;
|
||||
z-index: 6;
|
||||
color: #0dadf2;
|
||||
box-sizing: border-box;
|
||||
border: 4rpx solid #ffffff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view class="content"><!-- 内容区域 --></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
result: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
// todo:
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view v-if="loading != 'success'" class="loading-wrap pa-24 pt-36">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="app-page-content pa-24">
|
||||
<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
|
||||
<block v-else>
|
||||
<block v-for="(tag, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<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">
|
||||
<image v-if="tag.showThumbnail" class="cover round-3" :src="tag.showThumbnail" mode="aspectFill"></image>
|
||||
<view v-else class="cover round-3 flex flex-center text-weight-b text-white text-size-m">无封面</view>
|
||||
</view>
|
||||
<view class="right pl-24 text-size-m">
|
||||
<view class="text-weight-b">名称：{{ tag.name }}</view>
|
||||
<view class="mt-12">
|
||||
<text class="text-grey-darken-1">别名：</text>
|
||||
{{ tag.slug }}
|
||||
</view>
|
||||
<view class="mt-12">
|
||||
<text class="text-grey-darken-1">颜色：</text>
|
||||
<text class="color round-2 text-size-s" :style="{ color: tag.color }">{{ tag.color }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tm-translate>
|
||||
</block>
|
||||
|
||||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
|
||||
<tm-flotbutton @click="fnShowFormModal()" size="m" color="orange" icon="icon-plus"></tm-flotbutton>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 编辑或新增 -->
|
||||
<tm-poup v-model="poupShow" position="bottom" height="73vh" @change="fnOnPoupChange">
|
||||
<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>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<template v-slot:rightBtn>
|
||||
<tm-button class="ml-12" theme="bg-gradient-blue-accent" :round="3" :font-size="24" :height="66" block :width="120" @click="fnSelectColor">
|
||||
选择颜色
|
||||
</tm-button>
|
||||
</template>
|
||||
</tm-input>
|
||||
<view class="ma-30 mt-12 pb-12">
|
||||
<view class="mb-12">
|
||||
<text class="text-size-m">封面图</text>
|
||||
<text class="text-grey text-size-s">（点击下方图片区域选择封面）</text>
|
||||
</view>
|
||||
<image v-if="form.showThumbnail" class="thumbnail round-3" :src="form.showThumbnail" mode="aspectFill" @click="attachmentsSelectShow = true"></image>
|
||||
<view v-else class="thumbnail round-3 text-grey grey-lighten-5 flex flex-col flex-center " @click="attachmentsSelectShow = true">
|
||||
<text class="iconfont icon-picture" style="font-size: 46rpx;"></text>
|
||||
<text class="mt-12 text-size-m">选择封面图</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-wrap flex flex-center">
|
||||
<tm-button size="m" theme="bg-gradient-blue-accent" @click="fnSubmit()">保存</tm-button>
|
||||
<tm-button v-if="form.id != undefined" size="m" theme="bg-gradient-red-accent" @click="fnDelete()">删除</tm-button>
|
||||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="poupShow = false">关 闭</tm-button>
|
||||
</view>
|
||||
</view>
|
||||
</tm-poup>
|
||||
<t-color-picker ref="colorPicker" :color="selectColor" @confirm="fnOnConfirmSelectColor"></t-color-picker>
|
||||
<!-- 附件选择文件 -->
|
||||
<attachment-select selectType="image" v-if="attachmentsSelectShow" @on-select="fnOnAttachmentsSelect" @on-close="fnOnAttachmentsSelectClose"></attachment-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
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
|
||||
.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('操作失败，请重试！');
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
.color {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="app-page flex flex-col">
|
||||
<view v-if="loading != 'success'" class="loading-wrap">
|
||||
<block v-if="loading == 'loading'">
|
||||
<tm-skeleton model="card"></tm-skeleton>
|
||||
<tm-skeleton model="cardActions"></tm-skeleton>
|
||||
<tm-skeleton model="list"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||||
</block>
|
||||
<view v-else-if="loading == 'error'" class="loading-error flex flex-col flex-center">
|
||||
<tm-empty icon="icon-wind-cry" label="加载失败"><tm-button theme="light-blue" size="m" @click="fnGetData()">重新加载</tm-button></tm-empty>
|
||||
</view>
|
||||
</view>
|
||||
<block v-else><!-- 内容区域 --></block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmButton,
|
||||
tmEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: 'loading',
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0
|
||||
},
|
||||
result: null
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fnSetPageTitle();
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.fnGetData();
|
||||
},
|
||||
methods: {
|
||||
fnGetData() {
|
||||
this.loading = 'loading';
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$httpApi.admin
|
||||
.getAttachmentsByPage(this.queryParams)
|
||||
.then(res => {
|
||||
console.log('请求结果：');
|
||||
console.log(res);
|
||||
// this.result = res.data.xxx;
|
||||
setTimeout(() => {
|
||||
this.loading = 'success';
|
||||
}, 500);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
.loading-error {
|
||||
height: 65vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user