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>
|