478 lines
11 KiB
Vue
478 lines
11 KiB
Vue
<!-- 编辑文章 -->
|
|
<template>
|
|
<view class="content">
|
|
<view class="c-top">
|
|
<view class="" @click="getback()">
|
|
<uni-icons type="left" size="18"></uni-icons>
|
|
</view>
|
|
<view class="c-title">编辑</view>
|
|
<view class=""></view>
|
|
</view>
|
|
<view class="dil">
|
|
|
|
<!-- 填空 -->
|
|
<view class="tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 标题</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请输入标题" v-model="newsTitle">
|
|
</view>
|
|
</view>
|
|
<!-- 填空 -->
|
|
<!-- <view class="tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 发布单位</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请发布单位 "v-model="publishUnit" >
|
|
</view>
|
|
</view> -->
|
|
<view class="tinput">
|
|
<view class="text1"> <text class="hong1">*</text> 封面图</view>
|
|
<view class="you">
|
|
<!-- <input type="text" placeholder="请上传封面图片"> -->
|
|
<text>请上传封面图片</text>
|
|
</view>
|
|
</view>
|
|
<!-- 上传图片 -->
|
|
<u-upload
|
|
:fileList="fileList1"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
name="1"
|
|
multiple
|
|
:previewFullImage="true"
|
|
:maxCount="1"
|
|
></u-upload>
|
|
|
|
<view class="xinput">
|
|
<view class="text1"> <text class="hong1">*</text> 内容</view>
|
|
<!-- <u--textarea v-model="newsContent" placeholder="请输入内容" autoHeight ></u--textarea> -->
|
|
<Rboy-editor ref="RboyEditor" @uploadFile="uploadFile" :count="6"></Rboy-editor>
|
|
</view>
|
|
<view class="xinput" v-if="category ">
|
|
<view class="text1"> <text class="hong1">*</text> 分类</view>
|
|
<view class="xz">
|
|
<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in taplist" :key="index" @click="getzhi2(index,item.dictValue)">
|
|
<view class="">{{item.dictLabel}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tinput">
|
|
<view class="text1"> 上传视频</view>
|
|
<view class="you">
|
|
<!-- <input type="text" placeholder="请上传视频"> -->
|
|
<text>请上传视频</text>
|
|
</view>
|
|
</view>
|
|
<!-- 上传视频 -->
|
|
<!-- <view class="videobox" v-if="videoList != [] ">
|
|
<video :src="videoList[0].url" controls></video>
|
|
<view style="color: crimson;" @click="detevideo()">点击删除</view>
|
|
</view> -->
|
|
<view class="" v-if="videoList == [] ">
|
|
<u-upload
|
|
:fileList="fileList2"
|
|
@afterRead="afterRead1"
|
|
@delete="deletePic1"
|
|
name="2"
|
|
multiple
|
|
:maxCount="1"
|
|
accept="video"
|
|
:previewFullImage="true"
|
|
></u-upload>
|
|
</view>
|
|
<view class="anniu" @click="getnewsadd()">
|
|
<text>修改文章</text>
|
|
</view>
|
|
<view style="width: 100%; height: 60px;"></view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import RboyEditor from "@/components/Rboy-editor/Rboy-editor"
|
|
import request from '../../utils/request'
|
|
import config from '@/config'
|
|
import upload from '@/utils/upload.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
baseUrl :"",
|
|
|
|
obj:{},
|
|
fileList1: [],
|
|
fileList2: [],
|
|
videoList:[],
|
|
taplist:[],
|
|
dictValue:[],
|
|
category:'',
|
|
newsCover:'',
|
|
videoUrl:'',
|
|
newsTitle:'',
|
|
publishUnit:'',
|
|
newsContent:'',
|
|
type:'',
|
|
id:1,
|
|
carzhi:0,
|
|
maneizhi:0,
|
|
manei:[
|
|
{text:'行业公告'},
|
|
],
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.type = option.type
|
|
|
|
},
|
|
mounted() {
|
|
this.gettap()
|
|
this.baseUrl = this.$baseUrl
|
|
console.log('????????',this.$baseUrl);
|
|
this.postedit()
|
|
},
|
|
components:{
|
|
RboyEditor
|
|
},
|
|
methods:{
|
|
// 上传图片
|
|
async uploadFile(event) {
|
|
let that = this
|
|
console.log(event);
|
|
// event 选择的图片
|
|
for (var item in event.tempFilePaths) {
|
|
// uploadFileApi 为上传到服务端的接口 count大于1 使用 await
|
|
upload({
|
|
url:'/common/upload',
|
|
filePath: event.tempFilePaths[item],
|
|
}).then((res)=>{
|
|
console.log(res)
|
|
that.$refs.RboyEditor.editor_insertImage({
|
|
src: this.baseUrl + res.fileName,
|
|
alt: "图像",
|
|
})
|
|
})
|
|
}
|
|
},
|
|
async gettap(){
|
|
//行业公告分类
|
|
let ress = await request({
|
|
url: '/appInspection/news/editType',
|
|
method: 'get',
|
|
})
|
|
console.log(ress);
|
|
this.taplist = ress.data
|
|
},
|
|
async postedit(){
|
|
let that =this
|
|
let res = await request({
|
|
url: '/appInspection/news/getDetail?newsId='+this.id,
|
|
method: 'get',
|
|
})
|
|
this.obj = res
|
|
console.log('显',res.data.newsContent);
|
|
this.newsTitle = res.data.newsTitle,
|
|
this.newsCover= res.data.newsCover,
|
|
this.publishUnit= res.data.publishUnit
|
|
this.newsContent = res.data.newsContent,
|
|
this.videoUrl = res.data.videoUrl,
|
|
this.category = res.data.category,
|
|
this.$refs.RboyEditor.editor_setContentsNew( res.data.newsContent)
|
|
// this.type = res.type
|
|
this.fileList1.push(
|
|
{
|
|
url:this.baseUrl + res.data.newsCover
|
|
}
|
|
)
|
|
if(res.data.videoUrl != null){
|
|
console.log('走这',this.videoList);
|
|
this.videoList.push({
|
|
url:this.baseUrl + res.data.videoUrl
|
|
})
|
|
}else{
|
|
this.videoList = ""
|
|
}
|
|
|
|
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
console.log(url);
|
|
upload({
|
|
url:'/common/upload',
|
|
filePath: url,
|
|
}).then((res)=>{
|
|
this.newsCover = res.fileName
|
|
console.log(res);
|
|
})
|
|
|
|
},
|
|
deletePic1(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead1(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise1(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise1(url) {
|
|
console.log(url);
|
|
upload({
|
|
url:'/common/upload',
|
|
filePath: url,
|
|
}).then((res)=>{
|
|
this.videoUrl = res.fileName
|
|
console.log(this.videoUrl);
|
|
this.videoList.push({
|
|
url:this.$baseUrl + this.videoUrl
|
|
})
|
|
})
|
|
|
|
},
|
|
//发布按钮
|
|
async getnewsadd(){
|
|
this.newsContent = await this.$refs.RboyEditor.editor_getcontents()
|
|
if(this.newsTitle==''||this.newsCover==''||this.newsContent==''){
|
|
uni.showToast({
|
|
title:'必填项不能有空！',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
let data={
|
|
id:this.id,
|
|
newsTitle:this.newsTitle,
|
|
newsCover:this.newsCover,
|
|
publishUnit:this.publishUnit,
|
|
newsContent:this.newsContent,
|
|
videoUrl:this.videoUrl,
|
|
category:this.category,
|
|
type:this.type,
|
|
}
|
|
let res = await request({
|
|
url: '/appInspection/news/edit',
|
|
method: 'post',
|
|
data:data
|
|
})
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title:'修改成功'
|
|
})
|
|
}
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
getback(){
|
|
uni.navigateBack({
|
|
delta:1,
|
|
})
|
|
},
|
|
detevideo(){
|
|
this.fileList2 = ""
|
|
this.videoList = ''
|
|
this.videoUrl = ''
|
|
console.log(this.fileList2,this.videoList);
|
|
},
|
|
getzhi(index){
|
|
this.carzhi = index
|
|
},
|
|
getzhi2(index,dictValue){
|
|
this.category =dictValue
|
|
this.maneizhi = index
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content{
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
padding-top: 45px;
|
|
}
|
|
|
|
.dil{
|
|
box-sizing: border-box;
|
|
background-color: #F6F6F6;
|
|
padding: 0px 12px;
|
|
|
|
}
|
|
.top-icon{
|
|
margin-bottom: 45px;
|
|
}
|
|
.c-top{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: white;
|
|
}
|
|
.c-title{
|
|
font-size: 18px;
|
|
font-weight: bold
|
|
}
|
|
.top{
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
.top-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 20px 0px;
|
|
}
|
|
.tb-left{
|
|
height: 100%;
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.uicon{
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
background: orangered;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 6px;
|
|
}
|
|
.tb-right{
|
|
width: 20px;
|
|
height: 26px;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text1{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #363636;
|
|
}
|
|
.hong1{
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #FF5453;
|
|
}
|
|
.hong2{
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
|
|
}
|
|
.tinput{
|
|
width: 100%;
|
|
display: flex;
|
|
background: white;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.xinput{
|
|
width: 100%;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
.you{
|
|
text-align: right;
|
|
}
|
|
.xz{
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.kuang{
|
|
width: 70px;
|
|
height: 23px;
|
|
background: #ECECEC;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #666666;
|
|
font-size: 14px;
|
|
margin-right: 15px;
|
|
}
|
|
.xlan{
|
|
background: #CDE7FF !important;
|
|
color: #1D62FF !important;
|
|
border: 1px solid #2A96FE;
|
|
}
|
|
.anniu{
|
|
width: 100%;
|
|
background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
|
|
border-radius: 50px ;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #542F0E;
|
|
margin-top: 20px;
|
|
color: white;
|
|
}
|
|
</style> |