|
|
|
@ -1,53 +1,31 @@ |
|
|
|
<template> |
|
|
|
<view class="product-section"> |
|
|
|
<view class="title-section"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
<div style=" |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
" |
|
|
|
> |
|
|
|
"> |
|
|
|
<text class="title">文化IP合作体</text> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<!-- 轮播容器 --> |
|
|
|
<view class="carousel-container"> |
|
|
|
<!-- 左箭头 --> |
|
|
|
<view |
|
|
|
class="nav-arrow left-arrow" |
|
|
|
@click="prevSlide" |
|
|
|
v-if="list.length > 1 && currentIndex > 0" |
|
|
|
> |
|
|
|
<image style="width: 50rpx;height: 50rpx;" :src="showImg('/uploads/20250908/29beeddf1e45571d2c5a4187f2f1ae05.png')"></image> |
|
|
|
<view class="nav-arrow left-arrow" @click="prevSlide" v-if="list.length > 1 && currentIndex > 0"> |
|
|
|
<image style="width: 50rpx;height: 50rpx;" |
|
|
|
:src="showImg('/uploads/20250908/29beeddf1e45571d2c5a4187f2f1ae05.png')"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 轮播内容 --> |
|
|
|
<scroll-view |
|
|
|
class="carousel-scroll" |
|
|
|
scroll-x="true" |
|
|
|
:show-scrollbar="false" |
|
|
|
:enhanced="true" |
|
|
|
:scroll-with-animation="true" |
|
|
|
:scroll-left="scrollLeft" |
|
|
|
@scroll="onScroll" |
|
|
|
@scrollend="onScrollEnd" |
|
|
|
> |
|
|
|
<scroll-view class="carousel-scroll" scroll-x="true" :show-scrollbar="false" :enhanced="true" |
|
|
|
:scroll-with-animation="true" :scroll-left="scrollLeft" @scroll="onScroll" @scrollend="onScrollEnd"> |
|
|
|
<view class="carousel-content"> |
|
|
|
<view |
|
|
|
class="carousel-item" |
|
|
|
v-for="(item, index) in list" |
|
|
|
:key="index" |
|
|
|
@click="gotoDetail" |
|
|
|
v-if="item && item.image" |
|
|
|
> |
|
|
|
<view class="carousel-item" v-for="(item, index) in list" :key="index" @click="gotoDetail(item)" |
|
|
|
v-if="item && item.image"> |
|
|
|
<view class="issue-card"> |
|
|
|
<!-- 背景图片 --> |
|
|
|
<image |
|
|
|
class="card-bg" |
|
|
|
:src="showImg(item.image)" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<image class="card-bg" :src="showImg(item.image)" mode="aspectFill"></image> |
|
|
|
<view class="title-info"> |
|
|
|
<view class="title-item"> |
|
|
|
{{item.title}} |
|
|
|
@ -67,13 +45,11 @@ |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<!-- 右箭头 --> |
|
|
|
<view |
|
|
|
class="nav-arrow right-arrow" |
|
|
|
@click="nextSlide" |
|
|
|
v-if="list.length > 1 && currentIndex < list.length - 1" |
|
|
|
> |
|
|
|
<view class="nav-arrow right-arrow" @click="nextSlide" |
|
|
|
v-if="list.length > 1 && currentIndex < list.length - 1"> |
|
|
|
|
|
|
|
<image style="width: 50rpx;height: 50rpx;" :src="showImg('/uploads/20250908/6622b3699518d6b559e1241d7addb7af.png')"></image> |
|
|
|
<image style="width: 50rpx;height: 50rpx;" |
|
|
|
:src="showImg('/uploads/20250908/6622b3699518d6b559e1241d7addb7af.png')"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -102,11 +78,15 @@ export default { |
|
|
|
image: '/uploads/20250908/d4115d6c907f8b3ed5d30a11f9912460.png', |
|
|
|
title: '退思园', |
|
|
|
des: '苏州古典园林生活', |
|
|
|
}], |
|
|
|
mini: { |
|
|
|
appID: 'wxf3af8e268906fd6d', |
|
|
|
path: 'pages/index/index' |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
currentIndex: 0, |
|
|
|
scrollLeft: 0, |
|
|
|
itemWidth: 224, // 207rpx + 30rpx margin |
|
|
|
JDSU_IMG_URL: "https://epic.js-dyyj.com", |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -118,11 +98,26 @@ export default { |
|
|
|
url: '/pages/index/readingBody' |
|
|
|
}) |
|
|
|
}, |
|
|
|
gotoDetail(){ |
|
|
|
gotoDetail(item) { |
|
|
|
if(item.mini){ |
|
|
|
wx.navigateToMiniProgram({ |
|
|
|
appId: item.mini.appID, |
|
|
|
path: item.mini.path, |
|
|
|
envVersion: 'release', |
|
|
|
success(res) { |
|
|
|
// 打开成功 |
|
|
|
}, |
|
|
|
fail(e){ |
|
|
|
console.log(e) |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
uni.showToast({ |
|
|
|
title: '功能暂未开放', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
getList() { |
|
|
|
// this.Post( |
|
|
|
@ -142,16 +137,6 @@ export default { |
|
|
|
// }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 图片显示方法 |
|
|
|
showImg(img) { |
|
|
|
if (!img) return ""; |
|
|
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
|
|
|
return img; |
|
|
|
} else { |
|
|
|
return this.JDSU_IMG_URL + img; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 上一张 |
|
|
|
prevSlide() { |
|
|
|
if (!this.validateData()) return; |
|
|
|
@ -350,6 +335,7 @@ export default { |
|
|
|
display: inline-block; |
|
|
|
padding: 0rpx 0 30rpx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: bold; |
|
|
|
@ -362,6 +348,7 @@ export default { |
|
|
|
margin-left: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.title-info { |
|
|
|
position: absolute; |
|
|
|
bottom: 10rpx; |
|
|
|
@ -369,6 +356,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
color: white; |
|
|
|
padding: 0 5rpx; |
|
|
|
|
|
|
|
.title-item { |
|
|
|
text-align: center; |
|
|
|
font-size: 16rpx; |
|
|
|
@ -377,6 +365,7 @@ export default { |
|
|
|
word-wrap: normal; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.title-des { |
|
|
|
margin-top: 5rpx; |
|
|
|
text-align: center; |
|
|
|
|
1054425342@qq.com
1 month ago