changshu_other/other/foodList.vue

<template>
	<view class="centent">
		<back :info="info"></back>
		<!-- <view :style="{top:statusBarHeight+'px'}" class="cityicon" @click="$getpage('/pages/other/select?city='+city)">
			{{city}}</view> -->
		<view class="topbg" :style="{background: 'url('+$geturl(nowdata.contentImg)+') no-repeat'}">
			<view class="tbgtitle">
				<view class="tbgname">{{nowdata.name}}</view>
				<view class="tbginfo">{{nowdata.description}}</view>
			</view>
			<view class="tbboxs" v-if="alldata.length>0">
				<view class="tboxtop">特色美食</view>
				<view class="tboxbot" :style="{background: 'url('+$geturl6(alldata[0].typeImg)+') no-repeat'}"
					@click="$getpage('/other/foodCard?id='+alldata[0].id)">
					<view class="tbtitle">
						<view class="tbname">{{alldata[0].title}}</view>
						<view class="tbinfo text_overflow_2" v-html="alldata[0].txt">
							<!-- {{alldata[0].txt}} -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="szra1" v-if="alldata.length>0">
			<view class="list" v-for="(el,ind) in alldata" :style="{'margin-right':ind%3==0?'0':'12rpx'}" v-if="ind>0"
				@click="$getpage('/other/foodCard?id='+el.id)">
				<view class="liimg">
					<image class="szra_img" :src="$geturl4(el.typeImg)" lazy-load="true" mode="aspectFill"></image>
				</view>
				<view class="sztitle text_overflow">{{el.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	var web = require('@/components/utils/request.js');
	export default {
		components: {
			back
		},
		data() {
			return {
				statusBarHeight: 0,
				info: {
					color: false,
					num: false
				},
				id2: 92, //特色美食
				nowdata: {},
				alldata: [],
				first: 0,
				count: 50,
				hasOnShow: true
			}
		},
		onLoad(options) {
			if (options.city != undefined) {
				this.city = options.city;
			}
			this.getData();
		},
		onReady() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// this.getData();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50 && !this.info.num) {
				this.info.num = true;
			}
			if (e.scrollTop < 50 && this.info.num) {
				this.info.num = false;
			}
		},
		onShow(object) { //获取页面返回传递参数
			if (!this.hasOnShow) {
				return
			}
			this.hasOnShow = false;
			this.first = 0;
			this.alldata = [];
			if (!!object) {
				this.city = object.city;
			}
			this.getdata2();
		},
		onHide() {
			this.hasOnShow = true;
		},
		onReachBottom() {
			this.first += 50;
			this.getdata2();
		},
		methods: {
			getData() {
				var url = '/json/channel_get.jspx?id=' + this.id2;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					that.nowdata = res.data;
				})
			},
			getdata2() {
				// var city='';
				 var url = 'json/content_list.jspx?channelIds=' + this.id2+'&orderBy=2'+'&first='+this.first+'&count='+this.count;
				// var url = 'json/content_list.jspx?channelIds=' + this.id2 + '&orderBy=2';

				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					if (res.data.length > 0) {
						for (var i = 0; i < res.data.length; i++) {
							that.alldata.push(res.data[i]);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';

	.centent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		overflow-y: scroll;

		.topbg {
			width: 100%;
			height: 826upx;
			position: relative;
			background-size: 100% 100% !important;

			.tbgtitle {
				position: absolute;
				left: 58upx;
				top: 150upx;

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

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

			.tbboxs {
				background: url($url+'wf-x-mscy-k.png') no-repeat;
				background-size: 100% 100%;
				max-width: 690upx;
				height: 449upx;
				margin: auto;
				margin: 290upx auto 0;
				width: 90%;
				position: relative;

				.tboxtop {
					font-size: 36upx;
					font-weight: bold;
					font-style: italic;
					color: #973F0E;
					position: absolute;
					top: 16upx;
					left: 58upx;
				}

				.tboxbot {
					width: 94%;
					// max-width: 650upx;
					height: 360upx;
					position: relative;
					background-size: 100% 100% !important;
					position: absolute;
					top: 72upx;
					left: 50%;
					margin-left: -47%;
					border-radius: 33upx;
					overflow: hidden;

					&::before {
						content: '';
						display: inline-block;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.32);
					}

					.tbtitle {
						position: absolute;
						left:30upx;
						bottom: 30upx;
						color: #FFFFFF;

						&::before {
							content: '';
							display: inline-block;
							background: url($url+'wf-x-mscy-yinhao.png') no-repeat;
							background-size: 100%;
							width: 35upx;
							height: 33upx;
						}

						.tbname {
							font-size: 36upx;
							font-weight: bold;
							margin-bottom: 16upx;

							&::after {
								content: '';
								display: inline-block;
								background: url($url+'wf-x-mscy-jt.png') no-repeat;
								background-size: 100%;
								width: 32upx;
								height: 32upx;
								margin-left: 20upx;
							}
						}

						.tbinfo {
							font-size: 24upx;
							font-weight: 500;
							line-height: 1.6;
						}
					}
				}
			}
		}

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

			.list {
				width: 32%;
				margin-bottom: 40upx;
				margin-right: 15rpx;

				.liimg {
					margin-bottom: 20upx;

					.szra_img {
						max-width: 220upx;
						width: 100%;
						height: 210upx;
						border-radius: 8upx;
					}
				}

				.sztitle {
					font-size: 32upx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 20upx;
				}
			}

		}
	}
</style>