cgc_WeChat/pages/index/index.vue

<template>
	<view class="content">
		<!-- 头部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="`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="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://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>
		</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://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">
			<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 && 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'">
							<image src="https://static.ticket.sz-trip.com/tongli/images/index/user.png" mode="aspectFill"></image>
							{{item.author}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				smallBanner: [],
				menuList: [
					{
						path: '/subPackages/techan/index?idIndex=0'
					},
					{
						path: '/subPackages/techan/index?idIndex=1'
					},
					{
						path: '/subPackages/techan/index?idIndex=2'
					},
					{
						path: '/subPackages/techan/index?idIndex=3'
					},
					{
						path: '/subPackages/techan/index?idIndex=4'
					},
					{
						path: '/subPackages/techan/index?idIndex=5'
					}
				],
				handwrittenList: [],
				shiguang: {},
				hotType: [
					{
						title: '好物推荐',
						id: '41'
					},
					{
						title: '猜你喜欢',
						id: '41'
					}
				],
				hotIndex: 0,
				hotList: [],
				isLoading: false,
				limit: 4
			}
		},
		onLoad() {

		},
		onReady() {
			// 获取经纬度
			if(!uni.getStorageSync('location')) {
				this.getLocation()
			}
			
			this.getList()
			this.changeType(0)
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.isLoading) this.getHotList();
			}, 1000);
		},
		methods: {
			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.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;
				}
			},
			// 瀑布流
			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);
					}
					
					if (index % 2 === columnIndex) {
						columnItems.push(item);
					}
				});
				return columnItems;
			},
			// 更改热门推荐类型
			changeType(index) {
				this.hotIndex = index
				this.isLoading = false
				this.hotList = []
				this.getHotList()
			},
			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)
						}
					})
				}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) {
				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>
	.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 {
		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;
					}
				}
			}
		}
	}
</style>