discounts-minapp/study/publish.vue

<template>
	<view class="publish">
		<textarea class="content" :value="content" placeholder="请输入内容" />
		<view class="img-list">
			<view class="img-box" v-for="(item,index) in imgList" @click="handleImage(index)" :key="index">
				<image class="img" :src="item" mode=""></image>
				<view class="del-btn" @click.stop="del(index)">
					<u-icon name="close" color="#fff" size="28"></u-icon>
				</view>
			</view>
			<view class="add-image" @click="chooseImage">
				<u-icon name="plus" color="#999" size="58"></u-icon>
			</view>
		</view>
		<button class="publish-btn" type="default" @click="publish">发布</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				imgList:[]
			}
		},
		methods: {
			handleImage(current){
				uni.previewImage({
					current,
					urls:this.imgList,
					indicator:'number'
				})
			},
			del(index){
				this.imgList.splice(index,1)
			},
			publish() {
				uni.navigateTo({
					url:'./community'
				})
			},
			chooseImage(){
				let that = this
				uni.chooseImage({
					success(res){
						that.imgList = that.imgList.concat(res.tempFilePaths).slice(0,9)
						console.log(that.imgList);
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.publish{
	padding: 30rpx;
	.content{
		width: 100%;
		padding: 30rpx;
		height: 308rpx;
		box-sizing: border-box;
		background: #F9F9F9;
		border-radius: 16rpx;
	}
	.img-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
			
		.img-box{
			width: 212rpx;
			height: 212rpx;
			border-radius: 16rpx;
			margin: 0 16rpx 20rpx 0;
			position: relative;
			.img{
				width: 212rpx;
				height: 212rpx;
				border-radius: 16rpx;
			}
			.del-btn{
				position: absolute;
				top: 0%;
				right: 0;
				transform: translate(50%,-50%);
				background: rgba(0,0,0,0.6);
				border-radius: 50%;
			}
		}
		.add-image{
			width: 212rpx;
			height: 212rpx;
			background: #F9F9F9;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.publish-btn{
		width: 560rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		background: linear-gradient(270deg, #3074F8 0%, #568FFF 100%);
		box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
		color: #fff;
		font-size: 32rpx;
		margin-top: 300rpx;
	}
}
</style>