Homestay_manage_app/pages/send/send.vue

<template>
	<view class="container">
		<!-- 页面标题区域 -->
		<view v-if="!headerType" class="header" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }">
			<img src="../../static/index/left2.png" :style="{ paddingTop: statusBarH * 2 + 'rpx' }" @click="handleBack" />
			<view class="header_text">发推文</view>
		</view>

		<view v-else class="header2" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }">
			<img src="../../static/index/left2.png" :style="{ paddingTop: statusBarH * 2 + 'rpx' }" @click="handleBack" />
			<view class="header_text">发推文</view>
		</view>

		<!-- 图片视频上传展示区域 -->
		<view class="upload" :style="{ paddingTop: statusBarH * 2 + customBarH * 2 + 'rpx' }">
			<view class="upload_img" @click="handleImage">
				<img src="../../static/index/upload-img.png" />
				添加图片
			</view>
			<view class="upload_video" @click="handleVideo">
				<img src="../../static/index/upload-video.png" />
				添加视频
			</view>
		</view>

		<!-- 标题输入区域 -->
		<view class="title">
			<input class="input" type="text" placeholder-style="color:#B3B3B3" placeholder="请输入标题" v-model="titleValue" />
		</view>

		<!-- 推文内容输入区域 -->
		<view class="content">
			<textarea class="textarea" placeholder-style="color:#B3B3B3" maxlength="3000" placeholder="请分享你的故事吧~" v-model="contentValue"></textarea>
			<!-- 内容长度 -->
			<view class="textarea_length">{{ contentValue.length }}/3000</view>
		</view>

		<!-- 添加地点区域 -->
		<view class="add_place" @click="handleGoPage('/pages/addPlace/addPlace')">
			<img class="img" src="../../static/index/send-address.png" />
			添加地点
			<img class="img2" src="../../static/index/send-right.png" />
		</view>

		<!-- 关联民宿区域 -->
		<view class="and">
			<img class="img" src="../../static/index/send-binding.png" />
			关联民宿
		</view>
		<!-- 关联民宿列表区域 -->
		<view class="and_list">
			<!-- 每一个民宿区域 -->
			<view class="and_box" :class="{ active: item.is_collect_hotel }" v-for="item in andList" :key="item.id" @click="handleChange(item)">{{ item.hotel_name }}</view>
		</view>

		<!-- 发布按钮区域 -->
		<view class="sub_btn" @click="handleClickSub">发布</view>

		<!-- 状态弹窗区域 -->
		<uni-popup ref="popup" :is-mask-click="false" type="center">
			<view class="popup_body">
				<img src="../../static/index/success.png" />
				<view class="msg">发布成功</view>
				<view class="btn" @click="handleClickLook">查看推文</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 顶部页面标题栏显示隐藏控制
			headerType: false,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 标题数据
			titleValue: '',
			// 推文内容区域
			contentValue: '',
			// activeIndex: null,
			// 关联民宿列表
			andList: []
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	onLoad() {
		uni.$on('add', this.add)
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.headerType = true
		} else {
			this.headerType = false
		}
	},
	methods: {
		// 切换关联民宿回调
		handleChange(item) {
			item.is_collect_hotel = !item.is_collect_hotel
			// this.activeIndex = index
		},
		// 点击添加图片回调
		handleImage() {
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				success: (res) => {
					console.log(res.tempFiles)
				}
			})
		},
		// 点击添加视频回调
		handleVideo() {
			uni.chooseMedia({
				count: 9,
				mediaType: ['video'],
				success: (res) => {
					console.log(res.tempFiles)
				}
			})
		},
		// 点击添加地点回调
		handleGoPage(url) {
			uni.navigateTo({
				url
			})
		},
		// 全局自定义事件
		add(e) {
			this.andList = e.list
		},
		// 点击发布按钮回调
		handleClickSub() {
			console.log(this.andList)
			let temList = this.andList.filter((ele) => ele.is_collect_hotel)
			console.log(temList)
			this.$refs.popup.open()
		},
		// 点击弹窗查看推文按钮回调
		handleClickLook() {
			this.$refs.popup.close()
		},
		handleBack() {
			uni.navigateBack(1)
		}
	}
}
</script>

<style lang="scss">
.container {
	padding-bottom: 80rpx;
	min-height: 100vh;
	background-color: #fff;

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		// position: relative;
		background-color: #fff;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 47rpx;
			height: 47rpx;
		}

		.header_text {
			font-size: 34rpx;
		}
	}

	.header2 {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		background-color: #fff;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 47rpx;
			height: 47rpx;
		}

		.header_text {
			font-size: 34rpx;
		}
	}

	.upload {
		margin-top: 30rpx;
		padding-bottom: 10rpx;
		display: flex;

		.upload_img {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: 20rpx;
			width: 186rpx;
			height: 283rpx;
			color: #999999;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #e6e6e6;

			img {
				margin-top: 10rpx;
				width: 68rpx;
				height: 68rpx;
			}
		}

		.upload_video {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: 26rpx;
			width: 186rpx;
			height: 283rpx;
			color: #999999;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #e6e6e6;

			img {
				margin-top: 12rpx;
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.title {
		margin: auto;
		width: 710rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #e5e5e5;

		.input {
			box-sizing: border-box;
			padding-right: 20rpx;
			width: 100%;
			height: 100%;
			font-size: 32rpx;
		}
	}

	.content {
		margin: auto;
		width: 710rpx;
		height: 290rpx;
		font-size: 28rpx;
		color: #b3b3b3;
		border-bottom: 1rpx solid #e5e5e5;

		.textarea {
			margin-top: 25rpx;
			width: 100%;
			height: 240rpx;
		}

		.textarea_length {
			margin-top: 5rpx;
			text-align: end;
		}
	}

	.add_place {
		display: flex;
		align-items: center;
		margin: auto;
		width: 710rpx;
		height: 100rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e5e5e5;

		.img {
			margin-right: 10rpx;
			width: 55rpx;
			height: 55rpx;
		}

		.img2 {
			margin-left: auto;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.and {
		display: flex;
		align-items: center;
		margin: auto;
		width: 710rpx;
		height: 88rpx;
		font-size: 28rpx;

		.img {
			margin-left: 10rpx;
			margin-right: 8rpx;
			width: 42rpx;
			height: 42rpx;
		}
	}

	.and_list {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 710rpx;

		.and_box {
			margin-bottom: 20rpx;
			margin-right: 16rpx;
			padding: 0 44rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 55rpx;
			color: #999999;
			font-size: 24rpx;
			border-radius: 66rpx;
			background-color: #f2f2f2;
		}

		.active {
			color: #fff;
			background-color: #096562;
		}
	}

	.sub_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 310rpx auto 0;
		width: 710rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 64rpx;
		background-color: #096562;
	}

	.popup_body {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 481rpx;
		height: 404rpx;
		border-radius: 23rpx;
		background-color: #fff;

		img {
			width: 112rpx;
			height: 112rpx;
		}

		.msg {
			color: #0f194d;
			font-size: 28rpx;
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 396rpx;
			height: 76rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 43rpx;
			background: linear-gradient(90deg, rgba(11, 193, 150, 1) 0%, rgba(9, 101, 98, 1) 100%);
		}
	}
}
</style>