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.
558 lines
13 KiB
558 lines
13 KiB
<template>
|
|
<view class="bg bg-padding">
|
|
<CustomTabBar :currentTab="2" />
|
|
|
|
<view class="top-image" :style="{'height':height+'px'}">
|
|
<image :src="homeUi.dbtp" mode="heightFix" class="topImg"></image>
|
|
</view>
|
|
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="search-box" @click="gotoPath('/subPackages/search/index')" v-if="!SHFlag">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/index/search.png" mode=""></image>
|
|
搜一搜您想要的
|
|
<view class="search-btn">搜索</view>
|
|
</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="flex-between" style="margin-top: 36rpx;" v-if="recommendNav.length>0&&!SHFlag">
|
|
<view class="country-box">
|
|
<image class="img1" :src="xcsh.img1.image" @click.stop="gotoPath('/subPackages/food/cafe')" mode="aspectFill"></image>
|
|
<view class="flex-between" style="padding-top: 10rpx;">
|
|
<image v-for="(item,i) in xcsh.img2" :key="i" class="img2"
|
|
:src="item.image" @click="gotoPath(item.path)" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<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>
|
|
|
|
|
|
<!-- 模块 -->
|
|
<view class="module-box" v-if="!SHFlag">
|
|
<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" v-if="!SHFlag"></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="aspectFill"></image>
|
|
<view class="hot-content">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="price">￥{{item.price / 100}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="new-hot-box hot-box" v-if="!SHFlag">
|
|
<image class="hot-adv" v-if="hotAdv" :src="hotAdv.head_img" mode="aspectFill" @click.stop="gotoBannerDetail(hotAdv)"></image>
|
|
<view v-for="(item,index) in hotList" :key="index" class="hot-item" @click="gotoDetailByType(item)">
|
|
<image :src="item.headimg" mode="aspectFill"></image>
|
|
<view class="hot-content">
|
|
<view class="title text-overflowRows">{{item.title}}</view>
|
|
<view class="price">￥{{item.price / 100}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<uni-popup ref="alertAdv" type="center">
|
|
<view class="alertAdv">
|
|
<swiper class="alertAdv-banner" :circular="true" :interval="6000" style="margin-top: 27rpx;"
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="alertAdv && alertAdv.length > 0">
|
|
<swiper-item class="alertAdv-item" v-for="(item, index) in alertAdv" :key="index" @click.stop="gotoBannerDetail(item)">
|
|
<image class="alertAdv-img" :src="showImg(item.head_img)" mode="widthFix" lazy-load="true"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomTabBar from '@/components/CustomTabBar.vue';
|
|
export default {
|
|
components: {
|
|
CustomTabBar
|
|
},
|
|
data() {
|
|
return {
|
|
height: 0,
|
|
statusBarHeight: 0,
|
|
homeUi: {},
|
|
navList: [],
|
|
topBanner: [],
|
|
smallBanner: [],
|
|
recommendNav: [],
|
|
moduleList: [],
|
|
hotList: [],
|
|
finished: false,
|
|
hotAdv: null,
|
|
CKMap: null,
|
|
// 乡村生活
|
|
xcsh: {
|
|
img1: {
|
|
image: "https://static.ticket.sz-trip.com/uploads/20250814/306961c1869208fb80f15c3e1566dfdf.png"
|
|
},
|
|
img2: [
|
|
{
|
|
image: "https://static.ticket.sz-trip.com/uploads/20250814/bf1b1cb267299a59285e32035684798b.png",
|
|
path: "/subPackages/letter/index?type=yxdw&imgId=2380"
|
|
},
|
|
{
|
|
image: "https://static.ticket.sz-trip.com/uploads/20250814/f74a19e9de6ee0165a0d45919e753034.png",
|
|
path: '/subPackages/letter/index?type=whck&imgId=2379'
|
|
}
|
|
]
|
|
},
|
|
|
|
SHFlag: true,
|
|
|
|
alertAdv: [],
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.initSHFlag()
|
|
},
|
|
// 离开当前页面时获取定位
|
|
onHide() {
|
|
this.getLocation()
|
|
},
|
|
onReady() {
|
|
this.initRectInfo()
|
|
this.sendRequest()
|
|
this.getHeadImg(2378).then(res => {this.CKMap = res})
|
|
this.getAlertAdv()
|
|
},
|
|
methods: {
|
|
initSHFlag () {
|
|
let _this = this
|
|
// 先查一遍
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
_this.SHFlag = uni.getStorageSync('SHFlag')?true: false
|
|
} catch (e) {
|
|
_this.SHFlag = false
|
|
}
|
|
console.log(_this.SHFlag)
|
|
setTimeout(()=>{
|
|
try {
|
|
_this.SHFlag = uni.getStorageSync('SHFlag')?true: false
|
|
} catch (e) {
|
|
_this.SHFlag = false
|
|
}
|
|
console.log(_this.SHFlag)
|
|
},500)
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
_this.SHFlag = false
|
|
// #endif
|
|
},
|
|
|
|
initRectInfo () {
|
|
const sysInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = sysInfo.statusBarHeight
|
|
// 默认高度
|
|
this.height = sysInfo.statusBarHeight + 40
|
|
},
|
|
// 首页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) {
|
|
|
|
|
|
if (this.SHFlag) { return }
|
|
// 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: 5,
|
|
order: "sales_number"
|
|
},'/api/product/get_product_by_type').then(res => {
|
|
this.hotList = [...this.hotList, ...res.data.list]
|
|
|
|
if(res.data.list.length < 5) this.finished = true
|
|
})
|
|
// 广告
|
|
if (!this.hotAdv) {
|
|
this.Post({
|
|
type_id: 5,
|
|
position: 6,
|
|
},"/api/adv/getAdv").then(res => {
|
|
if (res) {
|
|
if (Array.isArray(res.data) && res.data.length>0)
|
|
this.hotAdv = res.data[0]
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
openCKMap () {
|
|
|
|
uni.previewImage({
|
|
urls: [this.CKMap]
|
|
})
|
|
},
|
|
|
|
|
|
getAlertAdv () {
|
|
this.Post({position: 3,type_id: 3},"/api/adv/getAdv",).then(res => {
|
|
if (res.data.length > 0) {
|
|
this.alertAdv = res.data || []
|
|
if (this.alertAdv.length>0) {
|
|
this.$refs.alertAdv.open()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
},
|
|
onReachBottom() {
|
|
setTimeout(() => {
|
|
if(!this.finished) this.getHotList()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
// background: #CDE29E;
|
|
background: linear-gradient(to bottom, #CDE29E 0%, #EDF5DC 360px, #EDF5DC 100%);
|
|
padding: 0 26rpx 145rpx;
|
|
}
|
|
|
|
image {
|
|
display: block;
|
|
}
|
|
.top-image{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.topImg {
|
|
height: 81.33rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.search-box {
|
|
height: 67rpx;
|
|
background: rgba(255, 255, 255, .66);
|
|
border-radius: 33rpx;
|
|
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;
|
|
}
|
|
.search-btn{
|
|
width: 107rpx;
|
|
height: 53rpx;
|
|
background: rgba(106, 138, 39, 0.66);
|
|
border-radius: 27rpx;
|
|
text-align: center;
|
|
line-height: 53rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
margin-left: auto;
|
|
margin-right: 7rpx;
|
|
}
|
|
}
|
|
|
|
.top-banner {
|
|
width: 100%;
|
|
height: 353rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.nav-box {
|
|
margin-top: 45rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 23rpx;
|
|
|
|
|
|
.nav-item {
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// font-size: 23rpx;
|
|
|
|
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;
|
|
}
|
|
.country-box{
|
|
width: 343.33rpx;
|
|
height: 451.33rpx;
|
|
background-image: url("https://static.ticket.sz-trip.com/uploads/20250813/542650d396ff373150917432ac6204e5.png");
|
|
background-size: 100% 100%;
|
|
padding: 101rpx 13rpx 0;
|
|
flex-shrink: 0;
|
|
.img1{
|
|
width: 100%;
|
|
height: 173.33rpx;
|
|
}
|
|
.img2{
|
|
width: 153.33rpx;
|
|
height: 153.33rpx;
|
|
}
|
|
}
|
|
|
|
.recommend-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
width: 343.33rpx;
|
|
height: 451.33rpx;
|
|
|
|
.recommend-item {
|
|
width: 336.67rpx;
|
|
height: 220rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
&.new-hot-box{
|
|
flex-wrap: wrap;
|
|
.hot-adv{
|
|
width: 340rpx;
|
|
height: 490rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.hot-item {
|
|
width: 340rpx;
|
|
height: 490rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
image {
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
}
|
|
|
|
.hot-content {
|
|
height: 150rpx;
|
|
padding: 6rpx 13rpx 10rpx 13rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #111111;
|
|
}
|
|
|
|
.price {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #E62525;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alertAdv-banner{
|
|
width: 700rpx;
|
|
height: 1000rpx;
|
|
margin: 0 auto;
|
|
.alertAdv-item{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.alertAdv-img{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|