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.
176 lines
3.5 KiB
176 lines
3.5 KiB
<template>
|
|
<view class="recent-reviews">
|
|
<uni-card :is-shadow="false" padding="0" margin="10px">
|
|
<view class="service-new-title" slot="title">
|
|
<view class="service-new-title-left">
|
|
<view class="service-new-flag"></view>
|
|
<view>近期评价({{reviewCount}}条)</view>
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="recent-reviews-content">
|
|
<view v-for="(item, index) in reviewList" :key="index" class="review-item">
|
|
<view class="review-header">
|
|
<view class="reviewer-info">
|
|
<u-avatar :src="item.member.avatar || defaultAvatar" size="40" shape="circle"></u-avatar>
|
|
<view class="reviewer-details">
|
|
<view class="reviewer-name">{{item.member.nickname}}</view>
|
|
<view class="review-date">{{item.createTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="rating-stars">
|
|
<uni-rate :readonly="true" size="18" :value="item.num" />
|
|
</view>
|
|
</view>
|
|
<view class="review-content">
|
|
{{item.content}}
|
|
</view>
|
|
</view>
|
|
<!-- 空状态 -->
|
|
<view v-if="!reviewList || reviewList.length === 0" class="empty-state">
|
|
<view class="empty-text">暂无评价</view>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RecentReviews',
|
|
props: {
|
|
// 评价列表数据
|
|
reviewList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 默认头像
|
|
defaultAvatar: {
|
|
type: String,
|
|
default: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
|
|
},
|
|
// 是否显示评价数量
|
|
showCount: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算评价数量
|
|
reviewCount() {
|
|
return this.reviewList ? this.reviewList.length : 0;
|
|
}
|
|
},
|
|
methods: {
|
|
// 点击评价项事件
|
|
onReviewClick(review, index) {
|
|
this.$emit('reviewClick', { review, index });
|
|
},
|
|
// 点击用户头像事件
|
|
onAvatarClick(review, index) {
|
|
this.$emit('avatarClick', { review, index });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recent-reviews {
|
|
width: 100%;
|
|
padding-bottom: 10px;
|
|
|
|
.service-new-title {
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 33rpx;
|
|
margin: 42rpx 0 30rpx;
|
|
justify-content: space-between;
|
|
|
|
.service-new-title-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.service-new-flag {
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
background: #FFBF60;
|
|
border-radius: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.split-line {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: #EFEFEF;
|
|
}
|
|
|
|
.recent-reviews-content {
|
|
padding: 20rpx;
|
|
|
|
.review-item {
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #EFEFEF;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.review-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.reviewer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.reviewer-details {
|
|
margin-left: 20rpx;
|
|
|
|
.reviewer-name {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.review-date {
|
|
font-size: 24rpx;
|
|
color: #7D8196;
|
|
margin-top: 8rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.review-content {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-left: 80rpx;
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 60rpx 0;
|
|
text-align: center;
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #7D8196;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|