safetyHome_wxapp/pages/circle/publish.vue

<!-- 发布邻里圈 -->
<template>
	<view class="">
		<view class="content">
			<view class="text">
				<textarea style="width: 100%;" :auto-height="true" placeholder="这一刻的想法" v-model="textarea" maxlength="300"></textarea>
			</view>
			<view class="imgBox">
				<view class="upImg" >
					<image :src="item" v-for="(item,index) in imgData" :key="index" @longpress="deleteImg(index)" @tap="prew(imgData,index)"  style="width:208rpx;height: 208rpx;margin-right: 10rpx;margin-bottom: 10rpx;"
					 v-show="imgData.length>0" ></image>
					<image src="../../static/circle_image@2x.png" style="width:208rpx;height: 208rpx;margin-bottom: 10rpx;" @tap="chooseImg" v-if="imgData.length<9"></image>
					<!-- <view style="font-size: 18rpx;line-height:114rpx;color: #999999;margin-left: 10rpx;" v-if="imgData.length>0">长按图片可以进行删除</view> -->
				</view>
				<!-- <view style="width: 208rpx;height: 208rpx;" @tap="chooseImg">
					<image src="../../static/circle_image@2x.png" style="width: 100%;height: 100%;"></image>
				</view> -->
			</view>
		</view>
		<view v-if="imgData.length>0 || textarea" @tap="push" class="btn active">发表</view>
		<view v-else @tap="push" class="btn">发表</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgData: [], //图片数据
				textarea: '', //文本数据
				num:9
			}
		},
		
		methods: {
		// 计算还能选择几张
		  formatNum(){
			this.num=9-this.imgData.length  
		  },
			// 预览图片
			prew(item,index){
				uni.previewImage({
				  current:item[index],
				 	urls:item,
				success:(res)=>{
				
				},
				})
			},
			// 长按图片删除
			deleteImg(index){
				 wx.showModal({
				   title: '提示',
				   content: '确定要删除此图片吗？',
				   success:  (res) =>{
				    if (res.confirm) {
				     this.imgData.splice(index, 1);
					 this.formatNum()
				    } else if (res.cancel) {
				      return false;    
				     }
				   }
				  })
			},
			// 发表
			push() {
				if (this.textarea || this.imgData.length>0) {
					let img = ''
					// 判断是否上传图片
					if (this.imgData.length > 0) {
						img = this.imgData.join()
					} else {
						img = ''
					}
					uni.showLoading({
						mask:true,
						title:'加载中'
					})
					this.http.httpRequest('/wxapplet/prop/comtycircle/add', 'post', {
						userId: uni.getStorageSync('userId'),
						content: this.textarea,
						photosUrlList: img,
						createBy: uni.getStorageSync('createBy'),
						comtyId:uni.getStorageSync('comtyId'),
					}, true).then((res) => {
						console.log(res)
						if (res.code == 0) {
							uni.hideLoading()
							uni.showToast({
								'icon':'success',
								title:'发表成功'
							})
							this.textarea=''
							this.imgData=[]
							setTimeout(()=>{
								uni.switchTab({
								url:'./circles'
								})
							},800)
								
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								'icon': 'none'
							})
						}
					}).catch(()=>{
						uni.hideLoading()
					})
				} else {
					return
				}
			},
			// 添加照片
			chooseImg() {
				// 判断当前选择图片是否大于九张
				if (this.imgData.length >= 9) {
					uni.showToast({
						"icon": 'none',
						title: '最多只能上传九张图片'
					})
					return
				}
				uni.chooseImage({
					count: this.num, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						var successUp = 0; //成功个数
						var failUp = 0; //失败个数
						var length = res.tempFilePaths.length; //总共个数
						var i = 0; //第几个
						this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
					}
				});
			},
			// 上传图片
			uploadDIY(filePaths, successUp, failUp, i, length) {
				uni.showLoading({
					mask:true,
					title:'上传中'
				})
				wx.uploadFile({
					filePath: filePaths[i],
					url: 'https://www.szdeao.com/wxapplet/upload/imgPhoto ', //仅为示例，非真实的接口地址
					name: 'photo',
					method: 'post',
					success: (resp) => {
						let data =JSON.parse(resp.data)
						if(data.code==0){
							let reg=/,$/gi;
							  let str=data.data.imagesPath.replace(reg,"");
							  if(this.imgData.length<9){
								  this.imgData.push(str)
								  this.formatNum()
								  uni.hideLoading()
								  setTimeout(()=>{
									  uni.showToast({
									  	title:'上传成功',
										'icon':'success'
									  })
								  },1000)
							  }
							successUp++;
						}else{
							uni.showToast({
								title:'上传失败,'+data.msg,
								'icon':'none'
							})
						}
						console.log(data)
					},
					fail: (res) => {
						console.log(res)
						failUp++;
					},
					complete: () => {
						i++;
						if (i == length) {
							
						} else { //递归调用uploadDIY函数
							this.uploadDIY(filePaths, successUp, failUp, i, length);
						}
					},
				});
			
			},
		}
	}
</script>

<style>
	.upImg {
		display: flex;
		flex-wrap: wrap;
	}

	.imgBox {
		width: 100%;
		margin-top: 30rpx;
		/* display: flex;
		flex-wrap: wrap; */
	}

	.content {
		width: 702rpx;
		margin: 0 auto;
		margin-top: 34rpx;
	}

	.text {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.btn {
		width: 702rpx;
		height: 90rpx;
		background: rgba(247, 247, 247, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		bottom: 56rpx;
		left: 26rpx;

	}

	.active {
		color: rgba(255, 255, 255, 1) !important;
		background: rgba(41, 138, 253, 1) !important;
	}
</style>