ds_mobile_app/mobile/components/goods_list_item_v.vue

<!-- 商品组件：竖直方向
	点击进入商品详情页
	应用于商品列表页面
-->
<template name="goodsListItemV">
	<view class="goods_v_item flex_column_start_start" @click="goGoodsDetail(goods_info)">
		<view class="goods-img" :style="{backgroundImage: 'url('+goods_info.goodsImage+')'}"></view>
		<view class="bottom_part flex_column_between_start">
			<view class="top flex_column_start_start">
				<view class="goods-name">
					<rich-text :nodes="goods_info.goodsName"></rich-text>
				</view>
				<text class="goods-brief">{{goods_info.goodsBrief}}</text>
			</view>
			<view class="goods-price flex_row_start_center">
				<view class="left 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>
			</view>
			<view class="activity_con">
				<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>
				</block>
			</view>
			<view class="goods-price flex_row_start_center">
				<text class="sales">{{$formatW(goods_info.saleNum)}}人付款</text>
			</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: "goodsItemV",
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl
			}
		},
		props: {
			goods_info: {
				type: Object,
				value: {}
			}
		},
		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_v_item {
		width: 345rpx;
		height: 700rpx;
		background: #fff;
		/* margin-top: 20rpx; */
		border-radius: 14rpx;
		overflow: hidden;
		margin-left: 20rpx;

		&:nth-child(1),
		&:nth-child(2) {
			margin-top: 0;
		}
		margin-bottom: 20rpx;

		.goods-img {
			background-size: cover;
			background-position: center center;
			/* background-repeat: no-repeat; */
			width: 345rpx;
			height: 345rpx;
			overflow: hidden;
			background-color: #fff;
		}

		.bottom_part {
			flex: 1;
			padding-bottom: 20rpx;
			width: 100%;
		}

		.top {
			width: 100%;
		}

		.goods-name {
			margin-top: 20rpx;
			font-size: 30rpx;
			color: $com-main-font-color;
			line-height: 38rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			/* white-space: nowrap; */
			padding: 0 20rpx;
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-word;
			height: 76rpx;
		}

		.goods-brief {
			padding: 5rpx 20rpx 0;
			font-size: 24rpx;
			color: $main-third-color;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
			height: 40rpx;
		}

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

			.left {
				color: $main-color;
				align-items: baseline;

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

				.price_int {
					font-size: 34rpx;
					line-height: 34rpx;
				}
			}

			.sales {
				color: $main-third-color;
				font-size: 22rpx;
				/* margin-left: 29rpx; */
			}
		}
	}

	.activity_con {
		display: flex;
		font-size: 22rpx;
		color: #ffffff;
		padding-left: 20rpx;
		height: 30rpx;
		margin-top: 19rpx;

		.ladder_group,
		.discounts {
			height: 30rpx;
			background: linear-gradient(45deg, #FC1C1C 0%, #FF5539 100%);
			border-radius: 15rpx;
			line-height: 30rpx;
			padding: 0 9rpx;
			margin-left: 10rpx;
		}

		.discounts {
			background: linear-gradient(45deg, #FF6C00 0%, #FFC053 100%);
		}

		.ladder_group:nth-child(1) {
			margin-left: 0rpx;
		}
	}

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

	.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>