mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
||
<!--编辑文章-->
|
||
<view class="">
|
||
<u-toast ref="messager"></u-toast>
|
||
<view>
|
||
<view class="feed-title">
|
||
<text class="title-left" @click="toBack()">取消</text>
|
||
<text class="title-con"></text>
|
||
<view class="title-right" >
|
||
<text style="padding-right: 20rpx;" @click="saveDraft()">保存草稿</text>
|
||
<text style="padding-right: 20rpx;" @click="submit()">提交</text>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="big-box-content">
|
||
<view class="row">
|
||
<u--input placeholder="请输入标题" maxlength="50" placeholder-style="font-size:30upx;color:#c1c1c1;font-weight: normal;" border="surround" v-model="article.title" ></u--input>
|
||
</view>
|
||
<view class="row row-upload">
|
||
<text class="upload-text">设置封面</text>
|
||
<u-upload uploadIcon="plus" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="coverImg" :maxCount="1">
|
||
</u-upload>
|
||
</view>
|
||
<view v-if="hasKeyword" class="row">
|
||
<u--input :height="25" maxlength="20" placeholder-style="font-size:30upx;color:#c1c1c1;font-weight: normal;" v-model="article.keyword" placeholder="关键字"></u--input>
|
||
</view>
|
||
<view v-if="hasSummary" class="row">
|
||
<u--textarea placeholder="摘要" maxlength="150" rows="6" placeholder-style="font-size:30upx; color:#c1c1c1;font-weight: normal;" border="surround" v-model="article.summary" ></u--textarea>
|
||
</view>
|
||
<view class="row">
|
||
<view>
|
||
<!-- <u--textarea :height="250" v-model="value1" placeholder="请输入正文"></u--textarea> -->
|
||
<editor id="editor" class="editor-content" placeholder="请输入正文"
|
||
:show-img-size="true"
|
||
:show-img-toolbar="true"
|
||
:show-img-resize="true"
|
||
@statuschange="onStatusChange"
|
||
@ready="onEditorReady">
|
||
</editor>
|
||
</view>
|
||
<view style="padding-left: 30upx;display: flex;">
|
||
<!-- <view class="addbtn" v-if="!hasKeyword"><u-icon name="plus" @click="addKeyword()" label="关键字"></u-icon> </view> -->
|
||
<view class="addbtn" v-if="!hasSummary" style="margin-left: 20px;"><u-icon @click="addSummary()" name="plus" label="摘要"></u-icon> </view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view style="display: flex;justify-content:space-around;">
|
||
<!-- <view><text class="editor-btn" @tap="format('color','hex color')">颜色</text></view>
|
||
<view><text class="editor-btn" @tap="format('bold','')">加粗</text></view> -->
|
||
<!-- <view class="Articleicon">
|
||
<text class="editor-btn" @tap="insertLabel()">
|
||
<image src="../../static/images/article/label.png" mode=""></image>
|
||
</text>
|
||
</view> -->
|
||
<view class="Articleicon">
|
||
<text class="editor-btn" @tap="insertImage()">
|
||
<image src="../../static/images/article/image.png" mode=""></image>
|
||
</text>
|
||
</view>
|
||
<!-- <view class="Articleicon">
|
||
<text class="editor-btn" @tap="insertDate()">
|
||
<image src="../../static/images/article/time.png" mode=""></image>
|
||
</text>
|
||
</view> -->
|
||
<view class="Articleicon">
|
||
<text class="editor-btn" @tap="undo()">
|
||
<image src="../../static/images/article/quash.png" mode=""></image>
|
||
</text>
|
||
</view>
|
||
<view class="Articleicon">
|
||
<text class="editor-btn" @tap="redo()">
|
||
<image src="../../static/images/article/redo.png" mode=""></image>
|
||
</text>
|
||
</view>
|
||
<view class="Articleicon">
|
||
<text class="editor-btn" @tap="clear()">
|
||
<image src="../../static/images/article/empty.png" mode=""></image>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiArtice from '@/api/modules/article.js'
|
||
import config from '@/config/index.js'
|
||
import uploadUtil from '@/utils/upload.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
curArticleId:'',
|
||
editorCtx: '',
|
||
formats: {},
|
||
hasKeyword:false,
|
||
hasSummary:false,
|
||
article:{
|
||
title:'',
|
||
coverurl:'',
|
||
summary:'',
|
||
keyword:'',
|
||
content:'',
|
||
status:1 // 1 表草稿，2表已提交待审核，3表审核不通过，5表审核通过，9表已发布
|
||
},
|
||
fileList: []
|
||
}
|
||
},
|
||
mounted() {
|
||
uni.onKeyboardHeightChange(res => {
|
||
this.editorCtx.scrollIntoView({
|
||
success: res=> {
|
||
//console.log(res)
|
||
},
|
||
fail: (error) => {
|
||
//console.error(error)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
onLoad(option){
|
||
if(option.id){
|
||
this.curArticleId=option.id;
|
||
this.loadDetail();
|
||
}else{
|
||
//this.$refs.messager.show({message:'参数错误',type:'error'});
|
||
}
|
||
},
|
||
methods: {
|
||
loadDetail(){
|
||
apiArtice.detail(this.curArticleId,false).then(rs=>{
|
||
if(rs.status==200){
|
||
this.article=rs.result;
|
||
if(this.article.keyword!=''){
|
||
this.hasKeyword=true;
|
||
}
|
||
if(this.article.summary!=''){
|
||
this.hasSummary=true;
|
||
}
|
||
this.editorCtx.setContents({
|
||
html:rs.result.content
|
||
});
|
||
}
|
||
})
|
||
},
|
||
addKeyword(){
|
||
this.hasKeyword=true;
|
||
},
|
||
addSummary(){
|
||
this.hasSummary=true;
|
||
},
|
||
saveDraft(){
|
||
this.article.status=1;
|
||
this.saveArticle();
|
||
},
|
||
submit(){
|
||
this.article.status=9;
|
||
this.saveArticle();
|
||
},
|
||
saveArticle(){
|
||
let $this=this;
|
||
uni.showLoading({
|
||
title:'正在保存...'
|
||
})
|
||
this.editorCtx.getContents({
|
||
success(res){
|
||
$this.article.content=res.html;
|
||
apiArtice.save($this.article).then((res)=>{
|
||
setTimeout(function(){uni.hideLoading()},1000);
|
||
if(res.status==200){
|
||
if(res.result.status==1){
|
||
$this.$refs.messager.show({message:'保存成功',type:'success'});
|
||
$this.article=res.result;
|
||
}else if(res.result.status==3){
|
||
$this.$refs.messager.show({message:'审核未通过已转人工审核',type:'error'});
|
||
}else if(res.result.status==9){
|
||
uni.redirectTo({
|
||
url:'/pages/resource/articeDetail?id='+res.result.id
|
||
})
|
||
}
|
||
}else{
|
||
$this.$refs.messager.show({message:res.message,type:'error'});
|
||
}
|
||
}).catch((err)=>{
|
||
console.log(err);
|
||
$this.$refs.messager.show({message:err,type:'error'});
|
||
setTimeout(function(){uni.hideLoading()},1000);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toBack(){
|
||
uni.navigateBack();
|
||
},
|
||
//初始化富文本编辑器
|
||
onEditorReady() {
|
||
let $this=this;
|
||
/** #ifdef APP-PLUS || H5 ||MP-WEIXIN */
|
||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||
//将内容写入编辑器
|
||
$this.editorCtx = res.context;
|
||
}).exec();
|
||
/** #endif */
|
||
},
|
||
onStatusChange(e){
|
||
const myFormats = e.detail;
|
||
this.formats = myFormats;
|
||
},
|
||
undo(){
|
||
this.editorCtx.undo()
|
||
},
|
||
redo(){
|
||
this.editorCtx.redo()
|
||
},
|
||
clear() {
|
||
this.editorCtx.clear({
|
||
success: function(res) {
|
||
console.log("clear success")
|
||
}
|
||
})
|
||
},
|
||
removeFormat() {
|
||
this.editorCtx.removeFormat()
|
||
},
|
||
format(name,value){
|
||
//console.log()
|
||
//let {name,value} = e.target.dataset
|
||
if(!name) {return}
|
||
//console.log('format', name, value);
|
||
this.editorCtx.format(name,value);
|
||
},
|
||
getEditorContent(e) {
|
||
this.content = e.detail.html;
|
||
//this.contentText = e.detail.text;
|
||
},
|
||
insertLabel(){
|
||
// this.editorCtx.insertText({
|
||
// text: formatText
|
||
// })
|
||
let $this=this;
|
||
this.editorCtx.getContents({
|
||
success(data) {
|
||
// 获取编辑器中的文本
|
||
let _html = data.html;
|
||
// 去掉文本中默认的标签
|
||
_html = _html.replace('<p><br></p>','');
|
||
// 接去掉文本中最后面的</p>标签
|
||
_html = _html.substring(0,_html.length-4);
|
||
// 重新拼接文本,并在末尾添加</p>标签
|
||
let html = `${_html}<span style="color: #3a8afb;"> #标签名#</span><i style="font-style: normal;"> </i></p>`;
|
||
// 给富文本设置内容
|
||
$this.editorCtx.setContents({html});
|
||
}
|
||
})
|
||
},
|
||
insertDate() {
|
||
const date = new Date()
|
||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||
this.editorCtx.insertText({
|
||
text: formatDate
|
||
})
|
||
},
|
||
insertImage() {
|
||
let $this=this;
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
success: (res) => {
|
||
uploadUtil.uploadFile(res.tempFilePaths[0]).then(rs=>{
|
||
if(rs.status==200){
|
||
$this.editorCtx.insertImage({
|
||
src: rs.result.httpPath,
|
||
alt: '图像',
|
||
success: function() {
|
||
//console.log('insert image success')
|
||
$this.editorCtx.scrollIntoView();
|
||
}
|
||
})
|
||
}
|
||
});
|
||
|
||
}
|
||
})
|
||
},
|
||
//删除图片
|
||
deletePic(event) {
|
||
this.fileList.splice(event.index, 1);
|
||
},
|
||
//新增图片
|
||
async afterRead(event) {
|
||
//当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||
//console.log(event.file);
|
||
uni.showLoading({
|
||
title: '正在上传'
|
||
})
|
||
uploadUtil.uploadFile(event.file.url).then(rs=>{
|
||
//console.log(rs);
|
||
this.coverImage=rs.result.httpPath;
|
||
this.article.coverurl=rs.result.filePath;
|
||
//this.fileList.push(rs.result.httpPath)
|
||
this.fileList.push({
|
||
status: 'success',
|
||
message: '已上传',
|
||
url:rs.result.httpPath
|
||
})
|
||
uni.hideLoading();
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.title-left{
|
||
font-size: 32upx;
|
||
color: #7F7F7F;
|
||
font-family: Source Han Sans CN;
|
||
line-height: 36rpx;
|
||
}
|
||
.title-con{
|
||
font-size: 36upx;
|
||
font-weight: 600;
|
||
color: #0D0D0D;
|
||
}
|
||
.title-right{
|
||
color: #588AFC;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
line-height: 36rpx;
|
||
}
|
||
.addbtn{
|
||
padding: 10upx 20upx;
|
||
background-color: #e8e8e8;
|
||
color: #595959;
|
||
border-radius: 20upx;
|
||
}
|
||
.Articleicon{
|
||
background-color: #fff;
|
||
}
|
||
.editor-btn{
|
||
padding: 6upx 12upx;
|
||
margin: 6upx;
|
||
color: #656565;
|
||
border-radius: 6upx;
|
||
image{
|
||
width: 35upx;
|
||
height: 35upx;
|
||
}
|
||
}
|
||
.editor-content{
|
||
min-height: 400upx;
|
||
}
|
||
.feed-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
.titlt-left{
|
||
color: #7F7F7F;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
line-height: 36rpx;
|
||
|
||
}
|
||
.title-right{
|
||
// position: absolute;
|
||
right: 18rpx;
|
||
color: #588AFC;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
.row-index{
|
||
display: flex;
|
||
margin-bottom: 25upx;
|
||
.row-input{
|
||
margin-left: 50rpx;
|
||
margin: 0 30rpx;
|
||
border-bottom: 1rpx solid #e2e2e2;
|
||
}
|
||
text{
|
||
color: #D2D2D2;
|
||
width: 25%;
|
||
line-height: 54rpx;
|
||
margin-left: 50rpx;
|
||
}
|
||
input{
|
||
flex: 1;
|
||
border: 1px solid #d2d2d2;
|
||
margin-right: 35rpx;
|
||
border-radius: 5rpx;
|
||
height: 54rpx;
|
||
}
|
||
}
|
||
.row-upload{
|
||
display: flex;
|
||
padding-bottom:20rpx ;
|
||
.upload-text{
|
||
padding: 0 20rpx;
|
||
color: #bdbdbd;
|
||
}
|
||
}
|
||
.u-border {
|
||
border: none;
|
||
}
|
||
.row {
|
||
margin-bottom: 25upx;
|
||
padding-bottom: 10rpx;
|
||
border-bottom: 1rpx solid #e2e2e2;
|
||
margin-left: 35rpx;
|
||
font-size: 30rpx;
|
||
input {
|
||
font-size: 42rpx;
|
||
border: 1px solid #000000;
|
||
}
|
||
.row-input{
|
||
// margin: 0rpx 35rpx;
|
||
font-size: 42rpx;
|
||
border: 1px solid #000000;
|
||
}
|
||
}
|
||
</style>
|