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 + 1}}/{{topBanner.length}}
			</view>
		</view>
		
		<!-- 资讯 -->
		<view class="notice-box">
			<image src="https://static.ticket.sz-trip.com/tongli/images/index/noticeImgs.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/horns.png" mode=""></image>
					<view class="notice-text text-overflow">{{notice}}</view>
				</view>
				<view class="notice-more" @click="gotoPath('/subPackages/notice/noticeList')">
					更多
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcon.png" mode=""></image>
				</view>
			</view>
			
			<view class="notice-bottom flex-between" v-if="Object.keys(homeUi).length > 0">
				<view :style="{backgroundImage: 'url('+showImg(homeUi['mpyd'])+')'}" @click="gotoPath('/subPackages/ticketBooking/ticketBooking')">
					<view class="title">门票预订</view>
					<view class="subtitle">便民快捷购票入口</view>
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcons1.png" mode=""></image>
				</view>
				<view :style="{backgroundImage: 'url('+showImg(homeUi['dtdl'])+')'}">
					<view class="title">地图导览</view>
					<view class="subtitle">随时随地发现新旅程</view>
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcons.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 金刚区 -->
		<view class="nav-box" v-if="Object.keys(homeUi).length > 0">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="gotoPath(item.path)">
				<image :src="showImg(homeUi[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">
				景点展览
				<view @click="gotoPath('/subPackages/ticketBooking/ticketBooking')">更多<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcon.png" mode=""></image></view>
			</view>
			<view class="scenic-box">
				<view v-for="(item,index) in scenicList" :key="index" @click="gotoScenic(item)">
					<image :src="showImg(item.image)" mode="aspectFill" class="scenic-item"></image>
					<view class="scenic-title text-overflow">{{item.title}}</view>
				</view>
			</view>
		</view>
		
		<!-- 精彩推荐 -->
		<view v-if="eventsList && eventsList.length > 0">
			<view class="title-box flex-between">
				精彩推荐
				<view @click="gotoPath('/subPackages/eventCalendar/eventCalendar')">更多<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcon.png" mode=""></image></view>
			</view>
			<view class="line-box">
				<view v-for="(item,index) in eventsList" :key="index" class="line-item" @click="goLineDetail(item)">
					<image :src="showImg(item.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> -->
				</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')">更多<image src="https://static.ticket.sz-trip.com/tongli/images/index/rightIcon.png" mode=""></image></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">
				同里新鲜事
			</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="gotoPath('/subPackages/novelty/detail?id='+item.id)">
				        <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>
		
		<!-- 领券中心 -->
		<image src="https://static.ticket.sz-trip.com/tongli/images/index/getCoupon.png" @click="gotoPath('/subPackages/user/getCoupon')" class="couponImg"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				current: 0,
				navList: [
					{
						img: 'syyj',
						text: '岁月雅集',
						path: '/subPackages/eventCalendar/eventCalendar'
					},
					{
						img: 'sxly',
						text: '膳香留韵',
						path: '/subPackages/food/foodList'
					},
					{
						img: 'xjsg',
						text: '栖居水阁',
						path: '/subPackages/hotelHomestay/hotelHomestay'
					},
					{
						img: 'fyty',
						text: '风雅体验',
						path: '/subPackages/line/lineList'
					},
					{
						img: 'ssfw',
						text: '水市风物',
						path: '/subPackages/techan/techanList'
					},
					{
						img: 'yzzn',
						text: '游踪指南',
						path: '/subPackages/novelty/index'
					},
					{
						img: 'shtl',
						text: '数绘同里',
						// path: '/subPackages/webPage/webPage?url='+ encodeURIComponent('https://yandumap.sz-trip.com/')
					},
					{
						img: 'lfys',
						text: '里坊轶事',
						// path: '/subPackages/webPage/webPage?url='+ encodeURIComponent('https://yandumap.sz-trip.com/')
					}
				],
				scenicList: [],
				homeUi: {},
				month: 0,
				day: 0,
				eventsList: [],
				foodList: [],
				strategyList: [],
				showMore: true,
				notice: '',
			}
		},
		onReady() {
			// 获取经纬度
			if(!uni.getStorageSync('location')) {
				this.getLocation()
			}
			
			this.getTopBanner()
			this.getScenicByTag()
			this.getHomeUi()
			this.getNowDate()
			this.getEventsList()
			this.getFoodList()
			this.getArticleByType()
			this.getLatest()
		},
		methods: {
			//轮播图左右滑动
			swiperChange(e) {
				this.current = e.detail.current;
			},
			// 去活动详情
			goLineDetail(item) {
				this.goOtherDetail(item)
				if(!item.link_type) {
					uni.navigateTo({
						url:'/subPackages/eventCalendar/detail?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: 1
				},'/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();
			},
			// 线路推荐
			getEventsList() {
				this.Post({
					date: '',
					offset: 0,
					limit: 5,
					type_id: '',
					title: ''
				},'/api/activity/getActivityCalendar').then(res => {
					this.eventsList = 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: #f6f6f6;
		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(180deg,#f7f3ed 0%,#f8f5f1 100%);
		border-radius: 30rpx;
		position: relative;
		margin: -140rpx auto 0;
		padding: 22rpx 27rpx 0;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		
		.noticeImg {
			width: 265rpx;
			height: 130rpx;
			position: absolute;
			top: -19rpx;
			right: 0;
		}
		
		.notice-top {
			font-weight: 500;
			font-size: 25rpx;
			color:#100e0e;
			margin-top: 25rpx;
			position: relative;
			
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			
			.notice-text {
				width: 423rpx;
				font-weight: 500;
				font-size: 25rpx;
				color:#100e0e;
			}
			
			.notice-more {
				width: 92rpx;
				line-height: 27rpx;
				text-align: right;
				
				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 5rpx;
				}
			}
		}
		
		.notice-bottom {
			margin-top: 33rpx;
			
			&>view {
				width: 369rpx;
				height: 268rpx;
				background-size: 100% 100%;
				padding: 32rpx 0 0 29rpx;
				
				.title {
					color: #100e0e;
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.subtitle {
					color: #100e0e;
					font-size: 24rpx;
					margin-top: 3rpx;
					font-weight: 500;
				}
				
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
			
			&>view:first-child {
				width: 245rpx;
				
				.title {
					color: #ffffff;
				}
				
				.subtitle {
					color: #cccccc;
				}
			}
		}
	}
	
	.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: 90rpx;
				height: 90rpx;
				margin-bottom: 1rpx;
			}
		}
		.nav-item:nth-child(n+5) {
			margin-top: 40rpx;
		}
	}
	
	.scenic-box {
		margin: 0 auto;
		width: 100%;
		padding-left: 26rpx;
		overflow-x: auto;
		display: flex;
		
		.scenic-item {
			width: 318rpx;
			height: 318rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
		
		.scenic-title {
			padding: 0 4rpx;
			font-weight: 500;
			color: #100e0e;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	.scenic-box::-webkit-scrollbar {
		display: none;
	}
		
	.title-box {
		margin: 55rpx 0 24rpx;
		padding: 0 26rpx 0 42rpx;
		font-weight: bold;
		color: #100e0e;
		font-size: 36rpx;
		
		view {
			color: #100e0e;
			font-size: 24rpx;
		}
		
		image {
			width: 18rpx;
			height: 18rpx;
			margin-left: 5rpx;
		}
	}
	
	.line-box {
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		padding-left: 26rpx;
	}
	.line-box::-webkit-scrollbar {
		display: none;
	}
	.line-item {
		width: 658rpx;
		height: 294rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		
		.line-img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		
		.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: #6b6262;
					margin-top: 10rpx;
				}
			}
		}
	}
	
	.strategy-more {
		width: 200rpx;
		line-height: 53rpx;
		border-radius: 33rpx;
		border: 1rpx solid #525251;
		margin: 44rpx auto 0;
		text-align: center;
		font-weight: 500;
		font-size: 27rpx;
		color: #525251;
	}
	
	.couponImg {
		position: fixed;
		right: 27rpx;
		bottom: 38rpx;
		width: 94rpx;
		height: 105.33rpx;
		z-index: 100;
	}
</style>