From c337b40f1052733c86696cf3dbeb44ad8bf2a73d Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期三, 16 十月 2024 20:54:05 +0800
Subject: [PATCH] 1.商品评论优化
---
sub_pages/customer/shop/shop.vue | 110 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 85 insertions(+), 25 deletions(-)
diff --git a/sub_pages/customer/shop/shop.vue b/sub_pages/customer/shop/shop.vue
index d1f6f20..9a9bee1 100644
--- a/sub_pages/customer/shop/shop.vue
+++ b/sub_pages/customer/shop/shop.vue
@@ -172,34 +172,39 @@
<view v-for="(item,index) of commentList" >
<u-row justify="space-between" >
- <u-col span="1">
- <u--image v-if="item.anonymityFalg==1 " :showLoading="true"
- src="https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png" width="30px" height="30px" shape="circle"></u--image>
- <u--image v-else :showLoading="true" :src="item.customerCover" width="30px" height="30px" shape="circle"></u--image>
-
+ <u-col>
+ <view style="display: flex; justify-content: flex-start; align-items: center;padding: 5rpx;">
+ <u--image v-if="item.anonymityFalg==1 " :showLoading="true"
+ src="https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png" width="30px" height="30px" shape="circle"></u--image>
+ <u--image v-else :showLoading="true" :src="item.customerCover" width="30px" height="30px" shape="circle"></u--image>
+ <span v-if="item.anonymityFalg==1 " >匿名用户</span>
+ <span v-else>{{item.customerName}}</span>
+ </view>
</u-col>
- <u-col span="4">
- <view v-if="item.anonymityFalg==1 " >匿名用户</view>
- <view v-else>{{item.customerName}}</view>
- </u-col>
- <u-col span="2">
- <u-rate count="5" v-model="item.commentGrade" readonly></u-rate>
- </u-col>
- <u-col span="4">
- <view style="font-size: 12px;">{{item.updateTime}}</view>
- </u-col>
+
+ <!-- <u-col span="4">
+ <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
+ </u-col> -->
</u-row>
- <u-row justify="space-between" >
+ <u-row justify="space-between" class="flower-comment">
<u-col span="2"></u-col>
<u-col span="10">
+ <view class="rate">
+ <u-rate count="5" v-model="item.commentGrade" readonly size="30"></u-rate>
+ <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
+ </view>
<view>
- <span style="color:#3E9FFB;border: 1px solid #3E9FFB; padding:2px 2px ;font-size: 12px;">
- {{item.flowerName}}({{item.flowerColor}}){{item.flowerLevel}}
- </span>
- {{item.comment}}
- <view class="flex" >
- <u--image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" style="margin:10px;"
- :showLoading="true" :src="commentImg"></u--image>
+ <view>
+ <span class="flower-unit" >{{item.flowerName}} {{item.flowerLevel}}</span>
+ <span class="comment">
+ {{item.comment}}
+ </span>
+ </view>
+ <view class="img-v" >
+ <!-- <u--image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" class="comment-img"
+ :showLoading="true" :src="commentImg"></u--image> -->
+
+ <image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" :src="commentImg" class="comment-img" @click="previewImg(commentImg)"></image>
</view>
</view>
@@ -516,15 +521,19 @@
this.commentList[existingCommentIndex] = {
...this.commentList[existingCommentIndex],
...item,
- commentImagesList
+ commentImagesList,
+ updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
};
} else {
// 新增评论
this.commentList.push({
...item,
- commentImagesList
+ commentImagesList,
+ updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
});
}
+ console.log("评论列表：")
+ console.log(this.commentList)
});
}
@@ -532,6 +541,20 @@
this.$message.hideLoading()
}
+ },
+ formatUpdateTime(time) {
+
+ if (!time) return ''; // 如果时间为空，直接返回空字符串
+ const date = new Date(time);
+
+ // 格式化为 "YYYY-MM-DD HH:mm" 形式
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ const hours = date.getHours().toString().padStart(2, '0');
+ const minutes = date.getMinutes().toString().padStart(2, '0');
+
+ return `${year}-${month}-${day} ${hours}:${minutes}`;
},
getList_after() {
@@ -938,6 +961,33 @@
}
}
+ .flower-comment{
+ padding:10px;
+ line-height: 1.5;
+
+ .comment{
+ margin: 10px;
+ font-size: 12rpx;
+ }
+
+ }
+
+ .rate{
+ display: flex;
+ justify-content: space-between;
+ margin:10px 10px 10px 0px;
+ }
+
+ .img-v{
+ margin:10px;
+ display: flex;
+ flex-wrap: wrap;
+ .comment-img{
+ margin:10px;
+ width:80px;;
+ height:80px;
+ }
+ }
.comment-replay{
background-color: #F6F6F6;
@@ -945,5 +995,15 @@
margin-top:10rpx;
padding: 10rpx;
}
+
+ .flower-unit{
+ color:#3E9FFB;
+ border: 1rpx solid #3E9FFB;
+ margin:10px;
+ margin-left:0px;
+ padding-left: 5rpx;
+ padding-right: 5rpx;
+ // font-size: 12px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3