charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：商品评论接口调试

Browse Source
This commit is contained in:
黄泽群
2026-07-09 14:11:16 +08:00
committed by charles
parent 1aeb515cc5
commit dc0af03dd6
9 changed files with 835 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/productInfo/RecursiveComment.vue
+199
View File
@@ -0,0 +1,199 @@
<template>
<view class="recursive-comment">
<view
class="comment-item"
:class="{ 'nested': level > 0 }"
:style="{ paddingLeft: level > 0 ? '80rpx' : '0' }"
>
<image class="c-avatar" :src="item.userImage" mode="aspectFill"></image>
<view class="c-body">
<view class="c-user-line">
<text class="c-nickname">{{ item.userName }}</text>
<text class="c-author" v-if="item.author === 1">作者</text>
<text class="c-vip" v-if="item.vipLevel">88VIP</text>
</view>
<view class="c-text">
{{level === 0 ? '' : '回复'}}<text class="c-reply-at" v-if="parentName">@{{ parentName }}：</text>
<text>{{ item.content }}</text>
</view>
<view class="c-footer">
<text class="c-time">{{ formatDate(item.ctdate) }}</text>
<text class="c-reply-btn" @tap="handleReply">回复</text>
<text class="c-reply-btn" style="margin-left:20rpx" @tap="handleDelete" v-if="item.userId === userId">删除</text>
</view>
</view>
</view>
<!-- 递归渲染子评论 -->
<template v-if="item.children && item.children.length > 0">
<RecursiveComment
v-for="(child, index) in item.children"
:key="index"
:item="child"
:userId="userId"
:parentName="item.userName"
:level="level + 1"
@reply="(childItem, parent) => $emit('reply', childItem, parent || item)"
/>
</template>
</view>
</template>
<script>
import { deleteReview } from '@/api/product.js';
import { formatDate } from '@/utils/index.js';
export default {
name: 'RecursiveComment',
props: {
item: {
type: Object,
required: true
},
userId: {
type: String,
default: ''
},
parentName: {
type: String,
default: ''
},
level: {
type: Number,
default: 0
}
},
methods: {
formatDate,
handleReply() {
this.$emit('reply', this.item, this.parentName ? null : this.item);
},
async handleDelete() {
console.log('删除',this.item);
const res = await uni.showModal({
title: '提示',
content: '确认删除吗？',
confirmColor: '#ff6b6b'
});
if (res.confirm) {
try {
await deleteReview({ Id: this.item.id });
uni.showToast({
title: '删除成功',
icon: 'success'
});
this.$emit('deleteSuccess', this.item);
} catch (error) {
uni.showToast({
title: '删除失败',
icon: 'none'
});
}
}
}
}
};
</script>
<style lang="scss" scoped>
.recursive-comment {
.comment-item {
display: flex;
padding: 20rpx 0 8rpx ;
position: relative;
&.nested {
margin-left: 16rpx;
padding-left: 60rpx;
.c-avatar {
width: 48rpx;
height: 48rpx;
}
.c-body {
.c-user-line .c-nickname {
font-size: 24rpx;
}
.c-text {
font-size: 26rpx;
}
.c-footer {
font-size: 22rpx;
}
}
}
.c-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 16rpx;
background-color: #f0f0f0;
flex-shrink: 0;
}
.c-body {
flex: 1;
.c-user-line {
display: flex;
align-items: center;
margin-bottom: 8rpx;
.c-nickname {
font-size: 26rpx;
color: #888888;
margin-right: 10rpx;
}
.c-author {
font-size: 20rpx;
color: #ffffff;
background-color: #ff6b6b;
padding: 2rpx 8rpx;
border-radius: 4rpx;
margin-right: 8rpx;
}
.c-vip {
font-size: 20rpx;
color: #ffffff;
background: linear-gradient(135deg, #ff6b6b, #ffa940);
padding: 2rpx 8rpx;
border-radius: 4rpx;
margin-right: 8rpx;
}
}
.c-text {
font-size: 28rpx;
color: #262626;
line-height: 1.4;
margin-bottom: 12rpx;
.c-reply-at {
color: #7b3ff7;
}
}
.c-footer {
display: flex;
align-items: center;
font-size: 24rpx;
color: #aaaaaa;
.c-time {
margin-right: 20rpx;
}
.c-reply-btn {
color: #555555;
cursor: pointer;
}
}
}
}
}
</style>
pages/other_package/productInfo/evaluate-dialog.vue
+54 -21
View File
@@ -19,8 +19,8 @@
<view
v-for="(tab, index) in tabs"
:key="index"
:class="['filter-tab', { active: activeTab === index }]"
@click="activeTab = index"
:class="['filter-tab', { active: activeTab === tab.value }]"
@click="handleTabClick(tab)"
>
{{ tab.name }}
</view>
@@ -33,17 +33,20 @@
:enhanced="true"
:show-scrollbar="false"
>
<view class="eval-list" @click="handleClick(item)">
<view class="eval-list" >
<view
class="eval-item"
v-for="(item, index) in evalList"
:key="index"
@click="handleClick(item)"
>
<view class="user-info-row">
<view class="user-avatar-name">
<view class="avatar-wrap">
<text class="avatar-text">李</text>
</view>
<image
class="avatar-wrap"
:src="item.userImage"
mode="aspectFill"
></image>
<text class="username">{{ item.userName }}</text>
<view class="user-level">
<up-image
@@ -63,7 +66,7 @@
:key="s"
class="star-icon"
:style="{
color: s <= item.score ? '#7934f6' : '#e5e5e5',
color: s <= item.rating ? '#7934f6' : '#e5e5e5',
}"
>★</text
>
@@ -73,19 +76,19 @@
</view>
<view class="product-sku"
>已购韩版FILA斐乐Running MIXR猫爪鞋黑色男女运动...</view
>已购{{item.goodsName}}</view
>
<view class="eval-content-text">
<text
>包装非常严实，里三层外三层的，完全不用担心运输损坏。</text
>{{item.content}}</text
>
</view>
<view class="eval-images" >
<view class="eval-images" v-if="item.images">
<image
class="eval-img"
src="https://img.yzcdn.cn/vant/cat.jpeg"
:src="item.images"
mode="aspectFill"
></image>
</view>
@@ -98,6 +101,7 @@
</template>
<script>
import { getGoodsReviewsList } from "@/api/product.js";
export default {
name: "EvaluateDialog",
props: {
@@ -105,29 +109,59 @@ export default {
type: Boolean,
default: false,
},
evalId: {
type: Number,
default: 0,
},
mainGraph: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
},
data() {
return {
activeTab: 0,
activeTab: "all",
tabs: [
{ name: "全部", value: "all" },
{ name: "好评", value: "good" },
{ name: "中/差评", value: "bad" },
],
evalList: [
{ userName: "李老八", score: 5, tag: "好评", images: ["https://img.yzcdn.cn/vant/cat.jpeg", "https://img.yzcdn.cn/vant/dog.jpeg", "https://img.yzcdn.cn/vant/fox.jpeg"] },
{ userName: "王老五", score: 4, tag: "好评", images: ["https://img.yzcdn.cn/vant/cat.jpeg", "https://img.yzcdn.cn/vant/dog.jpeg"] },
{ userName: "张三", score: 5, tag: "好评", images: ["https://img.yzcdn.cn/vant/cat.jpeg"] },
{ name: "好评", value: "5" },
{ name: "中/差评", value: "4" },
],
evalList: [],
};
},
mounted(){
this.getGoodsReviewsList();
},
methods: {
async getGoodsReviewsList() {
const params = {
page: 1,
pageSize: 15,
goodsId: this.evalId,
};
if (this.activeTab !== "all") {
params.rating = this.activeTab;
}
const resp = await getGoodsReviewsList(params);
if (resp && resp.bizcode === 100) {
this.evalList = resp.data.entitys || [];
}
},
handleTabClick(item) {
this.activeTab = item.value
this.getGoodsReviewsList();
},
handleClose() {
this.$emit("close");
},
handleClick(item) {
console.log('点击评价',item.goodsName);
uni.navigateTo({
url: "/pages/other_package/productInfo/evaluateDetail",
url: "/pages/other_package/productInfo/evaluateDetail?evalId=" + item.id + "&mainGraph=" + this.mainGraph + "&name=" + this.name+"&goodsName="+item.goodsName,
});
},
},
@@ -214,7 +248,6 @@ export default {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background-color: #a46cfc;
display: flex;
align-items: center;
justify-content: center;
pages/other_package/productInfo/evaluateDetail.vue
+105 -71
View File
@@ -16,10 +16,10 @@
/>
<image
class="avatar"
src="/static/avatar-placeholder.png"
:src="commentData.userImage"
mode="aspectFill"
></image>
<text class="nickname">李老八</text>
<text class="nickname">{{ commentData.userName }}</text>
<view class="badge">
<up-image
src="/static/common/rz.png"
@@ -60,34 +60,30 @@
<!-- 2. 购买规格与星级评分 -->
<view class="rating-row">
<text class="sku-text">已购韩版FILA斐乐Running ...</text>
<text class="sku-text">已购{{ goodsName }}</text>
<view class="stars-box">
<view class="stars">
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active" v-for="s in commentData.rating" :key="s">★</text>
</view>
<text class="rating-label">好评</text>
<text class="rating-label">{{ commentData.rating > 4 ? '好评' : '中/差评' }}</text>
</view>
</view>
<!-- 3. 用户评价文本 -->
<view class="comment-content">
包装非常严实，里三层外三层的，完全不用担心运输损坏。
{{ commentData.content }}
</view>
<!-- 4. 底部关联商品卡片 -->
<view class="product-mini-card">
<image
class="prod-img"
src="https://img.yzcdn.cn/vant/cat.jpeg"
:src="mainGraph"
mode="aspectFill"
></image>
<view class="prod-info">
<text class="prod-title"
>Skechers斯凯奇2024年秋冬...Skechers斯凯奇2024年秋冬...</text
>{{ name }}</text
>
</view>
</view>
@@ -96,22 +92,16 @@
<view class="comment-section">
<view class="comment-count">{{ commentList.length }}条评论</view>
<view class="comment-item" v-for="(item, index) in commentList" :key="index">
<image class="c-avatar" :src="item.avatar" mode="aspectFill"></image>
<view class="c-body">
<view class="c-user-line">
<text class="c-nickname">{{ item.nickname }}</text>
</view>
<view class="c-text">{{ item.content }}</view>
<view class="c-footer">
<text class="c-time">{{ item.time }}</text>
<text class="c-reply-btn" @tap="tapReply(item)">回复</text>
</view>
</view>
<!-- 右侧点赞 -->
<view class="c-like-box" @tap="toggleCommentLike(index)">
</view>
</view>
<!-- 使用递归组件渲染无限层级评论 -->
<RecursiveComment
v-for="(item, index) in commentList"
:key="index"
:item="item"
:userId="userId"
:level="0"
@deleteSuccess="handleDeleteSuccess"
@reply="tapReply"
/>
<!-- 底部到底提示 -->
<view class="no-more">— 到底啦 —</view>
@@ -124,7 +114,7 @@
<input
type="text"
v-model="inputComment"
placeholder="热情回复 文明用语"
:placeholder="placeholder"
placeholder-class="input-placeholder"
confirm-type="send"
@confirm="sendComment"
@@ -137,51 +127,69 @@
</template>
<script>
import { formatDate, copyData } from '@/utils/index.js';
import { getStorageFun, USER_DATA, clear } from "@/utils/auth.js";
import { getGoodsReviewsDetails, addReviewReply } from "@/api/product.js";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import RecursiveComment from "./RecursiveComment.vue";
export default {
components: { TopSafe, MyBtn },
components: { TopSafe, MyBtn, RecursiveComment },
props: {
evalId: {
type: String || Number,
default: ''
}
},
data() {
return {
commentData: {},
placeholder: '请输入评论',
parentReplyId: '',
mainGraph: '',
name: '',
goodsName: '',
// 图片列表数据
imageList: [
"https://img.yzcdn.cn/vant/cat.jpeg",
"https://img.yzcdn.cn/vant/apple-1.jpg",
"https://img.yzcdn.cn/vant/apple-2.jpg"
],
imageList: [],
currentImageIndex: 0, // 当前图片索引
// 【新增】输入框绑定的文本
inputComment: '',
// 【新增】模拟评论区数据
commentList: [
{
avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
nickname: "不吃葡萄皮888",
level: 4,
content: "哼哼唧唧",
time: "刚刚",
isLiked: false
},
{
avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
nickname: "不吃葡萄皮888",
level: 4,
content: "😊",
time: "刚刚",
isLiked: false
}
]
commentList: [ ],
commentId: '',
userId: '',
};
},
onShow() {},
onLoad() {},
onLoad(options) {
this.mainGraph = options.mainGraph || '';
this.name = options.name || '';
this.goodsName = options.goodsName || '';
this.commentId = options.evalId || '';
this.userId = getStorageFun(USER_DATA).userId,
this.getDetails();
},
methods: {
formatDate,
// 监听滑动切换
onSwiperChange(e) {
this.currentImageIndex = e.detail.current;
},
async getDetails(id) {
const params = {
Id: this.commentId,
};
const resp = await getGoodsReviewsDetails(params);
if (resp && resp.bizcode === 100) {
this.imageList = resp.data.images || [];
this.commentList = resp.data.reviewReplies || [];
// 如果图片是多张返回的是，分割为数组
if (this.imageList.length > 0) {
this.imageList = this.imageList.split(',');
}
this.commentData = resp.data || {};
}
},
// 返回上一页
goBack() {
@@ -189,27 +197,32 @@ export default {
delta: 1,
});
},
handleDeleteSuccess(){
this.getDetails();
},
// 【新增】发送评论
sendComment() {
async sendComment() {
console.log('评论');
if (!this.inputComment.trim()) return;
this.commentList.unshift({
avatar: "/static/avatar-placeholder.png", // 默认当前用户头像
nickname: "我就是我",
level: 1,
const params = {
parentReplyId:this.parentReplyId || '',
reviewId: this.commentData.id,
userId: getStorageFun(USER_DATA).userId,
userName: getStorageFun(USER_DATA).name ,
userImage: getStorageFun(USER_DATA).avatar,
content: this.inputComment,
time: "刚刚",
isLiked: false
});
};
const resp = await addReviewReply(params);
if (resp && resp.bizcode === 100) {
this.getDetails();
}
this.inputComment = '';
uni.showToast({ title: '评论成功', icon: 'none' });
},
// 【新增】点赞单条评论
toggleCommentLike(index) {
this.commentList[index].isLiked = !this.commentList[index].isLiked;
},
// 【新增】点击回复
tapReply(item) {
uni.showToast({ title: `回复 @${item.nickname}`, icon: 'none' });
tapReply(item, parentItem) {
this.parentReplyId = item.id || '';
this.placeholder = `回复：${item.userName}`;
}
},
};
@@ -247,7 +260,6 @@ export default {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
background-color: #7a46f2;
margin-right: 16rpx;
}
@@ -453,6 +465,28 @@ export default {
color: #888888;
margin-right: 10rpx;
}
.c-author {
font-size: 20rpx;
color: #ffffff;
background-color: #ff6b6b;
padding: 2rpx 8rpx;
border-radius: 4rpx;
margin-right: 8rpx;
}
.c-vip {
font-size: 20rpx;
color: #ffffff;
background: linear-gradient(135deg, #ff6b6b, #ffa940);
padding: 2rpx 8rpx;
border-radius: 4rpx;
margin-right: 8rpx;
}
}
.c-reply-at {
color: #7b3ff7;
}
.c-text {
pages/other_package/productInfo/evaluation.vue
+23 -19
View File
@@ -21,7 +21,7 @@
<view class="user-left">
<image
class="avatar"
:src="item.avatar || defaultAvatar"
:src="item.userImage"
mode="aspectFill"
></image>
<text class="username">{{ item.userName }}</text>
@@ -29,10 +29,10 @@
<view class="user-right">
<view class="stars">
<text
v-for="s in 5"
v-for="s in item.rating"
:key="s"
class="star-icon"
:style="{ color: s <= item.score ? '#7934F6' : '#e5e5e5' }"
:style="{ color: s <= item.rating ? '#7934F6' : '#e5e5e5' }"
>★</text
>
</view>
@@ -48,6 +48,8 @@
</template>
<script>
import { getGoodsReviewsList } from "@/api/product.js";
export default {
name: "Evaluation",
props: {
@@ -56,30 +58,32 @@ export default {
type: Object,
default: () => ({}),
},
evalId: {
type: Number,
default: 0,
},
},
data() {
return {
// 默认头像，网络图片或本地图片路径均可
defaultAvatar: "https://img.yzcdn.cn/vant/cat.jpeg",
totalCount: "99+",
list: [
{
avatar: "",
userName: "张***三",
score: 5, // 星级评分，满分5
content:
"商品质量非常不错，和描述的一模一样，做工精细没有多余线头，穿着很舒服，下次还会来购买的！强烈推荐给大家！",
images: [
"https://img.yzcdn.cn/vant/apple-1.jpg",
"https://img.yzcdn.cn/vant/apple-2.jpg",
],
createTime: "2026-06-15",
spec: "颜色: 经典黑; 尺码: XL",
},
],
list: [],
};
},
mounted() {
this.getGoodsReviewsList();
},
methods: {
async getGoodsReviewsList() {
const params = {
goodsId: this.evalId,
};
const resp = await getGoodsReviewsList(params);
if (resp && resp.bizcode === 100) {
this.list = (resp.data.entitys || []).slice(0, 2);
this.totalCount = resp.data.totalCount || "0";
}
},
// 点击查看全部评价
goMore() {
// 触发父组件的事件，或者直接在这里写路由跳转
pages/other_package/productInfo/productInfo.vue
+2 -2
View File
@@ -116,7 +116,7 @@
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
</view>
</view>
<Evaluation @goMore="onGoMore"></Evaluation>
<Evaluation @goMore="onGoMore" :evalId="id"></Evaluation>
<view class="tui-view">
<text class="text-32 text-zu">退货提示</text>
<text class="text-28 text-fu1">拆封后影响品质”或“影响二次销售的”不予退货。</text>
@@ -321,7 +321,7 @@
<SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id"
:text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"></SharePopup>
<EvaluateDialog ref="evaluateDialog" :show="evaluateDialogShow" @close="evaluateDialogShow = false"></EvaluateDialog>
<EvaluateDialog ref="evaluateDialog" :show="evaluateDialogShow" @close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name"></EvaluateDialog>
<view class="hideCanvasView">
<canvas id="myCanvas" canvas-id="myCanvas" :style="{
height: bgObj.height + 'px',