<template>
	<view class="content">
		<view class="ztxl">
			<view class="ztxl_jj">
				<view class="ztxl_jj_top">
					<view class="jj_top" v-for="(el,ind) in ztimg" @click="qh(ind)" :key="el.id">
						<image v-if="ind == allind" :src="$getimg(el.img)"  mode="aspectFill" class="img1"></image>
						<image v-else :src="$getimg(el.icon)"  mode="aspectFill" class="img2"></image>
					</view>
				</view>
			</view>
			<view class="ztxl_js">{{ztrj[allind].name}}</view>
			<view class="ztxl_list" v-for="(el,ind) in datas" :key="el.id"  @click="$getpage('/other/gftjedit?id='+el.id)">
				<view class="list_left">
					<image :src="$geturl(el.typeImg)" mode="" class="audio-uim"></image>
					<view class="list_tip">
						<text class="tip_name">{{el.browse}}</text>人已浏览
					</view>
				</view>
				<view class="list_right">
					<view class="right_name">{{el.journeyName}}</view>
					<view class="right_name_name">{{el.feature}}</view>
					<!-- <view
					<!-- <view class="lbrli">
						<view class="lbrliind" v-for="(el1,ind1) in el.scapeType">{{el1}}</view>
					</view> -->
				</view>
			</view>
			<!-- <view class=""></view> -->
		</view>
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	import back from '@/components/html/back.vue';
	export default {
		components: {
			back
		},
		data() {
			return {
				id: 93, //节庆活动
				info: {
					color: true
				},
				istop: false,
				nowdata: {},
				zslist: [],
				first: 0,
				count: 50,
				xwwfind: 0,
				allind:0,
				ztimg: [{
					img: 'chun-xz.png',
					icon: 'chun.png'
				}, {
					img: 'xia-xz.png',
					icon: 'xia.png'
				}, {
					img: 'qiu-xz.png',
					icon: 'qiu.png'
				}, {
					img: 'dong-xz.png',
					icon: 'dong.png'
				}],
				datas: [],
				pageNo: 1,
				totalPage: 1,
				ztrj:[
					{name:'	常熟的春天，芬芳无比。一年中最浪漫的时光已经到了，和煦的东风一拂面，万物生长，草芽也冒出了地面，油菜花、桃花、樱花纷纷登场。到哪儿寻找春天的影子呢？春风十里，我在常熟等你！'},
					{name:'常熟的夏天是缤纷多彩的，每一种颜色都能唤起常熟夏天的记忆！是夜市上让人垂涎欲滴的小龙虾麻辣十三香 ，勾走游人胃 。是沙家浜革命教育基地重温红色经典，珍惜现世岁月 。是从小摊买走的王庄西瓜配着一杯汽水，就是宫崎骏漫画里的夏天。'},
					{name:'常熟的秋天是一年里最好的季节。首先，远远地朝着城外望，就望见原来黛色的山峦已经有了柔和的色彩。山，是一抹儿黄，一抹儿红。黄，有淡黄浓黄；红，也有浅红深红。满山的树叶像在魔术师手里，神奇地变换着色彩。'},
					{name:'常熟是江南宜居城市之一，小城风光秀美。漫步湖畔，内心少了份烦忧郁闷，多份了闲情逸致。冬日的尚湖湖面上，结了一层厚厚的冰，湖面像明亮的镜子。湖中的木桩上，挂着厚厚的冰块，成了有趣的冰柱，甚是壮观。岸边的岩石上也挂着厚厚的冰凌。看到这景象，你能相信这是江南水乡的冬天吗？'}
					
				]
				
			}
		},
		// onReachBottom() {
		// 	this.first += 50;
		// 	this.getZt();
		// },
		onPageScroll(e) {
			if (e.scrollTop > this.lmtop) {
				this.istop = true;
			}
			if (e.scrollTop < this.lmtop) {
				this.istop = false;
			}
		},
		
		mounted() {
			this.getZt(1)
		},
		methods: {
			
			qh(ind) {
				this.allind = ind;
				var json= this.allind + 1
				this.getZt(json)
			},
			navto(id) {
				uni.navigateTo({
					url: url
				})
			},
			getZt(json){
				var url = '/journey/v_list.jspx';
				var para = {
					pageNo: this.pageNo,
					isOfficial: 1,
					season:this.xlind,
					address:'',
					season:json
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						that.datas=[];
						uni.showToast({title:res.data.message,icon:"none"});
						that.datas = res.data.data;
						console.log(that.datas,"hdfajsh")
						that.pageNo = res.data.pageNo;
						that.totalPage = res.data.totalPage;
						console.log(that.datas);
					}else{
						uni.showToast({title:res.data.message,icon:"none"});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		border-radius: 20rpx;
	}
	
	
	.ztxl {
		width:100%;
		// height: 1250rpx;
		// margin-left: 32rpx;
		background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/bg-chun.png') no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		overflow: scroll;
	
		.ztxl_jj {
			width: 90%;
			margin: 0 auto;
	
			.ztxl_jj_top {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
	
				.jj_top {
					width: 160rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
	
					.img1 {
						width: 160rpx;
						height: 90rpx;
					}
	
					.img2 {
						width: 50rpx;
						height: 50rpx;
					}
				}
	
				// .jj_top:nth-child(2) .img2{
				// 	margin-left:33rpx ;
				// }
				// .jj_top:nth-child(3) .img2{
				// 	margin-left:107rpx ;
				// }
				// .jj_top:nth-child(4) .img2{
				// 	margin-left:109rpx ;
				// }
	
	
			}
	
			.ztxl_jj_top:nth-child(1) {
				padding-top: 40rpx;
			}
	
		}
	
		.ztxl_js {
			width: 87%;
			margin: 0 auto;
			// height: 200rpx;
			background: #000000;
			opacity: 0.5;
			border-radius: 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			padding:30rpx 20rpx;
		}
		
		.ztxl_list:last-child{
			padding-bottom: 100rpx;
			// margin-bottom: 50rpx;
		}
		.ztxl_list {
			width: 93%;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;
	
			.list_left {
				width: 270rpx;
				height: 200rpx;
				position: relative;
	
				.audio-uim {
					width: 100%;
					height: 100%;
					border-radius: 14rpx 0rpx 0rpx 14rpx;
				}
	
				.list_tip {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 48rpx;
					background: linear-gradient(90deg, #E2602D, #00000000);
					opacity: 0.8;
					border-radius: 0rpx 0rpx 0rpx 14rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
	
					.tip_name {
						font-size: 26rpx;
						font-family: DIN;
						font-weight: bold;
						color: #FFFFFF;
						margin-left: 20rpx;
						margin-right: 5rpx;
	
						&::before {
							content: '';
							display: inline-block;
							width: 22upx;
							height: 22upx;
							background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/icon-dz.png') no-repeat;
							background-size: 100%;
							margin-right: 7upx;
						}
					}
				}
	
	
			}
	
			.list_right {
				width: calc(100% - 270rpx);
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 0 14rpx 14rpx 0;
	
				.right_name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					padding: 24rpx 24rpx 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.right_name_name{
						padding: 12rpx 24rpx 0;
					    font-size: 26rpx;
					    font-family: Microsoft YaHei;
					    font-weight: 400;
					    color: #666;
					    line-height: 45rpx;
					    text-overflow: -o-ellipsis-lastline;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    display: -webkit-box;
					    -webkit-line-clamp: 2;
					    line-clamp: 2;
					    -webkit-box-orient: vertical;
				}
			}
	
			.lbrli {
				display: flex;
				white-space: nowrap;
				overflow-x: scroll;
				overflow-y: hidden;
				padding: 20rpx;
	
				.lbrliind {
					font-size: 24upx;
					font-weight: 500;
					color: #33AC59;
					border: 2upx solid #B3DBBE;
					border-radius: 6upx;
					padding: 5upx 10upx;
					margin-right: 16upx;
					background: #E9FBF7;
				}
			}
		}
	}
	
</style>
