changshu_other/other/travelogue.vue

<template>
	<view class="centent">
		<!-- <back :info="info"></back> -->
		<view class="yjgl">
			<view class="topbg_hig">
				游记攻略
			</view>
			<view v-if="zslist.length>0" class="topbg"
				:style="{background: 'url('+$geturl6(zslist[0].typeImg)+') no-repeat'}"
				@click="$getpage('./public?id='+zslist[0].id)">
				<view class="tbbg">
					<view class="tbgtitle">
						<view class="tbgname">{{zslist[0].title}}</view>
						<view class="tbginfo">{{zslist[0].description}}</view>
					</view>
				</view>
				<!-- <image @click="toOther()" class="yudingimg" :src="$getimg('lijigoumai.png')" mode="aspectFill"></image> -->
			</view>

			<view class="szra1">
				<view class="list" v-if="ind>0" v-for="(el,ind) in zslist" @click="$getpage('./public?id='+el.id)">
					<view class="liimg">
						<image class="szra_img"
							:src="el.typeImg!=''?$geturl6(el.typeImg):'https://cs.tour-ma.com/r/cms/www/m/changshu/noimg.png'"
							mode="aspectFill"></image>
					</view>
					<view class="sztitle">
						<view class="bg">{{el.title}}</view>
					</view>
					<!-- <view class="sztext">{{el.num}}人在玩</view> -->
					<!-- <view class="address">
						<image class="addicon" :src="$getimg('wfqy-icon-fy.png')"></image>
						<view class="addtxt">{{el.address}}</view>
					</view> -->
				</view>
			</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: 85, //非遗
				info: {
					color: true
				},
				nowdata: {},
				zslist: [],
				first: 0,
				count: 50
			}
		},
		onReachBottom() {
			this.first += 50;
			this.getDatalist();
		},
		mounted() {
			this.getData();
			this.getDatalist();
		},
		methods: {
			getImg(url) {
				return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url;
			},
			getUrl(url) {
				return 'http://cscmp.tour-ma.com/' + url;
			},

			getData() {
				var url = '/json/channel_get.jspx?id=' + this.id;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					if (res.statusCode == 200) {
						that.nowdata = res.data;
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			},
			getDatalist() {
				// uni.showToast({
				// 	title: '加载中...',
				// 	icon: "loading",
				// 	duration: 100000
				// });
				var url = '/json/content_list.jspx?channelIds=' + this.id + '&first=' + this.first + '&count=' + this
					.count + '&orderBy=3';
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					uni.hideToast();
					if (res.statusCode == 200) {
						if (res.data.length == 0) {
							return
						}
						for (var i = 0; i < res.data.length; i++) {
							that.zslist.push(res.data[i]);
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			},
			toOther() {
				uni.navigateToMiniProgram({
					appId: 'wx8ece732cc3a87e0f',
					path: 'pages/index/index',
					envVersion: 'release',
					extraData: {},
					success(res) {
						console.log("chenggong");
					},
					fail(e) {
						console.log(e);
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.centent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		overflow-y: scroll;
		height: 100%;
		background-color: #2E3D55;
		position: relative;
		.yjgl{
			position: relative;
			width: 100%;
			height: 100%;
		}
		.topbg_hig {
			color: #FFFFFF;
			font-size: 48rpx;
			position: absolute;
			top: 46rpx;
			left: 36rpx;
		}

		.topbg {
			width: 90%;
			height: 400upx;
			// position: relative;
			background-size: 100% 100% !important;
			margin: 150rpx auto 0 auto;
			border-radius:8rpx;
			.tbbg {
				width: 100%;
				height: 170rpx;
				background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				position: relative;
				top: 231rpx;
				border-radius:8rpx;
			}
			.tbgtitle {
				position: absolute;
				left: 40upx;
				bottom: 40upx;

				.tbgname {
					font-size: 32upx;
					font-weight: 600;
					color: #FFFFFF;
					margin-bottom: 20upx;
				}

				.tbginfo {
					font-size: 28upx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.szra1 {
			width: 90%;
			margin: 40upx auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;

			.list {
				width: 48%;
				margin-bottom: 40upx;
				position: relative;

				.liimg {
					margin-bottom: 20upx;

					.szra_img {
						width: 100%;
						height: 345upx;
						border-radius: 8upx;
						// box-shadow: 0upx 45upx 20upx -30upx #D6D5D9;
					}
				}

				.sztitle {
					font-size: 26rpx;
					color: #ffffff;
					position: absolute;
					bottom: 21rpx;
					width: 100%;
					background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
					border-radius: 0 0 0 8rpx;
					.bg{
						width: 90%;
						margin: 0 auto;
						padding: 20rpx 0;
					}
				}

				.sztext {
					font-size: 24upx;
					font-weight: 300;
					color: #999999;
					margin-bottom: 10upx;
				}

				.address {
					display: flex;
					align-items: center;

					.addicon {
						width: 28upx;
						height: 28upx;
						margin-right: 8upx;
					}

					.addtxt {
						font-size: 26upx;
						font-weight: 400;
						color: #4C7AC8;
					}
				}
			}

		}

		.yudingimg {
			width: 110rpx;
			height: 110rpx;
			position: fixed;
			top: 278rpx;
			right: 50rpx;
			z-index: 999;
		}
	}
</style>