uniapp-hainan/pages/index/index.vue

<template>
	<view>
		<lf-nav :showIcon="true" :search="true" :bgColor="nav_bg_color" :inputColor="nav_input_color" :textColor="nav_text_color" :spreadOut="false"></lf-nav>
		<swiper class="head" :current="banner_current" autoplay interval="3000">
			<swiper-item @click="clickBanner(item.type,item.url)" v-for="(item,index) of banner" :key="index">
				<image :src="item.picture" class="swipe-img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<!-- 消息模块 -->
			<!-- <view class="lf-row-between lf-m-b-34 message-box" v-for="(item,index) of notice" :key="index">
				<view class="lf-flex">
					<text class="lf-iconfont lf-icon-tongzhi lf-text-vertical"></text>
					<view class="lf-m-l-12 lf-line-1" style="max-width: 510rpx;">{{item.title}}</view>
				</view>
				<view class="message-btn" hover-class="lf-opacity" @click="$url('/pages/notice/notice?notice_id='+item.id)">详情</view>
			</view> -->
			<view class="lf-m-b-34">
				<u-notice-bar type="primary" mode="vertical" :list="notice"></u-notice-bar>
			</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" @click="$url('/pages/channel/index')">
					<view class="lf-m-r-10">编辑</view>
					<view class="lf-iconfont lf-icon-xiangyou lf-text-vertical"></view>
				</view>
			</view>
			<view class="lf-flex-wrap" v-if="channel_list.length">
				<view class="channel-item" v-for="(item, index) in channel_list" :key="index" @click="$url('/pages/goodsList/index?category_id='+item.id)">
				<!-- <view class="channel-item" v-for="(item, index) in channel_list" :key="index" @click="toRecommlist(item)"> -->
					<image :src="item.icon" class="channel-mask" mode="aspectFill"></image>
					<view class="lf-row-center channe-text lf-font-bold">{{item.name}}</view>
					<!-- <view>
						<u-icon name="lock-fill lf-text-vertical"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="my_chancel" v-else>
				<view class="lf-row-center">
					<image src="../../static/no_chancel.png" class="channel-mask1" mode="aspectFill"></image>
				</view>
				<view class="lf-row-center lf-m-l-10" style="color: #bfbfbf;">您还未添加频道哦~</view>
			</view>
			
			<!-- 中间广告模块 -->
			<view class="lf-m-t-40 ad" v-for="(item,index) of home_ad1" :key="index">
				<image @click="clickAD(item.type,item.url)" :src="item.picture" mode="aspectFill" class="lf-w-100 lf-h-100"></image>
			</view>
			<!-- <swiper class="lf-m-t-40 ad" :current="banner_current" >
				<swiper-item @click="clickAD">
					<image :src="home_ad1" 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" @click="$url('/pages/hot/index')">
					<view class="lf-m-r-10">更多</view>
					<view class="lf-iconfont lf-icon-xiangyou lf-text-vertical"></view>
				</view>
			</view>
			<view class="recomm lf-m-t-20 lf-m-b-30" v-if="$isRight(hot_list)">
				<view class="lf-row-between">
					<view class="max-recomm-img" @click="$url('/pages/goodsDetail/index?goods_id='+hot_list[0].id)">
						<image :src="hot_list[0].picture" class="lf-w-100 lf-h-100"></image>
						<view class="recomm-title">
							<view class="lf-line-2 lf-m-b-10">{{hot_list[0].title}}</view>
							<lf-price :price="hot_number" v-if="hot_number"></lf-price>
							<!-- <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" style="margin-bottom: 14rpx;" @click="$url('/pages/goodsDetail/index?goods_id='+hot_list[1].id)">
							<image :src="hot_list[1].picture" class="lf-w-100 lf-h-100"></image>
						</view>
						<view class="recomm-img lf-m-t-10" @click="$url('/pages/goodsDetail/index?goods_id='+hot_list[2].id)">
							<image :src="hot_list[2].picture" class="lf-w-100 lf-h-100"></image>
						</view>
					</view>
				</view>
				<view class="lf-row-between lf-m-t-10">
					<view class="recomm-img" style="margin-top: 4rpx;" @click="$url('/pages/goodsDetail/index?goods_id='+item.id)" :key="index" v-for="(item,index) of hot_list" v-if="index>2">
						<image :src="item.picture" class="lf-w-100 lf-h-100"></image>
					</view>
				</view>
			</view>
			<view class="recomm lf-m-t-20 lf-m-b-30" v-else>
				<lf-nocontent></lf-nocontent>
			</view>
			<!-- tab标签 -->
			<!-- <view class="lf-m-t-40">
				<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			</view> -->
			<!-- 推荐 -->
			<!-- <view class="lf-row-between lf-m-t-40 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>
		<!-- 猜你喜欢 -->
		<lf-title-line></lf-title-line>
		<!-- 商品列表-瀑布流 -->
		<view style="padding: 0 20rpx;">
			<lf-waterfall :list="recomm_list" ref="uWaterfall"></lf-waterfall>
			<!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> -->
			<view class="loading-more">
				<text :class="{'loading-more-text': loading_class}" v-if="recomm_list.length">{{ loading_text }}</text>
				<lf-nocontent v-else></lf-nocontent>
			</view>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall/lf-waterfall.vue';
	import lfTitleLine from '@/components/lf-title-line/lf-title-line.vue';
	
	export default {
		components: {
			lfWaterfall,
			lfTitleLine
		},
		data() {
			return {
				banner: [],
				nav_bg_color: 'transparent' ,// 导航背景颜色
				nav_input_color: 'rgba(255,255,255,0.5)',
				nav_text_color: '#777',
				banner_current: 0,
				recomm_list: [],
				channel_list: [],
				current: 0,
				loading_class: false,
				hot_list: [],
				loading_text: '已加载全部数据~',
				home_ad1: [],
				hot_number: '',
				list: [],
				notice: [],
				sting_notice: []
			}
		},
		onShow() {
			this.getIndexData()
			this.getFavourite()
		},
		// 页面滚动
		onPageScroll(event){
			if(event.scrollTop >= 100){
				this.nav_bg_color = '#1998FE';
				this.nav_input_color = 'rgba(255,255,255,0.5)';
				this.nav_text_color = '#fff';
			}else{
				this.nav_bg_color = 'transparent';
				this.nav_input_color = 'rgba(255,255,255,0.5)';
				this.nav_text_color = '#777';
			}
		},
		methods: {
			// 跳转到推荐页
		   toRecommlist(item){
				uni.setStorageSync('channel_id', item.channel_id || item.id);
				this.$url('/pages/recommList/index', {type: 'switch'});
		   },
			//获取猜你喜欢
			getFavourite() {
				this.$http(this.API.API_FAVOURITE).then(res => {
					this.recomm_list = res.data.data
				}).catch(err => {
					
				})
			},
			getIndexData() {
				this.$http(this.API.API_INDEX).then(res => {
					this.notice = res.data?.notice
					this.hot_list = res.data?.hots
					this.hot_number = this.hot_list[0].price
					this.banner = res.data?.slide
					this.channel_list = res.data?.my_channels
					this.home_ad1 = res.data?.special
					uni.stopPullDownRefresh();
					console.log(this.home_ad1)
				}).catch(err => {})
					
				
			},
 			// tabs标签切换时件，现已费弃
			tabChange(current){
				this.current = current;
			},
			// swiper页面被滑动切换
			pageChange(event){
				console.log(event)
				this.current = event.detail.current;
			},
			// banner图被点击
			clickBanner(type,url){
				if(url) {
					if(type == 0) {
						this.$url(url);
					}else {
						this.$url('/pages/index/urlWeb?url='+url);
					}
				}
			},
			// ad被点击
			clickAD(type,url){
				// this.$msg('您点击了ad广告')
				if(url) {
					if(type == 0) {
						console.log(url)
						this.$url(url);
					}else {
						this.$url('/pages/index/urlWeb?url='+url);
					}
				}
			}
		},
		onReachBottom() {
			
		},
		onPullDownRefresh(){
			this.getIndexData()
			this.getFavourite()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(){
			let shareInfo = {
				title: '欢迎使用海南旅游小程序',
				path: '/pages/route/index?route=home'
			}
			return shareInfo;
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.my_chancel {
		display: flex;
		justify-content: center;
		text-align: center;
		min-height: 200rpx;
	}
	.channel-mask1 {
		width: 60rpx;
		height: 60rpx;
	}
	.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.3);
			top: 0;
			left: 0;
		}
		.channe-text{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	
	.ad{
		height: 230rpx;
		width: 100%;
	}
	
	.recomm{
		width: 100%;
		height: max-content;
		.recomm-img{
			width: 222rpx;
			height: 222rpx;
			border-radius: 15rpx;
			overflow: hidden;
		}
		.max-recomm-img{
			width: 455rpx;
			height: 455rpx;
			position: relative;
			border-radius: 15rpx;
			overflow: hidden;
			.recomm-title{
				// height: 142rpx;
				height: max-content;
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx;
				position: absolute;
				bottom: 0;
				color: #FFFFFF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
			}
		}
	}
	
</style>