Homestay_manage_app/pages/myHome/myHome.vue

<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="title" :style="{ height: customBarH * 2 + 'rpx', top: statusBarH * 2 + 'rpx' }" v-if="!headerType">个人主页</view>

		<view class="title_icon" :style="{ height: customBarH * 2 + 'rpx', top: statusBarH * 2 + 'rpx' }" v-if="!headerType" @click="handleBack">
			<img src="../../static/index/left.png" />
		</view>

		<view class="title" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx', backgroundColor: '#fff', color: '#000' }" v-if="headerType">
			个人主页
		</view>

		<view class="title_icon" :style="{ height: customBarH * 2 + 'rpx', top: statusBarH * 2 + 'rpx' }" v-if="headerType" @click="handleBack">
			<img src="../../static/index/left2.png" />
		</view>

		<!-- 顶部用户信息区域 -->
		<view class="header">
			<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/18.png" />
			<!-- 头像区域 -->
			<img class="img" mode="aspectFill" :src="userInfo.headPhoto || '../../static/my/portrait.png'" />
			<!-- 姓名区域 -->
			<view class="name">{{ userInfo.user_name }}</view>
			<!-- 用户id区域 -->
			<view class="number">ID：{{ userInfo.id }}</view>
			<!-- 简介区域 -->
			<view class="desc" v-if="!showInput" @click="showInput = true">点击这里，填写简介</view>
			<view class="desc_input" v-else>
				<input type="text" auto-focus placeholder-style="color:#ccc" placeholder="请输入简介" @blur="handleBlur" @confirm="handleClickDesc" />
			</view>
			<!-- 粉丝 关注 获赞 区域 -->
			<view class="info">
				<!-- 粉丝区域 -->
				<view class="info_box">
					<view class="box_num">17</view>
					<view class="box_key">粉丝</view>
				</view>
				<!-- 关注区域 -->
				<view class="info_box">
					<view class="box_num">18</view>
					<view class="box_key">关注</view>
				</view>
				<!-- 获赞区域 -->
				<view class="info_box">
					<view class="box_num">12</view>
					<view class="box_key">获赞</view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="body">
			<!-- 分段器区域 -->
			<view class="control">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#096562" @clickItem="onClickItem" />
			</view>

			<!-- 推文列表区域 -->
			<view class="list">
				<!-- 每一个推文区域 -->
				<view class="item_box" v-for="item in list" :key="item.id">
					<!-- 视频推文 -->
					<view class="box_video" v-if="item.type === 'video'">
						<!-- :show-play-btn="false" -->
						<video
							:id="'id' + item.id"
							:show-fullscreen-btn="false"
							:direction="0"
							:src="item.url"
							@fullscreenchange="fullscreenchange"
							@click="handleClickVideo('id' + item.id)"
						></video>
					</view>

					<!-- 图片推文 -->
					<view class="box_image" v-if="item.type === 'image'">
						<view class="image_box" v-for="(ele, index) in item.url" :key="index">
							<img mode="acpectFill" :src="ele" />
						</view>
					</view>
					<!-- 标题区域 -->
					<view class="box_title">{{ item.title }}</view>
					<view class="box_info">
						<view class="info_time">{{ item.time }}</view>
						<view class="info_town">{{ item.town }}</view>
						<img class="img" src="../../static/index/upvote.png" />
						<view class="info_like">{{ item.like }}</view>
						<img class="img2" src="../../static/index/comment.png" />

						<view class="info_comment">{{ item.comment }}</view>

						<!-- 审核中印章区域 -->
						<img v-if="current === 1" class="box_audit" src="../../static/index/audit.png" />
						<!-- 已驳回印章区域 -->
						<img v-if="current === 2" class="box_rejected" src="../../static/index/rejected.png" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 用户信息
			userInfo: {},
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 顶部页面标题栏显示隐藏控制
			headerType: false,
			// 简介输入框显示隐藏控制
			showInput: false,
			current: 0,
			items: ['全部推文', '审核中', '驳回'],
			list: [
				{
					id: 1,
					title: '靖安最美的景色，绝对值得来',
					time: '09-20',
					town: '双溪镇',
					like: 99,
					comment: 24,
					type: 'image',
					url: [
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
						'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg'
					]
				},
				{
					id: 2,
					title: '靖安最美的景色，绝对值得来',
					time: '09-20',
					town: '双溪镇',
					like: 66,
					comment: 26,
					type: 'video',
					url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230927113127_ytGv5IurFspj2d102676797c75b76ac4d13238401c8f.mp4'
				},
				{
					id: 3,
					title: '靖安最美的景色，绝对值得来',
					time: '09-20',
					town: '双溪镇',
					like: 66,
					comment: 26,
					type: 'video',
					url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230927113127_ytGv5IurFspj2d102676797c75b76ac4d13238401c8f.mp4'
				},
				{
					id: 4,
					title: '靖安最美的景色，绝对值得来',
					time: '09-20',
					town: '双溪镇',
					like: 99,
					comment: 24,
					type: 'image',
					url: ['https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg']
				}
			],
			// 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
			}
		})
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.headerType = true
		} else {
			this.headerType = false
		}
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo')
	},
	methods: {
		// 进入全屏和退出全屏时触发的回调
		fullscreenchange(e) {
			this.isFullScreen = e.detail.fullScreen
		},
		// 点击视频控件时触发的回调
		handleClickVideo(id) {
			this.videoContext = uni.createVideoContext(id)
			if (this.isFullScreen) {
				this.videoContext.pause()
				this.videoContext.exitFullScreen()
			} else {
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			}
		},
		handleBack() {
			uni.navigateBack(1)
		},
		handleClickDesc(e) {
			console.log(e.detail)
			this.showInput = false
		},
		handleBlur() {
			this.showInput = false
		},
		onClickItem(e) {
			this.current = e.currentIndex
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	min-height: 100vh;

	.title {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.title_icon {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 10rpx;
		right: 0;

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

	.header {
		position: relative;
		height: 510rpx;
		color: #fff;
		overflow: hidden;

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

		.img {
			position: absolute;
			top: 190rpx;
			left: 32rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}

		.name {
			position: absolute;
			top: 200rpx;
			left: 202rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.number {
			position: absolute;
			top: 265rpx;
			left: 202rpx;
			font-size: 24rpx;
			opacity: 0.5;
		}

		.desc {
			position: absolute;
			top: 350rpx;
			left: 32rpx;
			font-size: 28rpx;
			color: #fff;
		}

		.desc_input {
			position: absolute;
			top: 350rpx;
			left: 32rpx;
			width: 300rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			border-radius: 15rpx;
			border: 1rpx solid #fff;

			input {
				box-sizing: border-box;
				padding: 0 10rpx;
				width: 100%;
				height: 100%;
			}
		}

		.info {
			position: absolute;
			top: 410rpx;
			left: 0rpx;
			display: flex;
			font-size: 28rpx;
			color: #fff;

			.info_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20rpx 0 35rpx;

				.box_num {
				}
				.box_key {
				}
			}
		}
	}

	.body {
		position: absolute;
		top: 510rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: calc(100vh - 510rpx);
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f7f7f7;

		.control {
			padding: 0 100rpx;
			height: 95rpx;
			background-color: #fff;
		}

		.list {
			padding: 20rpx 30rpx;

			.item_box {
				margin-bottom: 22rpx;
				padding-bottom: 30rpx;
				width: 690rpx;
				border-radius: 12rpx;
				border-bottom: 1rpx solid #e6e6e6;
				background-color: #fff;

				.box_video {
					height: 335rpx;
					border-radius: 12rpx;
					background-color: skyblue;

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

				.box_image {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-auto-rows: auto;
					gap: 20rpx;

					.image_box {
						width: 216rpx;
						height: 126rpx;

						img {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}
				}

				.box_title {
					padding: 10rpx 25rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.box_info {
					position: relative;
					display: flex;
					align-items: center;
					padding-left: 25rpx;
					color: #999999;
					font-size: 24rpx;

					.info_time {
					}
					.info_town {
						margin-left: 15rpx;
					}

					.img {
						margin-left: auto;
						width: 28rpx;
						height: 28rpx;
					}

					.info_like {
						margin-left: 10rpx;
					}
					.img2 {
						margin-left: 15rpx;
						width: 25rpx;
						height: 25rpx;
					}
					.info_comment {
						margin: 0 10rpx;
					}

					.box_audit {
						position: absolute;
						top: -45rpx;
						left: 410rpx;
						width: 100rpx;
						height: 100rpx;
					}

					.box_rejected {
						position: absolute;
						top: -45rpx;
						left: 410rpx;
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}
	}
}
</style>