xiangqin/pages/forum/publish.vue

<template>
	<view>
		<view class="textBox">
			<textarea name="" v-model="content" maxlength="100" id="" cols="30" rows="10" placeholder="用照片展示自我，分享生活，会获得更多的关注"></textarea>
			<view class="upload">
							<u-upload :fileList="fileList1" :accept="accept" @afterRead="afterRead" @delete="deletePic" name="1" :multiple='false'
								:maxCount="num">
								<image src="../../static/forum/add.png" 
									mode="widthFix" style="width: 160rpx;height:160rpx;"></image>
								</u-upload>
						</view>
		</view>
		<!-- <view class="publish">
			<image src="../../static/forum/publish.png" mode=""></image>
			发布动态
		</view> -->
		<view class="publish select"  @click="publish">
			<image src="../../static/forum/publish.png" mode=""></image>
			发布动态
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if(option.item){
				this.item=JSON.parse(option.item)
				if(this.item.show_images.length!=0){
					this.item.show_images.forEach(it=>{
						this.fileList1.push({url:it})
					})
				}
				
				this.content=this.item.content
				if(this.item.suffix=='mp4'){
					this.num=1
				}else{
					this.accept='image'
				}
			}
		},
		data() {
			return {
				item:'',
				fileList1:[],
				content:'',
				num:9,
				accept:'media'
			}
		},
		methods: {
			publish(){
				if(!this.content&&this.fileList1.length==0){
					this.$u.toast('暂无要发布的内容')
					return
				}else{
					var arr=[]
					this.fileList1.forEach(item=>{
						arr.push(item.url)
					})
					if(this.item){
						uni.$u.http.post('/api/user/editdynamic',{image:arr.toString(),content:this.content,id:this.item?this.item.id:''}).then(res => {
							if(res.code==1){
								this.$u.toast(res.msg)
								this.content=''
								this.fileList1=[]
							}
						})
					}else{
						uni.$u.http.post('/api/forum/releaseforum',{image:arr.toString(),content:this.content}).then(res => {
							if(res.code==1){
								this.$u.toast(res.msg)
								this.content=''
								this.fileList1=[]
							}
						})
					}
					
				}
			},
			// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							console.log(event)
							// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
							if(event.file.type&&event.file.type=='video'){
								this.num=1
							}else{
								this.accept='image'
							}
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							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) {
							return new Promise((resolve, reject) => {
								let a = uni.uploadFile({
									url: this.$url+'/api/Publics/uploadLocality', // 仅为示例，非真实的接口地址
									filePath: url,
									name: 'file',
									success: (res) => {
										setTimeout(() => {
											resolve(JSON.parse(res.data).data.url)
										}, 1000)
									}
								});
							})
						},
		}
	}
</script>

<style lang="scss">
.textBox{
	padding: 0 20rpx;
	textarea{
		width: 100%;
		height: 200rpx;
	}
}
.publish{
	position: fixed;
	bottom: 84rpx;
	left: 50rpx;
	right: 50rpx;
	margin: 0 auto;
	width: 650rpx;
	height: 104rpx;
	line-height: 104rpx;
	text-align: center;
	background: #D8D8D8;
	border-radius: 52rpx;
	font-size: 36rpx;
	color: #fff;
	image{
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 5rpx;
		vertical-align: middle;
	}
}
.select{
	background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
}
</style>