174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="store-title">
|
|
<image mode="aspectFit" lazy-load="true" :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
|
<span class="name">商品评分</span>
|
|
<div class="star-box">
|
|
<van-rate
|
|
data-key='item.commentScore'
|
|
:value="item.commentScore"
|
|
size="20"
|
|
allow-half
|
|
:color="starColor"
|
|
void-color="#eee"
|
|
void-icon="star"
|
|
@change="changeRate"
|
|
/>
|
|
<div class="rate-text" :style="{'color':starColor}">{{rateText}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="evaluate-box">
|
|
<textarea cols="30" rows="5" placeholder="商品满足你的期待吗？说说你的使用心得，分享给想买的他们吧" v-model="item.commentContent"></textarea>
|
|
|
|
<div class="photo-box">
|
|
<div class="images" v-for="(item,i) in imgsList" :key="i" v-if="item">
|
|
<image mode="aspectFit" :src='item' @click="seePhoto(item)"></image>
|
|
<i @click="deleteImg(i)"></i>
|
|
</div>
|
|
<div class="add-photo" @click="choeseImg">
|
|
<i></i>
|
|
上传照片
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div class="rate-bottom">
|
|
<van-checkbox class="isNoName" :value="item.isAnonymous" checked-color="#CAA97F" @change="isAnonymous">
|
|
<span style="font-size:28rpx;">匿名评价</span>
|
|
</van-checkbox>
|
|
<div class="tip-text">
|
|
你写的评价会以匿名的形式展示
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['item'],
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
rateText () {
|
|
let num = Math.ceil(this.item.commentScore) || 4
|
|
let text = ['非常差', '差', '一般', '满意', '超满意,无可挑剔']
|
|
return text[num - 1]
|
|
},
|
|
starColor () {
|
|
let num = Math.ceil(this.item.commentScore) || 4
|
|
let colors = ['#f5bd50', '#f1b84d', '#f7a750', '#f59b3a', '#f28c44']
|
|
return colors[num - 1]
|
|
}
|
|
},
|
|
methods: {
|
|
changeRate (event) {
|
|
this.$emit('changeRate', event, this.item)
|
|
},
|
|
isAnonymous (event) {
|
|
this.$emit('isAnonymous', event, this.item)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="stylus">
|
|
.card
|
|
background #fff
|
|
font-size 28rpx
|
|
.store-title
|
|
display flex
|
|
align-items center
|
|
border-bottom 2rpx solid #E7E7E7
|
|
padding 16rpx 32rpx
|
|
image
|
|
height 76rpx
|
|
width 76rpx
|
|
.name
|
|
flex 2
|
|
font-size 26rpx
|
|
margin-left 16rpx
|
|
.star-box
|
|
display flex
|
|
align-items center
|
|
text-align center
|
|
flex 5
|
|
.rate-text
|
|
width 180rpx
|
|
color #ee8c45
|
|
font-size 24rpx
|
|
|
|
.evaluate-box
|
|
padding 20rpx 0
|
|
textarea
|
|
width 690rpx
|
|
color #333
|
|
height 160rpx
|
|
padding 16rpx 32rpx
|
|
.tip-text
|
|
|
|
color #646464
|
|
|
|
.tip-color
|
|
color #ba9b6f
|
|
.photo-box
|
|
display flex
|
|
align-items center
|
|
flex-wrap wrap
|
|
.images
|
|
margin 16rpx 0 16rpx 13rpx
|
|
position relative
|
|
image
|
|
height 160rpx
|
|
width 160rpx
|
|
border-radius 6rpx
|
|
background #fff
|
|
i
|
|
background #ea4848
|
|
height 30rpx
|
|
width 30rpx
|
|
border-radius 50%
|
|
position absolute
|
|
top -15rpx
|
|
right -10rpx
|
|
&:after
|
|
content ' '
|
|
height 4rpx
|
|
width 18rpx
|
|
display block
|
|
background #fff
|
|
margin-top 14rpx
|
|
margin-left 6rpx
|
|
border-radius 4rpx
|
|
.add-photo
|
|
height 160rpx
|
|
width 160rpx
|
|
border-radius 8rpx
|
|
border 1rpx dashed #B1B1B7
|
|
margin-left 32rpx
|
|
text-align center
|
|
color #B5B5B5
|
|
font-size 22rpx
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
justify-content center
|
|
i
|
|
margin-bottom 12rpx
|
|
width 42rpx
|
|
height 36rpx
|
|
background url(../../../../static/images/pic.png) no-repeat center
|
|
background-size contain
|
|
hr
|
|
margin 24rpx 32rpx
|
|
height 2rpx
|
|
background #f5f5f5
|
|
.rate-bottom
|
|
padding 0 32rpx
|
|
display flex
|
|
align-items center
|
|
justify-content space-between
|
|
</style> |