yandu_WeChat/pages/index/index.vue

<template>
	<view class="content">
		<view class="top-box">
			<!-- 搜索 -->
			<view class="search-box" @click="gotoPath('/subPackages/search/search')">
				<image src="https://static.ticket.sz-trip.com/yandu/images/index/search.png" mode=""></image>
				搜一搜您想要的产品
			</view>
			
			<swiper class="top-banner" :circular="true" :interval="6000"
				: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>
		
		<!-- 金刚区 -->
		<view class="nav-box">
			<view class="nav-top">
				<view class="nav-topLeft">
					<image src="https://static.ticket.sz-trip.com/yandu/images/index/consultImg.png" class="consultImg" @click="gotoPath('/subPackages/notice/noticeList')"></image>
					<view class="text-overflow">{{notice}}</view>
				</view>
				
				<!-- 天气 -->
				<view class="nav-topRight">
					<image :src="weatherList.image" mode="" class="weather-img"></image>
					<view style="line-height: 40rpx;">
						{{weatherList.low}}~{{weatherList.high}} <br> {{weatherList.type}}
					</view>
				</view>
			</view>
			
			<view style="position: relative;z-index: 2;">
				<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>
		
		<!-- 背景icon -->
		<image src="https://static.ticket.sz-trip.com/yandu/images/index/iconBg.png" mode="" class="iconBg"></image>
		
		<!-- 景点推荐 -->
		<view class="scenic-box" :style="{backgroundImage: 'url('+showImg(homeUi.jdtj)+')',backgroundSize: 'cover'}" v-if="scenic" @click="gotoScenic(scenic)">
			<view class="scenic-title">{{scenic.title}}</view>
			<view class="scenic-subtitle flex-between">
				<view class="text-overflow" style="width: 320rpx;display: flex;align-items: center;">
					<image src="https://static.ticket.sz-trip.com/yandu/images/index/location.png" mode="" class="location"></image>
					{{scenic.address}}
				</view>
				<view>>>>   发现好玩的游览宝地</view>
			</view>
		</view>
		
		<!-- 活动日历、盐都美宿 -->
		<view class="flex-between" style="padding: 0 27rpx;margin-top: 20rpx;" v-if="homeUi.hdrl && homeUi.ydms_hotel">
			<view @click="gotoPath('/subPackages/eventCalendar/eventCalendar')" class="calendar-box" :style="{backgroundImage: 'url('+showImg(homeUi.hdrl)+')',backgroundSize: 'cover'}">
				<view class="calendar-title">今日共有{{eventCalendarNum}}个活动 >>></view>
				<view class="calendar-line"></view>
				<view class="calendar-subtitle">活动日历</view>
				<view class="calendar-date">
					<span>{{day}}</span>日/{{month}}月
				</view>
			</view>
			<view @click="gotoPath('/subPackages/hotelHomestay/hotelHomestay')" class="calendar-box" :style="{backgroundImage: 'url('+showImg(homeUi.ydms_hotel)+')',backgroundSize: 'cover'}">
				<view class="calendar-title">享受家一般的舒适 >>></view>
				<view class="calendar-line"></view>
				<view class="calendar-subtitle">盐都美宿</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="gotoPath('/subPackages/line/lineList')">更多 ></view>
			</view>
			<view class="box">
				<view v-for="(item,index) in lineList" :key="index" class="line-item" @click="goCalendarDetail(item.goods,1)">
					<view class="hot flex-center" v-if="item.goods.image_tag">{{item.goods.image_tag}}</view>
					<image :src="showImg(item.goods.image)" mode="aspectFill" class="line-img"></image>
					
					<view class="line-content flex-between">
						<view class="line-title text-overflow">{{item.goods.title}}</view>
						<view class="line-subtitle text-overflow">{{item.goods.subtitle}}</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 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>
		
		<!-- 游记攻略 -->
		 <!-- v-if="strategyList && strategyList.length > 0" -->
		<view>
			<view class="title-box flex-between">
				<image :src="showImg(homeUi.yjgl)" mode=""></image>
			</view>
			
			<view class="strategy-box 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)">
						<view class="title-tag" v-if="item.image_tag">{{item.image_tag}}</view>
				        <image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image>
				        <view class="strategy-content">
				        	<view class="strategy-title">{{item.title}}</view>
				        	<view class="flex-between">
				        		<view class="text-overflow" style="display: flex;align-items: center;width: 200rpx;">
				        			<image :src="showImg(item.author_img)" mode="" class="author-img"></image>
				        			{{item.author}}
				        		</view>
				        		<view style="display: flex;align-items: center;">
				        			<image src="https://static.ticket.sz-trip.com/yandu/images/index/eye.png" mode="" class="eye-img"></image>
				        			{{item.view}}
				        		</view>
				        	</view>
				        </view>
				    </view>
				</view>
			</view>
			
			<view class="strategy-more" @click="strategyMore" v-show="showMore">查看更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				weatherList: [],
				navList: [
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/jdmp.png',
						text: '景区门票',
						path: '/subPackages/ticketBooking/ticketBooking'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/jdms.png',
						text: '酒店民宿',
						path: '/subPackages/hotelHomestay/hotelHomestay'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/cyms.png',
						text: '餐饮美食',
						path: '/subPackages/food/foodList'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/wctc.png',
						text: '文创特产',
						path: '/subPackages/techan/techanList'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/xltj.png',
						text: '线路推荐',
						path: '/subPackages/line/lineList'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/zhdt.png',
						text: '智慧地图',
						path: ''
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/yjgl.png',
						text: '游记攻略',
						path: '/subPackages/travelGuide/travelGuide'
					},
					{
						img: 'https://static.ticket.sz-trip.com/yandu/images/index/hdrl.png',
						text: '活动日历',
						path: '/subPackages/eventCalendar/eventCalendar'
					}
				],
				scenic: {},
				homeUi: {},
				month: 0,
				day: 0,
				lineList: [],
				foodList: [],
				strategyList: [],
				showMore: true,
				notice: '',
				eventCalendarNum: 0
			}
		},
		onReady() {
			// 获取经纬度
			if(!uni.getStorageSync('location')) {
				this.getLocation()
			}
			
			this.getTopBanner()
			this.getWeather()
			this.getScenicByTag()
			this.getHomeUi()
			this.getNowDate()
			this.getLineList()
			this.getFoodList()
			this.getArticleByType()
			this.getLatest()
			this.getEventCalendarNum()
		},
		methods: {
			// 获取活动日历数量
			getEventCalendarNum() {
				this.Post({},'/api/activity/getActivityCalendarCount').then(res => {
					this.eventCalendarNum = res.data.count
				})
			},
			// 公告
			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
						})
					}
				}
			},
			// 天气
			getWeather() {
				this.Post({},'/api/index/weather').then(res => {
					this.weatherList = res.data
				})
			},
			// 景点推荐
			getScenicByTag() {
				this.Post({
					tag_id: 48,
					offset: 0,
					limit: 1
				},'/api/scenic/getScenicByTagId').then(res => {
					this.scenic = res.data[0]
				})
			},
			// 首页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({
					offset: 0,
					limit: 3,
					tag_id: 55
				},'/api/tag/getGoodsByTagId').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: #DFEDE0;
		min-height: 100vh;
		overflow-x: hidden;
		position: relative;
		padding-bottom: 100rpx;
	}
	
	.top-box {
		position: relative;
		
		.search-box {
			width: 487rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, .4);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding-left: 26rpx;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			position: absolute;
			top: 98rpx;
			left: 26rpx;
			z-index: 2;
			
			image {
				margin-right: 14rpx;
				width: 30.67rpx;
				height: 30.67rpx;
			}
		}
		
		.top-banner {
			width: 750rpx;
			height: 800rpx;
		}
	}
	
	.nav-box {
		width: 696.67rpx;
		height: 520rpx;
		background-image: url('https://static.ticket.sz-trip.com/yandu/images/index/navBg.png');
		background-size: 100% 100%;
		position: relative;
		margin: -79rpx auto 0;
		
		.nav-top {
			height: 172rpx;
			padding: 34rpx 19rpx 0 40rpx;
			display: flex;
			
			.nav-topLeft {
				font-weight: 400;
				font-size: 27rpx;
				color: #111111;
				width: 424rpx;
				
				.consultImg {
					width: 296rpx;
					height: 45.33rpx;
				}
				
				.text-overflow {
					margin-top: 12rpx;
				}
			}
			
			.nav-topRight {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin: 20rpx 0 0 15rpx;
				height: 73rpx;
				border-left: 1rpx solid #95BE9E;
				padding-left: 15rpx;
				
				.weather-img {
					width: 46.67rpx;
					height: 46.67rpx;
					margin-right: 15rpx;
				}
			}
		}
		
		.nav-item {
			width: 25%;
			text-align: center;
			font-weight: 400;
			font-size: 25rpx;
			color: #111111;
			display: inline-block;
			
			.nav-img {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 10rpx;
			}
		}
		.nav-item:nth-child(n+5) {
			margin-top: 20rpx;
		}
	}
	
	.iconBg {
		width: 750rpx;
		height: 364.67rpx;
		position: absolute;
		top: 974rpx;
		left: 0;
	}
	
	.scenic-box {
		margin: 34rpx auto 0;
		width: 696rpx;
		height: 280rpx;
		border-radius: 20rpx;
		padding: 140rpx 39rpx 0 25rpx;
		
		.scenic-title {
			text-align: right;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			text-shadow: 0rpx 1rpx 2rpx rgba(0,0,0,0.36);
		}
		
		.scenic-subtitle {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-shadow: 0rpx 1rpx 2rpx rgba(0,0,0,0.36);
			
			.location {
				width: 20rpx;
				height: 24.67rpx;
				margin-right: 13rpx;
			}
		}
	}
	
	.calendar-box {
		width: 337rpx;
		height: 253rpx;
		border-radius: 20rpx;
		padding: 20rpx 0 0 26rpx;
		
		.calendar-title {
			font-size: 24rpx;
			color: #FFFFFF;
		}
		
		.calendar-line {
			width: 40rpx;
			height: 1rpx;
			background: #FFFFFF;
			margin: 10rpx 0 7rpx;
		}
		
		.calendar-subtitle {
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		
		.calendar-date {
			margin-top: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			
			span {
				font-size: 48rpx;
			}
		}
	}
	
	.title-box {
		margin-top: 60rpx;
		padding-right: 26rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #000000;
		
		image {
			width: 464.67rpx;
			height: 120rpx;
		}
		
		view {
			margin-top: -25rpx;
		}
	}
	
	.box {
		margin-top: -14rpx;
	}
	
	.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;
			flex-direction: column;
			align-items: flex-start;
			
			.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;
			}
			
			.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: 337rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			overflow: hidden;
			margin-bottom: 28rpx;
			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: 337rpx;
				display: block;
			}
			
			.strategy-content {
				background: #FFFFFF;
				padding: 20rpx;
				
				.strategy-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
				
				.flex-between {
					font-weight: 500;
					font-size: 24rpx;
					color: #888888;
					margin-top: 10rpx;
					
					.author-img {
						width: 37rpx;
						height: 37rpx;
						margin-right: 6rpx;
					}
					
					.eye-img {
						width: 26.67rpx;
						height: 18.67rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	
	.strategy-more {
		width: 200rpx;
		line-height: 67rpx;
		background: #DCEADD;
		border-radius: 33rpx;
		border: 1rpx solid #71B580;
		margin: 44rpx auto 0;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #5BA06A;
	}
</style>