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.

525 lines
11 KiB

5 months ago
<template>
<view class="content">
5 months ago
<!-- 头部banner -->
<view class="top-box">
<!-- 搜索 -->
5 months ago
<!-- <view class="search-box">
5 months ago
<image src="https://static.ticket.sz-trip.com/cgc/images/index/search.png" mode=""></image>
<span>|</span>
搜一搜您想要的
5 months ago
</view> -->
5 months ago
<swiper class="top-banner" :circular="true" :interval="6000"
5 months ago
:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0">
5 months ago
<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"
5 months ago
:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner">
<swiper-item v-for="(item, index) in smallBanner" :key="index" @click.stop="gotoUrlNew(item)">
5 months ago
<image class="menu-right" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
</swiper-item>
</swiper>
</view>
</view>
<!-- 非遗手札 -->
5 months ago
<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://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>
</view>
5 months ago
</view>
<!-- 非遗时光 -->
5 months ago
<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://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)">
<image src="https://static.ticket.sz-trip.com/cgc/images/index/play.png" class="play"></image>
</view>
5 months ago
</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">
5 months ago
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view>
5 months ago
<view class="subtitle" v-if="hotIndex && item.genre == 'video'">
5 months ago
<image src="https://static.ticket.sz-trip.com/tongli/images/index/user.png" mode="aspectFill"></image>
5 months ago
{{item.author}}
</view>
</view>
</view>
</view>
</view>
5 months ago
</view>
</template>
<script>
export default {
data() {
return {
5 months ago
topBanner: [],
smallBanner: [],
5 months ago
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
}
],
5 months ago
handwrittenList: [],
shiguang: {},
5 months ago
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.getList()
5 months ago
this.changeType(0)
},
onReachBottom() {
setTimeout(() => {
if (!this.isLoading) this.getHotList();
}, 1000);
5 months ago
},
methods: {
5 months ago
getList() {
5 months ago
// 大轮播
5 months ago
this.Post({
type_id: 3,
position: 1,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.topBanner = res.data;
}
});
// 小轮播
this.Post({
type_id: 3,
position: 2,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.smallBanner = res.data;
}
});
// 非遗手札
this.Post({
type_id: 1,
offset: 0,
limit: 4
}, '/api/article/getArticleByType').then(res => {
if(res.data) {
this.handwrittenList = res.data
}
})
// 非遗拾光
this.Post({
type_id: 2,
offset: 0,
limit: 1
}, '/api/article/getArticleByType').then(res => {
if(res.data) {
this.shiguang = res.data[0]
}
})
},
// 2是各种详情页,3是列表专题页面,4是小程序
gotoUrlNew(item) {
console.log(item);
let that = this;
let url = '';
switch (item.jump_type) {
case 0:
break;
case 2:
uni.navigateTo({
url: item.tdata
});
break;
case 3:
uni.navigateTo({
url: '/subPackages/webPage/webPage?url=' + item.tdata
});
break;
case 4:
uni.navigateToMiniProgram({
appId: item.tdata.appid, // 此为appid
path: item.tdata.page, // 此为首页路径
envVersion: 'release',
success: res => {
// 打开成功
console.log('打开成功', res);
},
fail: err => {
console.log(err);
}
});
break;
default:
break;
}
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:
5 months ago
item.src = this.showImg(item.goods.image);
5 months ago
}
if (index % 2 === columnIndex) {
columnItems.push(item);
}
});
return columnItems;
},
// 更改热门推荐类型
changeType(index) {
this.hotIndex = index
this.isLoading = false
this.hotList = []
this.getHotList()
},
getHotList() {
5 months ago
if(this.hotIndex == 1) {
5 months ago
this.Post({
5 months ago
type_id: 3,
5 months ago
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({
5 months ago
tag_id: 51,
5 months ago
offset: this.hotList.length,
5 months ago
limit: this.limit,
},'/api/tag/getGoodsByTagId').then(res => {
if(res.data.length < this.limit) this.isLoading = true
this.hotList = this.hotList.concat(res.data)
5 months ago
})
}
},
5 months ago
gotoVideo(item) {
uni.navigateTo({
url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
})
},
5 months ago
gotoHotDetail(item) {
5 months ago
if(this.hotIndex == 1) {
5 months ago
if(item.genre == 'video') {
// 视频
this.gotoVideo(item)
}else {
// 文章
uni.navigateTo({
url: '/subPackages/letter/detail?id=' + item.id
})
}
5 months ago
}else {
5 months ago
uni.navigateTo({
url: '/subPackages/techan/detail?id=' + item.goods_id
})
5 months ago
}
}
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%;
display: block;
margin-right: 15rpx;
}
}
}
}
}
5 months ago
</style>