yandu_WeChat/subPackages/travelGuide/travelGuide.vue

<template>
	<view class="bg">
		<view class="topImg relative">
			<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill">
			<view class="icon-back"  :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" >
				<uni-icons type="left" size="24" color="#242424"></uni-icons>
			</view>
		</view>
		
		<view class="tag-container no-scrollbar">
			<view :class="['tag', type_id==42?'active':'']" @click="setTag({id: 42})">全部</view>
			<view :class="['tag', type_id==item.id?'active':'']" v-for="(item,i) in types" :key="item.id" @click="setTag(item)">{{item.name}}</view>
		</view>
		
		<view class="strategy-box box">
			<view v-for="(num,nums) in 2" :key="nums">
			    <view v-for="(item,index) in list" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="viewDetail(item)">
					<!-- <view class="title-tag" v-if="item.image_tag">{{item.image_tag}}</view> -->
			        <image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image>
			        <view class="strategy-content">
			        	<view class="strategy-title">{{item.title}}</view>
			        	<view class="flex-between">
			        		<view class="text-overflow" style="display: flex;align-items: center;width: 200rpx;">
			        			<image :src="showImg(item.author_img)" mode="" class="author-img"></image>
			        			{{item.author}}
			        		</view>
			        		<view style="display: flex;align-items: center;">
			        			<image src="https://static.ticket.sz-trip.com/yandu/images/index/eye.png" mode="" class="eye-img"></image>
			        			{{item.view}}
			        		</view>
			        	</view>
			        </view>
			    </view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	export default{
		data(){
			return {
				systemInfo: {
					height:"0px",
					textHeight:"0px",
					textTop:"0px",
					contentTop: '0px',
				},
				
				list: [],
				types: [],
				showMore: true,
				headImg:"https://tongli.sz-trip.com/uploads/20240902/55c5cbe137790323cc719b5c83d5e2e9.png",

				type_id: 42,//景点分类id
			}
		},
		onShow() {
			this.showMore = true
		},
		onReady() {
			this.type_id = 42
			this.getArticleType()
			this.getArticleByType()
		},
		onLoad(options) {
			let that = this
			uni.getSystemInfo({
			  success(res) {
			    console.log(res)
			    that.systemInfo.height =res.windowHeight+'px'
				const menu=uni.getMenuButtonBoundingClientRect()
				that.systemInfo.textHeight=menu.height+"px"
				that.systemInfo.textTop=menu.top+"px"
				that.systemInfo.contentTop = (menu.height + menu.top)+"px"
			    console.log(that.systemInfo)
			  }
			})
		},
		  
		methods: {
			setTag (item) {
				this.type_id = item.id
				this.list = []
				this.getArticleByType()
			},
			// 游记攻略分类
			getArticleType () {
				this.Post({
					type_id: this.type_id,
				},'/api/article/getType').then(res => {
					this.types = res.data || []
				})
			},
			
			// 游记攻略
			getArticleByType() {
				this.Post({
					type_id: this.type_id,
					offset: this.list.length,
					limit: 10
				},'/api/Article/getArticleByType').then(res => {
					this.list = [...this.list, ...res.data]
					if(res.data.length < 10) this.showMore = false
				})
			},
			// 游记攻略查看更多
			strategyMore() {
				this.getArticleByType()
			},
			viewDetail (item) {
				this.goOtherDetail(item)
				uni.navigateTo({
					url:'/subPackages/travelGuide/detail?id='+item.id
				})
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.showMore) this.getList()
			},1000)
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
		font-family: PingFangSC;
	}
	.bg{
		min-height: 100vh;
		background: #FFFFFF;
	}
	.topImg{
		width: 100%;
		height: 440rpx;
		.icon-back{
			position: absolute;
			display: flex;
			align-items: center;
			z-index: 50;
		}
	}
	
	.tag-container{
		margin: 42rpx 26rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow-y: auto;
		.tag{
			flex-shrink: 0;
			border-radius: 13rpx;
			border: 1px solid #999999;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			padding: 13rpx 29rpx;
			margin-right: 20rpx;
		}
		.tag.active{
			background: linear-gradient(90deg, #9EE4FE, #7FD491);
			border: none;
			font-weight: bold;
			color: #000000;
		}
	}
	
	.strategy-box {
		padding: 0 26rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		
		.strategy-item {
			width: 339rpx;
			border-radius: 13rpx;
			overflow: hidden;
			margin-bottom: 28rpx;
			position: relative;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
			
			.title-tag {
				position: absolute;
				top: 0;
				left: 0;
				width: 153rpx;
				line-height: 47rpx;
				background: #71B580;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				text-align: center;
				font-weight: 500;
				font-size: 27rpx;
				color: #FFFFFF;
				overflow-x: auto;
				white-space: nowrap;
			}
			.title-tag::-webkit-scrollbar {
				display: none;
			}
			
			.strategy-image {
				width: 337rpx;
				display: block;
			}
			
			.strategy-content {
				background: #FFFFFF;
				padding: 20rpx;
				
				.strategy-title {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 31rpx;
					color: #2C2C2C;
				}
				
				.flex-between {
					font-weight: 500;
					font-family: PingFang SC;
					font-size: 24rpx;
					color: #000000;

					margin-top: 14rpx;
					
					.author-img {
						width: 37rpx;
						height: 37rpx;
						margin-right: 6rpx;
					}
					
					.eye-img {
						width: 26.67rpx;
						height: 18.67rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	
</style>