detection-business/pages/authority/editDete.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.value)">
		   					<view class="">{{item.label}}</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:[],
				value:[],
				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,value){
				this.category =value
				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>