661 lines
15 KiB
Vue
661 lines
15 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 评分统计 -->
|
||
<view class="rating-stats">
|
||
<view class="rating-content">
|
||
<view class="rating-distribution">
|
||
<view class="rating-bar" v-for="(item, index) in ratingDistribution" :key="index">
|
||
<text class="rating-label">{{5-index}}分</text>
|
||
<view class="bar-wrapper">
|
||
<view class="bar-fill" :style="{ width: item.percentage + '%' }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rating-summary">
|
||
<view class="total-score">
|
||
<text class="score">{{averageScore}}</text>
|
||
<text class="max-score">/5.0</text>
|
||
</view>
|
||
<text class="total-reviews">{{totalReviews}}条评价</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 排序选项 -->
|
||
<view class="sort-options">
|
||
<view
|
||
class="sort-item"
|
||
:class="{ active: sortType === 'time' }"
|
||
@tap="changeSortType('time')"
|
||
>
|
||
<text>最新酒评</text>
|
||
</view>
|
||
<view
|
||
class="sort-item"
|
||
:class="{ active: sortType === 'score' }"
|
||
@tap="changeSortType('score')"
|
||
>
|
||
<text>评分排序</text>
|
||
</view>
|
||
<view
|
||
class="sort-item"
|
||
:class="{ active: sortType === 'hot' }"
|
||
@tap="changeSortType('hot')"
|
||
>
|
||
<text>热门酒评</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评价列表 -->
|
||
<view class="review-list">
|
||
<view class="review-item" v-for="(item, index) in reviewList" :key="index">
|
||
<!-- 用户信息头部 -->
|
||
<view class="review-header">
|
||
<view class="user-info">
|
||
<image class="avatar" :src="item.userAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||
<view class="user-meta">
|
||
<text class="user-name">{{item.userName || '匿名用户'}}</text>
|
||
<view class="rating-row">
|
||
<uni-rate
|
||
:value="item.compositeScore"
|
||
:readonly="true"
|
||
:size="16"
|
||
:touchable="false"
|
||
color="#ECECEC"
|
||
active-color="#FEE034"
|
||
/>
|
||
<text class="score-text">{{item.compositeScore}}分</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="review-time">{{item.createTime.slice(0,10)}}</text>
|
||
</view>
|
||
|
||
<!-- 评论内容区域 -->
|
||
<view class="review-content">
|
||
<!-- 评论文本 -->
|
||
<view class="review-text">{{item.reviewContent}}</view>
|
||
<!-- 评论图片区域 -->
|
||
<scroll-view v-if="item.reviewImg" class="image-scroll" scroll-x="true">
|
||
<view class="image-container">
|
||
<image
|
||
v-for="(img, imgIndex) in item.reviewImg.split(',')"
|
||
:key="imgIndex"
|
||
:src="img"
|
||
class="review-image"
|
||
mode="aspectFill"
|
||
@tap="previewImage(item.reviewImg.split(','), imgIndex)"
|
||
></image>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 评分详情 -->
|
||
<view class="rating-details">
|
||
<view class="rating-item">
|
||
<text class="label">外观</text>
|
||
<uni-rate :value="item.colorRating" :readonly="true" :size="14"></uni-rate>
|
||
<text class="rating-value">{{item.colorRating}}分</text>
|
||
</view>
|
||
<view class="rating-item">
|
||
<text class="label">香气</text>
|
||
<uni-rate :value="item.aromaRating" :readonly="true" :size="14"></uni-rate>
|
||
<text class="rating-value">{{item.aromaRating}}分</text>
|
||
</view>
|
||
<view class="rating-item">
|
||
<text class="label">口感</text>
|
||
<uni-rate :value="item.tasteRating" :readonly="true" :size="14"></uni-rate>
|
||
<text class="rating-value">{{item.tasteRating}}分</text>
|
||
</view>
|
||
</view>
|
||
<!-- 点赞按钮 -->
|
||
<view class="review-footer">
|
||
<view class="like-btn" :class="{ active: item.reviewLike }" @tap.stop="handleLike(item)">
|
||
<image class="like-icon" src="/static/like.png" mode="aspectFit"></image>
|
||
<text class="like-count">{{item.likeCount || 0}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<view class="load-more" v-if="reviewList.length > 0">
|
||
<text class="load-text">{{ hasMore ? '加载更多...' : '没有更多了' }}</text>
|
||
</view>
|
||
<!-- 无评论展示 -->
|
||
<view v-if="reviewList.length === 0" class="no-review">
|
||
暂无评论，快来发表第一条评论吧
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getReviewList,
|
||
getReviewScoreList,
|
||
likeReview
|
||
} from '@/api/bar.js'
|
||
import loginPopup from '@/components/loginPopup.vue';
|
||
|
||
export default {
|
||
components: {
|
||
loginPopup
|
||
},
|
||
data() {
|
||
return {
|
||
beerId: '',
|
||
reviewList: [], // 酒评列表
|
||
reviewScoreList: {}, // 酒评评分
|
||
reviewTotal: 0, // 酒评总数
|
||
queryForm: {
|
||
beerId: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
sortType: 'time' // 添加排序类型参数
|
||
},
|
||
sortType: 'time',
|
||
hasMore: true,
|
||
averageScore: 0,
|
||
totalReviews: 124,
|
||
ratingDistribution: [],
|
||
ratingCounts: {
|
||
five: 0,
|
||
four: 0,
|
||
three: 0,
|
||
two: 0,
|
||
one: 0
|
||
}
|
||
};
|
||
},
|
||
onLoad({beerId}) {
|
||
if (!beerId) {
|
||
uni.showToast({
|
||
title: '参数错误',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
return;
|
||
}
|
||
this.beerId = beerId;
|
||
this.queryForm.beerId = beerId;
|
||
this.initPageData();
|
||
},
|
||
onReachBottom() {
|
||
if (this.hasMore) {
|
||
this.queryForm.pageNum++;
|
||
this.getReviewListFun();
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化页面数据
|
||
async initPageData() {
|
||
await this.getReviewScoreListFun(); // 先获取评分统计
|
||
await this.getReviewListFun(); // 再获取评论列表
|
||
},
|
||
// 获取酒评列表
|
||
async getReviewListFun() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
try {
|
||
const res = await getReviewList(this.queryForm);
|
||
if (res.rows) {
|
||
// 重置评分计数
|
||
this.ratingCounts = {
|
||
five: 0,
|
||
four: 0,
|
||
three: 0,
|
||
two: 0,
|
||
one: 0
|
||
};
|
||
|
||
// 统计各个评分的数量
|
||
res.rows.forEach(review => {
|
||
const rating = Math.round(review.overallRating); // 四舍五入到整数
|
||
switch(rating) {
|
||
case 5:
|
||
this.ratingCounts.five++;
|
||
break;
|
||
case 4:
|
||
this.ratingCounts.four++;
|
||
break;
|
||
case 3:
|
||
this.ratingCounts.three++;
|
||
break;
|
||
case 2:
|
||
this.ratingCounts.two++;
|
||
break;
|
||
case 1:
|
||
this.ratingCounts.one++;
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 计算平均分
|
||
let totalScore = 0;
|
||
let totalCount = 0;
|
||
Object.entries(this.ratingCounts).forEach(([key, count]) => {
|
||
const score = key === 'five' ? 5 :
|
||
key === 'four' ? 4 :
|
||
key === 'three' ? 3 :
|
||
key === 'two' ? 2 : 1;
|
||
totalScore += score * count;
|
||
totalCount += count;
|
||
});
|
||
this.averageScore = totalCount > 0 ?
|
||
Math.round((totalScore / totalCount) * 10) / 10 :
|
||
'0.0';
|
||
this.totalReviews = res.total || 0;
|
||
|
||
// 更新评分分布数据
|
||
this.ratingDistribution = [
|
||
{
|
||
percentage: this.calculatePercentage(this.ratingCounts.five, res.total)
|
||
},
|
||
{
|
||
percentage: this.calculatePercentage(this.ratingCounts.four, res.total)
|
||
},
|
||
{
|
||
percentage: this.calculatePercentage(this.ratingCounts.three, res.total)
|
||
},
|
||
{
|
||
percentage: this.calculatePercentage(this.ratingCounts.two, res.total)
|
||
},
|
||
{
|
||
percentage: this.calculatePercentage(this.ratingCounts.one, res.total)
|
||
}
|
||
];
|
||
|
||
// 处理评论列表数据
|
||
const arr = res.rows.map(it => ({
|
||
...it,
|
||
compositeScore: this.getScore(it.aromaRating, it.tasteRating, it.colorRating)
|
||
}));
|
||
|
||
if (this.queryForm.pageNum === 1) {
|
||
this.reviewList = arr;
|
||
} else {
|
||
this.reviewList = [...this.reviewList, ...arr];
|
||
}
|
||
this.reviewTotal = res.total;
|
||
this.hasMore = this.reviewList.length < this.reviewTotal;
|
||
}
|
||
} catch (err) {
|
||
console.error('获取评论列表失败:', err);
|
||
uni.showToast({
|
||
title: '获取评论失败',
|
||
icon: 'none'
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
// 获取酒评评分列表
|
||
async getReviewScoreListFun() {
|
||
try {
|
||
const res = await getReviewScoreList(this.beerId);
|
||
if (res.data) {
|
||
this.reviewScoreList = res.data;
|
||
this.averageScore = res.data.avgOverallRating?.toFixed(2) || '0.00';
|
||
|
||
// 构建评分分布数据
|
||
this.ratingDistribution = [
|
||
{ percentage: this.calculatePercentage(res.data.fiveStarCount) },
|
||
{ percentage: this.calculatePercentage(res.data.fourStarCount) },
|
||
{ percentage: this.calculatePercentage(res.data.threeStarCount) },
|
||
{ percentage: this.calculatePercentage(res.data.twoStarCount) },
|
||
{ percentage: this.calculatePercentage(res.data.oneStarCount) }
|
||
];
|
||
}
|
||
} catch (err) {
|
||
console.error('获取评分统计失败:', err);
|
||
uni.showToast({
|
||
title: '获取评分统计失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
// 计算评分百分比
|
||
calculatePercentage(count, total) {
|
||
if (!total) return 0;
|
||
return Math.round((count / total) * 100);
|
||
},
|
||
// 计算综合评分
|
||
getScore(a, b, c) {
|
||
if (!a && !b && !c) return '0.0';
|
||
const score = ((a || 0) + (b || 0) + (c || 0)) / 3;
|
||
return score.toFixed(1);
|
||
},
|
||
// 点赞
|
||
handleLike(item) {
|
||
const token = uni.getStorageSync('token')
|
||
if (!token) {
|
||
this.$refs.loginRef.open()
|
||
return
|
||
}
|
||
let data = {
|
||
reviewId: item.id,
|
||
status: item.reviewLike ? 2 : 1
|
||
}
|
||
likeReview(data).then(res => {
|
||
if (data.status == 1) {
|
||
uni.showToast({
|
||
title: '点赞成功',
|
||
icon: 'none'
|
||
})
|
||
item.reviewLike = true
|
||
item.likeCount = (item.likeCount || 0) + 1
|
||
} else {
|
||
uni.showToast({
|
||
title: '取消点赞',
|
||
icon: 'none'
|
||
})
|
||
item.reviewLike = false
|
||
item.likeCount = Math.max(0, (item.likeCount || 1) - 1)
|
||
}
|
||
})
|
||
},
|
||
// 预览图片
|
||
previewImage(imgs, index) {
|
||
uni.previewImage({
|
||
urls: imgs,
|
||
current: index
|
||
})
|
||
},
|
||
// 切换排序方式
|
||
changeSortType(type) {
|
||
if (this.sortType === type) return;
|
||
this.sortType = type;
|
||
this.queryForm.pageNum = 1;
|
||
this.reviewList = [];
|
||
this.getReviewListFun();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 页面容器 */
|
||
.page {
|
||
min-height: 100vh;
|
||
background-color: #F8F9FA;
|
||
padding-bottom: 40rpx;
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Roboto, "Segoe UI", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
/* 评分统计 */
|
||
.rating-stats {
|
||
margin: 24rpx;
|
||
padding: 32rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.rating-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40rpx;
|
||
|
||
.rating-distribution {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.rating-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.rating-label {
|
||
width: 60rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.bar-wrapper {
|
||
flex: 1;
|
||
height: 12rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 6rpx;
|
||
margin-left: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.bar-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #FFE034 0%, #FFD234 100%);
|
||
border-radius: 6rpx;
|
||
transition: width 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rating-summary {
|
||
text-align: center;
|
||
|
||
.total-score {
|
||
display: flex;
|
||
align-items: baseline;
|
||
white-space: nowrap;
|
||
|
||
.score {
|
||
font-size: 64rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 1;
|
||
}
|
||
|
||
.max-score {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.total-reviews {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 排序选项 */
|
||
.sort-options {
|
||
display: flex;
|
||
padding: 0 24rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.sort-item {
|
||
padding: 12rpx 32rpx;
|
||
margin-right: 16rpx;
|
||
border-radius: 28rpx;
|
||
background: #F5F5F5;
|
||
transition: all 0.3s ease;
|
||
|
||
text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
&.active {
|
||
background: #4E63E0;
|
||
|
||
text {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 评价列表 */
|
||
.review-list {
|
||
padding: 0 24rpx;
|
||
|
||
.review-item {
|
||
margin-bottom: 24rpx;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.review-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.user-meta {
|
||
.user-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.rating-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.score-text {
|
||
font-size: 24rpx;
|
||
color: #FFB800;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.review-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.review-content {
|
||
.review-text {
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.image-scroll {
|
||
margin-bottom: 16rpx;
|
||
|
||
.image-container {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.review-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rating-details {
|
||
padding: 16rpx;
|
||
background: #F8F9FA;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.rating-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
width: 64rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.rating-value {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.review-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.like-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 16rpx;
|
||
gap: 8rpx;
|
||
border-radius: 24rpx;
|
||
background: #F5F5F5;
|
||
|
||
.like-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.like-count {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(255, 184, 0, 0.1);
|
||
|
||
.like-count {
|
||
color: #FFB800;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-review {
|
||
text-align: center;
|
||
padding: 48rpx 0;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
margin: 24rpx;
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
padding: 24rpx 0;
|
||
|
||
.load-text {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
</style> |