changshu_WeChat/subPackages/other/feiyi.vue

<template>
	<view class="centent">
		<view class="centent-name">
			<view :class="['name-name1',titleInd == 1?'active':'']" @click="TitleClick(1)">
				<image :src="'https://static.ticket.sz-trip.com/changshu/images/feiyi/' + (titleInd == 1 ? 'icon1' : 'icon1s') + '.png'" mode=""></image>    
				非遗推荐
			</view>
			<view :class="['name-name2',titleInd == 2?'active':'']" @click="TitleClick(2)">
				<image :src="'https://static.ticket.sz-trip.com/changshu/images/feiyi/' + (titleInd == 1 ? 'icon2s' : 'icon2') + '.png'" mode=""></image>    
				传承有人
			</view>
			<!-- <view class="name-title">非遗精选</view> -->
		</view>
		<view class="fkiml">
			<view :class="['xwwfbox',istop?'toplm':'follm']" id="lmid">
				<view :class="['xwwfinds',xwwfind==index?'act':'']" v-for="(item,index) in djlist" @click="ckxwwfind(index,item)" :key="index">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="main">
			<view class="mainlist">
				<view class="libox" v-for="(el, ind) in djlist[xwwfind].list" @click="gotoPath('/subPackages/other/foodDetail?id='+el.id)" v-if="titleInd == 1" :key="ind">
					<image class="liboxtop" :src="el.typeImg == '' || el.typeImg == null? 'https://qyly1.csly-travel.com/r/cms/www/m/changshu/noimg.png':$geturl480(el.typeImg)" mode=""></image>
					<view class="name">{{ el.title}}</view>
					<view class="liboxbot">
						<view class="lbrli">
							<view class="lbrliind">{{el.cateType}}</view>
						</view>
						<view class="title1 text-overflowRows" v-html="el.txt"></view>
					</view>
				</view>
				<view class="libox" v-for="(el, ind) in tjyrDatas" @click="gotoPath('/subPackages/other/foodCardtjyr?id='+el._id)" v-if="titleInd == 2" :key="ind">
					<image class="liboxtop" :src="el.photo.length == 0? 'https://qyly1.csly-travel.com/r/cms/www/m/changshu/noimg.png':'https://qyly1.csly-travel.com/api/mc-config/model/device/file/t_1684805150186614785?deviceId='+ el._id +'&fileId='+ el.photo[0].fileId +'&useCode=false'" mode=""></image>
					<view class="liboxbot">
						<view class="name">{{ el.name}}</view>
						<view class="lbrli">
							<view class="lbrliind">{{el.level}}</view>
						</view>
						<view class="title1 text-overflowRows" v-html="el.introduce"></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import back from '@/components/back.vue';
	export default {
		components: {
			back
		},
		data() {
			return {
				id: 76, //非遗
				token: '',
				titleInd: 1,
				info: {
					color: true
				},
				istop: false,
				zslist: [{
					list: []
				}],
				first: 0,
				count: 2,
				xwwfind: 0,
				cateLevel:'',
				djlist: [{
						name: '全部',
						ind: 0,
						list: []
					},
					{
						name: '国家级',
						ind: 1,
						list: []
					},
					{
						name: '江苏省级',
						ind: 2,
						list: []
					},
					{
						name: '苏州市级',
						ind: 3,
						list: []
					},
					{
						name: '常熟市级',
						ind: 4,
						list: []
					}
				],
				tjyrDatas: []
			}
		},
		onReachBottom() {
			this.first += 2;
			this.getDatalist();
		},
		onPageScroll(e) {
			if (e.scrollTop > this.lmtop) {
				this.istop = true;
			}
			if (e.scrollTop < this.lmtop) {
				this.istop = false;
			}
		},
		onReady() {
			this.TitleClick(1);
			var that = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#lmid').boundingClientRect(data => {
				that.lmtop = data.top;
			}).exec();
		},
		mounted() {
			// this.TitleClick(1);
		},
		methods: {
			ckxwwfind(ind,el) {
				this.xwwfind = ind;
				if(el.name != '全部') {
					this.cateLevel = el.name;
				}else{
					this.cateLevel = '';
				}
				if(this.titleInd == 1) {
					this.djlist[this.xwwfind].list = [];
					this.first = 0;
					this.count = 2;
					this.getDatalist();
				}else if(this.titleInd == 2) {
					this.getfyyrDaya();
				}
			},
			navto(id) {
				uni.navigateTo({url: url})
			},
			TitleClick(type) {
				this.titleInd = type;
				if(this.titleInd == 1) {
					this.getDatalist();//非遗推荐列表
				}else{
					this.getToken();
				}
			},
			getDatalist() {
				// uni.showLoading({title: '加载中...'});
				uni.showToast({title: '加载中...',duration: 1000,icon: 'none'});
				var url = '/json/content_list.jspx';
				var para = {};
				var that = this;
				let data = {
					apiType: 'old',
					channelIds: that.id,
					first: that.first,
					count: that.count
				}
				if(that.cateLevel != '') data.cateLevel = that.cateLevel
				that.Post(data, url).then(res => {
					if(res) {
						var json = [];
						json = res;
						var tmp = that.djlist;
						if (that.xwwfind == 0) {
							for (var i = 0; i < json.length; i++) {
								tmp[0].list.push(json[i]);
							}
							that.djlist = tmp;
						}
						if (that.xwwfind != 0) {
							for (var i = 0; i < json.length; i++) {
								for(var j=0;j<tmp.length;j++){
									if(json[i].cateLevel == tmp[j].name){
										tmp[j].list.push(json[i]);
									}
								}
							}
							that.djlist = tmp;
						}
					}
				})
			},
			toOther() {
				uni.navigateToMiniProgram({
					appId: 'wx8ece732cc3a87e0f',
					path: 'pages/index/index',
					envVersion: 'release',
					extraData: {},
					success(res) {
						console.log("chenggong");
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			getToken() {
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
				var para = {
					type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon'
				};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					that.token = res.data.obj;
					if(res.data.success==false){
						that.sxToken();
					}else{
						that.getfyyrDaya();
					}
				});
			},
			sxToken(){
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
				var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					that.token=res.data.obj;
					that.getfyyrDaya();
				});
			},
			getfyyrDaya() {
				uni.showLoading({title: '加载中...'});
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx';
				var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{
					"code": "0001_fy",
					"params": {},
					"page": 0,
					"size": 0,	
					"result": {},
					"orders": []		
				}};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					if (res.data.success) {
						let json = res.data.obj.data;
						that.tjyrDatas = [];
						if(that.cateLevel == '') {
							that.tjyrDatas = json;
						}else{
							for (let i = 0; i < json.length; i++) {
								if(json[i].level == that.cateLevel) {
									that.tjyrDatas.push(json[i])
								} 
							}
						}
						uni.hideLoading();
					}else {
						uni.hideLoading();
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: content-box;
	}
	.centent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		overflow-y: scroll;
		position: relative;
		background: #A2E0DB;

		.centent-name {
			width: 100%;
			// margin: 0 auto 30rpx auto;
			// display: flex;
			// align-items: center;
			position: relative;
			height: 93rpx;
			background: #fff;
			font-weight: 500;
			font-size: 31rpx;
			color: #0BB0A3;
			
			image {
				width: 33.33rpx;
				height: 33.33rpx;
				margin-right: 3rpx;
			}
			
			&>view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.name-name {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #5a5a5a;
				padding: 30rpx 0rpx;
				width: 50%;text-align: center;cursor: pointer;
				border-bottom: 1rpx solid #4A9AF9;
			}
			.name-name.active {
				// background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 100%);
				// color: #FFFFFF;
			}
			.name-name1 {
				width: 375rpx;
				height: 93rpx;
				background: #E6F8F7;
				border-radius: 33rpx 33rpx 0rpx 0rpx;
			}
			.name-name1.active {
				width: 410rpx;
				background: url("https://static.ticket.sz-trip.com/changshu/images/feiyi/leftBg.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				z-index: 2;
			}
			.name-name2 {
				width: 375rpx;
				height: 93rpx;
				background: #E6F8F7;
				border-radius: 33rpx 33rpx 0rpx 0rpx;
				position: absolute;
				right: 0;
			}
			.name-name2.active {
				width: 410rpx;
				background: url("https://static.ticket.sz-trip.com/changshu/images/feiyi/rightBg.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}
			.active {
				font-weight: bold;
				font-size: 31rpx;
				color: #111111;
			}
			.name-title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #8b8b8b;
				line-height: 28rpx;
				margin-left: 20rpx;
			}
		}

		.follm {
			position: absolute;
			left: 0rpx;
			top: 14rpx;
		}

		.toplm {
			position: fixed;
			top: 0;
			left: 0;
			background: #F2F2F2;
			height: 80rpx;
			z-index: 9;
		}

		.fkiml {
			width: 93%;
			position: relative;
			height: 80rpx;
			margin: 20rpx auto 0rpx auto;
		}

		.xwwfbox {
			width: 100%;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			justify-content: center;
			// margin-bottom: 16upx;
			// padding-bottom: 20upx;

			.xwwfinds {
				background: linear-gradient(0deg, #E6F8F7, #FFFFFF);
				border-radius: 30upx;
				font-weight: 500;
				font-size: 29rpx;
				color: #00AEA0;
				padding: 0 15upx;
				height: 60rpx;
				line-height: 60rpx;
				margin-right: 20upx;

				&:first-child {
					margin-left: 20rpx;
				}
			}
			
			.act {
				background: linear-gradient(0deg, #009E91, #5FF4E8);
				border: 2rpx solid rgba(255,255,255,0.8);
				color: #FFFFFF;
			}
		}
		.xwwfbox::-webkit-scrollbar {
			display: none;
		}

		.main {
			padding: 20rpx 4%;
		}


		.mainlist .libox {
			width: 697rpx;
			height: 620rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(89,166,160,0.32);
			border-radius: 20rpx;
			margin-bottom: 27rpx;
			padding: 13.3rpx;
			box-sizing: border-box;
		}

		.libox .name {
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			display: flex;
			align-items: center;
			padding: 15rpx 10rpx;

			&::after {
				content: '';
				display: inline-block;
				width: 33.33rpx;
				height: 33.33rpx;
				background: url(https://static.ticket.sz-trip.com/changshu/images/feiyi/rightIcon.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				right: 55rpx;
			}
		}


		.libox .liboxtop {
			width: 670rpx;
			height: 367rpx;
			border-radius: 13rpx;
			position: relative;
			object-fit: cover;
			margin: 0 auto;
			display: block;
		}

		.liboxtop .xing {
			position: absolute;
			top: 15upx;
			left: 35upx;
			overflow: hidden;
		}

		.liboxtop .xing .img {
			width: 148upx;
			height: 26upx;
		}


		.liboxbot .title1 {
			font-weight: 500;
			font-size: 25rpx;
			color: #000000;
			margin-top: 20rpx;
			padding: 0 10rpx;
		}

		.lbrli {
			display: flex;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 0 10rpx;

			.lbrliind {
				font-size: 24rpx;
				font-weight: 500;
				color: #00AEA0;
				border: 1rpx solid #82DFD8;
				padding: 5upx 10upx;
			}
		}
	}
</style>