flavorOfTimeSz/components/recommend.vue

<template>
	<view class="bg" :style="{backgroundColor:bgColor || '#F5F5F5'}">
		<view class="titles">为您推荐</view>
		<view class="goodBox" v-if="type == 0 && (list && list.length>0)">
			<view>
				<view class="goodItem" v-for="(item,index) in leftList" :key="item.id" @click="gotoDetail(item.id)">
					<image :src="showImg(item.image)" mode="widthFix"></image>
					<view class="goodContent">
						<view class="title">
							{{item.title}}
						</view>
						<view class="tags" v-if="item.label">
							<view v-for="(tagItem,tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
								{{tagItem}}
							</view>
						</view>
						<view class="price">{{showPrice(item.price)}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="goodItem" v-for="(item,index) in rightList" :key="item.id" @click="gotoDetail(item.id)">
					<image :src="showImg(item.image)" mode="widthFix"></image>
					<view class="goodContent">
						<view class="title">
							{{item.title}}
						</view>
						<view class="tags" v-if="item.label">
							<view v-for="(tagItem,tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
								{{tagItem}}
							</view>
						</view>
						<view class="price">{{showPrice(item.price)}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="goodBox" v-if="type == 1 && (list && list.length>0)">
			<view>
				<view class="goodItem" v-for="(item,index) in leftList" :key="item.id" @click="gotoDetail(item.goods.id)">
					<image :src="showImg(item.goods.image)" mode="widthFix"></image>
					<view class="goodContent">
						<view class="title">
							{{item.goods.title}}
						</view>
						<view class="tags" v-if="item.goods.label">
							<view v-for="(tagItem,tagIndex) in item.goods.goods_new_tag.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
								{{tagItem}}
							</view>
						</view>
						<view class="price">{{showPrice(item.goods.price)}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="goodItem" v-for="(item,index) in rightList" :key="item.id" @click="gotoDetail(item.goods.id)">
					<image :src="showImg(item.goods.image)" mode="widthFix"></image>
					<view class="goodContent">
						<view class="title">
							{{item.goods.title}}
						</view>
						<view class="tags" v-if="item.goods.label">
							<view v-for="(tagItem,tagIndex) in item.goods.goods_new_tag.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
								{{tagItem}}
							</view>
						</view>
						<view class="price">{{showPrice(item.goods.price)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="finished-text" v-if="finished">没有更多数据了</view>
	</view>
</template>

<script>
	import Base from "@/components/Base";
	export default{
		extends: Base,
		// type:0,scenic_type_id:1景点,5酒店11民宿12美食;type:1,文创特产,tag_id:6=邮寄,7=自提
		props: ['scenic_type_id','tag_id','type','bgColor','exclude_id'],
		data(){
			return {
				list: [],
				leftList: [],
				rightList: [],
				finished: false
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(){
				if(this.type == 0){
					this.Post({
						method: 'POST',
						scenic_type_id: this.scenic_type_id,
						exclude_id: this.exclude_id,
						offset: this.list.length,
						limit: 6
					},'/api/scenic/getScenicByType').then(res => {
						res.data.forEach((item,index)=>{
							if(index%2 == 0){
								this.leftList.push(item)
							}else{
								this.rightList.push(item)
							}
						})
						this.list = [...this.list, ...res.data];
						if (res.data.length < 6) {
							this.finished = true
						}
					})
				}else{
					this.Post({
						method: 'POST',
						type_id: 5,
						exclude_id: this.exclude_id,
						offset: this.list.length,
						limit: 6,
						tag_id: this.tag_id
					},'/api/tag/getGoodsByTagId').then(res => {
						res.data.forEach((item,index)=>{
							if(index%2 == 0){
								this.leftList.push(item)
							}else{
								this.rightList.push(item)
							}
						})
						this.list = [...this.list, ...res.data];
						if (res.data.length < 6) {
							this.finished = true
						}
					})
				}
			},
			gotoDetail(id){
				if(this.scenic_type_id == 1){
					uni.navigateTo({
						url: '/subPackages/details/scenicDetails?id='+id
					})
				}else if(this.scenic_type_id == 5){
					uni.navigateTo({
						url: '/subPackages1/hotel/hotelDetails?id='+id
					})
				}else if(this.scenic_type_id == 11){
					
				}else if(this.scenic_type_id == 12){
					uni.navigateTo({
						url: '/subPackages/details/eateryDetails?id='+id
					})
				}else if(this.tag_id == 6){
					uni.navigateTo({
						url: '/subPackages/details/goodDetails?type=1&id='+id
					})
				}else if(this.tag_id == 7){
					uni.navigateTo({
						url: '/subPackages/details/goodDetails?type=0&id='+id
					})
				}
			}
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>

<style scoped lang="scss">
	.bg{
		padding: 0 27rpx;
		box-sizing: border-box;
	}
	.titles{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-bottom: 30rpx;
	}
	.goodBox{
		display: flex;
		justify-content: space-between;
		
		.goodItem{
			margin-bottom: 28rpx;
			
			image{
				width: 340rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				box-shadow: 0px 0px 41rpx 0px rgba(51,51,51,0.1);
				display: block;
			}
			
			.goodContent{
				width: 340rpx;
				height: 150rpx;
				background: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
				padding: 13rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 20rpx 0px rgba(51,51,51,0.1);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.title{
					width: 286rpx;
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					overflow-x: hidden;
					overflow-y: inherit;
					white-space: nowrap;
				}
				
				.tags{
					display: flex;
					
					view{
						max-width: 115rpx;
						padding: 0 10rpx;
						height: 30rpx;
						border: 1rpx solid #00D7ED;
						border-radius: 7rpx;
						font-size: 23rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #00D7ED;
						text-align: center;
						line-height: 30rpx;
						margin-right: 12rpx;
					}
				}
				
				.price{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF2D3B;
					text-align: right;
				}
				.price::before{
					content: "￥";
					font-size: 20rpx;
				}
				.price::after{
					content: "起";
					font-size: 20rpx;
					color: #8D8D8D;
				}
			}
		}
	}
</style>