uniapp-hainan/pages/index/index.vue

<template>
	<view>
		<swiper class="head" :current="banner_current" >
			<swiper-item>
				<image src="https://picsum.photos/375/360" class="swipe-img"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://picsum.photos/375/360" class="swipe-img"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<!-- 消息模块 -->
			<view class="lf-row-between lf-m-b-34 message-box">
				<view class="lf-flex">
					<u-icon name="lock-fill lf-text-vertical"></u-icon>
					<view class="lf-m-l-12 lf-line-1" style="max-width: 510rpx;">国庆优惠大促，快来看看吧！</view>
				</view>
				<view class="message-btn" hover-class="lf-opacity">详情</view>
			</view>
			<!-- 频道 -->
			<view class="lf-row-between lf-m-b-10">
				<view class="lf-font-36 lf-font-bold lf-color-333">添加频道</view>
				<view class="lf-flex lf-color-555">
					<view class="lf-m-r-10">编辑</view>
					<u-icon name="lock-fill lf-text-vertical"></u-icon>
				</view>
			</view>
			<view class="lf-flex-wrap">
				<view class="channel-item" v-for="(item, index) in 8">
					<image src="../../static/logo.png" class="channel-mask" mode="aspectFill"></image>
					<view>
						<u-icon name="lock-fill lf-text-vertical"></u-icon>
					</view>
				</view>
			</view>
			<!-- 中间广告模块 -->
			<swiper class="lf-m-t-40 ad" :current="banner_current" >
				<swiper-item>
					<image src="https://picsum.photos/375/230" class="lf-w-100 lf-h-100"></image>
				</swiper-item>
			</swiper>
			<!-- 精品推荐 -->
			<view class="lf-row-between lf-m-t-40">
				<view class="lf-font-36 lf-font-bold lf-color-333">精品推荐</view>
				<view class="lf-flex lf-color-555">
					<view class="lf-m-r-10">更多</view>
					<u-icon name="lock-fill lf-text-vertical"></u-icon>
				</view>
			</view>
			<view class="recomm lf-m-t-20">
				<view class="lf-row-between">
					<view class="max-recomm-img">
						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
						<view class="recomm-title">
							<view class="lf-line-2">土耳其双人游飞机往返酒店五星级各大热门景点豪华双人游纯江湖救急</view>
							<view class="lf-font-42 lf-font-bold lf-m-t-10" style="color: #FF0000;">￥3999.00</view>
						</view>
					</view>
					<view>
						<view class="recomm-img">
							<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
						</view>
						<view class="recomm-img lf-m-t-10">
							<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
						</view>
					</view>
				</view>
				<view class="lf-row-between lf-m-t-10">
					<view class="recomm-img">
						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
					</view>
					<view class="recomm-img">
						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
					</view>
					<view class="recomm-img">
						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
					</view>
				</view>
			</view>
			<!-- tab标签 -->
			<view class="lf-m-t-40">
				<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			</view>
		</view>
		<!-- 商品列表-瀑布流 -->
		<view v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex" v-if="current == tabIndex" style="padding: 0 20rpx;">
			<u-waterfall v-model="tabItem.list" :ref="'uWaterfall-'+ tabIndex">
				<template v-slot:left="{leftList}">
					<view class="list-warter" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-450" :image="item.image" :index="index">
							<view class="list-label">已售8777</view>
						</u-lazy-load>
						<view class="lf-p-20">
							<view class="list-title">
								{{item.title}}
							</view>
							<view class="list-price">
								<text>{{item.price}}元</text>
								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="list-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" :image="item.image" :index="index">
							<view class="list-label">已售8777</view>
						</u-lazy-load>
						<view class="lf-p-20">
							<view class="list-title">
								{{item.title}}
							</view>
							<view class="list-price">
								<text>{{item.price}}元</text>
								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore v-if="tabItem.list.length" :status="tabItem.loading_text" @loadmore="addRandomData"></u-loadmore>
			<lf-nocontent v-else></lf-nocontent>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner_current: 0,
				tab_list: [{
					name: '推荐',
					list: []
				},{
					name: '酒店',
					list: []
				},{
					name: '推荐',
					list: []
				},{
					name: '酒店',
					list: []
				},{
					name: '推荐',
					list: []
				},{
					name: '酒店',
					list: []
				}],
				current: 0
			}
		},
		onLoad() {
			// this.addRandomData();
		},
		methods: {
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			tabChange(current){
				this.current = current;
			},
			pageChange(event){
				console.log(event)
				this.current = event.detail.current;
			}
		},
		onReachBottom() {
			
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh();
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.head{
		width: 750rpx;
		height: 360rpx;
		.swipe-img{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		width: 750rpx;
		// height: 600rpx;
		height: max-content;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: relative;
		top: -30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 40rpx 32rpx 10rpx;
		.message-box{
			width: 686rpx;
			height: 53rpx;
			background: #CFE7FD;
			border-radius: 27rpx;
			color: #1998FE;
			box-sizing: border-box;
			padding: 0 20rpx;
			font-size: 24rpx;
			.message-btn{
				width: 80rpx;
				height: 33rpx;
				border-radius: 10rpx;
				border: 1rpx solid #1998FE;
				text-align: center;
				line-height: 31rpx;
			}
		}
	}
	
	.channel-item{
		width: 160rpx;
		height: 160rpx;
		border-radius: 15rpx;
		margin-top: 15rpx;
		margin-right: 15rpx;
		position: relative;
		overflow: hidden;
		&:nth-child(4n){
			margin-right: 0;
		}
		image{
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			z-index: 0;
		}
		view{
			position: absolute;
			right: 0;
			bottom: 0;
			background-color: rgba(255,255,255,0.5);
			width: 42rpx;
			height: 42rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx 0rpx 15rpx 0rpx;
			z-index: 2;
		}
		.channel-mask::after{
			width: 100%;
			height: 100%;
			content: '';
			position: absolute;
			z-index: 1;
			background: rgba(0, 0, 0, 0.5);
			top: 0;
			left: 0;
		}
	}
	
	.ad{
		height: 230rpx;
		width: 100%;
	}
	
	.recomm{
		width: 100%;
		height: max-content;
		.recomm-img{
			width: 222rpx;
			height: 222rpx;
			border-radius: 10rpx;
		}
		.max-recomm-img{
			width: 455rpx;
			height: 455rpx;
			position: relative;
			.recomm-title{
				// height: 142rpx;
				height: max-content;
				width: 100%;
				background-color: rgba(0,0,0,0.65);
				box-sizing: border-box;
				padding: 15rpx;
				position: absolute;
				bottom: 0;
				color: #FFFFFF;
			}
		}
	}
	
	// ====
	.list-warter {
		border-radius: 8px;
		margin: 10px 5px;
		margin-top: 0px;
		background-color: #ffffff;
		// padding: 8px;
		position: relative;
		overflow: hidden;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.list-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.list-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
	}
	
	.list-label{
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,0.5);
		width: 140rpx;
		height: 48rpx;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}
	
	.list-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.list-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.list-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.list-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	// ====
</style>