feat: 商品评价
This commit is contained in:
黄泽群
+8
-1
@@ -257,6 +257,13 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "evaluate/evaluate",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -551,7 +558,7 @@
|
||||
"root": "pages/other_package",
|
||||
"pages": [
|
||||
{
|
||||
"path": "payment_processing/payment_processing",
|
||||
"path": "productInfo/evaluateDetail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
@@ -134,6 +134,11 @@
|
||||
@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" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view> -->
|
||||
<view class="operate_comm operate_but_1 operate_comm_delete" v-if="
|
||||
[
|
||||
@@ -481,6 +486,12 @@ export default {
|
||||
this.deleteShow = true;
|
||||
this.deleteInfo = item;
|
||||
},
|
||||
// 评价
|
||||
evaluate(item) {
|
||||
uni.navigateTo({
|
||||
url:"/pages/order_package/evaluate/evaluate?id=" + item.id,
|
||||
});
|
||||
},
|
||||
async againDeleteOrder() {
|
||||
let params;
|
||||
if (this.form.type === 4 && (this.deleteInfo.status === 4 || this.deleteInfo.status === 5 || this.deleteInfo.status === 6 || this.deleteInfo.status === 7)) {
|
||||
@@ -1168,7 +1179,10 @@ export default {
|
||||
color: #f24a00;
|
||||
border: 1rpx solid #f24a00;
|
||||
}
|
||||
|
||||
.operate_comm_evaluate {
|
||||
color: #333333;
|
||||
border: 1rpx solid #8b8b8b;
|
||||
}
|
||||
.sure_pay {
|
||||
::v-deep(.u-modal__content__text) {
|
||||
text-align: center;
|
||||
|
||||
@@ -0,0 +1,345 @@
|
||||
<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>
|
||||
</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'
|
||||
|
||||
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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 核心内容白底卡片样式 */
|
||||
.review-card {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 信任度评分模块 */
|
||||
.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; /* 选中状态呈现高亮蓝 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 评价输入框模块 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 媒体文件上传模块 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作固定栏 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="false"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="evaluate-popup">
|
||||
<!-- 固定的标题头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="title">评价</text>
|
||||
</view>
|
||||
|
||||
<!-- 固定的切换标签 -->
|
||||
<view class="filter-tabs">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['filter-tab', { active: activeTab === index }]"
|
||||
@click="activeTab = index"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可上下滚动的评价列表区域 -->
|
||||
<scroll-view
|
||||
class="eval-scroll"
|
||||
scroll-y
|
||||
:enhanced="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="eval-list" @click="handleClick(item)">
|
||||
<view
|
||||
class="eval-item"
|
||||
v-for="(item, index) in evalList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="user-info-row">
|
||||
<view class="user-avatar-name">
|
||||
<view class="avatar-wrap">
|
||||
<text class="avatar-text">李</text>
|
||||
</view>
|
||||
<text class="username">{{ item.userName }}</text>
|
||||
<view class="user-level">
|
||||
<up-image
|
||||
src="/static/common/rz.png"
|
||||
width="13"
|
||||
height="12"
|
||||
bgColor="#f1f6ff00"
|
||||
class="arrow"
|
||||
></up-image>
|
||||
<text class="level-text">星级用户</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rating-tag">
|
||||
<view class="stars">
|
||||
<text
|
||||
v-for="s in 5"
|
||||
:key="s"
|
||||
class="star-icon"
|
||||
:style="{
|
||||
color: s <= item.score ? '#7934f6' : '#e5e5e5',
|
||||
}"
|
||||
>★</text
|
||||
>
|
||||
</view>
|
||||
<text class="tag">{{ item.tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="product-sku"
|
||||
>已购韩版FILA斐乐Running MIXR猫爪鞋黑色男女运动...</view
|
||||
>
|
||||
|
||||
<view class="eval-content-text">
|
||||
<text
|
||||
>包装非常严实，里三层外三层的，完全不用担心运输损坏。</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="eval-images" >
|
||||
<image
|
||||
class="eval-img"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EvaluateDialog",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
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"] },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/other_package/productInfo/evaluateDetail?item=" + JSON.stringify(item),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.evaluate-popup {
|
||||
height: 85vh; /* 改为固定高度百分比，使内部 flex 自适应支撑起滚动条 */
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
padding: 30rpx 0 20rpx;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 30rpx 30rpx;
|
||||
gap: 24rpx; /* 标签之间的标准间距 */
|
||||
|
||||
.filter-tab {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
padding: 12rpx 32rpx; /* 改用横向内边距，使其宽度根据内容自适应且规范 */
|
||||
border-radius: 8rpx; /* 契合图片的轻微小圆角 */
|
||||
background-color: #f5f5f7; /* 未激活状态的浅灰色 */
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background-color: #f2ecff; /* 激活时如图片所示的极浅紫色背景 */
|
||||
color: #7934f6; /* 激活时的标志性紫色字体 */
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eval-scroll {
|
||||
flex: 1; /* 核心：占满剩余所有的垂直空间 */
|
||||
height: 0; /* 必须设置为0，防止容器被子内容撑开导致无法滚动 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.eval-list {
|
||||
background-color: #f6f6f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
padding-bottom: 40rpx; /* 底部预留间距 */
|
||||
|
||||
.eval-item {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.user-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.user-avatar-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-wrap {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #a46cfc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.avatar-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(248, 185, 75, 0.15);
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
.level-text {
|
||||
font-size: 20rpx;
|
||||
color: #a26616;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.star-icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 28rpx;
|
||||
color: #7934f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-sku {
|
||||
font-size: 26rpx;
|
||||
color: #aaaaaa;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eval-content-text {
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.eval-images {
|
||||
white-space: nowrap;
|
||||
|
||||
.eval-images-wrap {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.eval-img {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f0f2f5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 状态栏占位 -->
|
||||
<TopSafe></TopSafe>
|
||||
|
||||
<!-- 整合后的自定义头部导航栏（包含返回键和用户信息） -->
|
||||
<view class="custom-header">
|
||||
<view class="user-info">
|
||||
<up-image
|
||||
class="back-icon"
|
||||
src="/static/common/left.png"
|
||||
width="18"
|
||||
height="20"
|
||||
bgColor="#f1f6ff00"
|
||||
@tap="goBack"
|
||||
/>
|
||||
<image
|
||||
class="avatar"
|
||||
src="/static/avatar-placeholder.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<text class="nickname">李老八</text>
|
||||
<view class="badge">
|
||||
<up-image
|
||||
src="/static/common/rz.png"
|
||||
width="14"
|
||||
height="13"
|
||||
bgColor="#f1f6ff00"
|
||||
class="badge-icon"
|
||||
></up-image>
|
||||
<text class="badge-text">星级用户</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价主内容区域 -->
|
||||
<view class="setting-view">
|
||||
<view class="evaluation-card">
|
||||
<!-- 1. 大图晒单区域（支持左右滑动，兼容H5和小程序） -->
|
||||
<view class="image-wrapper">
|
||||
<swiper
|
||||
class="main-swiper"
|
||||
:current="currentImageIndex"
|
||||
@change="onSwiperChange"
|
||||
:circular="true"
|
||||
>
|
||||
<swiper-item v-for="(img, index) in imageList" :key="index">
|
||||
<image
|
||||
class="main-image"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 自定义数字指示器 -->
|
||||
<view class="image-indicator" v-if="imageList.length > 1">
|
||||
{{ currentImageIndex + 1 }}/{{ imageList.length }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 购买规格与星级评分 -->
|
||||
<view class="rating-row">
|
||||
<text class="sku-text">已购韩版FILA斐乐Running ...</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>
|
||||
</view>
|
||||
<text class="rating-label">好评</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 用户评价文本 -->
|
||||
<view class="comment-content">
|
||||
包装非常严实，里三层外三层的，完全不用担心运输损坏。
|
||||
</view>
|
||||
|
||||
<!-- 4. 底部关联商品卡片 -->
|
||||
<view class="product-mini-card">
|
||||
<image
|
||||
class="prod-img"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="prod-info">
|
||||
<text class="prod-title"
|
||||
>Skechers斯凯奇2024年秋冬...Skechers斯凯奇2024年秋冬...</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopSafe from "@/components/common/top-safe.nvue";
|
||||
import MyBtn from "@/components/common/my-btn.vue";
|
||||
|
||||
export default {
|
||||
components: { TopSafe, MyBtn },
|
||||
data() {
|
||||
return {
|
||||
// 图片列表数据
|
||||
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, // 当前图片索引
|
||||
};
|
||||
},
|
||||
onShow() {},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
// 监听滑动切换
|
||||
onSwiperChange(e) {
|
||||
this.currentImageIndex = e.detail.current;
|
||||
},
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #f7f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.back-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #7a46f2;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fdf6ec;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
|
||||
.badge-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #b88230;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-view {
|
||||
width: 100%;
|
||||
height: calc(100% - 100rpx - var(--status-bar-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.evaluation-card {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 大图晒单区域优化
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
padding: 24rpx 32rpx 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative; // 为指示器绝对定位做准备
|
||||
|
||||
.main-swiper {
|
||||
width: 100%;
|
||||
height: 500rpx; // swiper必须指定高度，可根据业务UI自行微调
|
||||
|
||||
.main-image {
|
||||
width: 100%;
|
||||
height: 100%; // 让图片撑满swiper-item
|
||||
border-radius: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// 右下角微型数字指示器
|
||||
.image-indicator {
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 20rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
padding: 4rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// 规格与星级
|
||||
.rating-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx 16rpx 32rpx;
|
||||
|
||||
.sku-text {
|
||||
font-size: 26rpx;
|
||||
color: #a0a0a0;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stars-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.star {
|
||||
font-size: 28rpx;
|
||||
color: #e0e0e0;
|
||||
margin-left: 2rpx;
|
||||
|
||||
&.active {
|
||||
color: #7b3ff7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
font-size: 26rpx;
|
||||
color: #7b3ff7;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 评价文本
|
||||
.comment-content {
|
||||
font-size: 28rpx;
|
||||
color: #262626;
|
||||
line-height: 1.5;
|
||||
padding: 0 32rpx 24rpx 32rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
// 底部链接商品卡片
|
||||
.product-mini-card {
|
||||
margin: 0 32rpx;
|
||||
background-color: #f5f6f8;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.prod-img {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #e5e5e5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prod-info {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
|
||||
.prod-title {
|
||||
font-size: 26rpx;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="evaluation-wrap">
|
||||
<view class="eval-header">
|
||||
<view class="title">商品评价 ({{ totalCount }})</view>
|
||||
<view class="more" @click="goMore">
|
||||
<view class="rate"
|
||||
>查看全部
|
||||
<up-image
|
||||
src="/static/common/right.png"
|
||||
width="14"
|
||||
height="14"
|
||||
bgColor="#f1f6ff00"
|
||||
class="arrow"
|
||||
></up-image
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="eval-list">
|
||||
<view class="eval-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="user-info">
|
||||
<view class="user-left">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="item.avatar || defaultAvatar"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<text class="username">{{ item.userName }}</text>
|
||||
</view>
|
||||
<view class="user-right">
|
||||
<view class="stars">
|
||||
<text
|
||||
v-for="s in 5"
|
||||
:key="s"
|
||||
class="star-icon"
|
||||
:style="{ color: s <= item.score ? '#7934F6' : '#e5e5e5' }"
|
||||
>★</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="eval-content">
|
||||
<text class="text-desc">{{ item.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Evaluation",
|
||||
props: {
|
||||
// 允许父组件(productInfo)传入真实的评价数据
|
||||
evalData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
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",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 点击查看全部评价
|
||||
goMore() {
|
||||
// 触发父组件的事件，或者直接在这里写路由跳转
|
||||
this.$emit("goMore");
|
||||
// uni.navigateTo({ url: '/pages/evaluation/list' });
|
||||
},
|
||||
// 图片预览
|
||||
previewImg(urls, current) {
|
||||
uni.previewImage({
|
||||
urls,
|
||||
current,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.evaluation-wrap {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
/* 自适应父级宽度，可根据页面情况调整 margin */
|
||||
margin: 20rpx auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.eval-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
|
||||
.rate {
|
||||
color: #999999;
|
||||
margin-right: 4rpx;
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 评价列表区域 */
|
||||
.eval-list {
|
||||
.eval-item {
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f2f5;
|
||||
|
||||
/* 最后一条数据不显示下边框 */
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户信息行 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.user-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f2f5;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.user-right {
|
||||
.stars {
|
||||
display: flex;
|
||||
.star-icon {
|
||||
font-size: 26rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 评价文字 */
|
||||
.eval-content {
|
||||
margin-bottom: 16rpx;
|
||||
.text-desc {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
/* 多行文本超过3行自动出现省略号 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
<view class="tui-view">
|
||||
<text class="text-32 text-zu">退货提示</text>
|
||||
<text class="text-28 text-fu1">拆封后影响品质”或“影响二次销售的”不予退货。</text>
|
||||
@@ -321,6 +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>
|
||||
<view class="hideCanvasView">
|
||||
<canvas id="myCanvas" canvas-id="myCanvas" :style="{
|
||||
height: bgObj.height + 'px',
|
||||
@@ -334,6 +335,8 @@
|
||||
import { getGoodsDetail, addGoods, getGoodsSpecs } from "@/api/product.js";
|
||||
import { getValue, PRODUCT_DELIVERY_TIME } from "@/utils/enumUtils.js";
|
||||
import { copyData } from "@/utils/index.js";
|
||||
import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
|
||||
import EvaluateDialog from "@/pages/other_package/productInfo/evaluate-dialog.vue";
|
||||
import SharePopup from "@/pages/other_package/components/share-popup.vue";
|
||||
import MyBtn from "@/components/common/my-btn.vue";
|
||||
import { getPostageQuery } from "@/api/cart.js";
|
||||
@@ -365,6 +368,8 @@ export default {
|
||||
components: {
|
||||
Address,
|
||||
SharePopup,
|
||||
Evaluation,
|
||||
EvaluateDialog,
|
||||
MyBtn,
|
||||
},
|
||||
data() {
|
||||
@@ -372,6 +377,7 @@ export default {
|
||||
id: 0,
|
||||
shareShow: false,
|
||||
addressShow: false, // 收件地址选择
|
||||
evaluateDialogShow: false, // 评价弹框显示
|
||||
shareOpen: false,
|
||||
tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
|
||||
swiperList: [],
|
||||
@@ -1096,6 +1102,10 @@ export default {
|
||||
this.shareOpen = true;
|
||||
this.shareShow = true;
|
||||
},
|
||||
// 查看全部评价
|
||||
onGoMore() {
|
||||
this.evaluateDialogShow = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user