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

<template>
	<view class="flex justify-start">
		<view v-if="product.goodsImgUrl" class="cu-avatar xxl-view" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view>
		<view v-else-if="product.goodsLogoUrl" class="cu-avatar xxl-view" :style="'background-image:url(' + product.goodsLogoUrl + ');'"></view>
		<view class="margin-left-sm product-content">
			<view>
				<view class="text-black" style="vertical-align: middle;" v-if="product.goods">
					<view class='cu-tag round bg-orange light' v-if="product.goods.installService">
						<text class="text-black">{{getInstallServiceName(product.goods.installService)}}</text>
					</view>
					<view class='cu-tag round bg-orange light' v-if="product.goods.deliveryService">
						<text class="text-black">{{getDeliveryName(product.goods.deliveryService)}}</text>
					</view>
					<template v-if="product.goods.storeService">
						<view class='cu-tag round bg-orange light' v-if="product.goods.storeService == 1">
							<text class="text-black">到店服务</text>
						</view>
						<view class='cu-tag round bg-orange light' v-if="product.goods.storeService == 2">
							<text class="text-black">到店+配送（服务）</text>
						</view>
						<view class='cu-tag round bg-orange light' v-if="product.goods.storeService == 3">
							<text class="text-black">到店+上门（服务）</text>
						</view>
					</template>
					<view class="margin-lr-sm" style="display: inline-block;" v-if="product.goods.distance && product.goods.storeService">
						<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离您</view>
						<text class="text-gray" style="vertical-align: middle;">{{product.goods.distance}}</text>
					</view>
					{{product.goods.goodsName}}
				</view>
				<view class="text-black" style="vertical-align: middle;" v-else>
					<view class='cu-tag round bg-orange light' v-if="product.installService">
						<text class="text-black">{{getInstallServiceName(product.installService)}}</text>
					</view>
					<view class='cu-tag round bg-orange light' v-if="product.deliveryService">
						<text class="text-black">{{getDeliveryName(product.deliveryService)}}</text>
					</view>
					<template v-if="product.storeService">
						<view class='cu-tag round bg-orange light' v-if="product.storeService == 1">
							<text class="text-black">到店服务</text>
						</view>
						<view class='cu-tag round bg-orange light' v-if="product.storeService == 2">
							<text class="text-black">到店+配送（服务）</text>
						</view>
						<view class='cu-tag round bg-orange light' v-if="product.storeService == 3">
							<text class="text-black">到店+上门（服务）</text>
						</view>
					</template>
					<view class="margin-lr-sm" style="display: inline-block;" v-if="product.distance && product.storeService">
						<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离您</view>
						<text class="text-gray" style="vertical-align: middle;">{{product.distance}}</text>
					</view>
					{{product.goodsName}}
				</view>
				<view class="text-sm" v-if="ifShowComments">{{product.goodsDesc}}</view>
			</view>
			<view class="flex justify-between align-center">
				<view v-if="product.discountPrice" class="flex justify-start align-center">
					<text class="text-price text-red text-bold text-xl">{{product.discountPrice}}</text>
					<text class="text-del" v-if="product.goodsPrice">¥{{product.goodsPrice}}</text>
				</view>
				<view v-else-if="product.goodsPrice" class="flex justify-start align-center">
					<text class="text-price text-red text-bold text-xl">{{product.goodsPrice}}</text>
				</view>
				<view v-else-if="product.goodsStandardList && product.goodsStandardList.length > 0">
					<view v-if="product.goodsStandardList[0].discountPrice">
						<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].discountPrice}}</text>
						<text class="text-del" v-if="product.goodsPrice">¥{{product.goodsStandardList[0].goodsPrice}}</text>
						<text class="margin-left-xs">/</text>
						<text>{{product.goodsUnit}}</text>
					</view>
					<view v-else-if="product.goodsStandardList[0].goodsPrice">
						<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text>
						<text class="margin-left-xs">/</text>
						<text>{{product.goodsUnit}}</text>
					</view>
				</view>
				<view v-else-if="product.payMoney" class="flex justify-start align-center">
					<text class="text-price text-red text-bold text-xl">{{product.payMoney}}</text>
				</view>
				<view class="padding-xs" v-if="product.deptGoodsCategoryName">
					<view class='cu-tag light bg-blue'>
						<text v-if="product.parGoodsCategoryName">
							{{product.parGoodsCategoryName}}
							<text class="margin-lr-xs">/</text>
						</text>
						<text>{{product.deptGoodsCategoryName}}</text>
					</view>
				</view>
			</view>
			<view v-if="ifShowServArea">
				<view class="cu-capsule">
					<view class='cu-tag bg-main-color sm'>
						<text class='cuIcon-locationfill'></text>
					</view>
					<view class="cu-tag line-main-color sm">
						{{product.orderType == 1 ? '发货区域' : '服务区域'}}
					</view>
				</view>
				<text v-for="(item,index) in product.goodsAreaList">
					<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != product.goodsAreaList.length - 1">,</text></text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'horizontal-goods-card',
		props: {
			ifShowServArea: {
				type: Boolean,
				default: false
			},
			ifShowComments: {
				type: Boolean,
				default: true
			},
			product: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			getDeliveryName(deliveryService) {
				if(deliveryService === 1) {
					return '包邮'
				} else if(deliveryService === 2) {
					return '同城包送'
				} else if(deliveryService === 3) {
					return '邮费自付/自提'
				}
			},
			getInstallServiceName(installService) {
				if(installService === 1) {
					return '包安装'
				} else if(installService === 2) {
					return '不包安装'
				} else if(installService === 3) {
					return '自费安装'
				}
			}
		}
	}
</script>

<style scoped>
	.xxl-view {
		min-width: 230rpx;
		min-height: 230rpx;
	}

	.product-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
	}

	.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
		display: inline-block;
		margin-left: 0;
		height: 28rpx;
		font-size: 16rpx;
		line-height: 32rpx;
	}
</style>