|
|
|
@ -1,5 +1,10 @@ |
|
|
|
<template> |
|
|
|
<view class="content"> |
|
|
|
<view class="content" style="overflow-x: auto;"> |
|
|
|
<!-- <view class="search-header" :style="{'height': height+'px','padding-top':statusBarHeight+'px'}"> |
|
|
|
<view class="title">CGC-ICH</view> |
|
|
|
<view class="subtitle">大运河非遗</view> |
|
|
|
</view> |
|
|
|
<div :style="{'height':height+'px','flex-shrink':0}"></div> --> |
|
|
|
<!-- 头部banner --> |
|
|
|
<view class="top-box"> |
|
|
|
<!-- 搜索 --> |
|
|
|
@ -21,36 +26,37 @@ |
|
|
|
<view class="menu-box flex-between"> |
|
|
|
<view class="menu-left flex-around"> |
|
|
|
<view class="" v-for="(item,index) in menuList" :key="index" @click="gotoPath(item.path)"> |
|
|
|
<image :src="`https://static.ticket.sz-trip.com/cgc/images/index/${index + 1}.png`" class="topImg" mode="heightFix"></image> |
|
|
|
<image :src="`https://static.ticket.sz-trip.com/cgc/images/index/${index + 1}s.png`" class="titleImg" mode="heightFix"></image> |
|
|
|
<image :src="`https://static.ticket.sz-trip.com/cgc/images/indexs/${index + 1}.png`" class="topImg" mode="heightFix"></image> |
|
|
|
<image :src="`https://static.ticket.sz-trip.com/cgc/images/indexs/${index + 1}s.png`" class="titleImg" mode="heightFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="menu-right flex-around"> |
|
|
|
<!-- <view class="menu-right flex-around"> |
|
|
|
<swiper class="menu-right" :circular="true" :interval="6000" |
|
|
|
:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner"> |
|
|
|
<swiper-item v-for="(item, index) in smallBanner" :key="index" @click.stop="gotoUrlNew(item)"> |
|
|
|
<image class="menu-right" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 非遗手札 --> |
|
|
|
<view v-if="handwrittenList && handwrittenList.length > 0"> |
|
|
|
|
|
|
|
<view class="title-box flex-between"> |
|
|
|
<image src="https://static.ticket.sz-trip.com/cgc/images/index/title1.png" mode=""></image> |
|
|
|
<image src="https://cgc.js-dyyj.com/uploads/20250618/0cc227827073c9ab16dd2ce9b9e3b579.png" mode="heightFix"></image> |
|
|
|
<image src="https://static.ticket.sz-trip.com/cgc/images/index/more.png" mode="" @click="gotoPath('/subPackages/letter/index')"></image> |
|
|
|
</view> |
|
|
|
<view class="handwritten-box flex-between"> |
|
|
|
<image :src="showImg(item.image)" mode="aspectFill" v-for="(item,index) in handwrittenList" :key="index" |
|
|
|
@click="gotoPath('/subPackages/letter/detail?id='+item.id)"></image> |
|
|
|
@click="viewDetail(item)"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 非遗时光 --> |
|
|
|
<view v-if="shiguang && shiguang.image"> |
|
|
|
<view class="title-box flex-between"> |
|
|
|
<image src="https://static.ticket.sz-trip.com/cgc/images/index/title2.png" mode=""></image> |
|
|
|
<image src="https://cgc.js-dyyj.com/uploads/20250618/496fdd2ccccc9f8a00ec698549532185.png" mode="heightFix"></image> |
|
|
|
<image src="https://static.ticket.sz-trip.com/cgc/images/index/more.png" mode="" @click="gotoPath('/subPackages/shiguang/index')"></image> |
|
|
|
</view> |
|
|
|
<view class="time-box" :style="{backgroundImage: 'url('+showImg(shiguang.image)+')'}" @click="gotoVideo(shiguang)"> |
|
|
|
@ -69,18 +75,20 @@ |
|
|
|
<view v-for="(item,indexs) in getColumnItems(index)" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view class="image-container"> |
|
|
|
<image :src="item.src" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
<image src="https://static.ticket.sz-trip.com/cgc/images/index/plays.png" mode="widthFix" class="play-img" v-if="hotIndex && item.genre == 'video'" lazy-load="true"></image> |
|
|
|
<!-- <image src="https://static.ticket.sz-trip.com/cgc/images/index/plays.png" mode="widthFix" class="play-img" v-if="hotIndex && item.genre == 'video'" lazy-load="true"></image> --> |
|
|
|
</view> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view> |
|
|
|
<view class="subtitle" v-if="hotIndex && item.genre == 'video'"> |
|
|
|
<!-- <view class="subtitle" v-if="hotIndex && item.genre == 'video'"> |
|
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/index/user.png" mode="aspectFill"></image> |
|
|
|
{{item.author}} |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -88,26 +96,36 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 导航栏参数 |
|
|
|
height: 0, |
|
|
|
statusBarHeight: 0, |
|
|
|
|
|
|
|
topBanner: [], |
|
|
|
smallBanner: [], |
|
|
|
menuList: [ |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=0' |
|
|
|
path: '/subPackages/techan/index?idIndex=0', |
|
|
|
image: '', |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=1' |
|
|
|
path: '/subPackages/techan/index?idIndex=1', |
|
|
|
image: '', |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=2' |
|
|
|
path: '/subPackages/techan/index?idIndex=2', |
|
|
|
image: '', |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=3' |
|
|
|
path: '/subPackages/techan/index?idIndex=3', |
|
|
|
image: '', |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=4' |
|
|
|
path: '/subPackages/techan/index?idIndex=4', |
|
|
|
image: '', |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: '/subPackages/techan/index?idIndex=5' |
|
|
|
path: '/subPackages/techan/index?idIndex=5', |
|
|
|
image: '', |
|
|
|
} |
|
|
|
], |
|
|
|
handwrittenList: [], |
|
|
|
@ -118,14 +136,14 @@ |
|
|
|
id: '41' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '猜你喜欢', |
|
|
|
title: '苏州非遗', |
|
|
|
id: '41' |
|
|
|
} |
|
|
|
], |
|
|
|
hotIndex: 0, |
|
|
|
hotList: [], |
|
|
|
isLoading: false, |
|
|
|
limit: 4 |
|
|
|
limit: 4, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
@ -136,6 +154,7 @@ |
|
|
|
if(!uni.getStorageSync('location')) { |
|
|
|
this.getLocation() |
|
|
|
} |
|
|
|
this.initRectInfo() |
|
|
|
|
|
|
|
this.getList() |
|
|
|
this.changeType(0) |
|
|
|
@ -146,6 +165,23 @@ |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
viewDetail(item) { |
|
|
|
if (item.url) { |
|
|
|
uni.navigateTo({ |
|
|
|
url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url) |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
uni.navigateTo({ |
|
|
|
url:'/subPackages/letter/detail?id='+item.id |
|
|
|
}) |
|
|
|
}, |
|
|
|
initRectInfo () { |
|
|
|
const sysInfo = uni.getSystemInfoSync() |
|
|
|
this.statusBarHeight = sysInfo.statusBarHeight |
|
|
|
// 默认高度 |
|
|
|
this.height = sysInfo.statusBarHeight + 40 |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
// 大轮播 |
|
|
|
this.Post({ |
|
|
|
@ -164,6 +200,7 @@ |
|
|
|
}, '/api/adv/getAdv').then(res => { |
|
|
|
if(res.data) { |
|
|
|
this.smallBanner = res.data; |
|
|
|
this.screenPng = res.data[0] |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
@ -171,7 +208,7 @@ |
|
|
|
this.Post({ |
|
|
|
type_id: 1, |
|
|
|
offset: 0, |
|
|
|
limit: 4 |
|
|
|
limit: 1 |
|
|
|
}, '/api/article/getArticleByType').then(res => { |
|
|
|
if(res.data) { |
|
|
|
this.handwrittenList = res.data |
|
|
|
@ -229,13 +266,14 @@ |
|
|
|
getColumnItems(columnIndex) { |
|
|
|
const columnItems = []; |
|
|
|
this.hotList.forEach((item, index) => { |
|
|
|
switch (this.hotIndex) { |
|
|
|
case 1: |
|
|
|
item.src = this.showImg(item.image); |
|
|
|
break; |
|
|
|
default: |
|
|
|
item.src = this.showImg(item.goods.image); |
|
|
|
} |
|
|
|
// switch (this.hotIndex) { |
|
|
|
// case 1: |
|
|
|
// item.src = this.showImg(item.image); |
|
|
|
// break; |
|
|
|
// default: |
|
|
|
// item.src = this.showImg(item.goods.image); |
|
|
|
// } |
|
|
|
item.src = this.showImg(item.goods.image); |
|
|
|
|
|
|
|
if (index % 2 === columnIndex) { |
|
|
|
columnItems.push(item); |
|
|
|
@ -252,15 +290,23 @@ |
|
|
|
}, |
|
|
|
getHotList() { |
|
|
|
if(this.hotIndex == 1) { |
|
|
|
// this.Post({ |
|
|
|
// type_id: 3, |
|
|
|
// offset: this.hotList.length, |
|
|
|
// limit: this.limit |
|
|
|
// },'/api/Article/getArticleByType').then(res => { |
|
|
|
// if(res) { |
|
|
|
// if(res.data.length < this.limit) this.isLoading = true |
|
|
|
// this.hotList = this.hotList.concat(res.data) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
this.Post({ |
|
|
|
type_id: 3, |
|
|
|
tag_id: 52, |
|
|
|
offset: this.hotList.length, |
|
|
|
limit: this.limit |
|
|
|
},'/api/Article/getArticleByType').then(res => { |
|
|
|
if(res) { |
|
|
|
if(res.data.length < this.limit) this.isLoading = true |
|
|
|
this.hotList = this.hotList.concat(res.data) |
|
|
|
} |
|
|
|
limit: this.limit, |
|
|
|
},'/api/tag/getGoodsByTagId').then(res => { |
|
|
|
if(res.data.length < this.limit) this.isLoading = true |
|
|
|
this.hotList = this.hotList.concat(res.data) |
|
|
|
}) |
|
|
|
}else { |
|
|
|
this.Post({ |
|
|
|
@ -279,29 +325,50 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
gotoHotDetail(item) { |
|
|
|
if(this.hotIndex == 1) { |
|
|
|
|
|
|
|
if(item.genre == 'video') { |
|
|
|
// 视频 |
|
|
|
this.gotoVideo(item) |
|
|
|
}else { |
|
|
|
// 文章 |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPackages/letter/detail?id=' + item.id |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}else { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPackages/techan/detail?id=' + item.goods_id |
|
|
|
}) |
|
|
|
} |
|
|
|
// if(this.hotIndex == 1) { |
|
|
|
|
|
|
|
// if(item.genre == 'video') { |
|
|
|
// // 视频 |
|
|
|
// this.gotoVideo(item) |
|
|
|
// }else { |
|
|
|
// // 文章 |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/subPackages/letter/detail?id=' + item.id |
|
|
|
// }) |
|
|
|
// } |
|
|
|
|
|
|
|
// }else { |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/subPackages/techan/detail?id=' + item.goods_id |
|
|
|
// }) |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.search-header{ |
|
|
|
width: 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
background: white; |
|
|
|
text-align: center; |
|
|
|
z-index:99; |
|
|
|
.title{ |
|
|
|
font-size: 30rpx |
|
|
|
} |
|
|
|
.subtitle{ |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
min-height: 100vh; |
|
|
|
background: #F9F0EA; |
|
|
|
@ -349,28 +416,33 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.menu-box { |
|
|
|
margin: 54rpx 33rpx 0; |
|
|
|
width: 100%; |
|
|
|
padding: 54rpx 33rpx 0; |
|
|
|
overflow: hidden; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.menu-left { |
|
|
|
flex-wrap: wrap; |
|
|
|
// flex-wrap: wrap; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
&>view { |
|
|
|
width: 33%; |
|
|
|
flex: 1; |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
&>view:nth-child(n+4) { |
|
|
|
margin-top: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.topImg { |
|
|
|
height: 108rpx; |
|
|
|
height: 84rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.titleImg { |
|
|
|
height: 22rpx; |
|
|
|
margin-top: 8rpx; |
|
|
|
height: 21rpx; |
|
|
|
margin-top: 19rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -400,13 +472,13 @@ |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 322rpx; |
|
|
|
width: 100%; |
|
|
|
height: 181rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
&>image:nth-child(n+3) { |
|
|
|
margin-top: 13rpx; |
|
|
|
} |
|
|
|
// &>image:nth-child(n+3) { |
|
|
|
// margin-top: 13rpx; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
.time-box { |
|
|
|
|
jiazhipeng
4 months ago