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 v-if="subImgList.length < maxImgCount && !subVideo" class="upload_img" @click="handleImage">
				<img src="../../static/index/upload-img.png" />
				添加图片
			</view>
			<view v-if="!subImgList.length && !subVideo" class="upload_video" @click="handleVideo">
				<img src="../../static/index/upload-video.png" />
				添加视频
			</view>

			<!-- 图片展示区域 -->
			<view class="upload_imgBox" v-for="(item, index) in subImgList" :key="index">
				<img mode="aspectFill" :src="item" @click="handleLookImg(subImgList, index)" />
				<view class="icon" @click="handleDelete(index)">
					<img src="../../static/index/close2.png" />
				</view>
			</view>

			<!-- 视频展示区域 -->
			<view v-if="subVideo" class="upload_VideoBox">
				<video
					id="myVideo"
					:show-fullscreen-btn="false"
					:show-play-btn="false"
					:src="subVideo"
					@fullscreenchange="fullscreenchange"
					@click="handleClickVideo('myVideo')"
				></video>
				<view class="icon" @click="handleDeleteVideo">
					<img src="../../static/index/close2.png" />
				</view>
			</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">
			<img class="img" src="../../static/index/send-address.png" />
			添加地点
			<img class="img2" src="../../static/index/send-right.png" />
		</view>

		<!-- 关联民宿区域 -->
		<view class="and" v-if="andList.length">
			<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>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas3"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
// 图片压缩方法
import getLessLimitSizeImage from '@/util/imageCompress.js'
export default {
	data() {
		return {
			// 顶部页面标题栏显示隐藏控制
			headerType: false,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 标题数据
			titleValue: '',
			// 推文内容区域
			contentValue: '',
			// activeIndex: null,
			// 关联民宿列表
			andList: [],
			// 上传的图片数据
			subImgList: [],
			// 最大上传图片张图
			maxImgCount: 9,
			// 上传的视频数据
			subVideo: '',
			// video 上下文 videoContext 对象
			videoContext: null,
			// 是否是全屏状态
			isFullScreen: false
		}
	},
	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
		},
		// 点击添加图片回调
		handleImage() {
			uni.chooseMedia({
				count: this.maxImgCount - this.subImgList.length,
				mediaType: ['image'],
				sizeType: ['compressed'],
				success: (res) => {
					res.tempFiles.forEach((ele) => {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas3'
						//原图的路径
						let imagePath = ele.tempFilePath
						//大小限制1024kb
						let limitSize = 1024 * 3
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						// 图片过大压缩
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
							this.handleUploadMini(resPath, 1)
						})
					})
				}
			})
		},
		// 点击添加视频回调
		handleVideo() {
			uni.chooseMedia({
				count: 1,
				mediaType: ['video'],
				success: (res) => {
					res.tempFiles.forEach((ele) => {
						if (ele.size > 1024 * 1024 * 5) {
							// 视频过大压缩
							uni.compressVideo({
								src: ele.tempFilePath,
								quality: 'low',
								success: (res) => {
									// console.log('压缩后', res)
									this.handleUploadMini(res.tempFilePath, 2)
								},
								fail: (err) => {
									// console.log(err)
									uni.showToast(
										{
											title: '视频压缩失败',
											icon: 'none'
										},
										2000
									)
								}
							})
						} else {
							this.handleUploadMini(ele.tempFilePath, 2)
						}
					})
				}
			})
		},
		// 上传请求
		handleUploadMini(ele, type) {
			// 开始上传
			uni.showLoading({
				title: '上传中'
			})
			uni.uploadFile({
				url: `https://chtech.ncjti.edu.cn/homestay/file/cos/upload`,
				filePath: ele,
				name: 'files',
				success: (uploadFileRes) => {
					// console.log(JSON.parse(uploadFileRes.data))
					let temRes = JSON.parse(uploadFileRes.data)
					if (temRes.code === 200 || temRes.code === 1) {
						if (type === 1) {
							this.subImgList.push(temRes.data)
						} else if (type === 2) {
							this.subVideo = temRes.data
						}

						// console.log(this.subImgList)
						// console.log(this.subVideo)
					} else {
						uni.showToast({
							title: temRes.message || '上传失败',
							icon: 'none'
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '上传失败',
						icon: 'error'
					})
				},
				complete: (res) => {
					uni.hideLoading({
						complete: (hide) => {}
					})
				}
			})
		},
		// 删除图片回调
		handleDelete(index) {
			this.subImgList.splice(index, 1)
		},
		// 删除视频回调
		handleDeleteVideo() {
			this.subVideo = ''
		},
		// 进入全屏和退出全屏时触发的回调
		fullscreenchange(e) {
			this.isFullScreen = e.detail.fullScreen
		},
		// 点击视频控件时触发的回调
		handleClickVideo(id) {
			this.videoContext = uni.createVideoContext(id)
			if (this.isFullScreen) {
				this.videoContext.stop()
				this.videoContext.exitFullScreen()
			} else {
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			}
		},
		// 点击添加地点回调
		handleGoPage() {
			this.andList = this.andList.filter((ele) => ele.is_collect_hotel)
			const list = JSON.stringify(this.andList)
			uni.navigateTo({
				url: `/pages/addPlace/addPlace?list=${list}`
			})
		},
		// 全局自定义事件
		add(e) {
			this.andList = e.list
		},
		// 点击发布按钮回调
		handleClickSub() {
			if (!this.subImgList.length && !this.subVideo) {
				uni.showToast({
					title: '请上传图片或者视频',
					icon: 'none',
					mask: true
				})
				return
			}

			if (!this.titleValue) {
				uni.showToast({
					title: '请输入标题',
					icon: 'none',
					mask: true
				})
				return
			}
			if (!this.contentValue) {
				uni.showToast({
					title: '请分享你的故事吧~',
					icon: 'none',
					mask: true
				})
				return
			}
			let temList = this.andList.filter((ele) => ele.is_collect_hotel)
			console.log(temList)
			console.log(this.subImgList)
			console.log(this.subVideo)
			console.log(this.titleValue)
			console.log(this.contentValue)
			this.$refs.popup.open()
		},
		// 点击弹窗查看推文按钮回调
		handleClickLook() {
			this.$refs.popup.close()
		},
		// 点击图片回调
		handleLookImg(urls, current) {
			uni.previewImage({
				urls,
				current
			})
		},
		handleBack() {
			uni.navigateBack(1)
		}
	}
}
</script>

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

	.header {
		z-index: 1;
		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 {
		z-index: 1;
		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;
		flex-wrap: wrap;

		.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;
			}
		}

		.upload_imgBox {
			position: relative;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			width: 186rpx;
			height: 283rpx;

			img {
				width: 100%;
				height: 100%;
			}

			.icon {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rpx;
				height: 30rpx;
				border-radius: 7rpx;
				background-color: rgba(000, 000, 000, 0.5);

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

		.upload_VideoBox {
			position: relative;
			margin-left: 20rpx;
			width: 186rpx;
			height: 283rpx;

			video {
				width: 100%;
				height: 100%;
			}

			.icon {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rpx;
				height: 30rpx;
				border-radius: 7rpx;
				background-color: rgba(000, 000, 000, 0.5);

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

	.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;
		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>