ds_mobile_app/mobile/components/goods_item_h.vue

<!-- 商品组件：横向展示，一行一个，商品列表页面
	点击进入商品详情页
	加入购物车事件
-->
<template name="goodsCollectItemH">
	<view class="goods_h_item flex_row_start_start" @click="goGoodsDetail(goods_info)">
		<view class="goods-img" :style="{backgroundImage: 'url('+goods_info.goodsImage+')'}"></view>
		<view class="right flex_column_between_start">
			<view class="top flex_column_start_start" style="width: 100%;">
				<view class="goods-name">
					<rich-text :nodes="goods_info.goodsName"></rich-text>
				</view>
				<text class="goods-brief">{{goods_info.goodsBrief}}</text>
			</view>
			<view class="activity_con" v-if="goods_info.activityList&&goods_info.activityList.length>0">
			<block v-for="(item,index) in goods_info.activityList">
				<view class="act_label ladder_group" v-if="item.promotionType==105">
					{{item.promotionName}}
				</view>
				<view class="act_label discounts" v-if="item.promotionType==201||item.promotionType==202||item.promotionType==203||item.promotionType==204">
					{{item.promotionName}}
				</view>
				
				<view class="act_label secKill" v-if="item.promotionType==104">
					{{item.promotionName}}
				</view>
				
				<view class="act_label preSale" v-if="item.promotionType==103">
					{{item.promotionName}}
				</view>
				
				<view class="act_label spellGroup" v-if="item.promotionType==102">
					{{item.promotionName}}
				</view>
			</block>
				
			</view>
			<view class="goods-price flex_row_start_center">
				<view class="left flex_row_start_center">
					<view class="left_price flex_row_start_end">
						<text class="unit">￥</text>
						<text class="price_int">{{this.$getPartNumber(goods_info.goodsPrice,'int')}}</text>
						<text class="price_decimal">{{this.$getPartNumber(goods_info.goodsPrice,'decimal')}}</text>
					</view>
					<text class="sales">{{$formatW(goods_info.saleNum)}}人付款</text>
				</view>
			</view>
			<view class="store_enter" @click.stop="goStoreDetail(goods_info.storeId)">
				<text class="stroe_name">{{goods_info.storeName}}</text>
				<text class="store_enter_btn">进店</text>
				<image class="store_enter_image" :src="imgUrl+'/good_search/enter_store.png'" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsCollectItemH",
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl
			}
		},
		props: {
			goods_info: {
				type: Object,
				value: {}
			}
		},
		created() {
		},
		methods: {
			//跳转店铺详情页面
			goStoreDetail(vid) {
				uni.navigateTo({
					url: '/pages/store/shopHomePage?vid=' + vid
				})
			},
			//进入商品详情页
			goGoodsDetail(goods_info) {
				uni.navigateTo({
					url: '/pages/product/detail?productId=' + goods_info.defaultProductId + '&goodsId=' + goods_info.goodsId
				})
			},
		}
	}
</script>

<style lang='scss'>
	.goods_h_item {
		width: 100%;
		background: #fff;
		padding:20rpx;
		overflow: hidden;
		background: #fff;
        border-top: 1rpx solid #f5f5f5;
		/* &:first-child {
			padding-top: 20rpx;
		} */

		.goods-img {
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			width: 290rpx;
			height: 290rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background-color: #F8F6F7;
			flex-shrink: 0;
		}

		.right {
			height: 290rpx;
			padding: 10rpx 0 0rpx;
			width: 420rpx;

			.top {
				padding-left: 20rpx;
			}
		}

		.goods-name {
			font-size: 30rpx;
			color: $com-main-font-color;
			line-height: 38rpx;
			height: 76rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-word;
		}

		.goods-brief {
			color: $main-third-color;
			font-size: 24rpx;
			margin-top: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

		.goods-price {
			padding: 0 20rpx;
			width: 100%;
			margin-top: 15rpx;

			.left {
				color: $main-color;

				.left_price {
					align-items: baseline;
				}

				.unit,
				.price_decimal {
					font-size: 24rpx;
				}

				.price_int {
					font-size: 34rpx;
				}

				.sales {
					color: $main-third-color;
					font-size: 22rpx;
					margin-left: 26rpx;
					margin-top: 2rpx;
				}
			}

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	.activity_con {
		display: flex;
		font-size: 22rpx;
		color: #ffffff;
		padding-left: 20rpx;
		
		.act_label{
			height: 32rpx;
			border-radius: 15rpx;
			line-height: 32rpx;
			padding: 0 10rpx;
			margin-left: 10rpx;
		}
		
		.ladder_group{
			background: linear-gradient(22deg, #FE901E 0%, #FEAD28 100%);
		}

		.discounts {
			background: linear-gradient(17deg, #AB32CC 0%, #D20FA6 100%);
		}
		
		.secKill{
			background: linear-gradient(to right, #fc5300, #ff1353);
		}
		
		.preSale{
			background: linear-gradient(to right, #a62fcd, #ff006c);
		}

		.act_label:nth-child(1) {
			margin-left: 0rpx;
		}
		
		.spellGroup{
			background: linear-gradient(to right, #ff6000, #ff9c00);
		}
		
	}

	.store_enter {
		display: flex;
		font-size: 24rpx;
		align-items: center;
		padding-left: 20rpx;
	}

	.stroe_name {
		max-width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #666666;
	}

	.store_enter_btn {
		color: #333333;
		font-weight: bold;
		margin-left: 10rpx;

	}

	.store_enter_image {
		width: 11rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}
</style>