|
|
@ -2,17 +2,41 @@ |
|
|
|
<view class="bg"> |
|
|
|
<headerVue></headerVue> |
|
|
|
<view class="banner-content"> |
|
|
|
|
|
|
|
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" |
|
|
|
:indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0"> |
|
|
|
:indicator-dots="false" :autoplay="true" @change="swiperChange" > |
|
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)"> |
|
|
|
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image> |
|
|
|
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<view class="dot-container"> |
|
|
|
<view :class="['dot-line',index==swiperIndex?'active':'']" v-for="(item, index) in topBanner" :key="index"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<image style="margin-top: 63rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image> |
|
|
|
<view class="product-content"> |
|
|
|
<image class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image> |
|
|
|
|
|
|
|
<view class="product"> |
|
|
|
<view class="item" v-for="(item,i) in list" :key="item.goods.id"> |
|
|
|
<image class="item-img" :src="showImg(item.goods.image)"></image> |
|
|
|
<view class="content"> |
|
|
|
<view class="title text-overflow">{{item.goods.title}}</view> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="price">¥{{item.goods.money/100}}</view> |
|
|
|
<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/gwc.png" class="buy-cart"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<image style="margin: 53rpx 0 35rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image> |
|
|
|
|
|
|
|
<view class="img-container"> |
|
|
|
<image v-for="i in 3" :key="i" src="https://cgc.js-dyyj.com/uploads/20250619/839df8a6ffaa539b213551577b6fc388.png?timestamp=1750841365993"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<CustomTabBar :currentTab="2" /> |
|
|
|
</view> |
|
|
@ -25,13 +49,16 @@ |
|
|
|
components: {CustomTabBar,headerVue}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
topBanner: [] |
|
|
|
topBanner: [], |
|
|
|
list: [], |
|
|
|
swiperIndex: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
|
|
|
|
}, |
|
|
|
onReady() { |
|
|
|
this.getProduct() |
|
|
|
this.getList() |
|
|
|
|
|
|
|
}, |
|
|
@ -39,6 +66,10 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
swiperChange(e) { |
|
|
|
this.swiperIndex = e.detail.current |
|
|
|
}, |
|
|
|
|
|
|
|
viewDetail(item) { |
|
|
|
if (item.url) { |
|
|
|
uni.navigateTo({ |
|
|
@ -51,6 +82,16 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
getProduct () { |
|
|
|
this.Post({ |
|
|
|
tag_id: 45, |
|
|
|
offset: 0, |
|
|
|
limit: 3, |
|
|
|
},'/api/tag/getGoodsByTagId').then(res => { |
|
|
|
this.list = res.data; |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
getList() { |
|
|
|
// 大轮播 |
|
|
|
this.Post({ |
|
|
@ -110,14 +151,34 @@ |
|
|
|
.bg { |
|
|
|
min-height: 100vh; |
|
|
|
background: #FFFFFF; |
|
|
|
padding-bottom: 200rpx; |
|
|
|
} |
|
|
|
.banner-content{ |
|
|
|
width: 100%; |
|
|
|
height: 496.4rpx; |
|
|
|
position: relative; |
|
|
|
.top-banner { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.dot-container{ |
|
|
|
position: absolute; |
|
|
|
bottom: 43rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 100%; |
|
|
|
left: 0; |
|
|
|
.dot-line{ |
|
|
|
width: 52rpx; |
|
|
|
height: 4rpx; |
|
|
|
margin: 0 8rpx; |
|
|
|
background: RGBA(189, 170, 173, 0.8); |
|
|
|
&.active{ |
|
|
|
background: RGBA(255, 255, 255, 0.8); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.head-img{ |
|
|
@ -127,7 +188,48 @@ |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.product-content{ |
|
|
|
padding: 0 26rpx; |
|
|
|
padding: 63rpx 26rpx 0; |
|
|
|
.product{ |
|
|
|
padding: 36rpx 0 0; |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
justify-content: space-between; |
|
|
|
.item{ |
|
|
|
width: 214.69rpx; |
|
|
|
} |
|
|
|
.item-img{ |
|
|
|
width: 214.69rpx; |
|
|
|
height: 286.33rpx; |
|
|
|
} |
|
|
|
.content{ |
|
|
|
height: 80rpx; |
|
|
|
padding: 0rpx 4rpx; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
.bottom{ |
|
|
|
display: flex; |
|
|
|
padding-top: 13rpx; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.buy-cart{ |
|
|
|
width: 28rpx; |
|
|
|
height: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.img-container{ |
|
|
|
width: 100%; |
|
|
|
image{ |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 314rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|