Skip to content

C
confucius
Commit 11cfb37a authored by Mac's avatar Mac
Browse files
Options

公众号的素材新增 页面修改

parent 7eec7506
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 87 deletions
public/static/UE/ueditor.all.js
View file @ 11cfb37a
......@@ -28765,7 +28765,7 @@ UE.ui = baidu.editor.ui = {};
function setCount(editor,ui) {
editor.setOpt({
wordCount:true,
maximumWords:10000,
maximumWords:100000,
wordCountMsg:editor.options.wordCountMsg || editor.getLang("wordCountMsg"),
wordOverFlowMsg:editor.options.wordOverFlowMsg || editor.getLang("wordOverFlowMsg")
});
public/static/UE/ueditor.config.js
View file @ 11cfb37a
......@@ -272,7 +272,7 @@
//wordCount
,wordCount:false //是否开启字数统计
//,maximumWords:10000 //允许的最大字符数
,maximumWords:100000 //允许的最大字符数
//字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数,留空支持多语言自动切换，否则按此配置显示
//,wordCountMsg:'' //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
//超出字数限制提示 留空支持多语言自动切换，否则按此配置显示
......
src/components/system/program-form.vue
View file @ 11cfb37a
......@@ -33,7 +33,7 @@
</q-dialog>
<!-- 选择文件 -->
<q-dialog title="选择文件" v-model="getImgChoice" width="1200px">
<ChooseImg @SelectId="SelectId" :type="1" @closeDia="getImgChoice=false"></ChooseImg>
<ChooseImg @SelectId="SelectId" :type="0" @closeDia="getImgChoice=false"></ChooseImg>
</q-dialog>
</div>
</template>
......@@ -80,7 +80,7 @@
},
methods: {
SelectId(obj) {
this.objOption.Image = obj.url;
this.objOption.Image = obj[0].ImageUrl;
this.getImgChoice = false;
},
//关闭弹窗
......
src/pages/teacher/components/ChooseImg.vue
View file @ 11cfb37a
......@@ -8,17 +8,22 @@
<el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<!-- type=1 图片 -->
<!-- type=0 图片单选 -->
<template v-if="type==0">
<div class="basefix app-attachment-list">
<el-tooltip v-for="(item,index) in dataList" :key="index" class="item" effect="dark"
:content="item.MediaGroupName" placement="top-start">
<div @click="PageSelect(item)" :class="getChecked(item) ? 'selected' :''"
class="el-tooltip item app-attachment-item">
<img :src="getIconLink(item.ImageUrl)" class="app-attachment-img" style="width: 100px; height: 100px;">
<div class="app-attachment-name">{{item.MediaGroupName}}</div>
</div>
</el-tooltip>
</div>
</template>
<!-- type=1 图片多选 -->
<template v-if="type==1">
<div class="basefix app-attachment-list">
<!-- <div class="app-attachment-item app-attachment-upload">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage" multiple>
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
<i class="el-icon-upload"></i>
</div>
</el-upload>
</div> -->
<el-tooltip v-for="(item,index) in dataList" :key="index" class="item" effect="dark"
:content="item.MediaGroupName" placement="top-start">
<div @click="PageSelect(item)" :class="getChecked(item) ? 'selected' :''"
......@@ -122,7 +127,12 @@
},
mounted() {
if(this.type){
this.msg.Type = this.type;
if(this.type==1 || this.type==0){
this.msg.Type =1
}else{
this.msg.Type = this.type;
}
}
this.GetPageList();
},
......@@ -174,20 +184,41 @@
var isChecked = false;
if (this.emitmsg && this.emitmsg.length > 0) {
this.emitmsg.forEach(eItem => {
if (eItem.selectId == item.Id && !isChecked) {
if (eItem.Id == item.Id && !isChecked) {
isChecked = true;
}
});
}
return isChecked;
},
//选择图片
PageSelect(item) {
console.log(item,'item');
if(this.type!=1){//单选
this.emitmsg = [];
this.emitmsg.push(item)
}else{//图片多选的时候
if(this.emitmsg && this.emitmsg.length>0){//一个没有选择的时候
let data = JSON.parse(JSON.stringify(this.emitmsg))
let isyes = false
data.forEach((eItem,eindex) => {
if (eItem.Id == item.Id) {
this.emitmsg.splice(eindex,1)
isyes = true
}
});
if(isyes== false){
this.emitmsg.push(item)
}
}else{//有一个选中的时候
this.emitmsg.push(item)
}
}
this.selectId = item.Id;
},
SelectImgId() {
if (this.emitmsg && this.emitmsg.length > 0) {
var result = {
selectId: this.emitmsg[0].selectId,
url: this.emitmsg[0].url,
Name:this.emitmsg[0].Name
};
var result = this.emitmsg;
this.$emit('SelectId', result)
}
this.selectId = -1;
......@@ -214,25 +245,7 @@
}
})
},
//选择图片 clickType 1单击 2双击
PageSelect(item) {
this.emitmsg = [];
console.log(item,'item');
let url = ''
if(this.type==1){
url = item.ImageUrl
}else if(this.type==2){
url = item.Media_Id
}else if(this.type==3){
url = item.VideoWXPath
}
this.emitmsg.push({
selectId: item.Id,
url: url,
Name:item.MediaName
});
this.selectId = item.Id;
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.GetPageList();
......
src/pages/teacher/contribution/addimageText.vue
View file @ 11cfb37a
<style>
.addimageText {
width: 100%;
height: 100%;
height: 100vh;
display: flex;
justify-content: center;
background: rgba(0, 0, 0, 0.03);
......@@ -20,9 +20,9 @@
.box_r {
width: 800px;
height: 100vh;
background: #FFF;
padding: 15px;
margin-right: 30px;
overflow: auto;
}
......@@ -74,7 +74,7 @@
</div>
</div> -->
<div class="box_r">
<div style="width: 100%;display: flex;align-items: center;justify-content: center;">
<div style="width: 100%;display: flex;align-items: center;justify-content: center;" v-if="addMsg.Type==1">
<q-btn-group push>
<q-btn-dropdown push label="图片">
<q-list>
......@@ -89,40 +89,83 @@
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn push label="视频" @click="getChoice(3)" />
<q-btn push label="音频" @click="getChoice(2)" />
<q-btn push label="视频" @click="getChoice(3),iscover=false" />
<q-btn push label="音频" @click="getChoice(2),iscover=false" />
<q-btn push label="超链接" @click="hyperlinks" />
<q-btn push label="小程序" />
</q-btn-group>
</div>
<q-input clearable filled v-model="addMsg.Title" label="标题" maxlength="64" counter
v-if="this.addMsg.Type != 2 && this.addMsg.Type != 5" style="margin-top: 20px;" />
<q-input clearable filled v-model="addMsg.Author" label="作者" maxlength="8" counter v-if="addMsg.Type == 1"
style="margin-top: 20px;" />
<q-input clearable filled v-model="addMsg.Author" label="作者" maxlength="8" counter
style="margin-top: 20px;" />
<div style="margin-top: 20px;">
<contributionUE :config="config" ref="UE_cb" @input="getcontnet" v-model="addMsg.Content" ></contributionUE>
<!-- 富文本 -->
<div style="margin-top: 20px;" v-if="addMsg.Type != 4 && addMsg.Type != 5">
<contributionUE :config="config" ref="UE_cb" @input="getcontnet" v-model="addMsg.Content">
</contributionUE>
</div>
<div style="display: flex;align-items: flex-start;margin-top: 20px;">
<div style="display: flex;align-items: flex-start;margin-top: 20px;" v-if="addMsg.Type == 1">
<div v-if=" addMsg.CoverImageId==0"
style="width:210px;height:90px;border:2px dashed #ebebeb;display: flex;align-items: center;justify-content: center;flex-direction: column;"
@click="getChoice(1),iscover=true">
@click="getChoice(0),iscover=true">
<span style="font-size: 40px;">+</span>
<span style="display: block; color: #7e8081;font-size: 14px;">选择封面</span>
</div>
<div v-if="addMsg.CoverImageId && addMsg.CoverImageId>0 && coverimg!='' "
style="width:210px;height:90px" @click="getChoice(1),iscover=true">
style="width:210px;height:90px" @click="getChoice(0),iscover=true">
<el-image style="width: 100%; height: 100%" :src="coverimg" fit="cover"></el-image>
</div>
<q-input clearable filled v-model="addMsg.Description" label="描述/摘要" maxlength="120" counter
type="textarea" bottom-slots style="margin-left: 20px;width: 500px;" />
</div>
<q-btn color="accent" class="q-mr-md" label="暂存" @click="savemove(0)" style="width: 100px;"
:loading="loading" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="savemove(1)" style="width: 100px;"
:loading="loading" />
<q-btn class="q-mr-md" label="返回" @click="goblck()" style="width: 60px;" />
<!-- 音频 -->
<div v-if="addMsg.Type == 4">
<q-input clearable filled v-model="addMsg.Description" label="可以输入140字以内的推荐语(选填)" maxlength="140" counter
type="textarea" bottom-slots style="width: 100%;" />
<div style="display: flex;align-items: center;">
<audio :src="audiourl" controls="controls"></audio>
<q-btn color="accent" class="q-mr-md" label="替换素材" @click="getChoice(2),iscover=true" size="sm"
style="margin-left: 30px;" />
</div>
</div>
<!-- 图片 -->
<div v-if="addMsg.Type == 5">
<q-input clearable filled v-model="addMsg.Description" label="可以输入140字以内的推荐语(选填)" maxlength="140"
counter type="textarea" bottom-slots style="width: 100%;" />
<div style="display: flex;flex-wrap: wrap;width: 100%;border-bottom: 1px solid #d7d7d7;">
<draggable v-model="imgsList" style="display: flex;flex-wrap: wrap;width: 100%;">
<div style="width: 178px;height: 178px;margin: 0 5px 10px;position: relative;cursor: grab" v-for="(x,y) in imgsList" :key='y'>
<el-image style="width: 100%; height: 100%" :src="x.ImageUrl" fit="cover"></el-image>
<q-icon style="position: absolute;right: 5px;top: 5px;color: #F56C6C;" name="iconfont icon-yiquxiao" size="24px" @click="ClearCarouse(y)"></q-icon>
</div>
</draggable>
<div @click="getChoice(1)" class="cursor-pointer" v-if="imgsList.length<9"
style="width: 178px;height: 178px;margin: 0 5px 10px;border: 1px dashed #d7d7d7;color: #9a9a9a;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<q-icon name="iconfont icon-add" size="24px"></q-icon>
添加图片
</div>
</div>
<div>封面预览</div>
<div style="margin-top: 20px;display: flex;align-items: flex-start;">
<div style="width:210px;height:90px">
<el-image style="width: 100%; height: 100%" :src="coverimg" fit="cover"></el-image>
</div>
<q-btn color="accent" class="q-mr-md" label="上传封面图" @click="getChoice(0),iscover=true" size="sm"
style="margin-left: 30px;" />
</div>
</div>
<div style="margin-top: 20px;">
<q-btn color="accent" class="q-mr-md" label="暂存" @click="savemove(0)" style="width: 100px;"
:loading="loading" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="savemove(1)" style="width: 100px;"
:loading="loading" />
<q-btn class="q-mr-md" label="返回" @click="goblck()" style="width: 60px;" />
</div>
</div>
<!-- 选择文件 -->
......@@ -135,6 +178,8 @@
<script>
import contributionUE from './ue/contributionUE'
import ChooseImg from '../components/ChooseImg'
import draggable from "vuedraggable"
import {
setContributeInfo,
getContributeInfo
......@@ -145,13 +190,14 @@
},
components: {
contributionUE,
ChooseImg
ChooseImg,
draggable
},
data() {
return {
select: 1,
ishowloading:false,
ishowloading: true,
Name: '',
author: '',
list: [],
......@@ -161,6 +207,7 @@
zIndex: 99
},
importFileUrl2: this.domainManager().UploadFileUrl2,
// this.domainManager().DomainUrl+'/api/upload/UploadImageTextFileToGZH',
getImgChoice: false,
type: -1,
ContributionType: 1,//进入的类型
......@@ -179,31 +226,57 @@
loading: false,
iscover: false,//是否选择封面
coverimg: '',
audiourl: '',//音频地址
imgsList: [],//图片消息的数据
}
},
created() {
if (this.$route.query && this.$route.query.type) {
this.addMsg.Type = this.$route.query.type;
if(this.addMsg.Type == 2 || this.addMsg.Type == 3){
this.config.toolbars = [['undo', 'redo','link', 'unlink', 'emotion']]
this.$forceUpdate()
if (this.addMsg.Type == 2 || this.addMsg.Type == 3) {
this.config.initialFrameHeight = 200;
this.config.toolbars = [['undo', 'redo', 'link', 'unlink', 'emotion']]
}
if (this.addMsg.Type == 2) {
this.config.maximumWords = 300;
this.config.wordCount = true;
}
this.ishowloading = true
// Todo 暂时不弄视频相关的东西
}
if (this.$route.query && this.$route.query.Id) {//编辑
this.addMsg.Id = this.$route.query.Id;
this.getdetails()//获取投稿详情
} else {//没有id的话新增
if (this.addMsg.Type == 4) {
this.getImgChoice = true;
this.iscover = true
this.type = 2;//音频 这个自定义type 2为音频
}
if (this.addMsg.Type == 5) {
this.getImgChoice = true;
this.iscover = true
this.type = 1;//音频 这个自定义type 1为图片
}
}
},
mounted() {
},
methods: {
getdetails(){
getContributeInfo({ContributeId:this.addMsg.Id}).then(res => {
getdetails() {
getContributeInfo({ ContributeId: this.addMsg.Id }).then(res => {
if (res.Code == 1) {
this.addMsg = res.Data
this.coverimg = res.Data.CoverImagePath
this.addMsg = res.Data
if (this.addMsg.Type == 1) {
this.coverimg = res.Data.CoverImagePath
} else if (this.addMsg.Type == 4) {
this.audiourl = this.addMsg.VideoMediumPath
}else if(this.addMsg.Type == 5){
this.imgsList = this.addMsg.ImageList
this.coverimg = res.Data.CoverImagePath
}
}
}).catch(() => {
......@@ -215,30 +288,65 @@
},
//选择图片
SelectId(obj) {
if (obj) {
let data = [{
fileName: obj.Name,
fileUrl: obj.url
}]
if (this.type == 1) {
if (this.iscover == true) {//选择的封面图
this.coverimg = obj.url;
console.log(obj)
this.addMsg.CoverImageId = obj.selectId
} else {//选择图片插入富文本
console.log(obj)
if (obj && obj.length > 0) {
let data = []
obj.forEach((x) => {
let url = ''
if (this.type == 1) {
url = x.ImageUrl
} else if (this.type == 2) {
url = x.Media_Id
} else if (this.type == 3) {
url = x.VideoWXPath
}
let a = {
fileName: x.Name,
fileUrl: url
}
data.push(a)
})
if (this.type == 0) {//图片单选
this.coverimg = obj[0].ImageUrl;
this.addMsg.CoverImageId = obj[0].Id
} else if (this.type == 1) {//图片多选
if (this.addMsg.Type == 1) {//图文
this.$refs.UE_cb.instertImage(data)
} else {//图片消息
if (this.imgsList.length == 0) {
this.coverimg = obj[0].ImageUrl;
this.addMsg.CoverImageId = obj[0].Id
}
this.imgsList = this.imgsList.concat(obj)
if (this.imgsList.length > 9) {
this.imgsList.slice(0, 9)
}
}
}
if (this.type == 2) {
this.$refs.UE_cb.insertaudio(data)
if (this.iscover == true) {//选择的音频
this.audiourl = obj[0].Path;
this.addMsg.VideoMediumId = obj[0].Id;
this.addMsg.Title = obj[0].MediaGroupName
} else {//选择音频插入富文本
this.$refs.UE_cb.insertaudio(data)
}
}
if (this.type == 3) {
// <iframe class="video_iframe rich_pages" data-vidtype="2" data-cover="https%3A%2F%2Fmmbiz.qlogo.cn%2Fmmbiz_png%2FiamUJ3Ot9utEic7O29tVpba9dnbkYGtYcGTtwdYq8dricg200uSc0BgiadEb399aC6oQfqp59kxBeV0O0w3zUGhJpQ%2F0%3Fwx_fmt%3Dpng" allowfullscreen="" frameborder="0" style=" z-index:1; " data-src="https://v.qq.com/iframe/preview.html?width=500&height=375&auto=0&vid=1007_532d40cde28c4fc3885b9b6d302f194d"></iframe> console.log(b)
let a = { "title": "测试视频文件", "description": "", "down_url": "http:\/\/203.205.136.113\/vweixinp.tc.qq.com\/1007_07ec2b9f113343d1985494ee31688230.f10.mp4?vkey=BFF307E7918FE7E2F5F05186CCF66BE375D1AF3ECD6BB02829646BFEFAD1386EDBDA72CAA1756CF47FD935F6944B9E745DC42BCE97E08B0FB8F0604F23258B28A2196CBF8AF10C356ADDB023820898B88B8219D607378B16&sha=0&save=1", "newcat": "", "newsubcat": "", "tags": [], "cover_url": "", "vid": "1007_07ec2b9f113343d1985494ee31688230" }
console.log(a.down_url)
data[0].fileUrl = a.down_url
this.$refs.UE_cb.insertVideo(data)
}
this.getImgChoice = false;
}
},
ClearCarouse(index){//删除图片
this.imgsList.splice(index, 1);
},
successUpload(file) {
console.log(file, 'file');
if (file.Code == 1) {
......@@ -251,18 +359,33 @@
}
},
hyperlinks() {
// <a target="_blank" href="http://mp.weixin.qq.com/s?__biz=MzU3OTUwMjg4OQ==&amp;mid=2247489291&amp;idx=1&amp;sn=3c31ecd91398b9ba04baf03451add5bd&amp;chksm=fd64414dca13c85b2e42aa6e8ec071538dccf54edd7d6580fd7f9cfeef67823ce3f6f33e9dd3#rd" data-itemshowtype="0" tab="innerlink">散步看日本「会津若松」</a>
let data = [{
fileName: '散步看日本「会津若松」',
fileUrl: "http://mp.weixin.qq.com/s?__biz=MzU3OTUwMjg4OQ==&amp;mid=2247489291&amp;idx=1&amp;sn=3c31ecd91398b9ba04baf03451add5bd&amp;chksm=fd64414dca13c85b2e42aa6e8ec071538dccf54edd7d6580fd7f9cfeef67823ce3f6f33e9dd3#rd"
}]
this.$refs.UE_cb.hyperlinks(data)
},
getcontnet(data){
this.addMsg.Content = data
getcontnet(data, length) {
console.log(length)
if (this.addMsg.Type == 2) {
this.addMsg.Description = data
} else {
this.addMsg.Content = data
}
},
savemove(type) {
this.loading = true
if (this.addMsg.Type == 5) {
this.addMsg.ImageList = []
this.imgsList.forEach(x => {
let obj = {
Id: x.Id,
MediaName:x.MediaName
}
this.addMsg.ImageList.push(obj)
})
}
setContributeInfo(this.addMsg).then(res => {
this.loading = false
if (res.Code == 1) {
......@@ -276,6 +399,7 @@
this.goblck()
}
}).catch(() => {
this.loading = false
})
},
......
src/pages/teacher/contribution/ue/contributionUE.vue
View file @ 11cfb37a
......@@ -116,8 +116,9 @@
let html = '';
//s视频
fileArray.forEach(item => {
html += '<p style="text-align:center"><iframe frameborder="0" src="' + item.fileUrl +
'" allowFullScreen="true" align="center" height="280" width="420"></iframe></p>';
html+="<iframe frameborder='0' width='100%' height='200px' src='https://v.qq.com/iframe/player.html?vid=v326875u4ek' allowfullscreen='true'></iframe>"
// html += '<p style="text-align:center"><iframe frameborder="0" src="' + item.fileUrl +
// '" allowFullScreen="true" align="center" height="280" width="420"></iframe></p>';
})
console.log(html)
......@@ -237,11 +238,11 @@
});
this.ue.addListener('keyup', editor => {
this.isInputChange = true;
this.$emit('input', this.ue.getContent());
// this.$emit('input', this.ue.getContent());
});
this.ue.addListener('contentChange', (editor, e) => {
this.isInputChange = true;
this.$emit('input', this.ue.getContent());
this.$emit('input', this.ue.getContent(),this.ue.getContentTxt().length);
});
this.ue.addListener('blur', editor => {
this.isInputChange = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment