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">
				<!-- 民宿图片区域 -->
				<img mode="aspectFill" :src="item.imgUrl" />
				<!-- 民宿信息区域 -->
				<view class="box_info">
					<view class="info_name">{{ item.name }}</view>
					<view class="info_rate">
						<view class="rate_num">{{ item.rate }}</view>
						<view class="rate_msg">{{ item.msg }}</view>
					</view>
					<view class="info_town">{{ item.town }}</view>
				</view>
				<!-- 民宿价格区域 -->
				<view class="box_price">
					<view class="price_icon">¥</view>
					<view class="price_num">{{ item.price }}</view>
					<view class="price_msg">起</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 分段器当前激活索引
			activeCurrent: 0,
			// 分段器数组
			headerList: ['收藏', '住过'],
			// 列表数据
			list: [
				{
					id: 1,
					imgUrl: 'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
					name: '民宿名称',
					rate: '5.0',
					town: '宝峰镇',
					price: 748,
					msg: '超棒'
				},
				{
					id: 2,
					imgUrl: 'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
					name: '开心民宿',
					rate: '5.0',
					town: '木叶村',
					price: 999,
					msg: '超棒'
				},
				{
					id: 3,
					imgUrl: 'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
					name: '快乐民宿',
					rate: '5.0',
					town: '砂隐村',
					price: 888,
					msg: '超棒'
				}
			]
		}
	},
	methods: {
		// 切换分段器回调
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
			}
		},
		// 列表下拉到底部回调
		handlePull() {
			console.log(111)
		}
	}
}
</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;
				}
			}
		}
	}
}
</style>