Homestay_manage_app/pages/community/community.vue

<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<view class="content">
			<uv-row custom-style="margin: 10px 0px" gutter="10">
				<picker @change="bindPickerChange" range-key="name" :value="placeIndex" :range="placeList">
					<view class="address">
						<view class="address_text">{{ placeList[placeIndex].name }}</view>
						<img src="../../static/index/bottom.png" />
					</view>
				</picker>

				<view class="search">
					<view class="add">
						<image class="img" src="../../static/index/search.png" mode="aspectFit"></image>
					</view>
					<input class="inp" type="text" v-model="keywords" placeholder="请输入关键字搜索" />
					<view class="btnSearch" @click="searchHandler">搜索</view>
				</view>
			</uv-row>
		</view>

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

		<!-- 数据列表区域 -->
		<scroll-view v-if="list.length" class="body" scroll-y @scrolltolower="handleTolower">
			<uv-waterfall ref="waterfall" v-model="list" :add-time="80" :left-gap="0" :right-gap="0" :column-gap="8" @changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall_item" @click="goPageDetail(item)">
							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image[0]" />
							<video v-if="item.video" class="item_cover" :src="item.video" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"></video>
							<view class="item_town" v-if="item.townName">{{ item.townName }}</view>
							<img v-if="item.video" class="item_play" src="../../static/index/video.png" />
							<view class="item_desc">{{ item.title }}</view>
							<view class="item_info">
								<img mode="aspectFill" :src="item.userPhoto" />
								<view class="text">{{ item.userName }}</view>
								<img
									class="img"
									:src="item.isCollect === 1 ? '../../static/index/like-active.png' : '../../static/index/like.png'"
									@click.stop="handleClickLike(item)"
								/>
								<view class="count">{{ item.collectNum }}</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall_item" @click="goPageDetail(item)">
							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image[0]" />
							<video v-if="item.video" class="item_cover" :src="item.video" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"></video>
							<view class="item_town" v-if="item.townName">{{ item.townName }}</view>
							<img v-if="item.video" class="item_play" src="../../static/index/video.png" />
							<view class="item_desc">{{ item.title }}</view>
							<view class="item_info">
								<img mode="aspectFill" :src="item.userPhoto" />
								<view class="text">{{ item.userName }}</view>
								<img
									class="img"
									:src="item.isCollect === 1 ? '../../static/index/like-active.png' : '../../static/index/like.png'"
									@click.stop="handleClickLike(item)"
								/>
								<view class="count">{{ item.collectNum }}</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</scroll-view>

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

		<!-- 悬浮按钮区域 -->
		<uni-fab :pattern="pattern" horizontal="right" @fabClick="handleClickBtn"></uni-fab>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 悬浮按钮样式
			pattern: {
				buttonColor: '#096562'
			},
			keywords: '',
			// 当前选择地区索引
			placeIndex: 0,
			// 当前选择地区的id
			placeId: '',
			// 地区数组
			placeList: [
				{
					name: '靖安县'
				}
			],
			// 分段器数组
			items: ['发现', '关注', '收藏'],
			// 当前索引
			current: 0,
			// 当前页
			page: 1,
			// 每页多少条
			rows: 6,
			// 总条数
			total: null,
			// 瀑布流全部数据
			list: [],
			// 瀑布流第一列数据
			list1: [],
			// 瀑布流第二列数据
			list2: []
		}
	},
	onShow() {
		let userInfo = uni.getStorageSync('userInfo')
		let tokenId = uni.getStorageSync('tokenId')
		if (!userInfo || !tokenId) {
			uni.showModal({
				title: '提示',
				content: '您当前未登录，请授权登录查看社区信息',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		} else {
			this.placeList = [
				{
					name: '靖安县'
				}
			]
			this.list = []
			this.list1 = []
			this.list2 = []
			this.page = 1
			this.getTownList()
			this.getHotelList()
		}
	},
	methods: {
		// 获取乡镇列表数组
		async getTownList() {
			const res = await this.$myRequest({
				url: '/mhotel/articletownShips.action'
			})
			// console.log(res)
			if (res.code === 200) {
				this.placeList = [...this.placeList, ...res.data]
			}
		},
		// 获取推文列表数组
		async getHotelList() {
			const res = await this.$myRequest({
				url: '/mhotel/articlequeryArticlePage.action',
				data: {
					page: this.page,
					rows: this.rows,
					townId: this.placeId,
					type: this.current,
					keyWord: this.keywords,
					userId: uni.getStorageSync('userInfo').id
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.list = [...this.list, ...res.data.pageList]
				this.total = res.data.total
			}
		},
		changeList(e) {
			if (e.name === 'list1') {
				this.list1.push(e.value)
			} else {
				this.list2.push(e.value)
			}
		},
		// 点击爱心回调
		async handleClickLike(item) {
			const res = await this.$myRequest({
				url: '/mhotel/articlecollectArticle.action',
				data: {
					id: item.id,
					userId: uni.getStorageSync('userInfo').id
				}
			})
			// console.log(res)
			if (res.code === 200) {
				item.isCollect === 1 ? ((item.isCollect = 0), (item.collectNum -= 1)) : ((item.isCollect = 1), (item.collectNum += 1))
			}
		},
		// 点击悬浮按钮回调
		handleClickBtn() {
			uni.navigateTo({
				url: '/pagesSub/send/send'
			})
		},
		// 搜索按钮点击回调
		searchHandler() {
			this.list = []
			this.$refs.waterfall.clear()
			this.list1 = []
			this.list2 = []
			this.page = 1
			this.getHotelList()
		},
		// 选择地区时的回调
		bindPickerChange(e) {
			this.placeIndex = e.detail.value
			this.placeId = this.placeList[this.placeIndex].id || ''
			this.searchHandler()
		},
		// 分段器切换回调
		onClickItem(e) {
			this.current = e.currentIndex
			this.searchHandler()
		},
		// 页面触底回调
		handleTolower() {
			if (this.total > this.list.length) {
				this.page++
				this.getHotelList()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					maks: true
				})
			}
		},
		// 点击每一个推文回调
		goPageDetail(item) {
			uni.navigateTo({
				url: `/pagesSub/tweetDetail/tweetDetail?id=${item.id}&townId=${item.townId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	background-color: #f7f7f7;

	.content {
		background-color: #f7f7f7;

		.address {
			display: flex;
			width: 152rpx;
			font-size: 28rpx;

			.address_text {
				width: 104rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

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

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 538rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 70px;
			background-color: #fff;

			.add {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 10rpx;
				width: 60rpx;
				font-size: 50rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: rgba(30, 125, 251, 1);

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

			.inp {
				height: 60rpx;
				line-height: 60rpx;
				flex-grow: 1;
				font-size: 28rpx;
			}

			.btnSearch {
				width: 100rpx;
				text-align: center;
				margin-right: 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				font-size: 28rpx;
				font-weight: 400;
				height: 2rem;
				color: #096562;
			}
		}
	}

	.control {
		margin: 0 auto 20rpx;
		padding-bottom: 10rpx;
		width: 690rpx;
		height: 90rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.body {
		margin: auto;
		width: 690rpx;
		height: calc(100vh - 220rpx);

		.waterfall_item {
			position: relative;
			overflow: hidden;
			margin-bottom: 20rpx;
			width: 335rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.item_cover {
				width: 335rpx;
				height: 463rpx;
				border: 10rpx 10rpx 0 0;
			}

			.item_town {
				position: absolute;
				top: 404rpx;
				left: 22rpx;
				padding: 0 20rpx;
				line-height: 43rpx;
				text-align: center;
				font-size: 20rpx;
				color: #fff;
				border-radius: 42rpx;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.item_play {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.item_desc {
				padding: 0 22rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.item_info {
				padding: 15rpx 22rpx;
				display: flex;
				// align-items: center;
				color: #666666;
				font-size: 20rpx;

				img {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}

				.text {
					margin-left: 12rpx;
					width: 150rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.img {
					margin-left: auto;
				}

				.count {
					margin-left: 5rpx;
				}
			}
		}
	}

	.noData {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 65rpx;

		img {
			margin-top: 80rpx;
			width: 600rpx;
			height: 600rpx;
		}
	}
}
</style>