dingdong-mall/components/common-card/horizontal-name-card.vue

99 lines
3.1 KiB
Vue

<template>
<view>
<view class="flex justify-start">
<view v-if="vCard.picUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.picUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
</view>
<view v-else-if="vCard.workerLogoUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + defaultHead(vCard.workerLogoUrl) + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
</view>
<view v-else-if="vCard.customerLogoUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.customerLogoUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
</view>
<view class="margin-left-sm product-content">
<view>
<view class="text-black text-xl">{{vCard.name}}</view>
<view>
<text v-if="vCard.comments.icon" :class="'cuIcon-' + vCard.comments.icon"
class="margin-right-xs text-main-color"></text>
<text>{{vCard.comments.desc}}</text>
</view>
</view>
<view v-for="(item, index) in vCard.extraInfos">
<view class="text-sm">
<text v-if="item.icon" :class="'cuIcon-' + item.icon"
class="margin-right-xs text-main-color"></text>
<text v-if="item.name" class="margin-right-xs">{{item.name}}:</text>
<text>{{item.desc}}</text>
</view>
</view>
</view>
</view>
<view class="text-sm padding-top" v-if="vCard.rateInfo">
<view class="flex justify-between">
<text>{{vCard.rateInfo.rateTitle}}<text class="text-red text-xl margin-left-xs">{{vCard.rateInfo.totalScore}}</text> /{{vCard.rateInfo.maxRate}}分</text>
<uni-rate :readonly="true" allow-half :value="vCard.rateInfo.totalScore" />
</view>
<view class="flex justify-between">
<view>
<text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
<text>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text>
</text>
</view>
<view class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
class="text-bold text-gray cuIcon-right"></text></view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'horizontal-name-card',
props: {
vCard: {
type: Object,
default: {}
},
avatarWidth: {
type: String,
default: '150rpx'
},
avatarHeight: {
type: String,
default: '150rpx'
},
avatarPubClass: {
type: String,
default: ''
}
},
data() {
return {
}
},
methods: {
defaultHead(url) {
if(url === 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132') {
return 'http://gqz.opsoul.com/2741722238771_.pic.jpg'
}
return url
}
}
}
</script>
<style scoped>
.product-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.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>