cgc_WeChat/pages/index/index.vue

<template>
	<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">
			<!-- 搜索 -->
			<!-- <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 && topBanner.length > 0">
				<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>
		
		<!-- 金刚区 -->
		<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="showImg(`https://static.ticket.sz-trip.com/cgc/images/indexs/${index + 1}.png`)" class="topImg" mode="heightFix"></image>
					<image :src="showImg(`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">
				<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 v-if="handwrittenList && handwrittenList.length > 0">
		
			<view class="title-box flex-between">
				<image src="https://cgc.js-dyyj.com/uploads/20250619/d0cfd5cd7253d8ce6a747842a40be020.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="viewDetail(item)"></image>
			</view>
		</view>
		
		<!-- 非遗时光 -->
		<view v-if="shiguang && shiguang.image">
			<view class="title-box flex-between">
				<image src="https://cgc.js-dyyj.com/uploads/20250619/b10ed22a2e5b2187d88352869575fb16.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)">
				<image src="https://static.ticket.sz-trip.com/cgc/images/index/play.png" class="play"></image>
			</view>
		</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" v-if="hotIndex==0">
			<view class="hot-column" v-for="(column, index) in 2" :key="index">
				<view v-if="indexs%2==1&&column==0" v-for="(item,indexs) in hotList" :key="indexs" class="hot-item" @click="gotoHotDetail(item)">
					<view class="image-container">
						<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflowRows">{{item.title || item.goods.title}}</view>
					</view>
				</view>
				<view v-if="indexs%2==0&&column==1" v-for="(item,indexs) in hotList" :key="indexs" class="hot-item" @click="gotoHotDetail(item)">
					<view class="image-container">
						<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflowRows">{{item.title || item.goods.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hot-box" v-else>
			<view class="hot-column" v-for="(column, index) in 2" :key="index">
				<view v-if="indexs%2==1&&column==0" v-for="(item,indexs) in hotList1" :key="indexs" class="hot-item" @click="gotoHotDetail(item)">
					<view class="image-container">
						<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflowRows">{{item.title || item.goods.title}}</view>
					</view>
				</view>
				<view v-if="indexs%2==0&&column==1" v-for="(item,indexs) in hotList1" :key="indexs" class="hot-item" @click="gotoHotDetail(item)">
					<view class="image-container">
						<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflowRows">{{item.title || item.goods.title}}</view>
					</view>
				</view>
			</view>
		</view>
	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航栏参数
				height: 0,
				statusBarHeight: 0,
				
				topBanner: [],
				smallBanner: [],
				menuList: [
					{
						path: '/subPackages/techan/index?idIndex=0',
						image: '',
					},
					{
						path: '/subPackages/techan/index?idIndex=1',
						image: '',
					},
					{
						path: '/subPackages/techan/index?idIndex=2',
						image: '',
					},
					{
						path: '/subPackages/techan/index?idIndex=3',
						image: '',
					},
					{
						path: '/subPackages/techan/index?idIndex=4',
						image: '',
					},
					{
						path: '/subPackages/techan/index?idIndex=5',
						image: '',
					}
				],
				handwrittenList: [],
				shiguang: {},
				hotType: [
					{
						title: '好物推荐',
						id: '41'
					},
					{
						title: '苏州非遗',
						id: '41'
					}
				],
				
				hotIndex: 0,
				hotList: [],
				hotList1: [],
				isLoading: false,
				limit: 4,
			}
		},
		onLoad() {
			
		},
		onReady() {
			// 获取经纬度
			// if(!uni.getStorageSync('location')) {
			// 	this.getLocation()
			// }
			this.initRectInfo()
			
			this.getList()
			this.initHotList()
			this.changeType(0)
		},
		onReachBottom() {
			// setTimeout(() => {
			// 	// if (!this.isLoading) this.getHotList();
			// 	this.getHotList()
			// }, 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({
					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.screenPng = res.data[0]
					}
				});
				
				// 非遗手札
				this.Post({
					type_id: 1,
					offset: 0,
					limit: 1
				}, '/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;
				}
			},
			// 瀑布流
			// 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);
			// 		// }
			// 		item.src = this.showImg(item.goods.image);
					
			// 		if (index % 2 === columnIndex) {
			// 			columnItems.push(item);
			// 		}
			// 	});
			// 	return columnItems;
			// },
			// 更改热门推荐类型
			changeType(index) {
				this.hotIndex = index
				// this.isLoading = false
				// if (index==0) {
				// 	this.hotList = this.hotList1
				// }
				
				// this.getHotList()
			},
			initHotList () {
				this.hotList = []
				this.hotList1 = []
				this.Post({
					tag_id: 51,
					offset: this.hotList.length,
					limit: 100,
				},'/api/tag/getGoodsByTagId').then(res => {
					if(res.data.length < this.limit) this.isLoading = true
					this.hotList = this.hotList.concat(res.data)
				})
				this.Post({
					tag_id: 52,
					offset: this.hotList1.length,
					limit: 100,
				},'/api/tag/getGoodsByTagId').then(res => {
					if(res.data.length < this.limit) this.isLoading = true
					this.hotList1 = this.hotList1.concat(res.data)
				})
			},
			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({
						tag_id: 52,
						offset: this.hotList1.length,
						limit: this.limit,
					},'/api/tag/getGoodsByTagId').then(res => {
						if(res.data.length < this.limit) this.isLoading = true
						this.hotList1 = this.hotList.concat(res.data)
					})
				}else {
					this.Post({
						tag_id: 51,
						offset: this.hotList.length,
						limit: this.limit,
					},'/api/tag/getGoodsByTagId').then(res => {
						if(res.data.length < this.limit) this.isLoading = true
						this.hotList = this.hotList.concat(res.data)
					})
				}
			},
			gotoVideo(item) {
				uni.navigateTo({
					url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			gotoHotDetail(item) {
					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;
		padding: 21rpx 0 50rpx;
	}
	
	.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 {
		width: 100%;
		padding: 54rpx 33rpx 0;
		overflow: hidden;
		box-sizing: border-box;
		
		.menu-left {
			// flex-wrap: wrap;
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			&>view {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			
			.topImg {
				height: 84rpx;
			}
			
			.titleImg {
				height: 21rpx;
				margin-top: 19rpx;
			}
		}
		
		.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: 100%;
			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;
					}
				}
			}
		}
	}
</style>