Homestay_manage_app/pages/collect/collect.vue

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

		<!-- 列表区域 -->
		<scroll-view class="body" scroll-y @scrolltolower="handlePull">
			<!-- 每一个盒子区域 -->
			<view class="box" v-for="item in list" :key="item.id" @click="handleGoPage(item)">
				<!-- 民宿图片区域 -->
				<img mode="aspectFill" :src="item.coverImg" />
				<!-- 民宿信息区域 -->
				<view class="box_info">
					<view class="info_name">{{ item.hotel_name }}</view>
					<view class="info_rate">
						<view class="rate_num">{{ item.score === 0 ? '5.0' : item.score }}</view>
						<view v-if="item.score < 1 && item.score > 0" class="rate_msg">很差</view>
						<view v-if="item.score < 2 && item.score > 1" class="rate_msg">差</view>
						<view v-if="item.score < 3 && item.score > 2" class="rate_msg">一般</view>
						<view v-if="item.score < 4 && item.score > 3" class="rate_msg">棒</view>
						<view v-if="item.score > 4 || item.score === 0" class="rate_msg">超棒</view>
					</view>
					<view class="info_town">{{ item.hotelTownshipName }}</view>
				</view>
				<!-- 民宿价格区域 -->
				<view class="box_price">
					<view class="price_icon">¥</view>
					<view class="price_num">{{ item.min_price }}</view>
					<view class="price_msg">起</view>
				</view>
			</view>

			<view class="noData" v-if="list.length === 0">
				<img lazy-load :lazy-load-margin="0" src="../../static/images/noData.png" />
				{{ noDataMsg }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 分段器当前激活索引
			activeCurrent: 0,
			// 分段器数组
			headerList: ['收藏', '住过'],
			// 列表数据
			list: [],
			noDataMsg: '暂无收藏数据',
			page: 1,
			rows: 6,
			total: null,
			type: '收藏'
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		async getData() {
			const res = await this.$myRequest({
				url: '/mhotel/ampgetHotelAndUsersList.action',
				data: {
					userId: uni.getStorageSync('userInfo').id,
					page: this.page,
					rows: this.rows,
					type: this.type
				}
			})
			// console.log(res)
			if (res.code === 200 && res.data) {
				this.list = [...this.list, ...res.data.pageList]
				this.total = res.data.total
			}
		},
		// 切换分段器回调
		onClickItem(e) {
			this.activeCurrent = e.currentIndex
			if (this.activeCurrent === 0) {
				this.noDataMsg = '暂无收藏数据'
				this.type = '收藏'
			} else {
				this.noDataMsg = '暂无住过数据'
				this.type = '住过'
			}
			this.list = []
			this.page = 1
			this.getData()
		},
		// 列表下拉到底部回调
		handlePull() {
			if (this.list.length < this.total) {
				this.page++
				this.getData()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		handleGoPage(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-color: #f2f3f5;
	overflow: hidden;

	.segmented {
		box-sizing: border-box;
		padding-bottom: 28rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.body {
		box-sizing: border-box;
		padding: 20rpx 0;
		height: calc(100vh - 100rpx);

		.box {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 207rpx;
			border-bottom: 1rpx solid #e5e5e5;
			background-color: #fff;

			img {
				width: 110rpx;
				height: 146rpx;
				border-radius: 10rpx;
			}

			.box_info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-top: -5rpx;
				margin-left: 20rpx;
				height: 146rpx;

				.info_name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.info_rate {
					display: flex;
					font-size: 24rpx;

					.rate_num {
						padding: 4rpx 10rpx;
						color: #fff;
						border-radius: 32rpx 0 0 32rpx;
						background-color: #096562;
					}

					.rate_msg {
						padding: 4rpx 10rpx;
						color: #096562;
						border-radius: 0 32rpx 32rpx 0;
						background-color: #dff2f2;
					}
				}

				.info_town {
					color: #808080;
					font-size: 24rpx;
				}
			}

			.box_price {
				display: flex;
				align-items: flex-end;
				margin-left: auto;
				height: 146rpx;

				.price_icon {
					margin-bottom: 5rpx;
					color: #ff5733;
					font-size: 24rpx;
				}

				.price_num {
					color: #ff5733;
					font-size: 42rpx;
				}

				.price_msg {
					margin-left: 12rpx;
					margin-bottom: 5rpx;
					color: #808080;
					font-size: 24rpx;
				}
			}
		}

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

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