You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
2.9 KiB
159 lines
2.9 KiB
<template>
|
|
<view class="review-list">
|
|
<view v-for="(item,index) in list" :key="index" class="review-item">
|
|
<view class="user-info">
|
|
<view class="left box-s">
|
|
<view class="img-box">
|
|
<image src="" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="user-name-and-time box-s">
|
|
<view class="user-name">
|
|
匿名用户
|
|
</view>
|
|
<view class="peview-time">
|
|
{{ item.createTime }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more">
|
|
<van-icon name="weapp-nav" size="40rpx" color="#DDDADA" />
|
|
</view>
|
|
</view>
|
|
<view class="mark">
|
|
<van-rate v-model="item.serviceNum" size="25rpx" color="#FCD618" />
|
|
<text class="desc">{{ getSatisfaction(item.serviceNum) }}</text>
|
|
</view>
|
|
<view class="tags">
|
|
<view class="tag" v-for="(t) in item.labelText.split(',')">
|
|
{{ t }}
|
|
</view>
|
|
</view>
|
|
<view class="comment-content">
|
|
<view class="content">
|
|
{{ item.content }}
|
|
</view>
|
|
<!-- <view class="like already-liked">
|
|
{{ item.num | 0 }}
|
|
<van-icon v-if="false" name="good-job-o" />
|
|
<van-icon name="good-job-o" color="#FC9A37" size="40rpx" />
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mark: 3
|
|
}
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: function() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//获取满意度
|
|
getSatisfaction(num){
|
|
let satisfaction = ['不满意','不满意','较满意','满意','非常满意']
|
|
|
|
return satisfaction[num - 1]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.review-list {
|
|
.box-s {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.review-item {
|
|
background: #F5F5F5;
|
|
padding: 15rpx 25rpx;
|
|
border-radius: 15rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
|
|
.left {
|
|
width: calc(100% - 40rpx);
|
|
display: flex;
|
|
|
|
.img-box {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #ccc;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.user-name-and-time {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
padding: 10rpx 15rpx;
|
|
|
|
.user-name {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.peview-time {
|
|
font-size: 24rpx;
|
|
color: #D1CDCD;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mark {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.desc {
|
|
margin-left: 5rpx;
|
|
color: #D1CDCD;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
.tags {
|
|
padding-top: 15rpx;
|
|
display: flex;
|
|
.tag {
|
|
background: #ECFCF1;
|
|
color: #55B16E;
|
|
font-size: 22rpx;
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.comment-content {
|
|
font-size: 22rpx;
|
|
margin-top: 15rpx;
|
|
|
|
.content {
|
|
color: #474441;
|
|
}
|
|
|
|
.like {
|
|
display: flex;
|
|
color: #BDBCBC;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 10rpx 0rpx;
|
|
}
|
|
|
|
.already-liked {
|
|
color: #FC9A37;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|