mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -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>
|
||||
Reference in New Issue
Block a user