hookehuyr

feat(首页): 添加轮播图点击跳转功能并优化数据结构

修改轮播图数据结构以包含id字段
添加点击事件跳转到详情页功能
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-17 09:58:32
* @LastEditTime: 2025-07-18 17:11:10
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -31,8 +31,8 @@
<view class="px-4 pt-4" style="background: linear-gradient( 180deg, #fb923c 0%, rgba(255,203,53,0) 61%);">
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#ffffff" auto-play="3000"
class="rounded-lg overflow-hidden" height="160">
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index">
<image :src="image" mode="aspectFill" class="w-full h-40 object-cover" />
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index" @click="onBannerClick(image)">
<image :src="image.front_photo" mode="aspectFill" class="w-full h-40 object-cover" />
</nut-swiper-item>
</nut-swiper>
</view>
......@@ -180,9 +180,15 @@ onMounted(async () => {
// 获取首页轮播
const res1 = await getRecommendVehicleAPI({ section: 1 })
if (res1.code) {
bannerImages.value = res1.data.list.map(item => item.front_photo);
bannerImages.value = res1.data.list.map(item => ({
id: item.id,
front_photo: item.front_photo
}));
if (!bannerImages.value.length) {
bannerImages.value = [DEFAULT_COVER_IMG]
bannerImages.value = [{
id: 0,
front_photo: DEFAULT_COVER_IMG
}]
}
}
})
......@@ -210,4 +216,11 @@ useShareAppMessage(() => {
// 返回shareObj
return shareObj;
})
// 点击banner图片跳转到详情页
const onBannerClick = ({id}) => {
Taro.navigateTo({
url: `/pages/productDetail/index?id=${id}`
})
}
</script>
......