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.
344 lines
7.2 KiB
344 lines
7.2 KiB
<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>
|
|
|
|
<script>
|
|
import CustomTabBar from '@/components/CustomTabBar.vue';
|
|
export default {
|
|
components: {
|
|
CustomTabBar
|
|
},
|
|
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.front_model.inside)
|
|
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 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>
|
|
|