feat：商品评论接口调试
This commit is contained in:
黄泽群
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user