135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
<template>
|
|
<div class="rate-card">
|
|
<div class="rate-card-top">
|
|
<image class="rate-user-photo" mode="aspectFit" lazy-load="true" :src="item.ISANONYMOUS==1|| !item.HEADIMAGEURL ?'https://eshangtech.com/ShopICO/noName.png' : item.HEADIMAGEURL"></image>
|
|
|
|
<div class="top-card-center">
|
|
<div class="rate-text" v-if="item.ISANONYMOUS==0">
|
|
{{item.MEMBERSHIP_NAME}}
|
|
<span v-if="item.MEMBERSHIP_LEVEL>100" class="vip-level">{{item.MEMBERSHIP_LEVEL_TEXT}}</span>
|
|
</div>
|
|
<div class="rate-text" v-else>匿名用户</div>
|
|
<div style="display:flex;align-items:center;">
|
|
<van-rate
|
|
:value='item.MALLCOMMENT_SCORE'
|
|
size="12"
|
|
allow-half=true
|
|
:color="starColor"
|
|
void-color="#eee"
|
|
void-icon="star"
|
|
readonly
|
|
>
|
|
</van-rate>
|
|
<span style="font-size:24rpx;" :style="{'color':starColor}">{{rateText}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rate-date">{{item.CREATE_DATE}}</div>
|
|
</div>
|
|
<div class="rate-content">
|
|
<div class="">{{item.MALLCOMMENT_CONTENT}}</div>
|
|
<div class="rate-photo" v-if="item.IMAGELIST.length>0">
|
|
<image mode="aspectFit" lazy-load="true" :src="img.IMAGE_URL" v-for="(img,i) in item.IMAGELIST" :key="i" @click="seePhoto(img.IMAGE_URL, item.IMAGELIST)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['item'],
|
|
computed: {
|
|
starColor () {
|
|
let num = Math.ceil(this.item.MALLCOMMENT_SCORE)
|
|
let colors = ['#f5bd50', '#f1b84d', '#f7a750', '#f59b3a', '#f28c44']
|
|
return colors[num - 1]
|
|
},
|
|
rateText () {
|
|
let num = Math.ceil(this.item.MALLCOMMENT_SCORE)
|
|
let text = ['非常差', '差', '一般', '满意', '超满意,无可挑剔']
|
|
return text[num - 1]
|
|
}
|
|
},
|
|
methods: {
|
|
seePhoto (item, list) {
|
|
let u = []
|
|
|
|
list.map(n => { u.push(n.IMAGE_URL) })
|
|
mpvue.previewImage({
|
|
current: item, // 当前显示图片的http链接
|
|
urls: u // 需要预览的图片http链接列表
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.rate-card+.rate-card
|
|
border-top 1rpx solid #eee
|
|
.rate-card
|
|
padding 24rpx 24rpx 24rpx 0
|
|
font-size 28rpx
|
|
.rate-card-top
|
|
display flex
|
|
align-items top
|
|
.rate-user-photo
|
|
height 80rpx
|
|
width 80rpx
|
|
border-radius 40rpx
|
|
.top-card-center
|
|
flex 6
|
|
padding-left 16rpx
|
|
.rate-text
|
|
color #666666
|
|
font-size 26rpx
|
|
display flex
|
|
align-items center
|
|
.vip-level
|
|
font-size 20rpx
|
|
background #333
|
|
color #EEDCB6
|
|
padding 4rpx 6rpx
|
|
margin-left 16rpx
|
|
border-radius 4rpx
|
|
display flex
|
|
align-items ceneter
|
|
position relative
|
|
// padding-left 24rpx
|
|
.vip-level:before
|
|
content ''
|
|
width 20rpx
|
|
height 20rpx
|
|
background url(https://eshangtech.com/ShopICO/vip-ico.png) no-repeat center
|
|
background-size contain
|
|
position absolute
|
|
left 4rpx
|
|
.rate-date
|
|
flex 4
|
|
color #989898
|
|
font-size 22rpx
|
|
text-align right
|
|
.rate-content
|
|
padding-left 96rpx
|
|
font-size 26rpx
|
|
// padding-top 16rpx
|
|
.rate-tag
|
|
border-radius 4rpx
|
|
border 1rpx solid #CF855E
|
|
color #CF855E
|
|
padding 4rpx 6rpx
|
|
display inline-block
|
|
font-size 20rpx
|
|
margin 0 16rpx 8rpx 0
|
|
.rate-photo
|
|
display flex
|
|
align-items center
|
|
flex-wrap wrap
|
|
image
|
|
height 198rpx
|
|
width 198rpx
|
|
border-radius 4rpx
|
|
margin 24rpx 0
|
|
image+image
|
|
margin-left 12rpx
|
|
</style> |