|
|
|
@ -1,6 +1,66 @@ |
|
|
|
<template> |
|
|
|
<view class="bg bg-padding"> |
|
|
|
<CustomTabBar :currentTab="2" /> |
|
|
|
|
|
|
|
<image :src="homeUi.dbtp" mode="heightFix" class="topImg"></image> |
|
|
|
|
|
|
|
<!-- 搜索框 --> |
|
|
|
<view class="search-box"> |
|
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/index/search.png" mode=""></image> |
|
|
|
搜一搜您想要的 |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 顶部轮播 --> |
|
|
|
<swiper class="top-banner" :circular="true" :interval="6000" style="margin-top: 27rpx;" |
|
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0"> |
|
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoBannerDetail(item)"> |
|
|
|
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<!-- 金刚区 --> |
|
|
|
<view class="nav-box"> |
|
|
|
<view v-for="(item,index) in navList" :key="index" class="nav-item" @click="gotoHomeDetail(item)"> |
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
{{item.menu_name}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小轮播 --> |
|
|
|
<swiper class="small-banner" :circular="true" :interval="6000" style="margin-top: 27rpx;" |
|
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner && smallBanner.length > 0"> |
|
|
|
<swiper-item v-for="(item, index) in smallBanner" :key="index" @click.stop="gotoBannerDetail(item)"> |
|
|
|
<image class="small-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<!-- 推荐广告 --> |
|
|
|
<view class="recommend-box"> |
|
|
|
<view v-for="(item,index) in recommendNav" :key="index" @click="gotoHomeDetail(item)"> |
|
|
|
<image :src="item.icon" mode="" class="recommend-item"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 模块 --> |
|
|
|
<view class="module-box"> |
|
|
|
<view v-for="(item,index) in moduleList" :key="index" @click="gotoHomeDetail(item)"> |
|
|
|
<image :src="item.icon" mode="widthFix" class="module-item"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 热门推荐 --> |
|
|
|
<image :src="homeUi.rmtjbttp" mode="heightFix" class="rmtj-img"></image> |
|
|
|
<view class="hot-box"> |
|
|
|
<view v-for="(num,nums) in 2" :key="nums"> |
|
|
|
<view v-for="(item,index) in hotList" :key="index" v-if="index % 2 == nums" class="hot-item" @click="gotoDetailByType(item)"> |
|
|
|
<image :src="item.headimg" mode="widthFix"></image> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title">{{item.title}}</view> |
|
|
|
<view class="price">￥{{item.price / 100}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -12,22 +72,273 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
homeUi: {}, |
|
|
|
navList: [], |
|
|
|
topBanner: [], |
|
|
|
smallBanner: [], |
|
|
|
recommendNav: [], |
|
|
|
moduleList: [], |
|
|
|
hotList: [], |
|
|
|
finished: false |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
|
|
|
|
}, |
|
|
|
onReady() { |
|
|
|
this.sendRequest() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
// 首页UI配置跳转 |
|
|
|
gotoHomeDetail(item) { |
|
|
|
if(item.jump_type == 'page') { |
|
|
|
// 内页 |
|
|
|
// 4外部小程序 5外部链接 6内页 |
|
|
|
switch (item.page_type){ |
|
|
|
case 4: |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
uni.navigateToMiniProgram({ |
|
|
|
shortLink: item.page |
|
|
|
}) |
|
|
|
// #endif |
|
|
|
break; |
|
|
|
case 4: |
|
|
|
this.gotoWebUrl(item.page) |
|
|
|
break; |
|
|
|
case 6: |
|
|
|
this.gotoPath(item.page) |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
}else if(item.jump_type == 'link') { |
|
|
|
// 链接 |
|
|
|
this.gotoWebUrl(item.url) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 广告跳转 |
|
|
|
gotoBannerDetail(item) { |
|
|
|
// 1产品详情 2功能模块 3外部链接 4外部小程序 |
|
|
|
switch (item.jump_type){ |
|
|
|
case 1: |
|
|
|
this.gotoDetailByType(item.product_model) |
|
|
|
break; |
|
|
|
case 2: |
|
|
|
this.gotoPath(item.tdata.url) |
|
|
|
break; |
|
|
|
case 3: |
|
|
|
this.gotoWebUrl(item.tdata.url) |
|
|
|
break; |
|
|
|
case 4: |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
uni.navigateToMiniProgram({ |
|
|
|
shortLink: item.tdata.url |
|
|
|
}) |
|
|
|
// #endif |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
sendRequest() { |
|
|
|
// 获取首页UI配置 |
|
|
|
let type_id = '' |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
type_id = 3 |
|
|
|
// #endif |
|
|
|
|
|
|
|
// #ifdef H5 |
|
|
|
type_id = 5 |
|
|
|
// #endif |
|
|
|
this.Post({ |
|
|
|
type_id: type_id |
|
|
|
},'/api/adv/get_home_ui').then(res => { |
|
|
|
console.log(res.data) |
|
|
|
// 标题图片 |
|
|
|
for (let item of res.data.content) { |
|
|
|
this.homeUi[item.id] = item.image |
|
|
|
} |
|
|
|
|
|
|
|
// 金刚区 |
|
|
|
this.navList = res.data.nav_menu |
|
|
|
|
|
|
|
// 推荐广告 |
|
|
|
this.recommendNav = res.data.recommend_data |
|
|
|
|
|
|
|
// 下面板块 |
|
|
|
this.moduleList = res.data.func_data |
|
|
|
}) |
|
|
|
|
|
|
|
// 头部banner |
|
|
|
this.Post({ |
|
|
|
type_id: 5, |
|
|
|
position: 0, |
|
|
|
},"/api/adv/getAdv").then(res => { |
|
|
|
if (res) { |
|
|
|
this.topBanner = res.data |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 小banner |
|
|
|
this.Post({ |
|
|
|
type_id: 5, |
|
|
|
position: 1, |
|
|
|
},"/api/adv/getAdv").then(res => { |
|
|
|
if (res) { |
|
|
|
this.smallBanner = res.data |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
this.getHotList() |
|
|
|
}, |
|
|
|
getHotList() { |
|
|
|
this.Post({ |
|
|
|
tag_id: 648, |
|
|
|
offset: this.hotList.length, |
|
|
|
limit: 4 |
|
|
|
},'/api/product/get_product_by_tag').then(res => { |
|
|
|
this.hotList = [...this.hotList, ...res.data.list] |
|
|
|
|
|
|
|
if(res.data.list.length < 4) this.finished = true |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
setTimeout(() => { |
|
|
|
if(!this.finished) this.getHotList() |
|
|
|
},1000) |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.bg { |
|
|
|
width: 100%; |
|
|
|
min-height: 100vh; |
|
|
|
background: #CDE29E; |
|
|
|
padding: 145rpx 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.topImg { |
|
|
|
height: 114.67rpx; |
|
|
|
margin-left: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box { |
|
|
|
height: 67rpx; |
|
|
|
background: rgba(255, 255, 255, .66); |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-top: 24rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #808080; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 30.67rpx; |
|
|
|
height: 30.67rpx; |
|
|
|
margin: 0 19rpx 0 27rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.top-banner { |
|
|
|
width: 100%; |
|
|
|
height: 353rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-box { |
|
|
|
margin-top: 45rpx; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.nav-item { |
|
|
|
width: 20%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
margin-bottom: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.nav-item:nth-child(n+6) { |
|
|
|
margin-top: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.small-banner { |
|
|
|
width: 100%; |
|
|
|
height: 200rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.recommend-box { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.recommend-item { |
|
|
|
width: 336.67rpx; |
|
|
|
height: 225.33rpx; |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.module-box { |
|
|
|
margin-top: 40rpx; |
|
|
|
|
|
|
|
.module-item { |
|
|
|
margin-bottom: 20rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rmtj-img { |
|
|
|
margin-top: 73rpx; |
|
|
|
height: 41.33rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.hot-box { |
|
|
|
margin-top: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.hot-item { |
|
|
|
width: 340rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 340rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.hot-content { |
|
|
|
padding: 13rpx 13rpx 26rpx 13rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-weight: 500; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #111111; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-weight: 500; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #E62525; |
|
|
|
margin-top: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
chenkainan
4 months ago