mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-22 15:21:53 +08:00
mp：初始化【图文草稿箱】前端界面
This commit is contained in:
YunaiV
parent
1e63198f4a
commit
bc870434c2
@ -36,7 +36,7 @@ public class MpDraftController {
|
|||||||
@GetMapping("/page")
|
@GetMapping("/page")
|
||||||
@ApiOperation("获得草稿分页")
|
@ApiOperation("获得草稿分页")
|
||||||
public CommonResult<PageResult<WxMpDraftItem>> getDraftPage(MpDraftPageReqVO reqVO) {
|
public CommonResult<PageResult<WxMpDraftItem>> getDraftPage(MpDraftPageReqVO reqVO) {
|
||||||
// 从公众号查询已发布的图文列表
|
// 从公众号查询草稿箱
|
||||||
WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId());
|
WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId());
|
||||||
WxMpDraftList draftList;
|
WxMpDraftList draftList;
|
||||||
try {
|
try {
|
||||||
|
|||||||
784
yudao-ui-admin/src/views/mp/draft/index.vue
Normal file
784
yudao-ui-admin/src/views/mp/draft/index.vue
Normal file
@ -0,0 +1,784 @@
|
|||||||
|
<!--
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020 www.joolun.com
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="公众号" prop="accountId">
|
||||||
|
<el-select v-model="queryParams.accountId" placeholder="请选择公众号">
|
||||||
|
<el-option v-for="item in accounts" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作工具栏 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddNews"
|
||||||
|
v-hasPermi="['mp:draft:create']">新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<div class="waterfall" v-loading="loading">
|
||||||
|
<div v-if="item.content && item.content.newsItem" class="waterfall-item" v-for="item in list"
|
||||||
|
:key='item.articleId'>
|
||||||
|
<wx-news :articles="item.content.newsItem" />
|
||||||
|
<!-- TODO 芋艿：权限、样式（搜索框之类的） -->
|
||||||
|
<el-row class="ope-row">
|
||||||
|
<el-button type="success" circle @click="handlePublishNews(item)">发布</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-edit" circle @click="handleEditNews(item)"></el-button>
|
||||||
|
<el-button type="danger" icon="el-icon-delete" circle @click="delMaterial(item)"></el-button>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页记录 -->
|
||||||
|
<div v-if="list.length <=0 && !loading" class="el-table__empty-block">
|
||||||
|
<span class="el-table__empty-text">暂无数据</span>
|
||||||
|
</div>
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"/>
|
||||||
|
|
||||||
|
<!-- TODO 芋艿：位置调整 -->
|
||||||
|
<el-dialog :title="operateMaterial === 'add'?'新建图文':'修改图文'"
|
||||||
|
append-to-body
|
||||||
|
:before-close="dialogNewsClose"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:visible.sync="dialogNewsVisible"
|
||||||
|
width="80%"
|
||||||
|
top="20px">
|
||||||
|
<div class="left">
|
||||||
|
<div class="select-item">
|
||||||
|
<div v-for="(news, index) in articlesAdd" :key='news.id'>
|
||||||
|
<div class="news-main father" v-if="index === 0" :class="{'activeAddNews': isActiveAddNews === index}"
|
||||||
|
@click="activeNews(index)">
|
||||||
|
<div class="news-content">
|
||||||
|
<img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl"/>
|
||||||
|
<div class="news-content-title">{{news.title}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="child" v-if="articlesAdd.length>1">
|
||||||
|
<el-button type="mini" icon="el-icon-sort-down" @click="downNews(index)">下移</el-button>
|
||||||
|
<el-button v-if="operateMaterial === 'add'" type="mini" icon="el-icon-delete"
|
||||||
|
@click="minusNews(index)">删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news-main-item father" v-if="index>0" :class="{'activeAddNews': isActiveAddNews === index}"
|
||||||
|
@click="activeNews(index)">
|
||||||
|
<div class="news-content-item">
|
||||||
|
<div class="news-content-item-title ">{{news.title}}</div>
|
||||||
|
<div class="news-content-item-img">
|
||||||
|
<img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl" height="100%"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="child">
|
||||||
|
<el-button v-if="articlesAdd.length > index+1" type="mini" icon="el-icon-sort-down"
|
||||||
|
@click="downNews(index)">下移
|
||||||
|
</el-button>
|
||||||
|
<el-button type="mini" icon="el-icon-sort-up" @click="upNews(index)">上移</el-button>
|
||||||
|
<el-button v-if="operateMaterial=='add'" type="mini" icon="el-icon-delete"
|
||||||
|
@click="minusNews(index)">删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news-main-plus" @click="plusNews" v-if="articlesAdd.length<8 && operateMaterial=='add'">
|
||||||
|
<i class="el-icon-circle-plus icon-plus"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right" v-loading="addMaterialLoading">
|
||||||
|
<!--富文本编辑器组件-->
|
||||||
|
<el-row>
|
||||||
|
<WxEditor v-model="articlesAdd[isActiveAddNews].content" :uploadData="uploadData"
|
||||||
|
v-if="hackResetEditor"/>
|
||||||
|
</el-row>
|
||||||
|
<br><br><br><br>
|
||||||
|
<div class="input-tt">封面和摘要：</div>
|
||||||
|
<div>
|
||||||
|
<div class="thumb-div">
|
||||||
|
<img class="material-img" v-if="articlesAdd[isActiveAddNews].thumbUrl"
|
||||||
|
:src="articlesAdd[isActiveAddNews].thumbUrl" :class="isActiveAddNews == 0 ? 'avatar':'avatar1'">
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"
|
||||||
|
:class="isActiveAddNews === 0 ? 'avatar':'avatar1'"></i>
|
||||||
|
<div class="thumb-but">
|
||||||
|
<el-upload
|
||||||
|
:action="actionUrl"
|
||||||
|
:headers="headers"
|
||||||
|
multiple
|
||||||
|
:limit="1"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:file-list="fileList"
|
||||||
|
:before-upload="beforeThumbImageUpload"
|
||||||
|
:data="uploadData">
|
||||||
|
<el-button slot="trigger" size="mini" type="primary">
|
||||||
|
本地上传
|
||||||
|
</el-button>
|
||||||
|
<el-button size="mini" type="primary"
|
||||||
|
@click="openMaterial" style="margin-left: 5px">素材库选择
|
||||||
|
</el-button>
|
||||||
|
<div slot="tip" class="el-upload__tip">支持bmp/png/jpeg/jpg/gif格式，大小不超过2M</div>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="80%" append-to-body>
|
||||||
|
<WxMaterialSelect :objData="{repType:'image'}"
|
||||||
|
@selectMaterial="selectMaterial"></WxMaterialSelect>
|
||||||
|
</el-dialog>
|
||||||
|
<el-input :rows="8" type="textarea" v-model="articlesAdd[isActiveAddNews].digest" placeholder="请输入摘要"
|
||||||
|
class="digest" maxlength="120"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="input-tt">标题：</div>
|
||||||
|
<el-input v-model="articlesAdd[isActiveAddNews].title" placeholder="请输入标题"></el-input>
|
||||||
|
<div class="input-tt">作者：</div>
|
||||||
|
<el-input v-model="articlesAdd[isActiveAddNews].author" placeholder="请输入作者"></el-input>
|
||||||
|
<div class="input-tt">原文地址：</div>
|
||||||
|
<el-input v-model="articlesAdd[isActiveAddNews].contentSourceUrl" placeholder="请输入原文地址"></el-input>
|
||||||
|
</div>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogNewsVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="subNews">提 交</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import {getPage, addObj, delObj, putObj, publish} from '@/api/wxmp/wxdraft'
|
||||||
|
// import { getPage as getPage1 } from '@/api/wxmp/wxmaterial'
|
||||||
|
// import WxEditor from '@/components/Editor/WxEditor.vue'
|
||||||
|
import WxNews from '@/views/mp/components/wx-news/main.vue';
|
||||||
|
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||||
|
import { getAccessToken } from '@/utils/auth'
|
||||||
|
import { getDraftPage } from "@/api/mp/draft";
|
||||||
|
import {getSimpleAccounts} from "@/api/mp/account";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'mpDraft',
|
||||||
|
components: {
|
||||||
|
// WxEditor,
|
||||||
|
WxNews,
|
||||||
|
WxMaterialSelect
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 数据列表
|
||||||
|
list: [],
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
accountId: undefined,
|
||||||
|
},
|
||||||
|
|
||||||
|
page1: {
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 10 // 每页显示多少条
|
||||||
|
},
|
||||||
|
actionUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/materialFileUpload',
|
||||||
|
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
|
||||||
|
fileList: [],
|
||||||
|
dialogVideoVisible: false,
|
||||||
|
dialogNewsVisible: false,
|
||||||
|
addMaterialLoading: false,
|
||||||
|
uploadData: {
|
||||||
|
"mediaType": 'image',
|
||||||
|
"title": '',
|
||||||
|
"introduction": ''
|
||||||
|
},
|
||||||
|
articlesAdd: [
|
||||||
|
{
|
||||||
|
"title": '',
|
||||||
|
"thumbMediaId": '',
|
||||||
|
"author": '',
|
||||||
|
"digest": '',
|
||||||
|
"showCoverPic": '',
|
||||||
|
"content": '',
|
||||||
|
"contentSourceUrl": '',
|
||||||
|
"needOpenComment": '',
|
||||||
|
"onlyFansCanComment": '',
|
||||||
|
"thumbUrl": ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
isActiveAddNews: 0,
|
||||||
|
dialogImageVisible: false,
|
||||||
|
imageListData: [],
|
||||||
|
tableLoading1: false,
|
||||||
|
operateMaterial: 'add',
|
||||||
|
articlesMediaId: '',
|
||||||
|
hackResetEditor: false,
|
||||||
|
|
||||||
|
// 公众号账号列表
|
||||||
|
accounts: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
getSimpleAccounts().then(response => {
|
||||||
|
this.accounts = response.data;
|
||||||
|
// 默认选中第一个
|
||||||
|
if (this.accounts.length > 0) {
|
||||||
|
this.queryParams.accountId = this.accounts[0].id;
|
||||||
|
}
|
||||||
|
// 加载数据
|
||||||
|
this.getList();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
// 如果没有选中公众号账号，则进行提示。
|
||||||
|
if (!this.queryParams.accountId) {
|
||||||
|
this.$message.error('未选中公众号，无法查询草稿箱')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
getDraftPage((this.queryParams)).then(response => {
|
||||||
|
// 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
|
||||||
|
response.data.list.forEach(item => {
|
||||||
|
const newsItem = item.content.newsItem;
|
||||||
|
newsItem.forEach(article => {
|
||||||
|
article.picUrl = article.thumbUrl;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.list = response.data.list
|
||||||
|
this.total = response.data.total
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
delMaterial(item){
|
||||||
|
this.$confirm('此操作将永久删除该草稿, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.loading = true
|
||||||
|
delObj({
|
||||||
|
id:item.mediaId
|
||||||
|
}).then(response => {
|
||||||
|
this.loading = false
|
||||||
|
if(response.code == 200){
|
||||||
|
this.getList(this.queryParams)
|
||||||
|
}else{
|
||||||
|
this.loading = false
|
||||||
|
this.$message.error('删除出错：' + response.msg)
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getPage1(){
|
||||||
|
this.tableLoading1 = true
|
||||||
|
getPage1({
|
||||||
|
current: this.page1.currentPage,
|
||||||
|
size: this.page1.pageSize,
|
||||||
|
type:'image'
|
||||||
|
}).then(response => {
|
||||||
|
this.tableLoading1 = false
|
||||||
|
this.imageListData = response.data.items
|
||||||
|
this.page1.total = response.data.totalCount
|
||||||
|
}).catch(() => {
|
||||||
|
this.tableLoading1 = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
openMaterial(){
|
||||||
|
this.imageListData = null
|
||||||
|
this.page1.currentPage = 1
|
||||||
|
this.getPage1()
|
||||||
|
this.dialogImageVisible = true
|
||||||
|
},
|
||||||
|
dialogNewsClose(done){
|
||||||
|
this.$confirm('修改内容可能还未保存，确定关闭吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.hackResetEditor = false//销毁组件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.hackResetEditor = true//重建组件
|
||||||
|
})
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
done()
|
||||||
|
}).catch(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
downNews(index){
|
||||||
|
let temp = this.articlesAdd[index]
|
||||||
|
this.articlesAdd[index] = this.articlesAdd[index+1]
|
||||||
|
this.articlesAdd[index+1] = temp
|
||||||
|
this.isActiveAddNews = index+1
|
||||||
|
},
|
||||||
|
upNews(index){
|
||||||
|
let temp = this.articlesAdd[index]
|
||||||
|
this.articlesAdd[index] = this.articlesAdd[index-1]
|
||||||
|
this.articlesAdd[index-1] = temp
|
||||||
|
this.isActiveAddNews = index-1
|
||||||
|
},
|
||||||
|
activeNews(index){
|
||||||
|
this.hackResetEditor = false//销毁组件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.hackResetEditor = true//重建组件
|
||||||
|
})
|
||||||
|
this.isActiveAddNews = index
|
||||||
|
},
|
||||||
|
minusNews(index){
|
||||||
|
this.$confirm('确定删除该图文吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.articlesAdd.splice(index,1);
|
||||||
|
if(this.isActiveAddNews === index){
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
plusNews(){
|
||||||
|
this.articlesAdd.push(
|
||||||
|
{
|
||||||
|
"title": '',
|
||||||
|
"thumbMediaId": '',
|
||||||
|
"author": '',
|
||||||
|
"digest": '',
|
||||||
|
"showCoverPic": '',
|
||||||
|
"content": '',
|
||||||
|
"contentSourceUrl": '',
|
||||||
|
"needOpenComment":'',
|
||||||
|
"onlyFansCanComment":'',
|
||||||
|
"thumbUrl":''
|
||||||
|
}
|
||||||
|
)
|
||||||
|
this.isActiveAddNews = this.articlesAdd.length - 1
|
||||||
|
},
|
||||||
|
subNews(){
|
||||||
|
this.addMaterialLoading = true
|
||||||
|
if(this.operateMaterial == 'add'){
|
||||||
|
addObj({
|
||||||
|
articles:this.articlesAdd
|
||||||
|
}).then(response => {
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
this.dialogNewsVisible = false
|
||||||
|
if(response.code == 200){
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
this.articlesAdd = [
|
||||||
|
{
|
||||||
|
"title": '',
|
||||||
|
"thumbMediaId": '',
|
||||||
|
"author": '',
|
||||||
|
"digest": '',
|
||||||
|
"showCoverPic": '',
|
||||||
|
"content": '',
|
||||||
|
"contentSourceUrl": '',
|
||||||
|
"needOpenComment":'',
|
||||||
|
"onlyFansCanComment":'',
|
||||||
|
"thumbUrl":''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
this.queryParams.currentPage = 1
|
||||||
|
this.getList(this.queryParams)
|
||||||
|
}else{
|
||||||
|
this.$message.error('新增图文出错：' + response.msg)
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(this.operateMaterial == 'edit'){
|
||||||
|
putObj({
|
||||||
|
articles:this.articlesAdd,
|
||||||
|
mediaId:this.articlesMediaId
|
||||||
|
}).then(response => {
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
this.dialogNewsVisible = false
|
||||||
|
if(response.code == 200){
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
this.articlesAdd = [
|
||||||
|
{
|
||||||
|
"title": '',
|
||||||
|
"thumbMediaId": '',
|
||||||
|
"author": '',
|
||||||
|
"digest": '',
|
||||||
|
"showCoverPic": '',
|
||||||
|
"content": '',
|
||||||
|
"contentSourceUrl": '',
|
||||||
|
"needOpenComment":'',
|
||||||
|
"onlyFansCanComment":'',
|
||||||
|
"thumbUrl":''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
this.getList(this.queryParams)
|
||||||
|
}else{
|
||||||
|
this.$message.error('修改图文出错：' + response.msg)
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleEditNews(item){
|
||||||
|
this.hackResetEditor = false//销毁组件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.hackResetEditor = true//重建组件
|
||||||
|
})
|
||||||
|
if(this.operateMaterial == 'add'){
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
}
|
||||||
|
this.operateMaterial = 'edit'
|
||||||
|
this.articlesAdd = JSON.parse(JSON.stringify(item.content.newsItem))
|
||||||
|
this.articlesMediaId = item.mediaId
|
||||||
|
this.dialogNewsVisible = true
|
||||||
|
},
|
||||||
|
handleAddNews(){
|
||||||
|
this.hackResetEditor = false//销毁组件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.hackResetEditor = true//重建组件
|
||||||
|
})
|
||||||
|
if(this.operateMaterial == 'edit'){
|
||||||
|
this.isActiveAddNews = 0
|
||||||
|
this.articlesAdd = [
|
||||||
|
{
|
||||||
|
"title": '',
|
||||||
|
"thumbMediaId": '',
|
||||||
|
"author": '',
|
||||||
|
"digest": '',
|
||||||
|
"showCoverPic": '',
|
||||||
|
"content": '',
|
||||||
|
"contentSourceUrl": '',
|
||||||
|
"needOpenComment":'',
|
||||||
|
"onlyFansCanComment":'',
|
||||||
|
"thumbUrl":''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.operateMaterial = 'add'
|
||||||
|
this.dialogNewsVisible = true
|
||||||
|
},
|
||||||
|
beforeThumbImageUpload(file){
|
||||||
|
this.addMaterialLoading = true
|
||||||
|
const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
|
||||||
|
const isLt = file.size / 1024 / 1024 < 2
|
||||||
|
if (!isType) {
|
||||||
|
this.$message.error('上传图片格式不对!')
|
||||||
|
}
|
||||||
|
if (!isLt) {
|
||||||
|
this.$message.error('上传图片大小不能超过2M!')
|
||||||
|
}
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
return isType && isLt;
|
||||||
|
},
|
||||||
|
handleUploadSuccess(response, file, fileList){
|
||||||
|
this.loading = false
|
||||||
|
this.addMaterialLoading = false
|
||||||
|
if(response.code == 200){
|
||||||
|
this.dialogVideoVisible = false
|
||||||
|
this.fileList = []
|
||||||
|
this.uploadData.title = ''
|
||||||
|
this.uploadData.introduction = ''
|
||||||
|
this.articlesAdd[this.isActiveAddNews].thumbMediaId = response.data.mediaId
|
||||||
|
this.articlesAdd[this.isActiveAddNews].thumbUrl = response.data.url
|
||||||
|
}else{
|
||||||
|
this.$message.error('上传出错：' + response.msg)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectMaterial(item){
|
||||||
|
this.dialogImageVisible = false
|
||||||
|
this.articlesAdd[this.isActiveAddNews].thumbMediaId = item.mediaId
|
||||||
|
this.articlesAdd[this.isActiveAddNews].thumbUrl = item.url
|
||||||
|
},
|
||||||
|
handlePublishNews(item){
|
||||||
|
this.$confirm('你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.loading = true
|
||||||
|
publish(item.mediaId).then(response => {
|
||||||
|
this.loading = false
|
||||||
|
this.$message.success('发布任务提交成功')
|
||||||
|
this.getList(this.queryParams)
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pagination {
|
||||||
|
float: right;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_but {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ope-row {
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload__tip {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*新增图文*/
|
||||||
|
.left {
|
||||||
|
display: inline-block;
|
||||||
|
width: 35%;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader {
|
||||||
|
width: 20%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
border-color: #165dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 230px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar1 {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.digest {
|
||||||
|
width: 60%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*新增图文*/
|
||||||
|
/*瀑布流样式*/
|
||||||
|
.waterfall {
|
||||||
|
width: 100%;
|
||||||
|
column-gap: 10px;
|
||||||
|
column-count: 5;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterfall-item {
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
break-inside: avoid;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*瀑布流样式*/
|
||||||
|
.news-main {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content {
|
||||||
|
background-color: #acadae;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
background-color: black;
|
||||||
|
width: 98%;
|
||||||
|
padding: 1%;
|
||||||
|
opacity: 0.65;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-main-item {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 5px 0px;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item {
|
||||||
|
position: relative;
|
||||||
|
margin-left: -3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-item-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 25%;
|
||||||
|
background-color: #acadae
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-tt {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeAddNews {
|
||||||
|
border: 5px solid #2bb673;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-main-plus {
|
||||||
|
width: 280px;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-plus {
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-item {
|
||||||
|
width: 60%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 auto 10px auto;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.father .child {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.father:hover .child {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-div {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-but {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user