lcoco/pages/circle/publishCircle.vue

<template>
	<view class="publish-circle-box flex-common-css">
		<Nav :titleColor="'#000'" :title="''" :rightShow="true" :rightType="2">
			<template slot="right">
				<view @click="publishBut" class="nav-right sys-background-black sys-radius-8">
					<view class="publish sys-color-white sys-weight-500 sys-size-28">
						发布
					</view>
					<uni-icons class="publish-icons" type="paperplane-filled" size="20" color="#fff"></uni-icons>
				</view>
			</template>
		</Nav>
		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
			<textarea @input="bindTextAreaBlur" auto-height placeholder="这一刻的想法..." />
			<view class="publish-img-box">
				<view class="publish-img" v-for="item in 5">
					<image class="img sys-radius-16" src="../../static/img/login/2.jpg" mode=""></image>
					<view class="delete sys-radius-round sys-background-transparent" @click="deleteImg">
						<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
					</view>
				</view>
				<view @click="addImg" class="add-img sys-radius-16 sys-background-F1">
					<image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
				</view>
			</view>
			<view class="tag-box">
				<view class="tag sys-radius-200" v-for="(item,index) in 3">
				<uni-icons type="location-filled" size="12" color="#2F80ED"></uni-icons>
				<view class="tag-name sys-color-2F80ED sys-size-24">
					重庆渝北区
				</view>
					<uni-icons @click="deleteTag" type="closeempty" size="14" color="#2F80ED"></uni-icons>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				publishContent: '',
			};
		},
		mounted() {},
		methods: {
			scroll() {},
			scrolltolower() {},
			bindTextAreaBlur(e) {
				this.publishContent = e.detail.value
				console.log(e.detail.value)
			},
			publishBut(){
				//发布
			},
			deleteImg(){
				// 删除图片
			},
			addImg(){
				//添加图片
			},
			deleteTag(){
				//删除标签
			},
		},
	}
</script>

<style lang="scss" scoped>
	.publish-circle-box {
		.nav-right {
			padding: 8rpx 18rpx 8rpx 16rpx;
			display: flex;
			align-items: center;

			.publish-icons {
				margin: 0 0 0 4rpx;
			}
		}

		.list-scroll {
			width: 100%;
			flex: 1;
			overflow: auto;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.publish-img-box {
				padding: 160rpx 0 20rpx 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.publish-img {
					width: 220rpx;
					height: 220rpx;
					margin: 0 12rpx 12rpx 0;
					position: relative;

					.img {
						width: 100%;
						height: 100%;
						display: block;
					}

					.delete {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						width: 44rpx;
						height: 44rpx;
						border: 1rpx solid rgba(255, 255, 255, 0.7);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.add-img {
					width: 220rpx;
					height: 220rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.circle-add-img {
						width: 56rpx;
						height: 50rpx;
					}
				}
			}

			.tag-box {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.tag {
					display: flex;
					align-items: center;
					padding: 12rpx 16rpx 10rpx;
					background: rgba(47, 128, 237, 0.1);
					margin: 0 12rpx 12rpx 0;
					.tag-name{
						margin: 0 28rpx 0 12rpx;
					}
				}
			}
		}
	}
</style>