Homestay_manage_app/pagesSub/myHome/myHome.vue

<template>
	<view class="container" v-if="userInfo !== null">
		<!-- 页面标题 -->
		<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://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240523163442_12.png" />
			<!-- 头像区域 -->
			<img class="img" mode="aspectFill" :src="userInfo.image || '../../static/my/portrait.png'" />
			<!-- 姓名区域 -->
			<view class="name">{{ userInfo.userName }}</view>
			<view class="follow" v-if="userInfo.isFollow !== 2" @click="handleFollow">{{ info.isFollow === 0 ? '关注' : '已关注' }}</view>
			<!-- 用户id区域 -->
			<view class="number">ID：{{ userInfo.id }}</view>
			<!-- 简介区域 -->
			<view class="desc" v-if="!showInput" @click="handleClickInput">{{ userInfo.descript }}</view>
			<view class="desc_input" v-else>
				<input type="text" confirm-type="done" auto-focus placeholder-style="color:#ccc" placeholder="请输入简介" @blur="handleBlur" @confirm="handleClickDesc" />
			</view>
			<!-- 粉丝 关注 获赞 区域 -->
			<view class="info">
				<!-- 粉丝区域 -->
				<view class="info_box">
					<view class="box_num">{{ userInfo.fansNum }}</view>
					<view class="box_key">粉丝</view>
				</view>
				<!-- 关注区域 -->
				<view class="info_box">
					<view class="box_num">{{ userInfo.followNum }}</view>
					<view class="box_key">关注</view>
				</view>
				<!-- 获赞区域 -->
				<view class="info_box">
					<view class="box_num">{{ userInfo.likeNum }}</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" v-if="list.length">
				<!-- 每一个推文区域 -->
				<view class="item_box" v-for="item in list" :key="item.id" @click="handleGoDetail(item)">
					<!-- 视频推文 -->
					<view class="box_video" v-if="item.video">
						<!-- :show-play-btn="false" -->
						<video
							:id="'id' + item.id"
							:show-fullscreen-btn="false"
							:direction="0"
							:src="item.video"
							@fullscreenchange="fullscreenchange"
							@click.stop="handleClickVideo('id' + item.id)"
						></video>
					</view>

					<!-- 图片推文 -->
					<view class="box_image" v-if="item.images">
						<view class="image_box" v-for="(ele, index) in item.images" :key="index">
							<img mode="aspectFill" :src="ele" @click.stop="handleLookImg(item.images, index)" />
						</view>
					</view>
					<!-- 标题区域 -->
					<view class="box_title">{{ item.title }}</view>
					<view class="box_info">
						<view class="info_time">{{ item.date.slice(0, 19) }}</view>
						<view class="info_town">{{ item.townName }}</view>
						<img class="img" :src="item.isLike === 0 ? '../../static/index/upvote.png' : '../../static/index/upvote-active.png'" @click.stop="handleClickLike(item)" />
						<view class="info_like">{{ item.likeNum }}</view>
						<img class="img2" src="../../static/index/comment.png" />

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

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

			<!-- 没有数据时展示的区域 -->
			<view class="noData" v-else>
				<img src="../../static/images/noData.png" />
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 是否是本人
			isSelf: true,
			// 用户信息
			userInfo: null,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 顶部页面标题栏显示隐藏控制
			headerType: false,
			// 简介输入框显示隐藏控制
			showInput: false,
			// 分段器当前索引
			current: 0,
			// 分段器数组
			items: ['全部推文', '审核中', '驳回'],
			// 推文列表数组
			list: [],
			// video 上下文 videoContext 对象
			videoContext: null,
			// 是否是全屏状态
			isFullScreen: false,
			// 当前用户id
			userId: '',
			// 当前页
			page: 1,
			// 每页多少条
			rows: 6,
			// 总条数
			total: null
		}
	},
	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
		}
	},
	onLoad(options) {
		let id = uni.getStorageSync('userInfo').id
		this.userId = options.userId
		if (id != this.userId) {
			this.isSelf = false
			this.items = ['全部推文']
		}
		this.getUserInfo()
		this.getTweetList()
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.page++
			this.getTweetList()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	methods: {
		// 获取个人信息
		async getUserInfo() {
			const res = await this.$myRequest({
				url: '/mhotel/articlequeryUserInfo.action',
				data: {
					userId: this.userId
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.userInfo = res.data
			}
		},
		// 获取推文列表数组
		async getTweetList() {
			const res = await this.$myRequest({
				url: '/mhotel/articlequeryOwnerArticlePage.action',
				data: {
					userId: this.userId,
					type: this.current,
					page: this.page,
					rows: this.rows
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.list = [...this.list, ...res.data.pageList]
				this.total = res.data.total
			}
		},
		// 关注或者取消关注请求
		async handleFollow() {
			const res = await this.$myRequest({
				url: '/mhotel/articlefollowAuthor.action',
				data: {
					authorId: this.userInfo.id,
					userId: uni.getStorageSync('userInfo').id
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.userInfo.isFollow === 0 ? (this.userInfo.isFollow = 1) : (this.userInfo.isFollow = 0)
			}
		},
		handleGoDetail(item) {
			if (item.approve === 2) {
				uni.navigateTo({
					url: `/pagesSub/tweetDetail/tweetDetail?id=${item.id}&townId=${item.townId}`
				})
			}
		},
		// 进入全屏和退出全屏时触发的回调
		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)
		},
		handleClickInput() {
			if (this.isSelf) {
				this.showInput = true
			}
		},
		async handleClickDesc(e) {
			this.showInput = false
			if (e.detail.value.length > 12) {
				uni.showToast({
					title: '简介不能超过12个字,请重新输入',
					icon: 'none',
					mask: true
				})
				return
			}
			let id = uni.getStorageSync('userInfo').id
			const res = await this.$myRequest({
				url: '/mhotel/articleupdateDescript.action',
				data: {
					descript: e.detail.value,
					authorId: id,
					userId: id
				}
			})
			// console.log(res);

			if (res.code === 200) {
				uni.showToast({
					title: res.message,
					icon: 'success',
					mask: true
				})
				setTimeout(() => {
					this.getUserInfo()
				}, 1500)
			}
		},
		handleBlur() {
			this.showInput = false
		},
		// 分段器切换回调
		onClickItem(e) {
			this.current = e.currentIndex
			this.list = []
			this.page = 1
			this.getTweetList()
		},
		// 点击图片回调
		handleLookImg(urls, current) {
			uni.previewImage({
				urls,
				current
			})
		},
		async handleClickLike(item) {
			const res = await this.$myRequest({
				url: '/mhotel/articlelikeArticle.action',
				data: {
					id: item.id,
					userId: this.userId
				}
			})
			// console.log(res);
			if (res.code === 200) {
				item.isLike === 1 ? ((item.isLike = 0), (item.likeNum -= 1)) : ((item.isLike = 1), (item.likeNum += 1))
			}
		}
	}
}
</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;
		}

		.follow {
			position: absolute;
			top: 206rpx;
			left: 580rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			border-radius: 70rpx;
			border: 1rpx solid #fff;
		}

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

		.noData {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				margin-top: 60rpx;
				width: 400rpx;
				height: 400rpx;
			}
		}
	}
}
</style>