paopaoShop/pages/product/common/guessLike.vue

<template>
	<view class="guess-item">
		<view class="guess">猜你喜欢</view>
		<view class="guess-scroll flex_item" scroll-x>
			<view class="scroll-list" v-for="ls in goodList" @click="navToDetailPage(ls)">
				<view class="scoll-img"><image :src="ls.image"></image></view>
				<view class="scoll-name ellipsis">{{ ls.store_name }}</view>
				<view class="price-list flex">
					<view class="tpl">
						<view class="red-price">
							¥
							<text>{{ ls.price }}</text>
						</view>
						<view class="grey-price">¥{{ ls.ot_price }}</view>
					</view>
					<view class="img position-relative" @click.stop="Addcar(ls)">
						<image src="/static/img/img13.png"></image>
						<view class="corner" v-if="ls.cart_num > 0">
							<text>{{ ls.cart_num }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goodList: {
			type: Array,
			default: function () {
				return []
			}
		},
	},
	methods: {
		// 跳转到详情页
		navToDetailPage(ls){
			this.$emit('clickNavTo',ls)
		},
		// 加入购物车
		Addcar(ls){
			this.$emit('Addcar',ls)
		}
	}
};
</script>

<style lang="scss">
//猜你喜欢
.guess-item {
	padding: 25rpx 25rpx;
	background: #ffffff;
	margin-bottom: 15rpx;
	padding-bottom: 45rpx !important;
	.guess {
		color: #000000;
		font-size: 35rpx;
		font-weight: 500;
		padding-bottom: 25rpx;
	}
	.guess-scroll {
		width: 100%;
		font-size: 24rpx;
		overflow: hidden;
		overflow-x: auto;
		justify-content: flex-start;
		.scroll-list {
			border: 2rpx solid #f0f0f0;
			border-radius: 25rpx;
			margin-right: 15rpx;
			.scoll-img {
				width: 227rpx;
				border-top-right-radius: 25rpx;
				border-top-left-radius: 25rpx;
				height: 227rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.scoll-name {
				height: 80rpx;
				width: 227rpx;
				font-size: 22rpx;
				padding: 15rpx 15rpx;
			}
			.price-list {
				padding: 25rpx 15rpx;
				padding-right: 25rpx;
				.tpl {
					.red-price {
						color: #f31d29;
						text {
							font-size: 35rpx !important;
							font-weight: bold;
						}
					}
					.grey-price {
						text-decoration: line-through;
						color: #999999;
						font-size: 10px !important;
					}
				}
				.img {
					width: 45rpx;
					height: 45rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>