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,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>
|
||||
Reference in New Issue
Block a user