86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="bg-img img-box bg-gray" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view>
|
|
<view class="padding bg-white card-text-container flex-column-around">
|
|
<view class="flex justify-between align-center">
|
|
<view v-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>
|
|
<text>/</text>
|
|
<text>{{product.goodsUnit}}</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>
|
|
<text>/</text>
|
|
<text>{{product.goodsUnit}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="product.deptGoodsCategoryName">
|
|
<view class='cu-tag light bg-blue'>
|
|
<text v-if="product.parGoodsCategoryName">
|
|
{{product.parGoodsCategoryName}}
|
|
<text>/</text>
|
|
</text>
|
|
<text>{{product.deptGoodsCategoryName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="text-black one-line-ellipsis">{{product.goodsName}}</view>
|
|
<view class="text-sm two-line-ellipsis">{{product.goodsDesc}}</view>
|
|
<view v-if="product.goodsAreaList && product.goodsAreaList.length" class="two-line-ellipsis">
|
|
<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">
|
|
服务区域
|
|
</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: 'flow-goods-card',
|
|
props: {
|
|
product: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
|
display: inline-block;
|
|
margin-left: 0;
|
|
height: 28rpx;
|
|
font-size: 16rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.img-box {
|
|
padding-bottom: 100%;
|
|
width: 100%;
|
|
height: 0;
|
|
}
|
|
|
|
.card-text-container {
|
|
height: 270rpx;
|
|
}
|
|
</style>
|