changshu_WeChat/pages/index/index.vue

<template>
	<view class="content">
		<!-- 头部banner -->
		<view class="top-box">
			<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="menu-box flex-between">
			<view v-for="(item,index) in menuList" :key="index" @click="goPath(item)">
				<image :src="item.img" mode="aspectFill"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<!-- 小banner -->
		<swiper class="small-banner" :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="small-banner" :src="showImg(item.head_img)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 常熟精选 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/title1.png" mode="heightFix" class="title-img"></image>
		<view class="winnow-box">
			<view v-for="(item,index) in winnowList" :key="index">
				<view class="winnow-title flex-between">
					{{item.title}}
					<span :style="{color: item.spanColor}" @click.stop="gotoUrlNew(item.url)">查看更多产品 ></span>
				</view>
				<view class="winnow-item" v-for="(pItem, pIndex) in item.list" :key="pIndex" @click="gotoDetailByTypeToJdsz(pItem)">
					<image :src="showImgs(pItem.headimg)" mode="aspectFill" class="winnow-img"></image>
					<view class="winnow-content flex-column">
						<view class="title text-overflowRows">{{pItem.title}}</view>
						<view class="price-box flex-between">
							<view class="price">{{pItem.price / 100}}</view>
							<view class="btn">购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 周边特惠活动 -->
		<view v-if="calendarItem">
			<image src="https://static.ticket.sz-trip.com/changshu/images/index/title2.png" mode="heightFix" class="title-img"></image>
			
			<view class="calendar-item" @click="calendarItem.type='calendar';gotoDetailByTypeToJdsz(calendarItem)">
				<image :src="showImgs(calendarItem.post_url)" mode="aspectFill" class="calendar-img"></image>
				<view class="calendar-content flex-column">
					<view class="title text-overflow">{{calendarItem.name}}</view>
					<view class="subtitle text-overflow">活动时间：{{ calendarItem.begin_date }}—{{ calendarItem.end_date }}</view>
				</view>
			</view>
			
			<view class="calendar-more" @click="gotoPath('/subPackages/peripheralActivity/peripheralActivity')">查看更多</view>
		</view>
		
		<!-- 旅游助手 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/title3.png" mode="heightFix" class="title-img"></image>
		<view class="flex-between">
			<image :src="item.img" mode="aspectFill" class="travel-img" v-for="(item,index) in travelList" :key="index"></image>
		</view>
		
		<!-- 公共服务 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/title4.png" mode="heightFix" class="title-img"></image>
		<view class="public-box">
			<view v-for="(item,index) in publicList" :key="index">
				<image :src="item.img" mode="aspectFill"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<!-- 热门推荐 -->
		<image src="https://static.ticket.sz-trip.com/changshu/images/index/title5.png" mode="heightFix" class="title-img"></image>
		<view class="hot-type flex-between">
			<view v-for="(item,index) in hotType" :key="index" :class="index == typeIndex ? 'type-active' : ''" @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,index) in getColumnItems(index)" :key="index" class="hot-item" @click="gotoDetailByTypeToJdsz(item)">
					<view class="image-container">
						<image :src="showImgs(item.headimg || item.head_img || item.post_url)" mode="widthFix" class="hot-img"></image>
						<image src="https://static.ticket.sz-trip.com/changshu/images/index/play.png" mode="" class="play-img" v-if="typeIndex == 5"></image>
					</view>
					<view class="hot-content">
						<view class="title text-overflowRows">{{item.title || item.name}}</view>
						<view class="tags" v-if="item.display_tags && typeIndex == 0">
						    <view class="tag text-overflow"
						        v-for="(tags,tagsIndex) in item.display_tags.split(',').slice(0,2)"
						        :key="tagsIndex">{{tags}}</view>
						</view>
						<view class="subtitle text-overflow" v-if="typeIndex == 1">
							{{ item.begin_date }}—{{ item.end_date }}
						</view>
						<view class="price" v-if="typeIndex == 2 || typeIndex == 4">
							￥{{ item.price / 100 }}
						</view>
						<view class="subtitle text-overflow" v-if="typeIndex == 3">
							{{ item.subtitle }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [],
				menuList: [
					{
						title: '景点门票',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/jdmp.png',
						path: '',
						url: 'https://test.m.cloud.sz-trip.com/AttractionsTickets'
					},
					{
						title: '非遗手作',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/fysz.png',
						path: '',
						
					},
					{
						title: '文创特产',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/wctc.png',
						path: '',
						url: 'https://test.m.cloud.sz-trip.com/CulturalCreation',
						// url: 'https://127.0.0.1/CulturalCreation?token=2d50b941-e204-4e5d-97c9-868430711459',
					},
					{
						title: '酒店住宿',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/jdzs.png',
						path: '',
						url: 'https://test.m.cloud.sz-trip.com/nightMooring',
					},
					{
						title: '电影购票',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/dygp.png',
						path: ''
					},
					{
						title: '场馆预约',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/cgyy.png',
						path: '/subPackages/venue/venueList'
					},
					{
						title: '一卡游玩',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/ykyw.png',
						path: '',
					},
					{
						title: '活动日历',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/hdrl.png',
						path: '/subPackages/eventCalendar/eventCalendar'
					},
					{
						title: '特色线路',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/tsxl.png',
						path: '',
						url: 'https://test.m.cloud.sz-trip.com/OneDayTravelNew',
					},
					{
						title: '常熟周边',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/cszb.png',
						path: '/subPackages/rim/rimList'
					}
				],
				smallBanner: [],
				winnowList: [
					{
						title: '景点',
						id: '619',
						spanColor: '#529AE7',
						list: [],
						url: {
							jump_type:3,
							tdata: 'https://test.m.cloud.sz-trip.com/AttractionsTickets'
						}
					},
					{
						title: '特产',
						id: '620',
						spanColor: '#EE710C',
						list: [],
						url: {
							jump_type:3,
							tdata: 'https://test.m.cloud.sz-trip.com/CulturalCreation'
						}
					}
				],
				calendarItem: {},
				travelList: [
					{
						title: '聆听常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/lingting.png',
						path: ''
					},
					{
						title: '云游常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/yunyou.png',
						path: ''
					},
					{
						title: '寻味常熟',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/xunwei.png',
						path: ''
					}
				],
				publicList: [
					{
						title: '公共自行车',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/ggzxc.png',
						path: ''
					},
					{
						title: '咨询投诉',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/zxts.png',
						path: ''
					},
					{
						title: '景区舒适度',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/jqssd.png',
						path: ''
					},
					{
						title: '找车位',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/zcw.png',
						path: ''
					},
					{
						title: '找厕所',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/zcs.png',
						path: ''
					},
					{
						title: '公共交通',
						img: 'https://static.ticket.sz-trip.com/changshu/images/index/ggjt.png',
						path: ''
					}
				],
				hotType: [
					{title: '景点', id: '616'},
					{title: '活动', id: '617'},
					{title: '文创', id: '618'},
					{title: '非遗', id: '619'},
					{title: '线路', id: '620'},
					{title: '视频', id: '128'}
				],
				typeIndex: 0,
				hotList: [],
				pageNo: 1,
				limit: 4,
				isLoading: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			this.getBanner()
			this.getWinnowList()
			this.getCalendarList()
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.isLoading) this.getHotList();
			}, 500);
		},
		methods: {
			goPath (item) {
				if (item.url) {
					let isJDSZ = this.goJDSZMiniProgram(item.url)
					if (isJDSZ) return
					uni.navigateTo({
						url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(item.url)
					});
				}
				
				if(item.path) {
					this.gotoPath(item.path)
				}
			},
			
			// banner跳转
			// 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:
						let isJDSZ = this.goJDSZMiniProgram(item.tdata)
						if (isJDSZ) return
						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;
				}
			},
			// 判断是否跳转君到苏州专题页
			goJDSZMiniProgram (tpage) {
				if (tpage.indexOf('m.cloud.sz-trip.com') > -1) {
					// 如果已登录但没有手机号，直接去授权页面
					let userInfo = null
					try {
						userInfo = JSON.parse(uni.getStorageSync('userInfo'))
						
					} catch(e) {}
					if (userInfo && userInfo.token && !userInfo.mobile) {
						uni.showToast({
							title: '未授权手机号',
							icon: 'none'
						})
						// 去登录页面授权
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/login/login?needAuth=1'
							})
						},200)
						return true
					}
					uni.navigateTo({
						url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(`${tpage}?token=2d50b941-e204-4e5d-97c9-868430711459`)
					});
					// 获取授权code
					// this.checkIsLoginJdsz().then(res => {
					// 	if(res) {
					// 		uni.navigateTo({
					// 			url: '/subPackages/webPage/webPage?url=' + encodeURIComponent(`${tpage}?token=` + res)
					// 		});
					// 	}
					// })
					return true
				}
				return false
			},
			// 瀑布流
			getColumnItems(columnIndex) {
				const columnItems = [];
				this.hotList.forEach((item, index) => {
					if (index % 2 === columnIndex) {
						columnItems.push(item);
					}
				});
				return columnItems;
			},
			getBanner() {
				// 获取顶部banner
				this.Post({
					type_id: 3,
					position: 6,
				}, '/api/adv/getAdv').then(res => {
					if(res) {
						this.topBanner = res.data
					}
				})
				
				// 小banner
				this.Post({
					type_id: 3,
					position: 1,
				}, '/api/adv/getAdv').then(res => {
					if(res) {
						this.smallBanner = res.data
					}
				})
			},
			// 获取景点和特产
			getWinnowList() {
				this.winnowList.map(item => {
					this.Post({
						apiType: 'jdsz',
						tag_id: item.id,
						offset: 0,
						limit: 3,
					}, '/api/product/get_product_by_tag').then(res => {
						if(res) {
							item.list = res.data.list
						}
					})
				})
			},
			// 周边特惠活动
			getCalendarList() {
				this.Post({
					apiType: 'jdsz',
					page_no: 1,
					page_num: 1
				}, '/api/pbservice/Actcalendar/getActList').then(res => {
					if(res) {
						this.calendarItem = res.data.rows[0]
					}
				})
			},
			// 更改热门推荐类型
			changeType(index) {
				this.typeIndex = index
				this.pageNo = 1
				this.isLoading = false
				this.hotList = []
				this.getHotList()
			},
			getHotList() {
				if(this.typeIndex == 1) {
					this.Post({
						apiType: 'jdsz',
						page_no: this.pageNo,
						page_num: this.limit
					}, '/api/pbservice/Actcalendar/getActList').then(res => {
						if(res) {
							if(res.data.rows.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data.rows)
							this.pageNo++
						}
					})
				}else if(this.typeIndex == 5) {
					// 视频
					this.Post({
					    apiType: 'jdsz',
					    class_id: this.hotType[this.typeIndex].id,
						page: this.pageNo,
						limit: this.limit,
					}, '/api/multimedia/media_list').then(res => {
					    if(res) {
							if(res.data.data.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data.data)
							this.pageNo++
						}
					})
				}else {
					this.Post({
						apiType: 'jdsz',
						tag_id: this.hotType[this.typeIndex].id,
						offset: this.hotList.length,
						limit: this.limit,
					}, '/api/product/get_product_by_tag').then(res => {
						if(res) {
							if(res.data.list.length < this.limit) this.isLoading = true
							this.hotList = this.hotList.concat(res.data.list)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		overflow-x: hidden;
		background: #F2FFFE;
		padding: 0 26.67rpx 66rpx;
	}
	
	.top-box {
		margin-top: 26.67rpx;
		
		.top-banner {
			width: 100%;
			height: 367rpx;
			border-radius: 13rpx;
		}
	}
	
	.menu-box {
		margin: 40rpx 0 40rpx;
		flex-wrap: wrap;
		font-weight: 500;
		font-size: 24rpx;
		color: #111111;
		
		&>view {
			width: 20%;
			text-align: center;
			
			image {
				width: 93.33rpx;
				height: 93.33rpx;
				margin-bottom: 17rpx;
			}
		}
		&>view:nth-child(n+6) {
			margin-top: 24rpx;
		}
	}
	
	.small-banner {
		width: 697rpx;
		height: 153rpx;
		border-radius: 13rpx;
	}
	
	.title-img {
		height: 66.67rpx;
		margin: 52rpx 0 24rpx;
	}
	
	.winnow-box {
		width: calc(100vw - 26.67rpx);
		display: flex;
		overflow-x: auto;
		
		&>view {
			width: 533rpx;
			height: 625rpx;
			background: linear-gradient(135deg, rgba(170, 204, 250, .5), rgba(111, 163, 252, .5));
			border-radius: 13rpx;
			padding: 0 20rpx;
			margin-right: 26rpx;
			flex-shrink: 0;
			
			.winnow-title {
				height: 92rpx;
				font-weight: normal;
				font-size: 40rpx;
				color: #0F74D4;
				justify-content: baseline;
				
				span {
					font-size: 27rpx;
				}
			}
			
			.winnow-item {
				width: 493rpx;
				height: 153rpx;
				background: #FFFFFF;
				border-radius: 13rpx;
				display: flex;
				margin-bottom: 20rpx;
				
				.winnow-img {
					width: 157rpx;
					height: 153rpx;
					border-radius: 13rpx 0rpx 0rpx 13rpx;
				}
				
				.winnow-content {
					margin-left: 13rpx;
					width: 310rpx;
					height: 153rpx;
					padding: 12rpx 0;
					justify-content: space-between;
					
					.title {
						font-weight: 500;
						font-size: 27rpx;
						color: #333333;
					}
					
					.price-box {
						.price {
							font-weight: bold;
							font-size: 30rpx;
							color: #ED1C19;
						}
						.price::before {
							content: '￥';
							font-size: 24rpx;
						}
						
						.btn {
							width: 93rpx;
							height: 37rpx;
							background: #ED1C19;
							border-radius: 19rpx;
							text-align: center;
							line-height: 37rpx;
							font-weight: 500;
							font-size: 27rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		&>view:nth-child(2) {
			background: linear-gradient(135deg, rgba(253, 171, 112, .5), rgba(254, 127, 25, .5));
			
			.winnow-title {
				color: #EE710C;
			}
		}
	}
	.winnow-box::-webkit-scrollbar {
		display: none;
	}
	
	.calendar-item {
		width: 697rpx;
		height: 417rpx;
		background: rgba(255,255,255,0.6);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(89,166,160,0.32);
		border-radius: 13rpx;
		overflow: hidden;
		
		.calendar-img {
			width: 100%;
			height: 300rpx;
			display: block;
		}
		
		.calendar-content {
			height: 117rpx;
			padding: 0 20rpx;
			justify-content: space-around;
			
			.title {
				font-weight: bold;
				font-size: 31rpx;
				color: #111111;
			}
			
			.subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
		}
	}
	
	.calendar-more {
		width: 240rpx;
		height: 53rpx;
		border-radius: 27rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		line-height: 53rpx;
		margin: 40rpx auto 0;
		font-weight: 500;
		font-size: 28rpx;
		color: #111111;
	}
	
	.travel-img {
		width: 220rpx;
		height: 173.33rpx;
	}
	
	.public-box {
		display: flex;
		flex-wrap: wrap;
		font-weight: 500;
		font-size: 25rpx;
		color: #111111;
		
		&>view {
			width: 25%;
			text-align: center;
			
			image {
				width: 57.33rpx;
				height: 57.33rpx;
				margin-bottom: 15rpx;
			}
		}
		&>view:nth-child(n+5) {
			margin-top: 40rpx;
		}
	}
	
	.hot-type {
		font-weight: 500;
		font-size: 31rpx;
		color: #666666;
		
		.type-active {
			font-weight: bold;
			font-size: 31rpx;
			color: #111111;
			position: relative;
		}
		.type-active::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10rpx;
			margin: auto;
			width: 35rpx;
			height: 2px;
			background-color: #00C1B1;
		}
	}
	
	.hot-box {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		
		.hot-column {
		    width: 340rpx;
		    display: flex;
		    flex-direction: column;
		}
		
		.hot-item {
			width: 340rpx;
			background: rgba(255,255,255,0.6);
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(89,166,160,0.32);
			border-radius: 13rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			
			.image-container {
				position: relative;
				
				.hot-img {
					height: 267rpx;
				}
				
				.play-img {
					width: 66.67rpx;
					height: 66.67rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			
			.hot-content {
				padding: 10rpx 15rpx 20rpx;
				
				.title {
					font-weight: bold;
					font-size: 31rpx;
					color: #111111;
				}
				
				&>view:nth-child(2) {
					margin-top: 15rpx;
				}
				
				.tags {
					display: flex;
					
					.tag {
						height: 37rpx;
						border: 1rpx solid #82DFD8;
						padding: 0 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #00AEA0;
						overflow-y: hidden;
					}
					.tag:nth-child(2) {
						margin-left: 10rpx;
					}
				}
				
				.subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
				
				.price {
					font-weight: bold;
					font-size: 31rpx;
					color: #ED1C18;
				}
			}
		}
	}
</style>