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" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
			<view class="cu-item shadow">
				<view class="image">
					<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.remark}}</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: []
			}
		},
		data() {
			return {};
		},
		methods: {
			showDetails(productItem) {
				uni.$emit('index_showProductDetail', productItem)
			}
		}
	}
</script>

<style scoped>
	.item-margin-custom {
		margin: 10rpx 30rpx 30rpx 30rpx;
	}
</style>