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
api/product.js
+43 -1
View File
@@ -48,4 +48,46 @@ export function addGoods(params) {
method: "get",
data:params,
});
}
}
// 查询商品评价
export function getGoodsReviewsList(params) {
return request({
url: "/review/getGoodsReviewsList",
method: "get",
data:params,
});
}
// 评价订单
export function addOrderReviews(params) {
return request({
url: "/review/addOrderReviews",
method: "post",
data:params,
cha:1
});
}
// 查询商品评价详情
export function getGoodsReviewsDetails(params) {
return request({
url: "/review/getGoodsReviewsDetails",
method: "get",
data:params,
});
}
// 评论回复
export function addReviewReply(params) {
return request({
url: "/review/addReviewReply",
method: "post",
data:params,
cha:1
});
}
// 删除评论
export function deleteReview(params) {
return request({
url: "/review/deleteReview",
method: "get",
data:params,
});
}
pages/mine_package/mine_order/mine_order.vue
+4 -6
View File
@@ -134,11 +134,7 @@
@click="onAfterSaleDetail(item)">
售后详情
</view>
<view class="operate_comm operate_but_1 operate_comm_evaluate" v-if="
[
MINE_ORDER_TYPE.SUCCEED,
].includes(form.type)
" @click="evaluate(item)">评价</view>
<view class="operate_comm operate_but_1 operate_comm_evaluate" v-if="item.status ==4 && item.description" @click="evaluate(item)">评价</view>
<!-- <view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view> -->
<view class="operate_comm operate_but_1 operate_comm_delete" v-if="
[
@@ -488,8 +484,10 @@ export default {
},
// 评价
evaluate(item) {
console.log('订单id',item);
// return
uni.navigateTo({
url:"/pages/order_package/evaluate/evaluate?id=" + item.id,
url:"/pages/order_package/evaluate/evaluate?id=" + item.id+"&title="+item.items[0].title+"&mainGraph="+item.items[0].mainGraph+"&goodsSpece="+item.items[0].goodsSpece+"&goodsId="+item.items[0].goodsId,
});
},
async againDeleteOrder() {
pages/order_package/evaluate/evaluate.vue
+403 -307
View File
@@ -1,345 +1,441 @@
<template>
<view class="content">
<TopSafe></TopSafe>
<Header title="发表评价" />
<view class="setting-view">
<!-- 评价核心白底卡片容器 -->
<view class="review-card">
<!-- 商品信息模块 -->
<view class="product-section">
<image class="product-img" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=200" mode="aspectFill"></image>
<view class="product-detail">
<text class="product-title">kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬</text>
<text class="product-spec">规格：白色;</text>
</view>
</view>
<!-- 信任度评分模块 -->
<view class="rating-section">
<text class="rating-label">信任度</text>
<view class="stars-box">
<text
v-for="index in 5"
:key="index"
class="star-icon"
:class="{ active: index <= rating }"
@click="setRating(index)"
>★</text>
</view>
</view>
<!-- 评价输入框模块 -->
<view class="comment-section">
<textarea
class="comment-textarea"
v-model="commentText"
placeholder="您的评价可以帮助更多的人哦"
maxlength="100"
placeholder-class="placeholder-style"
/>
<view class="word-counter">已输入{{ commentText.length }}/100</view>
</view>
<!-- 照片/视频上传模块 -->
<view class="upload-section">
<view class="upload-grid">
<!-- 已上传媒体预览 -->
<view class="upload-item" v-for="(item, idx) in mediaList" :key="idx">
<image :src="item" mode="aspectFill" class="uploaded-media"></image>
<view class="delete-btn" @click="deleteMedia(idx)">×</view>
</view>
<!-- 上传触发按钮 -->
<view class="upload-btn" @click="chooseMedia" v-if="mediaList.length < 9">
<text class="plus-icon">+</text>
<text class="upload-text">上传照片/视频</text>
</view>
</view>
</view>
</view>
</view>
<!-- 底部固定发表评价按钮 -->
<view class="bottom-action-bar">
<button class="submit-review-btn" @click="submitReview">发表评价</button>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
<view class="content">
<TopSafe></TopSafe>
<Header title="发表评价" />
<view class="setting-view">
<!-- 评价核心白底卡片容器 -->
<view class="review-card">
<!-- 商品信息模块 -->
<view class="product-section">
<image class="product-img" :src="mainGraph" mode="aspectFill"></image>
<view class="product-detail">
<text class="product-title">{{ title }}</text>
<text class="product-spec">规格：{{ goodsSpece }}</text>
</view>
</view>
<!-- 信任度评分模块 -->
<view class="rating-section">
<text class="rating-label">信任度</text>
<view class="stars-box">
<text
v-for="index in 5"
:key="index"
class="star-icon"
:class="{ active: index <= rating }"
@click="setRating(index)"
>★</text
>
</view>
</view>
<!-- 评价输入框模块 -->
<view class="comment-section">
<textarea
class="comment-textarea"
v-model="commentText"
placeholder="您的评价可以帮助更多的人哦"
maxlength="100"
placeholder-class="placeholder-style"
/>
<view class="word-counter">已输入{{ commentText.length }}/100</view>
</view>
<!-- 照片/视频上传模块 -->
<view class="upload-section">
<view class="upload-grid">
<!-- 已上传媒体预览 -->
<view
class="upload-item"
v-for="(item, idx) in mediaList"
:key="idx"
>
<image
:src="item"
mode="aspectFill"
class="uploaded-media"
></image>
<view class="delete-btn" @click="deleteMedia(idx)">×</view>
</view>
<!-- 上传触发按钮 -->
<view
class="upload-btn"
@click="chooseMedia"
v-if="mediaList.length < 9"
>
<text class="plus-icon">+</text>
<text class="upload-text">上传照片/视频</text>
</view>
</view>
</view>
</view>
</view>
<!-- 底部固定发表评价按钮 -->
<view class="bottom-action-bar">
<button class="submit-review-btn" @click="submitReview">发表评价</button>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import { addOrderReviews } from "@/api/product.js";
import { uploadImage, uploadImg } from "@/api/common.js";
import { IMG_TYPE } from '@/utils/enumUtils.js';
import { BASE_URL, Authorization } from '@/utils/config.js';
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import { getStorageFun, TOKEN_NAME,clear } from '@/utils/auth.js';
export default {
components: { Header, TopSafe, MyBtn },
data() {
return {
rating: 0, // 评分星级
commentText: '', // 评价内容
mediaList: [] // 已上传的图片/视频列表
};
},
onShow() {
},
onLoad() {
},
methods: {
// 设置评分
setRating(val) {
this.rating = val;
},
// 调起系统相册/相机选择媒体
chooseMedia() {
uni.chooseImage({
count: 9 - this.mediaList.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.mediaList = [...this.mediaList, ...res.tempFilePaths];
}
});
},
// 删除选中的媒体文件
deleteMedia(idx) {
this.mediaList.splice(idx, 1);
},
// 提交评价
submitReview() {
if (this.rating === 0) {
this.$refs.uToastRef.show({ message: '请为商品信任度评分', type: 'warning' });
return;
}
if (!this.commentText.trim()) {
this.$refs.uToastRef.show({ message: '请输入您的评价内容', type: 'warning' });
return;
}
// 模拟请求成功
this.$refs.uToastRef.show({ message: '评价成功', type: 'success' });
// 评价成功后，返回上一页
uni.navigateBack({ delta: 1 });
}
}
}
components: { Header, TopSafe, MyBtn },
data() {
return {
rating: 0, // 评分星级
commentText: "", // 评价内容
mediaList: [], // 已上传的图片/视频列表
goodsId: "", // 商品id
evalId: "", // 订单id
title: "", // 商品标题
mainGraph: "", // 商品主图
goodsSpece: "", // 商品规格
goodsId: "", // 店铺id
};
},
onShow() {},
onLoad(options) {
this.evalId = options.id;
this.goodsId = options.goodsId;
this.title = options.title;
this.mainGraph = options.mainGraph;
this.goodsSpece = options.goodsSpece;
},
methods: {
// 设置评分
setRating(val) {
this.rating = val;
},
// 调起系统相册/相机选择媒体
chooseMedia() {
let that = this;
uni.chooseImage({
count: 1, // 默认9，设置图片的数量
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 成功选择图片后
const filePath = res.tempFilePaths[0]; // 获取文件路径
that.uploadFile(filePath);
},
});
},
// 删除选中的媒体文件
deleteMedia(idx) {
this.mediaList.splice(idx, 1);
},
uploadFile(url) {
uni.showLoading({
title: "图片上传中...",
});
const that = this;
const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
// 成功则返回文件的本地临时文件路径
uni.uploadFile({
url: BASE_URL + uploadImg, // 替换为你的上传接口URL
filePath: url,
name: "file",
formData: {
type: IMG_TYPE.COMMON,
},
header: {
Authorization: Authorization,
"HSM-AUTH": token ? token : "",
},
success: (uploadFileRes) => {
const data = JSON.parse(uploadFileRes.data);
console.log('data',data)
if (data.bizcode === 100) {
that.mediaList.push(data.data.accessUrl);
} else {
uni.showToast({
title: "图片上传失败",
icon: "none",
mask: true,
duration: 3000,
});
}
},
fail: (uploadFileErr) => {
uni.showToast({
title: "图片上传失败",
icon: "none",
mask: true,
duration: 3000,
});
},
complete: (res) => {
// 请求完成以后做一些事情
uni.hideLoading();
},
});
},
// 提交评价
async submitReview() {
if (this.rating === 0) {
this.$refs.uToastRef.show({
message: "请为商品信任度评分",
type: "warning",
});
return;
}
if (!this.commentText.trim()) {
this.$refs.uToastRef.show({
message: "请输入您的评价内容",
type: "warning",
});
return;
}
// 评价订单
const params = {
orderId: this.evalId,
rating: this.rating,
goodsId: this.goodsId,
content: this.commentText,
images: this.mediaList.join(","),
};
console.log("评价参数", params);
const resp = await addOrderReviews(params);
if (resp && resp.bizcode === 100) {
this.$refs.uToastRef.show({ message: "评价成功", type: "success" });
uni.navigateBack({ delta: 1 });
}
},
},
};
</script>
<style lang="scss" scoped>
.content {
background-color: #f7f7f7;
min-height: 100vh;
position: relative;
box-sizing: border-box;
background-color: #f7f7f7;
min-height: 100vh;
position: relative;
box-sizing: border-box;
}
.setting-view {
width: 100%;
height: calc(100vh - 220rpx - var(--status-bar-height)); /* 留出底部按钮区域空间 */
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
height: calc(
100vh - 220rpx - var(--status-bar-height)
); /* 留出底部按钮区域空间 */
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
box-sizing: border-box;
}
/* 核心内容白底卡片样式 */
.review-card {
width: 100%;
background-color: #ffffff;
border-radius: 16rpx;
padding: 36rpx 24rpx;
margin-top: 24rpx;
box-sizing: border-box;
width: 100%;
background-color: #ffffff;
border-radius: 16rpx;
padding: 36rpx 24rpx;
margin-top: 24rpx;
box-sizing: border-box;
}
/* 商品模块 */
.product-section {
display: flex;
margin-bottom: 40rpx;
.product-img {
width: 156rpx;
height: 156rpx;
flex-shrink: 0;
}
.product-detail {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
.product-title {
font-size: 28rpx;
color: #111111;
font-weight: bold;
line-height: 38rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.product-spec {
font-size: 24rpx;
color: #aaaaaa;
margin-top: 16rpx;
}
}
display: flex;
margin-bottom: 40rpx;
.product-img {
width: 156rpx;
height: 156rpx;
flex-shrink: 0;
}
.product-detail {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
.product-title {
font-size: 28rpx;
color: #111111;
font-weight: bold;
line-height: 38rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.product-spec {
font-size: 24rpx;
color: #aaaaaa;
margin-top: 16rpx;
}
}
}
/* 信任度评分模块 */
.rating-section {
display: flex;
align-items: center;
margin-bottom: 48rpx;
.rating-label {
font-size: 28rpx;
color: #333333;
margin-right: 32rpx;
font-weight: 500;
}
.stars-box {
display: flex;
align-items: center;
.star-icon {
font-size: 42rpx;
color: #e5e5e5;
margin-right: 20rpx;
transition: color 0.15s ease;
cursor: pointer;
&.active {
color: #7934f6; /* 选中状态呈现高亮蓝 */
}
}
}
display: flex;
align-items: center;
margin-bottom: 48rpx;
.rating-label {
font-size: 28rpx;
color: #333333;
margin-right: 32rpx;
font-weight: 500;
}
.stars-box {
display: flex;
align-items: center;
.star-icon {
font-size: 42rpx;
color: #e5e5e5;
margin-right: 20rpx;
transition: color 0.15s ease;
cursor: pointer;
&.active {
color: #7934f6; /* 选中状态呈现高亮蓝 */
}
}
}
}
/* 评价输入框模块 */
.comment-section {
position: relative;
width: 100%;
margin-bottom: 32rpx;
.comment-textarea {
width: 100%;
height: 180rpx;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
box-sizing: border-box;
}
.placeholder-style {
color: #cccccc;
font-size: 28rpx;
}
.word-counter {
text-align: right;
font-size: 24rpx;
color: #bbbbbb;
margin-top: 8rpx;
}
position: relative;
width: 100%;
margin-bottom: 32rpx;
.comment-textarea {
width: 100%;
height: 180rpx;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
box-sizing: border-box;
}
.placeholder-style {
color: #cccccc;
font-size: 28rpx;
}
.word-counter {
text-align: right;
font-size: 24rpx;
color: #bbbbbb;
margin-top: 8rpx;
}
}
/* 媒体文件上传模块 */
.upload-section {
width: 100%;
.upload-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.upload-item {
position: relative;
width: 200rpx;
height: 200rpx;
.uploaded-media {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.delete-btn {
position: absolute;
top: -12rpx;
right: -12rpx;
width: 36rpx;
height: 36rpx;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
}
.upload-btn {
width: 200rpx;
height: 200rpx;
background-color: #f7f8fa;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.plus-icon {
font-size: 52rpx;
color: #999999;
line-height: 1;
margin-bottom: 12rpx;
font-weight: 300;
}
.upload-text {
font-size: 20rpx;
color: #999999;
}
}
width: 100%;
.upload-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.upload-item {
position: relative;
width: 200rpx;
height: 200rpx;
.uploaded-media {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.delete-btn {
position: absolute;
top: -12rpx;
right: -12rpx;
width: 36rpx;
height: 36rpx;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
}
.upload-btn {
width: 200rpx;
height: 200rpx;
background-color: #f7f8fa;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.plus-icon {
font-size: 52rpx;
color: #999999;
line-height: 1;
margin-bottom: 12rpx;
font-weight: 300;
}
.upload-text {
font-size: 20rpx;
color: #999999;
}
}
}
/* 底部操作固定栏 */
.bottom-action-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
z-index: 99;
.submit-review-btn {
width: 100%;
height: 88rpx;
background: #7F32FF; /* 高度还原UI图中的核心紫色 */
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
&::after {
border: none;
}
}
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
z-index: 99;
.submit-review-btn {
width: 100%;
height: 88rpx;
background: #7f32ff; /* 高度还原UI图中的核心紫色 */
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
&::after {
border: none;
}
}
}
</style>
</style>
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',
utils/config.js
+2 -2
View File
@@ -3,10 +3,10 @@
// export const BASE_URL="http://cl55un59859.vicp.fun:24346"; // 测试环境
export const BASE_URL = "https://api.tbmall.xin"; //生产
// export const BASE_URL = "https://api.tbmall.xin"; //生产
export const MILD_BASE_URL = "https://agent.tbmall.xin/"; //中台生产
// export const BASE_URL ='https://api.o.tbmall.xin'; // 本地测试
export const BASE_URL ='https://api.o.tbmall.xin'; // 本地测试
// export const MILD_BASE_URL = "https://agent.o.tbmall.xin/"; //中台测试
// https://h.o.tbmall.xin/#/