tongli_WeChat/pages/index/index.vue

<template>
	<view class="content">
		<view class="top-box">
			<!-- 搜索 -->
			<image src="https://static.ticket.sz-trip.com/tongli/images/index/search.png" class="search-img" @click="gotoPath('/subPackages/search/search')"></image>
			
			<swiper class="top-banner" :circular="true" :interval="6000" :current="current"  @change="swiperChange"
				: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"></image>
				</swiper-item>
			</swiper>
			
			<view class="swiper-num">
				{{current}}/{{topBanner.length}}
			</view>
		</view>
		
		<!-- 资讯 -->
		<view class="notice-box">
			<image src="https://static.ticket.sz-trip.com/tongli/images/index/noticeImg.png" class="noticeImg"></image>
			同里古镇今日开园
			
			<view class="notice-top flex-between">
				<view style="display: flex;align-items: center;">
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/horn.png" mode=""></image>
					<view class="notice-text text-overflow">{{notice}}</view>
				</view>
				<view class="notice-more" @click="gotoPath('/subPackages/notice/noticeList')">更多 ></view>
			</view>
			
			<view class="notice-bottom flex-between">
				<image src="https://static.ticket.sz-trip.com/tongli/images/index/menpiao.png" mode="" @click="gotoPath(navList[0].path)"></image>
				<image src="https://static.ticket.sz-trip.com/tongli/images/index/ditu.png" mode=""></image>
			</view>
		</view>
		
		<!-- 金刚区 -->
		<view class="nav-box">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="gotoPath(item.path)">
				<image :src="item.img" mode="" class="nav-img"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
		
		<!-- 景点展览 -->
		<view v-if="scenicList && scenicList.length > 0">
			<view class="title-box flex-between">
				<image :src="showImg(homeUi.ydms)" mode=""></image>
				<view @click="gotoPath('/subPackages/ticketBooking/ticketBooking')">更多 ></view>
			</view>
			<view class="scenic-box">
				<view v-for="(item,index) in scenicList" :key="index" class="scenic-item" @click="gotoScenic(item)"
				 :style="{backgroundImage: 'url('+showImg(item.image)+')',backgroundSize: 'cover'}">
					<view class="scenic-title">{{item.title}}</view>
				</view>
			</view>
		</view>
		
		<!-- 线路推荐 -->
		<view v-if="lineList && lineList.length > 0">
			<view class="title-box flex-between">
				<image :src="showImg(homeUi.xltj)" mode=""></image>
				<view @click="gotoLineList">更多 ></view>
			</view>
			<view>
				<view v-for="(item,index) in lineList" :key="index" class="line-item" @click="goLineDetail(item)">
					<view class="hot flex-center" v-if="item.goods.image_tag">{{item.goods.image_tag}}</view>
					<image :src="showImg(item.points[0].main_image)" mode="aspectFill" class="line-img"></image>
					
					<view class="line-content">
						<view class="line-title text-overflow">{{item.name}}</view>
						<view class="line-subtitle text-overflow">{{item.points.length}}个景点</view>
						<!-- <view style="display: flex;" v-if="item.goods.goods_new_tag">
							<view class="line-tag" v-for="(tagItem,tagIndex) in item.goods.goods_new_tag.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view>
						</view> -->
						<!-- <view class="line-price">{{item.goods.low_money / 100}}</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 盐都美食 -->
		<view v-if="foodList && foodList.length > 0">
			<view class="title-box flex-between">
				<image :src="showImg(homeUi.ydms)" mode=""></image>
				<view @click="gotoPath('/subPackages/food/foodList')">更多 ></view>
			</view>
			<view class="food-box">
				<view v-for="(item,index) in foodList" :key="index" class="food-item" :style="{backgroundImage: 'url('+showImg(item.goods.image)+')',backgroundSize: 'cover'}" @click="gotoFood(item.goods)">
					<view class="recommend" v-if="item.goods.image_tag">{{item.goods.image_tag}}</view>
					<view class="food-content">
						<view class="food-price">{{item.goods.money / 100}}</view>
						<view class="text-overflow">{{item.goods.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 游记攻略 -->
		<view>
			<view class="title-box flex-between">
				<image :src="showImg(homeUi.yjgl)" mode=""></image>
			</view>
			
			<view class="strategy-box">
				<view v-for="(num,nums) in 2" :key="nums">
				    <view v-for="(item,index) in strategyList" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="goCalendarDetail(item)">
				        <image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image>
				        <view class="strategy-content">
				        	<view class="strategy-title">{{item.title}}</view>
							<view class="strategy-subtitle">同里旅游</view>
				        </view>
				    </view>
				</view>
			</view>
			
			<view class="strategy-more" @click="strategyMore" v-show="showMore">查看更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				current: 0,
				navList: [
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/lytl.png',
						text: '乐游同里',
						path: '/subPackages/ticketBooking/ticketBooking'
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/hdrl.png',
						text: '活动日历',
						path: '/subPackages/hotelHomestay/hotelHomestay'
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/tsty.png',
						text: '特色体验',
						path: '/subPackages/food/foodList'
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/jdms.png',
						text: '酒店民宿',
						path: '/subPackages/techan/techanList'
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/zcs.png',
						text: '找厕所',
						// path: '/subPackages/line/lineList'
						path: '/subPackages/webPage/webPage?url='+ encodeURIComponent('https://yandumap.sz-trip.com/lineList'),
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/tcc.png',
						text: '停车场',
						path: '/subPackages/webPage/webPage?url='+ encodeURIComponent('https://yandumap.sz-trip.com/'),
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/tcwc.png',
						text: '特产文创',
						path: '/subPackages/travelGuide/travelGuide'
					},
					{
						img: 'https://static.ticket.sz-trip.com/tongli/images/index/tlms.png',
						text: '同里美食',
						path: '/subPackages/eventCalendar/eventCalendar'
					}
				],
				scenicList: [],
				homeUi: {},
				month: 0,
				day: 0,
				lineList: [],
				foodList: [],
				strategyList: [],
				showMore: true,
				notice: '',
			}
		},
		onReady() {
			// 获取经纬度
			if(!uni.getStorageSync('location')) {
				this.getLocation()
			}
			
			this.getTopBanner()
			this.getScenicByTag()
			this.getHomeUi()
			this.getNowDate()
			this.getLineList()
			this.getFoodList()
			this.getArticleByType()
			this.getLatest()
		},
		methods: {
			//轮播图左右滑动
			swiperChange(e) {
				this.current = e.detail.current;
			},
			// 去线路列表
			gotoLineList() {
				uni.navigateTo({
					url: '/subPackages/webPage/webPage?url=https://yandumap.sz-trip.com/lineList'
				});
			},
			// 去线路详情
			goLineDetail(item) {
				uni.navigateTo({
					url: '/subPackages/webPage/webPage?url=https://yandumap.sz-trip.com/lineList?id=' + item.id
				});
			},
			// 公告
			getLatest() {
				this.Post({},'/api/anncmnt/getLatest').then(res => {
					this.notice = res.data.title
				})
			},
			// 顶部banner
			getTopBanner() {
				this.Post({
					type_id: 3,
					position: 6
				},'/api/adv/getAdv').then(res => {
					this.topBanner = res.data;
				})
			},
			// 2是各种详情页，3是列表专题页面，4是小程序
			gotoUrlNew(item) {
				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;
				}
			},
			// 景点详情
			gotoScenic(item) {
				this.goOtherDetail(item)
				if(!item.link_type) {
					uni.navigateTo({
						url:'/subPackages/ticketBooking/detail?id='+item.id
					})
				}
			},
			// 美食详情
			gotoFood(item) {
				this.goOtherDetail(item)
				if(!item.link_type) {
					uni.navigateTo({
						url: '/subPackages/food/foodDetail?id=' + item.id
					});
				}
			},
			// 游记攻略、线路详情
			goCalendarDetail(item,type) {
				this.Post({id: item.id},'/api/article/getArticleById')
				this.goOtherDetail(item)
				if(!item.link_type) {
					if(type) {
						// 线路
						uni.navigateTo({
							url:'/subPackages/line/detail?id='+item.id
						})
					}else {
						// 游记攻略
						uni.navigateTo({
							url:'/subPackages/travelGuide/detail?id='+item.id
						})
					}
				}
			},
			// 景点推荐
			getScenicByTag() {
				this.Post({
					tag_id: 48,
					offset: 0,
					limit: 5
				},'/api/scenic/getScenicByTagId').then(res => {
					this.scenicList = res.data
				})
			},
			// 首页UI
			getHomeUi() {
				this.Post({
					type_id: 3
				},'/api/adv/get_home_ui').then(res => {
					res.data.content.map(item => {
						this.homeUi[item.id] = item.image
					})
				})
			},
			getNowDate() {
				let now = new Date();
				this.month = now.getMonth() + 1;
				this.day = now.getDate();
			},
			// 线路推荐
			getLineList() {
				this.Post({
					type: '',
					code: ''
				},'/api/emap/getLineByCode').then(res => {
					this.lineList = res.data
				})
			},
			// 盐都美食
			getFoodList() {
				this.Post({
					offset: 0,
					limit: 3,
					tag_id: 56
				},'/api/tag/getGoodsByTagId').then(res => {
					this.foodList = res.data;
				})
			},
			// 游记攻略
			getArticleByType() {
				this.Post({
					type_id: 41,
					offset: this.strategyList.length,
					limit: 4
				},'/api/Article/getArticleByType').then(res => {
					this.strategyList = [...this.strategyList, ...res.data]
					
					if(res.data.length < 4) this.showMore = false
				})
			},
			// 游记攻略查看更多
			strategyMore() {
				this.getArticleByType()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #FFFDF7;
		min-height: 100vh;
		overflow-x: hidden;
		position: relative;
		padding-bottom: 100rpx;
	}
	
	.top-box {
		position: relative;
		
		.search-img {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 98.67rpx;
			left: 28rpx;
			z-index: 2;
		}
		
		.top-banner {
			width: 750rpx;
			height: 666.67rpx;
		}
		
		.swiper-num {
			position: absolute;
			bottom: 167rpx;
			right: 26.67rpx;
			width: 67rpx;
			line-height: 45rpx;
			background: rgba(22, 22, 22, .4);
			border-radius: 23rpx;
			text-align: center;
			z-index: 2;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	
	.notice-box {
		width: 697rpx;
		height: 440rpx;
		background: linear-gradient(150deg, #FFF9E8, #FFF7E0);
		border-radius: 20rpx;
		position: relative;
		margin: -140rpx auto 0;
		padding: 22rpx 27rpx 0;
		font-family: Source Han Serif CN VF;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		
		.noticeImg {
			width: 340rpx;
			height: 136rpx;
			position: absolute;
			top: -22rpx;
			right: 0;
		}
		
		.notice-top {
			font-weight: 500;
			font-size: 25rpx;
			color: #097291;
			margin-top: 25rpx;
			position: relative;
			
			image {
				width: 33.33rpx;
				height: 24.67rpx;
				margin-right: 10rpx;
			}
			
			.notice-text {
				width: 423rpx;
				font-weight: 500;
				font-size: 25rpx;
				color: #097291;
			}
			
			.notice-more {
				width: 92rpx;
				line-height: 27rpx;
				text-align: right;
				border-left: 1rpx solid #097291;
			}
		}
		
		.notice-bottom {
			margin-top: 33rpx;
			
			image {
				width: 389.33rpx;
				height: 258.67rpx;
			}
			
			& image:first-child {
				width: 240rpx;
			}
		}
	}
	
	.nav-box {
		margin-top: 39rpx;
		display: flex;
		flex-wrap: wrap;
		
		.nav-item {
			width: 25%;
			text-align: center;
			font-weight: 400;
			font-size: 25rpx;
			color: #111111;
			
			.nav-img {
				width: 93.33rpx;
				height: 93.33rpx;
				margin-bottom: 10rpx;
			}
		}
		.nav-item:nth-child(n+5) {
			margin-top: 40rpx;
		}
	}
	
	.scenic-box {
		margin: 32rpx auto 0;
		width: 100%;
		height: 280rpx;
		padding-left: 26rpx;
		overflow-x: auto;
		display: flex;
		
		.scenic-item {
			width: 293rpx;
			height: 293rpx;
			margin-right: 20rpx;
			position: relative;
			flex-shrink: 0;
			
			.scenic-title {
				position: absolute;
				padding: 0 26rpx;
				bottom: 20rpx;
				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
			}
		}
	}
	.scenic-box::-webkit-scrollbar {
		display: none;
	}
		
	.title-box {
		margin-top: 55rpx;
		padding: 0 26rpx 0 42rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #000000;
		
		image {
			width: 296rpx;
			height: 60rpx;
		}
	}
	
	.line-item {
		width: 697rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		display: flex;
		padding: 6.67rpx 0 6.67rpx 6.67rpx;
		position: relative;
		
		.line-img {
			width: 267rpx;
			height: 227rpx;
			border-radius: 13rpx;
		}
		
		.hot {
			position: absolute;
			left: 180rpx;
			top: 6.67rpx;
			width: 93rpx;
			height: 47rpx;
			background: #71B580;
			border-radius: 0rpx 13rpx 0rpx 13rpx;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;
			overflow-x: auto;
			white-space: nowrap;
		}
		.hot::-webkit-scrollbar {
			display: none;
		}
		
		.line-content {
			width: 368rpx;
			height: 227rpx;
			margin-left: 23rpx;
			padding: 16rpx 0 18rpx;
			
			.line-title {
				width: 368rpx;
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			
			.line-subtitle {
				width: 368rpx;
				font-weight: 500;
				font-size: 25rpx;
				color: #999999;
				margin-top: 15px;
			}
			
			.line-tag {
				line-height: 40rpx;
				border: 1rpx solid #69AF78;
				padding: 0 8rpx;
				margin-right: 13rpx;
				border-radius: 5rpx;
				font-weight: 500;
				font-size: 23rpx;
				color: #71B580;
			}
			
			.line-price {
				font-weight: 500;
				font-size: 32rpx;
				color: #EF2323;
			}
			.line-price::before {
				font-size: 24rpx;
				content: '￥';
			}
		}
	}
	
	.food-box {
		padding-left: 26.67rpx;
		overflow-x: auto;
		display: flex;
		
		.food-item {
			width: 320rpx;
			height: 293rpx;
			border-radius: 20rpx;
			opacity: 0.8;
			margin-right: 20rpx;
			position: relative;
			flex-shrink: 0;
			overflow: hidden;
			
			.recommend {
				position: absolute;
				top: 13.33rpx;
				line-height: 47rpx;
				text-align: center;
				width: 153rpx;
				font-weight: 500;
				font-size: 27rpx;
				color: #FFFFFF;
				background: #71B580;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				overflow-x: auto;
				white-space: nowrap;
			}
			.recommend::-webkit-scrollbar {
				display: none;
			}
			
			.food-content {
				background: linear-gradient(to top, rgba(0,0,0,1),rgba(0,0,0,.5),rgba(0,0,0,.01));
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 223rpx;
				padding: 100rpx 0 0 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				
				.food-price {
					font-size: 33rpx;
				}
				.food-price::before {
					font-size: 24rpx;
					content: '￥';
				}
				
				.text-overflow {
					width: 280rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	.food-box::-webkit-scrollbar {
		display: none;
	}
	
	.strategy-box {
		padding: 0 26.67rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		
		.strategy-item {
			width: 335rpx;
			margin-bottom: 35rpx;
			position: relative;
			
			.title-tag {
				position: absolute;
				top: 0;
				left: 0;
				width: 153rpx;
				line-height: 47rpx;
				background: #71B580;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				text-align: center;
				font-weight: 500;
				font-size: 27rpx;
				color: #FFFFFF;
				overflow-x: auto;
				white-space: nowrap;
			}
			.title-tag::-webkit-scrollbar {
				display: none;
			}
			
			.strategy-image {
				width: 335rpx;
				display: block;
				border-radius: 13rpx;
			}
			
			.strategy-content {
				margin-top: 8rpx;
				
				.strategy-title {
					font-weight: bold;
					font-size: 29rpx;
					color: #000000;
				}
				
				.strategy-subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #248BAA;
					margin-top: 8rpx;
				}
			}
		}
	}
	
	.strategy-more {
		width: 200rpx;
		line-height: 53rpx;
		border-radius: 33rpx;
		border: 1rpx solid #248BAA;
		margin: 44rpx auto 0;
		text-align: center;
		font-weight: 500;
		font-size: 27rpx;
		color: #248BAA;
	}
</style>