You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
10 KiB
376 lines
10 KiB
<template>
|
|
<view>
|
|
<lf-nav :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?channel_id='+item.id)">
|
|
<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">
|
|
<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>
|
|
<!-- 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: {
|
|
//获取猜你喜欢
|
|
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.5);
|
|
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%;
|
|
background-color: rgba(0,0,0,0.65);
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
color: #FFFFFF;
|
|
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|