134 lines
4.5 KiB
Vue
134 lines
4.5 KiB
Vue
<template>
|
|
<view class="flex justify-start">
|
|
<view class="cu-avatar xxl-view" :style="'background-image:url(' + product.goodsLogoUrl + ');'">
|
|
</view>
|
|
<view class="margin-left-sm product-content">
|
|
<view>
|
|
<view class="text-black">{{product.totalName}}</view>
|
|
<view class="text-sm" v-if="ifShowComments">{{product.remark}}</view>
|
|
</view>
|
|
<view class="flex align-center" 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="flex justify-start align-center" v-if="product.payMoney">
|
|
<text class="text-price text-red text-bold text-xl">{{product.payMoney}}</text>
|
|
</view>
|
|
<view v-else-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" class="flex justify-start align-center">
|
|
<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>
|
|
</view>
|
|
<view v-else-if="product.goodsStandardList[0].goodsPrice" class="flex justify-start align-center">
|
|
<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xs" v-if="product.type">
|
|
<view class='cu-tag light bg-blue'>{{product.type}}</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" v-if="ifShowServArea">
|
|
<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: false
|
|
},
|
|
product: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
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>
|