cgc非遗
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.

451 lines
10 KiB

5 months ago
<template>
<view class="content">
5 months ago
<!-- 头部banner -->
<view class="top-box">
<!-- 搜索 -->
<view class="search-box">
<image src="https://static.ticket.sz-trip.com/cgc/images/index/search.png" mode=""></image>
<span>|</span>
搜一搜您想要的
</view>
<swiper class="top-banner" :circular="true" :interval="6000"
:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner">
<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>
</swiper-item>
</swiper>
</view>
5 months ago
5 months ago
<!-- 金刚区 -->
<view class="menu-box flex-between">
<view class="menu-left flex-around">
5 months ago
<view class="" v-for="(item,index) in menuList" :key="index" @click="gotoPath(item.path)">
5 months ago
<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>
</view>
</view>
<view class="menu-right flex-around">
<swiper class="menu-right" :circular="true" :interval="6000"
:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner">
<swiper-item v-for="(item, index) in topBanner" :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 class="title-box flex-between">
<image src="https://static.ticket.sz-trip.com/cgc/images/index/title1.png" mode=""></image>
<image src="https://static.ticket.sz-trip.com/cgc/images/index/more.png" mode=""></image>
</view>
<view class="handwritten-box flex-between">
<image :src="showImg(item.head_img)" mode="aspectFill" v-for="(item,index) in handwrittenList" :key="index"></image>
</view>
<!-- 非遗时光 -->
<view class="title-box flex-between">
<image src="https://static.ticket.sz-trip.com/cgc/images/index/title2.png" mode=""></image>
5 months ago
<image src="https://static.ticket.sz-trip.com/cgc/images/index/more.png" mode="" @click="gotoPath('/subPackages/shiguang/index')"></image>
5 months ago
</view>
<view class="time-box" style="background-image: url('https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg')">
<image src="https://static.ticket.sz-trip.com/cgc/images/index/play.png" class="play"></image>
</view>
<!-- 底部推荐 -->
<view class="hot-type flex-around">
<view v-for="(item,index) in hotType" :key="index" :class="{'hot-active': index == hotIndex}" @click="changeType(index)">
{{item.title}}
</view>
</view>
<view class="hot-box">
<view class="hot-column" v-for="(column, index) in 2" :key="index">
<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" lazy-load="true"></image>
</view>
<view class="hot-content">
<view class="title text-overflowRows">{{item.title || item.name}}</view>
<view class="subtitle" v-if="hotIndex">
<image :src="item.src" mode="aspectFill"></image>
{{item.author}}
</view>
</view>
</view>
</view>
</view>
5 months ago
</view>
</template>
<script>
export default {
data() {
return {
5 months ago
topBanner: [
{
head_img: 'https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg'
},
{
head_img: 'https://changshu.js-dyyj.com/uploads/20250418/8a7631a1955ca05e619c0a25ad5ac1d1.jpg'
}
],
menuList: [
{
5 months ago
path: '/subPackages/techan/index?idIndex=0'
5 months ago
},
{
5 months ago
path: '/subPackages/techan/index?idIndex=1'
5 months ago
},
{
5 months ago
path: '/subPackages/techan/index?idIndex=2'
5 months ago
},
{
5 months ago
path: '/subPackages/techan/index?idIndex=3'
5 months ago
},
{
5 months ago
path: '/subPackages/techan/index?idIndex=4'
5 months ago
},
{
5 months ago
path: '/subPackages/techan/index?idIndex=5'
5 months ago
}
],
handwrittenList: [
{head_img: 'https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg'},
{head_img: 'https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg'},
{head_img: 'https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg'},
{head_img: 'https://static.ticket.sz-trip.com/uploads/20230920/7cdb05709d09cc2c86ea5671bd657c85.jpg'},
],
hotType: [
{
title: '好物推荐',
id: '41'
},
{
title: '猜你喜欢',
id: '41'
}
],
hotIndex: 0,
hotList: [],
isLoading: false,
limit: 4
5 months ago
}
},
onLoad() {
5 months ago
},
onReady() {
// 获取经纬度
if(!uni.getStorageSync('location')) {
this.getLocation()
}
5 months ago
this.topBanner()
5 months ago
this.changeType(0)
},
onReachBottom() {
setTimeout(() => {
if (!this.isLoading) this.getHotList();
}, 1000);
5 months ago
},
methods: {
5 months ago
getBanner() {
// 大轮播
// this.Post({
// type_id: 3,
// position: 6,
// }, '/api/adv/getAdv').then(res => {
// if (res.data) {
// // this.topBanner = res.data;
// }
// });
5 months ago
},
5 months ago
// 瀑布流
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.image);
}
if (index % 2 === columnIndex) {
columnItems.push(item);
}
});
return columnItems;
},
// 更改热门推荐类型
changeType(index) {
this.hotIndex = index
this.isLoading = false
this.hotList = []
this.getHotList()
},
getHotList() {
if(this.typeIndex == 1) {
this.Post({
type_id: this.hotType[this.hotIndex].id,
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)
}
})
}else {
this.Post({
type_id: this.hotType[this.hotIndex].id,
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)
}
})
}
},
gotoHotDetail(item) {
if(this.typeIndex == 1) {
// 视频
uni.navigateTo({
url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
})
}else {
}
}
5 months ago
}
}
</script>
5 months ago
<style lang="scss" scoped>
5 months ago
.content {
5 months ago
min-height: 100vh;
background: #F9F0EA;
padding: 21rpx 0 50rpx;
5 months ago
}
5 months ago
.top-box {
width: 684rpx;
height: 451rpx;
border-radius: 30rpx;
overflow: hidden;
position: relative;
margin: auto;
.top-banner {
width: 100%;
height: 100%;
}
.search-box {
width: 632rpx;
height: 40rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
z-index: 1000;
top: 31rpx;
left: 26rpx;
display: flex;
align-items: center;
font-weight: 500;
font-size: 24rpx;
color: #7B7C7D;
padding-left: 21rpx;
image {
width: 29rpx;
height: 28rpx;
}
span {
padding: 0 15rpx;
}
}
}
.menu-box {
margin: 54rpx 33rpx 0;
.menu-left {
flex-wrap: wrap;
&>view {
width: 33%;
display: flex;
flex-direction: column;
align-items: center;
}
&>view:nth-child(n+4) {
margin-top: 36rpx;
}
.topImg {
height: 108rpx;
}
.titleImg {
height: 22rpx;
margin-top: 8rpx;
}
}
.menu-right {
width: 254rpx;
height: 323rpx;
border-radius: 20rpx;
}
}
.title-box {
margin: 60rpx 44rpx 21rpx 50rpx;
align-items: flex-end;
&>image {
width: 350rpx;
height: 32rpx;
}
&>image:last-child {
width: 59rpx;
height: 20rpx;
}
}
.handwritten-box {
margin: 0 46rpx;
flex-wrap: wrap;
image {
width: 322rpx;
height: 181rpx;
border-radius: 10rpx;
}
&>image:nth-child(n+3) {
margin-top: 13rpx;
}
}
.time-box {
background-size: 100% 100%;
width: 657rpx;
height: 370rpx;
border-radius: 30rpx;
margin: 23rpx auto 0;
position: relative;
.play {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 90rpx;
height: 90rpx;
}
}
.hot-type {
height: 122rpx;
font-weight: bold;
font-size: 32rpx;
color: #B5B5B6;
&>view {
position: relative;
}
&>view::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10rpx;
background-color: #B5B5B6;
margin: 0 auto;
width: 32rpx;
height: 4rpx;
}
.hot-active {
color: #000000;
}
.hot-active::after {
background-color: #000000;
}
}
.hot-box {
margin: 0 48rpx;
display: flex;
justify-content: space-between;
.hot-column {
width: 319rpx;
display: flex;
flex-direction: column;
}
.hot-item {
width: 319rpx;
background: #FFFFFF;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 13rpx;
.image-container {
position: relative;
.hot-img {
width: 319rpx;
}
.play-img {
width: 66.67rpx;
height: 66.67rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.hot-content {
padding: 15rpx;
.title {
font-weight: bold;
font-size: 26rpx;
color: #000000;
}
.subtitle {
margin-top: 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #000000;
display: flex;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
border: 1rpx solid #000000;
display: block;
margin-right: 15rpx;
}
}
}
}
}
5 months ago
</style>