tongli_WeChat/compoents/moreGoods.vue

<template>
	<!-- 更多好物 -->
	<view class="comment-box" id="comment">
		<view class="comment-title flex-between">
			<view>更多好物</view>
			<view class="comment-num" ></view>
		</view>
		<view class="comment-container" v-if="list.length>0">
			<view class="item" v-for="item in list" :key="item.goods.id" @click="gotoDetail(item)">
				<image class="item-img" :src="showImg(item.goods.image)" mode=""></image>
				<view class="content">
					<view class="title text-overflowRows">{{item.goods.title}}</view>
					<view class="bottom">
						<view class="price">
							{{item.goods.money/100}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-box" v-else>
		    <view>暂无更多推荐</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		props:['goodsId'],
		data() {
			return {
				list: [],
				
			}
		},
		mounted () {
			console.log(1,this.goodsId)
			this.getList()
		},
		methods: {
			getList(){
				this.list = []
				if (!this.goodsId) return
				this.Post({
					tag_id: 59,
					offset: this.list.length,
					limit: 4,
					goodsId: this.goodsId,
				},'/api/tag/getGoodsByTagId').then(res => {
					this.list = res.data
				})
			},
			
			gotoDetail(item) {
				if (item.type!=='goods') {
					item.search_data.genre = item.type
				}
				this.goDetailByType(item.search_data)
			},
		}
	}
</script>

<style scoped lang="scss">
	.comment-box{
		width: 697rpx;
		height: auto;
		margin: 24rpx auto 0;
		
		.comment-title{
			height: 95rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 37rpx;
			color: #000000;
			
			
			.comment-num{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #515150;
			}
		}
		
		.comment-container{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			
			.item {
				margin-bottom: 22rpx;
				width: 335rpx;
				height: 497rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
				border-radius: 13rpx;
			}
			
			.item-img {
				width: 100%;
				height: 342rpx;
				background: #87CD93;
				border-radius: 13rpx 13rpx 0rpx 0rpx;
			}
			
			.content {
				height: 145rpx;
				padding: 0 13rpx 13.33rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 29rpx;
				color: #000000;
				width: 291rpx;
			}
			
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.price {
				font-size: 34.67rpx;
				font-family: PingFangSC;
				// font-weight: bold;
				color: #C3282E;
			}
			.price::before {
				content: '￥';
				font-size: 24rpx;
			}
			.price::after {
				content: '起';
				font-size: 24rpx;
				color: #999999;
				font-weight: 500;
			}
		}
		

		
		.empty-box {
		    text-align: center;
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 200rpx;
		}
		
		.content-more{
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	

	
</style>