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
+42
View File
@@ -49,3 +49,45 @@ export function addGoods(params) {
data:params, 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)"> @click="onAfterSaleDetail(item)">
售后详情 售后详情
</view> </view>
<view class="operate_comm operate_but_1 operate_comm_evaluate" v-if=" <view class="operate_comm operate_but_1 operate_comm_evaluate" v-if="item.status ==4 && item.description" @click="evaluate(item)">评价</view>
[
MINE_ORDER_TYPE.SUCCEED,
].includes(form.type)
" @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" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view> -->
<view class="operate_comm operate_but_1 operate_comm_delete" v-if=" <view class="operate_comm operate_but_1 operate_comm_delete" v-if="
[ [
@@ -488,8 +484,10 @@ export default {
}, },
// 评价 // 评价
evaluate(item) { evaluate(item) {
console.log('订单id',item);
// return
uni.navigateTo({ 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() { async againDeleteOrder() {
pages/order_package/evaluate/evaluate.vue
+374 -278
View File
@@ -1,345 +1,441 @@
<template> <template>
<view class="content"> <view class="content">
<TopSafe></TopSafe> <TopSafe></TopSafe>
<Header title="发表评价" /> <Header title="发表评价" />
<view class="setting-view"> <view class="setting-view">
<!-- 评价核心白底卡片容器 --> <!-- 评价核心白底卡片容器 -->
<view class="review-card"> <view class="review-card">
<!-- 商品信息模块 --> <!-- 商品信息模块 -->
<view class="product-section"> <view class="product-section">
<image class="product-img" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=200" mode="aspectFill"></image> <image class="product-img" :src="mainGraph" mode="aspectFill"></image>
<view class="product-detail"> <view class="product-detail">
<text class="product-title">kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬kechers斯凯奇2024年秋冬</text> <text class="product-title">{{ title }}</text>
<text class="product-spec">规格：白色;</text> <text class="product-spec">规格：{{ goodsSpece }}</text>
</view> </view>
</view> </view>
<!-- 信任度评分模块 --> <!-- 信任度评分模块 -->
<view class="rating-section"> <view class="rating-section">
<text class="rating-label">信任度</text> <text class="rating-label">信任度</text>
<view class="stars-box"> <view class="stars-box">
<text <text
v-for="index in 5" v-for="index in 5"
:key="index" :key="index"
class="star-icon" class="star-icon"
:class="{ active: index <= rating }" :class="{ active: index <= rating }"
@click="setRating(index)" @click="setRating(index)"
>★</text> >★</text
</view> >
</view> </view>
</view>
<!-- 评价输入框模块 --> <!-- 评价输入框模块 -->
<view class="comment-section"> <view class="comment-section">
<textarea <textarea
class="comment-textarea" class="comment-textarea"
v-model="commentText" v-model="commentText"
placeholder="您的评价可以帮助更多的人哦" placeholder="您的评价可以帮助更多的人哦"
maxlength="100" maxlength="100"
placeholder-class="placeholder-style" placeholder-class="placeholder-style"
/> />
<view class="word-counter">已输入{{ commentText.length }}/100</view> <view class="word-counter">已输入{{ commentText.length }}/100</view>
</view> </view>
<!-- 照片/视频上传模块 --> <!-- 照片/视频上传模块 -->
<view class="upload-section"> <view class="upload-section">
<view class="upload-grid"> <view class="upload-grid">
<!-- 已上传媒体预览 --> <!-- 已上传媒体预览 -->
<view class="upload-item" v-for="(item, idx) in mediaList" :key="idx"> <view
<image :src="item" mode="aspectFill" class="uploaded-media"></image> class="upload-item"
<view class="delete-btn" @click="deleteMedia(idx)">×</view> v-for="(item, idx) in mediaList"
</view> :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"> <view
<text class="plus-icon">+</text> class="upload-btn"
<text class="upload-text">上传照片/视频</text> @click="chooseMedia"
</view> v-if="mediaList.length < 9"
</view> >
</view> <text class="plus-icon">+</text>
</view> <text class="upload-text">上传照片/视频</text>
</view> </view>
</view>
</view>
</view>
</view>
<!-- 底部固定发表评价按钮 --> <!-- 底部固定发表评价按钮 -->
<view class="bottom-action-bar"> <view class="bottom-action-bar">
<button class="submit-review-btn" @click="submitReview">发表评价</button> <button class="submit-review-btn" @click="submitReview">发表评价</button>
</view> </view>
<up-toast ref="uToastRef"></up-toast> <up-toast ref="uToastRef"></up-toast>
</view> </view>
</template> </template>
<script> <script>
import Header from '@/components/common/header.vue'; import { addOrderReviews } from "@/api/product.js";
import TopSafe from '@/components/common/top-safe.nvue' import { uploadImage, uploadImg } from "@/api/common.js";
import MyBtn from '@/components/common/my-btn.vue' 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 { export default {
components: { Header, TopSafe, MyBtn }, components: { Header, TopSafe, MyBtn },
data() { data() {
return { return {
rating: 0, // 评分星级 rating: 0, // 评分星级
commentText: '', // 评价内容 commentText: "", // 评价内容
mediaList: [] // 已上传的图片/视频列表 mediaList: [], // 已上传的图片/视频列表
}; goodsId: "", // 商品id
}, evalId: "", // 订单id
onShow() { 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();
},
});
},
}, // 提交评价
onLoad() { async submitReview() {
}, if (this.rating === 0) {
methods: { this.$refs.uToastRef.show({
// 设置评分 message: "请为商品信任度评分",
setRating(val) { type: "warning",
this.rating = val; });
}, return;
// 调起系统相册/相机选择媒体 }
chooseMedia() { if (!this.commentText.trim()) {
uni.chooseImage({ this.$refs.uToastRef.show({
count: 9 - this.mediaList.length, message: "请输入您的评价内容",
sizeType: ['compressed'], type: "warning",
sourceType: ['album', 'camera'], });
success: (res) => { return;
this.mediaList = [...this.mediaList, ...res.tempFilePaths]; }
}
}); // 评价订单
}, const params = {
// 删除选中的媒体文件 orderId: this.evalId,
deleteMedia(idx) { rating: this.rating,
this.mediaList.splice(idx, 1); goodsId: this.goodsId,
}, content: this.commentText,
// 提交评价 images: this.mediaList.join(","),
submitReview() { };
if (this.rating === 0) { console.log("评价参数", params);
this.$refs.uToastRef.show({ message: '请为商品信任度评分', type: 'warning' }); const resp = await addOrderReviews(params);
return; if (resp && resp.bizcode === 100) {
} this.$refs.uToastRef.show({ message: "评价成功", type: "success" });
if (!this.commentText.trim()) { uni.navigateBack({ delta: 1 });
this.$refs.uToastRef.show({ message: '请输入您的评价内容', type: 'warning' }); }
return; },
} },
// 模拟请求成功 };
this.$refs.uToastRef.show({ message: '评价成功', type: 'success' });
// 评价成功后，返回上一页
uni.navigateBack({ delta: 1 });
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
background-color: #f7f7f7; background-color: #f7f7f7;
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
.setting-view { .setting-view {
width: 100%; width: 100%;
height: calc(100vh - 220rpx - var(--status-bar-height)); /* 留出底部按钮区域空间 */ height: calc(
display: flex; 100vh - 220rpx - var(--status-bar-height)
flex-direction: column; ); /* 留出底部按钮区域空间 */
align-items: center; display: flex;
overflow-y: auto; flex-direction: column;
box-sizing: border-box; align-items: center;
overflow-y: auto;
box-sizing: border-box;
} }
/* 核心内容白底卡片样式 */ /* 核心内容白底卡片样式 */
.review-card { .review-card {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 36rpx 24rpx; padding: 36rpx 24rpx;
margin-top: 24rpx; margin-top: 24rpx;
box-sizing: border-box; box-sizing: border-box;
} }
/* 商品模块 */ /* 商品模块 */
.product-section { .product-section {
display: flex; display: flex;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.product-img { .product-img {
width: 156rpx; width: 156rpx;
height: 156rpx; height: 156rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.product-detail { .product-detail {
margin-left: 20rpx; margin-left: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
flex: 1; flex: 1;
.product-title { .product-title {
font-size: 28rpx; font-size: 28rpx;
color: #111111; color: #111111;
font-weight: bold; font-weight: bold;
line-height: 38rpx; line-height: 38rpx;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.product-spec { .product-spec {
font-size: 24rpx; font-size: 24rpx;
color: #aaaaaa; color: #aaaaaa;
margin-top: 16rpx; margin-top: 16rpx;
} }
} }
} }
/* 信任度评分模块 */ /* 信任度评分模块 */
.rating-section { .rating-section {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 48rpx; margin-bottom: 48rpx;
.rating-label { .rating-label {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
margin-right: 32rpx; margin-right: 32rpx;
font-weight: 500; font-weight: 500;
} }
.stars-box { .stars-box {
display: flex; display: flex;
align-items: center; align-items: center;
.star-icon { .star-icon {
font-size: 42rpx; font-size: 42rpx;
color: #e5e5e5; color: #e5e5e5;
margin-right: 20rpx; margin-right: 20rpx;
transition: color 0.15s ease; transition: color 0.15s ease;
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #7934f6; /* 选中状态呈现高亮蓝 */ color: #7934f6; /* 选中状态呈现高亮蓝 */
} }
} }
} }
} }
/* 评价输入框模块 */ /* 评价输入框模块 */
.comment-section { .comment-section {
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: 32rpx; margin-bottom: 32rpx;
.comment-textarea { .comment-textarea {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.placeholder-style { .placeholder-style {
color: #cccccc; color: #cccccc;
font-size: 28rpx; font-size: 28rpx;
} }
.word-counter { .word-counter {
text-align: right; text-align: right;
font-size: 24rpx; font-size: 24rpx;
color: #bbbbbb; color: #bbbbbb;
margin-top: 8rpx; margin-top: 8rpx;
} }
} }
/* 媒体文件上传模块 */ /* 媒体文件上传模块 */
.upload-section { .upload-section {
width: 100%; width: 100%;
.upload-grid { .upload-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20rpx; gap: 20rpx;
} }
.upload-item { .upload-item {
position: relative; position: relative;
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
.uploaded-media { .uploaded-media {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8rpx; border-radius: 8rpx;
} }
.delete-btn { .delete-btn {
position: absolute; position: absolute;
top: -12rpx; top: -12rpx;
right: -12rpx; right: -12rpx;
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: #ffffff; color: #ffffff;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24rpx; font-size: 24rpx;
} }
} }
.upload-btn { .upload-btn {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
background-color: #f7f8fa; background-color: #f7f8fa;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.plus-icon { .plus-icon {
font-size: 52rpx; font-size: 52rpx;
color: #999999; color: #999999;
line-height: 1; line-height: 1;
margin-bottom: 12rpx; margin-bottom: 12rpx;
font-weight: 300; font-weight: 300;
} }
.upload-text { .upload-text {
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
} }
} }
} }
/* 底部操作固定栏 */ /* 底部操作固定栏 */
.bottom-action-bar { .bottom-action-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom)); padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box; box-sizing: border-box;
z-index: 99; z-index: 99;
.submit-review-btn { .submit-review-btn {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
background: #7F32FF; /* 高度还原UI图中的核心紫色 */ background: #7f32ff; /* 高度还原UI图中的核心紫色 */
color: #ffffff; color: #ffffff;
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
border-radius: 16rpx; border-radius: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: none; border: none;
&::after { &::after {
border: none; 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 <view
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
:class="['filter-tab', { active: activeTab === index }]" :class="['filter-tab', { active: activeTab === tab.value }]"
@click="activeTab = index" @click="handleTabClick(tab)"
> >
{{ tab.name }} {{ tab.name }}
</view> </view>
@@ -33,17 +33,20 @@
:enhanced="true" :enhanced="true"
:show-scrollbar="false" :show-scrollbar="false"
> >
<view class="eval-list" @click="handleClick(item)"> <view class="eval-list" >
<view <view
class="eval-item" class="eval-item"
v-for="(item, index) in evalList" v-for="(item, index) in evalList"
:key="index" :key="index"
@click="handleClick(item)"
> >
<view class="user-info-row"> <view class="user-info-row">
<view class="user-avatar-name"> <view class="user-avatar-name">
<view class="avatar-wrap"> <image
<text class="avatar-text">李</text> class="avatar-wrap"
</view> :src="item.userImage"
mode="aspectFill"
></image>
<text class="username">{{ item.userName }}</text> <text class="username">{{ item.userName }}</text>
<view class="user-level"> <view class="user-level">
<up-image <up-image
@@ -63,7 +66,7 @@
:key="s" :key="s"
class="star-icon" class="star-icon"
:style="{ :style="{
color: s <= item.score ? '#7934f6' : '#e5e5e5', color: s <= item.rating ? '#7934f6' : '#e5e5e5',
}" }"
>★</text >★</text
> >
@@ -73,19 +76,19 @@
</view> </view>
<view class="product-sku" <view class="product-sku"
>已购韩版FILA斐乐Running MIXR猫爪鞋黑色男女运动...</view >已购{{item.goodsName}}</view
> >
<view class="eval-content-text"> <view class="eval-content-text">
<text <text
>包装非常严实，里三层外三层的，完全不用担心运输损坏。</text >{{item.content}}</text
> >
</view> </view>
<view class="eval-images" > <view class="eval-images" v-if="item.images">
<image <image
class="eval-img" class="eval-img"
src="https://img.yzcdn.cn/vant/cat.jpeg" :src="item.images"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</view> </view>
@@ -98,6 +101,7 @@
</template> </template>
<script> <script>
import { getGoodsReviewsList } from "@/api/product.js";
export default { export default {
name: "EvaluateDialog", name: "EvaluateDialog",
props: { props: {
@@ -105,29 +109,59 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
evalId: {
type: Number,
default: 0,
},
mainGraph: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
}, },
data() { data() {
return { return {
activeTab: 0, activeTab: "all",
tabs: [ tabs: [
{ name: "全部", value: "all" }, { name: "全部", value: "all" },
{ name: "好评", value: "good" }, { name: "好评", value: "5" },
{ name: "中/差评", value: "bad" }, { name: "中/差评", value: "4" },
],
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"] },
], ],
evalList: [],
}; };
},
mounted(){
this.getGoodsReviewsList();
}, },
methods: { 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() { handleClose() {
this.$emit("close"); this.$emit("close");
}, },
handleClick(item) { handleClick(item) {
console.log('点击评价',item.goodsName);
uni.navigateTo({ 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; width: 70rpx;
height: 70rpx; height: 70rpx;
border-radius: 50%; border-radius: 50%;
background-color: #a46cfc;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pages/other_package/productInfo/evaluateDetail.vue
+105 -71
View File
@@ -16,10 +16,10 @@
/> />
<image <image
class="avatar" class="avatar"
src="/static/avatar-placeholder.png" :src="commentData.userImage"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<text class="nickname">李老八</text> <text class="nickname">{{ commentData.userName }}</text>
<view class="badge"> <view class="badge">
<up-image <up-image
src="/static/common/rz.png" src="/static/common/rz.png"
@@ -60,34 +60,30 @@
<!-- 2. 购买规格与星级评分 --> <!-- 2. 购买规格与星级评分 -->
<view class="rating-row"> <view class="rating-row">
<text class="sku-text">已购韩版FILA斐乐Running ...</text> <text class="sku-text">已购{{ goodsName }}</text>
<view class="stars-box"> <view class="stars-box">
<view class="stars"> <view class="stars">
<text class="star active">★</text> <text class="star active" v-for="s in commentData.rating" :key="s">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
<text class="star active">★</text>
</view> </view>
<text class="rating-label">好评</text> <text class="rating-label">{{ commentData.rating > 4 ? '好评' : '中/差评' }}</text>
</view> </view>
</view> </view>
<!-- 3. 用户评价文本 --> <!-- 3. 用户评价文本 -->
<view class="comment-content"> <view class="comment-content">
包装非常严实，里三层外三层的，完全不用担心运输损坏。 {{ commentData.content }}
</view> </view>
<!-- 4. 底部关联商品卡片 --> <!-- 4. 底部关联商品卡片 -->
<view class="product-mini-card"> <view class="product-mini-card">
<image <image
class="prod-img" class="prod-img"
src="https://img.yzcdn.cn/vant/cat.jpeg" :src="mainGraph"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view class="prod-info"> <view class="prod-info">
<text class="prod-title" <text class="prod-title"
>Skechers斯凯奇2024年秋冬...Skechers斯凯奇2024年秋冬...</text >{{ name }}</text
> >
</view> </view>
</view> </view>
@@ -96,22 +92,16 @@
<view class="comment-section"> <view class="comment-section">
<view class="comment-count">{{ commentList.length }}条评论</view> <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> <RecursiveComment
<view class="c-body"> v-for="(item, index) in commentList"
<view class="c-user-line"> :key="index"
<text class="c-nickname">{{ item.nickname }}</text> :item="item"
</view> :userId="userId"
<view class="c-text">{{ item.content }}</view> :level="0"
<view class="c-footer"> @deleteSuccess="handleDeleteSuccess"
<text class="c-time">{{ item.time }}</text> @reply="tapReply"
<text class="c-reply-btn" @tap="tapReply(item)">回复</text> />
</view>
</view>
<!-- 右侧点赞 -->
<view class="c-like-box" @tap="toggleCommentLike(index)">
</view>
</view>
<!-- 底部到底提示 --> <!-- 底部到底提示 -->
<view class="no-more">— 到底啦 —</view> <view class="no-more">— 到底啦 —</view>
@@ -124,7 +114,7 @@
<input <input
type="text" type="text"
v-model="inputComment" v-model="inputComment"
placeholder="热情回复 文明用语" :placeholder="placeholder"
placeholder-class="input-placeholder" placeholder-class="input-placeholder"
confirm-type="send" confirm-type="send"
@confirm="sendComment" @confirm="sendComment"
@@ -137,51 +127,69 @@
</template> </template>
<script> <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 TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue"; import MyBtn from "@/components/common/my-btn.vue";
import RecursiveComment from "./RecursiveComment.vue";
export default { export default {
components: { TopSafe, MyBtn }, components: { TopSafe, MyBtn, RecursiveComment },
props: {
evalId: {
type: String || Number,
default: ''
}
},
data() { data() {
return { return {
commentData: {},
placeholder: '请输入评论',
parentReplyId: '',
mainGraph: '',
name: '',
goodsName: '',
// 图片列表数据 // 图片列表数据
imageList: [ imageList: [],
"https://img.yzcdn.cn/vant/cat.jpeg",
"https://img.yzcdn.cn/vant/apple-1.jpg",
"https://img.yzcdn.cn/vant/apple-2.jpg"
],
currentImageIndex: 0, // 当前图片索引 currentImageIndex: 0, // 当前图片索引
// 【新增】输入框绑定的文本 // 【新增】输入框绑定的文本
inputComment: '', inputComment: '',
commentList: [ ],
// 【新增】模拟评论区数据 commentId: '',
commentList: [ userId: '',
{
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
}
]
}; };
}, },
onShow() {}, 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: { methods: {
formatDate,
// 监听滑动切换 // 监听滑动切换
onSwiperChange(e) { onSwiperChange(e) {
this.currentImageIndex = e.detail.current; 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() { goBack() {
@@ -189,27 +197,32 @@ export default {
delta: 1, delta: 1,
}); });
}, },
handleDeleteSuccess(){
this.getDetails();
},
// 【新增】发送评论 // 【新增】发送评论
sendComment() { async sendComment() {
console.log('评论');
if (!this.inputComment.trim()) return; if (!this.inputComment.trim()) return;
this.commentList.unshift({ const params = {
avatar: "/static/avatar-placeholder.png", // 默认当前用户头像 parentReplyId:this.parentReplyId || '',
nickname: "我就是我", reviewId: this.commentData.id,
level: 1, userId: getStorageFun(USER_DATA).userId,
userName: getStorageFun(USER_DATA).name ,
userImage: getStorageFun(USER_DATA).avatar,
content: this.inputComment, content: this.inputComment,
time: "刚刚", };
isLiked: false const resp = await addReviewReply(params);
}); if (resp && resp.bizcode === 100) {
this.getDetails();
}
this.inputComment = ''; this.inputComment = '';
uni.showToast({ title: '评论成功', icon: 'none' }); uni.showToast({ title: '评论成功', icon: 'none' });
}, },
// 【新增】点赞单条评论
toggleCommentLike(index) {
this.commentList[index].isLiked = !this.commentList[index].isLiked;
},
// 【新增】点击回复 // 【新增】点击回复
tapReply(item) { tapReply(item, parentItem) {
uni.showToast({ title: `回复 @${item.nickname}`, icon: 'none' }); this.parentReplyId = item.id || '';
this.placeholder = `回复：${item.userName}`;
} }
}, },
}; };
@@ -247,7 +260,6 @@ export default {
width: 68rpx; width: 68rpx;
height: 68rpx; height: 68rpx;
border-radius: 50%; border-radius: 50%;
background-color: #7a46f2;
margin-right: 16rpx; margin-right: 16rpx;
} }
@@ -453,6 +465,28 @@ export default {
color: #888888; color: #888888;
margin-right: 10rpx; 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 { .c-text {
pages/other_package/productInfo/evaluation.vue
+23 -19
View File
@@ -21,7 +21,7 @@
<view class="user-left"> <view class="user-left">
<image <image
class="avatar" class="avatar"
:src="item.avatar || defaultAvatar" :src="item.userImage"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<text class="username">{{ item.userName }}</text> <text class="username">{{ item.userName }}</text>
@@ -29,10 +29,10 @@
<view class="user-right"> <view class="user-right">
<view class="stars"> <view class="stars">
<text <text
v-for="s in 5" v-for="s in item.rating"
:key="s" :key="s"
class="star-icon" class="star-icon"
:style="{ color: s <= item.score ? '#7934F6' : '#e5e5e5' }" :style="{ color: s <= item.rating ? '#7934F6' : '#e5e5e5' }"
>★</text >★</text
> >
</view> </view>
@@ -48,6 +48,8 @@
</template> </template>
<script> <script>
import { getGoodsReviewsList } from "@/api/product.js";
export default { export default {
name: "Evaluation", name: "Evaluation",
props: { props: {
@@ -56,30 +58,32 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
evalId: {
type: Number,
default: 0,
},
}, },
data() { data() {
return { return {
// 默认头像，网络图片或本地图片路径均可 // 默认头像，网络图片或本地图片路径均可
defaultAvatar: "https://img.yzcdn.cn/vant/cat.jpeg",
totalCount: "99+", totalCount: "99+",
list: [ 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",
},
],
}; };
}, },
mounted() {
this.getGoodsReviewsList();
},
methods: { 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() { 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> --> <!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
</view> </view>
</view> </view>
<Evaluation @goMore="onGoMore"></Evaluation> <Evaluation @goMore="onGoMore" :evalId="id"></Evaluation>
<view class="tui-view"> <view class="tui-view">
<text class="text-32 text-zu">退货提示</text> <text class="text-32 text-zu">退货提示</text>
<text class="text-28 text-fu1">拆封后影响品质”或“影响二次销售的”不予退货。</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" <SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id"
:text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''" :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"></SharePopup> :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"> <view class="hideCanvasView">
<canvas id="myCanvas" canvas-id="myCanvas" :style="{ <canvas id="myCanvas" canvas-id="myCanvas" :style="{
height: bgObj.height + 'px', 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="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 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/"; //中台测试 // export const MILD_BASE_URL = "https://agent.o.tbmall.xin/"; //中台测试
// https://h.o.tbmall.xin/#/ // https://h.o.tbmall.xin/#/