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"></textarea>
			</view>
			<view class="imgBox">
				<view class="upImg">
					<image :src="item" v-for="(item,index) in imgData" :key="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"></image>
				</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 class="btn" :class="{active:textarea}" @tap="push">发表</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgData:[],//图片数据
				textarea:'',//文本数据
			}
		},
		methods:{
			// 发表
			push(){
				if(this.name){
					
				}else{
					return
				}
			},
			// 添加照片
			chooseImg(){
				// 判断当前选择图片是否大于九张
				if(this.imgData.length>9){
					uni.showToast({
						"icon":'none',
						title:'最多只能上传九张图片'
					})
					return
				}
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=>{
						 res.tempFiles.forEach((item)=>{
							 this.imgData.push(item.path)
							 
						 })
					}
				});
			}
				
		}
	}
</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);
		background:rgba(41,138,253,1);
	}
</style>