Support post thumb select.

pull/9/head
ruibaby 2019-04-20 16:02:27 +08:00
parent e03fc86b44
commit a28b3e9a9a
2 changed files with 31 additions and 66 deletions

View File

@ -1,14 +1,7 @@
<template> <template>
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<a-row :gutter="12"> <a-row :gutter="12">
<a-col <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
:xl="24"
:lg="24"
:md="24"
:sm="24"
:xs="24"
>
<div style="margin-bottom: 16px"> <div style="margin-bottom: 16px">
<a-input <a-input
v-model="postToStage.title" v-model="postToStage.title"
@ -19,21 +12,11 @@
</div> </div>
<div id="editor"> <div id="editor">
<mavon-editor <mavon-editor v-model="postToStage.originalContent" :boxShadow="false" :ishljs="true"/>
v-model="postToStage.originalContent"
:boxShadow="false"
:ishljs="true"
/>
</div> </div>
</a-col> </a-col>
<a-col <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
:xl="24"
:lg="24"
:md="24"
:sm="24"
:xs="24"
>
<a-drawer <a-drawer
title="文章设置" title="文章设置"
:width="isMobile()?'100%':'460'" :width="isMobile()?'100%':'460'"
@ -50,19 +33,13 @@
label="文章路径:" label="文章路径:"
:help="'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')" :help="'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
> >
<a-input v-model="postToStage.url" /> <a-input v-model="postToStage.url"/>
</a-form-item> </a-form-item>
<a-form-item label="文章密码:"> <a-form-item label="文章密码:">
<a-input <a-input type="password" v-model="postToStage.password"/>
type="password"
v-model="postToStage.password"
/>
</a-form-item> </a-form-item>
<a-form-item label="是否关闭评论:"> <a-form-item label="是否关闭评论:">
<a-radio-group <a-radio-group v-model="postToStage.disallowComment" :defaultValue="false">
v-model="postToStage.disallowComment"
:defaultValue="false"
>
<a-radio :value="false">开启</a-radio> <a-radio :value="false">开启</a-radio>
<a-radio :value="true">关闭</a-radio> <a-radio :value="true">关闭</a-radio>
</a-radio-group> </a-radio-group>
@ -70,18 +47,15 @@
</a-form> </a-form>
</div> </div>
</div> </div>
<a-divider /> <a-divider/>
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">分类目录</h3> <h3 class="post-setting-drawer-title">分类目录</h3>
<div class="post-setting-drawer-item"> <div class="post-setting-drawer-item">
<category-tree <category-tree v-model="selectedCategoryIds" :categories="categories"/>
v-model="selectedCategoryIds"
:categories="categories"
/>
</div> </div>
</div> </div>
<a-divider /> <a-divider/>
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">标签</h3> <h3 class="post-setting-drawer-title">标签</h3>
@ -104,7 +78,7 @@
</a-form> </a-form>
</div> </div>
</div> </div>
<a-divider /> <a-divider/>
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">缩略图</h3> <h3 class="post-setting-drawer-title">缩略图</h3>
@ -112,47 +86,30 @@
<div class="post-thum"> <div class="post-thum">
<img <img
class="img" class="img"
src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" :src="postToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
@click="showThumbDrawer" @click="showThumbDrawer"
> >
</div> </div>
</div> </div>
</div> </div>
<a-divider /> <a-divider/>
</div> </div>
<a-drawer <AttachmentSelectDrawer v-model="childDrawerVisible" @listenToSelect="selectPostThumb"/>
title="选择图片"
width="320"
closable
:visible="childDrawerVisible"
@close="onChildClose"
></a-drawer>
<div class="post-control"> <div class="post-control">
<a-button <a-button style="marginRight: 8px" @click="handleDraftClick">稿</a-button>
style="marginRight: 8px" <a-button @click="handlePublishClick" type="primary">{{ publishText }}</a-button>
@click="handleDraftClick"
>保存草稿</a-button>
<a-button
@click="handlePublishClick"
type="primary"
>{{ publishText }}</a-button>
</div> </div>
</a-drawer> </a-drawer>
</a-col> </a-col>
</a-row> </a-row>
<AttachmentDrawer v-model="attachmentDrawerVisible" /> <AttachmentDrawer v-model="attachmentDrawerVisible"/>
<footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"> <footer-tool-bar
<a-button :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
type="primary" >
@click="showDrawer" <a-button type="primary" @click="showDrawer"></a-button>
>发布</a-button> <a-button type="dashed" @click="showAttachDrawer" style="margin-left: 8px;">附件库</a-button>
<a-button
type="dashed"
@click="showAttachDrawer"
style="margin-left: 8px;"
>附件库</a-button>
</footer-tool-bar> </footer-tool-bar>
</div> </div>
</template> </template>
@ -167,6 +124,7 @@ import tagApi from '@/api/tag'
import categoryApi from '@/api/category' import categoryApi from '@/api/category'
import postApi from '@/api/post' import postApi from '@/api/post'
import AttachmentDrawer from '../attachment/components/AttachmentDrawer' import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
const toolbars = { const toolbars = {
bold: true, // bold: true, //
@ -194,7 +152,8 @@ export default {
mavonEditor, mavonEditor,
CategoryTree, CategoryTree,
FooterToolBar, FooterToolBar,
AttachmentDrawer AttachmentDrawer,
AttachmentSelectDrawer
}, },
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data() { data() {
@ -296,6 +255,9 @@ export default {
}, },
onChildClose() { onChildClose() {
this.childDrawerVisible = false this.childDrawerVisible = false
},
selectPostThumb(data) {
this.postToStage.thumbnail = data.path
} }
} }
} }

View File

@ -9,7 +9,10 @@
<span>prompt text</span> <span>prompt text</span>
</template> </template>
<div class="avatar"> <div class="avatar">
<img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" @click="showAttachDrawer"> <img
:src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'"
@click="showAttachDrawer"
>
</div> </div>
</a-tooltip> </a-tooltip>
<div class="username">{{ user.nickname }}</div> <div class="username">{{ user.nickname }}</div>