dingdong-mall/components/goods-card/vertical-goods-card.vue

<template>
	<view>
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-main-color"></text> {{title}}
			</view>
		</view>
		<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
			<view class="cu-item shadow">
				<view v-if="multiPicMode" class="flex justify-between align-center multi-pic-container">
					<view class="left-view"><image class="radius" :src="item.goodsImgsMap[0][0].imgUrl" mode="aspectFill"></image></view>
					<view class="flex-column-between align-center right-view">
						<image class="radius" :src="item.goodsImgsMap[0][1].imgUrl" mode="aspectFill"></image>
						<image class="radius" :src="item.goodsImgsMap[0][2].imgUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view v-else>
					<image :src="item.goodsImgUrl" mode="aspectFill"></image>
				</view>
				<view class="cu-item item-margin-custom">					
					<view class="content flex-sub">
						<view class="text-xl">{{item.goodsName}}</view>
						<view class="text-sm text-gray margin-tb-xs">{{item.goodsDesc}}</view>
						<view class="flex justify-between align-end">
							<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
							<view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vertical-goods-card",
		props: {
			title: '',
			goodsInfos: {
				type: Array,
				default: []
			},
			multiPicMode: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			showDetails(productItem) {
				uni.$emit('index_showProductDetail', productItem)
			}
		}
	}
</script>

<style scoped>
	.item-margin-custom {
		margin: 10rpx 30rpx 30rpx 30rpx;
	}
	
	.multi-pic-container {
		height: 450rpx;
		overflow: hidden;
	}
	
	.multi-pic-container > view {
		width: calc(50% - 5rpx);
		height: 100%;
	}
	
	.multi-pic-container > .left-view > image {
		height: 100%;
		width: 100%;
	}
	
	.multi-pic-container > .right-view > image {
		height: calc(50% - 5rpx);
		width: 100%;
	}
</style>