uni-halo/pagesB/articles/article-setting.vue

<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 v-if="isEdit" 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: {
				title: '',
				slug: '',
				status: '',
				content: '',
				keepRaw: true,
				topPriority: 0,
				summary: '',
				password: '',
				originalContent: '',
				metaDescription: '',
				formatContent: '',
				editorType: 'MARKDOWN',
				createTime: '',
				categoryIds: [],
				tagIds: []
			},
			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 == 1 ? true : false;
		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.$set(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.formatContent = uni.getStorageSync('posts-content');
				this.article.originalContent = 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(`保存失败，${err.message}!`);
						if (isChangeStatus) {
							this.article.status = this.article.status == 'DRAFT' ? 'PUBLISHED' : 'DRAFT';
						}
					});
			} else {
				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(() => {
								uni.navigateBack({
									delta: 2
								});
								uni.$emit('refresh-article-list');
							}, 1000);
						} else {
							uni.$tm.toast('发布失败，请重试!');
						}
					})
					.catch(err => {
						uni.$tm.toast(`发布失败：${err.message}`);
					});
			}
		},
		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>