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 | 263 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 252 insertions(+), 11 deletions(-)
diff --git a/sub_pages/customer/shop/shop.vue b/sub_pages/customer/shop/shop.vue
index 14f0a17..9a9bee1 100644
--- a/sub_pages/customer/shop/shop.vue
+++ b/sub_pages/customer/shop/shop.vue
@@ -159,12 +159,72 @@
</view>
</view>
- <!-- <view v-show="flg==='1'" class="brand-info-1">
- <trade :hidefooter="true" :supplierId="id" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade">
- </trade>
+ <view v-show="flg==='2'" class="brand-info-1">
+ <!-- <trade :hidefooter="true" :supplierId="id" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade">
+ </trade> -->
+
+ <view class="m-t-12" style="text-align: center;">
+
+ <span style="">综合评分<span style="color: #F8353A; margin-left: 5px;">{{comment.avg}}</span> </span>
+
+ </view>
+ <view class="m-t-12">
+
+ <view v-for="(item,index) of commentList" >
+ <u-row justify="space-between" >
+ <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 style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
+ </u-col> -->
+ </u-row>
+ <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>
+ <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>
+ <!-- 平台回复 -->
+ <view class="comment-replay" v-if="item.replayContent">
+ 平台回复：{{item.replayContent}}
+ </view>
+ </u-col>
+ </u-row>
+
+ </view>
+
+
+
+
+ </view>
+
</view>
- -->
- <view v-if="flg==='2'" class="brand-info-3">
+
+ <view v-if="flg==='3'" class="brand-info-3">
<view class="title">
基础信息
</view>
@@ -252,6 +312,16 @@
},
data() {
return {
+ comment:{
+ avg:0,
+ commentAmount:0,
+ },
+ commentList:[],
+ commentPage:{
+ size: 10,
+ current: 1,
+ total: 0,
+ },
// search_flow: '',
flg: '0',
tabs: [{
@@ -260,9 +330,9 @@
{
name: '分类'
},
- // {
- // name: '评价'
- // },
+ {
+ name: '评价'
+ },
{
name: '商家'
},
@@ -278,6 +348,7 @@
level: '',
name: '',
categoryRoot: '',
+
},
level_show: false,
level_columns: [
@@ -287,7 +358,8 @@
order_show: false,
order_columns: [
[]
- ]
+ ],
+
}
},
onShow() {
@@ -300,9 +372,19 @@
}
await this.refreshList('post')
uni.stopPullDownRefresh()
-
+
+ if(this.flg=="2"){
+ // 评论相关下拉刷新
+ this.getCommentsStatis()
+
+ this.commentList=[]
+ this.commentPage.current=1
+ this.getComments()
+ }
+
},
onLoad(options) {
+
this.id = options.id || ''
this.page.size = 300
if (this.id) {
@@ -335,6 +417,11 @@
value: ''
})
})
+
+
+ this.getCommentsStatis()
+
+
},
// #ifdef PUB_CUSTOMER
onShareAppMessage() {
@@ -361,11 +448,115 @@
},
// #endif
onReachBottom() {
+ console.log("下拉")
// if (this.flg === '0') {
// this.getMore('post')
// }
+ if (this.flg ==2) {
+ // debugger;
+ // this.listApi="/api/v2/flower-comment/page"
+ // this.query={
+ // supplierId:this.id
+ // }
+ // this.getMore()
+ this.commentPage.current++
+ this.getComments()
+ }
},
methods: {
+
+ async getCommentsStatis() {
+ {
+ this.$message.showLoading()
+
+ const {
+ code,
+ data
+ } = await this.$http.request('get', `/api/v2/flower-comment/statis/${this.id}`, {
+ params: {}
+ })
+ if (code === 0) {
+ this.comment=data
+ this.tabs[2].name=`评价(${this.comment.commentAmount})`
+ }
+
+ this.$message.hideLoading()
+ }
+
+ },
+
+ async getComments() {
+
+ {
+ this.$message.showLoading()
+ const params={
+ l:0,
+ supplierId:this.id ,
+ ...this.commentPage,
+ }
+ const {
+ code,
+ data
+ } = await this.$http.request('get', `/api/v2/flower-comment/page`, {
+ params: params
+ })
+ if (code === 0) {
+ // this.commentList=data.records
+ this.commentPage.current=data.current
+ this.commentPage.pages=data.pages
+ this.commentPage.size=data.size
+ this.commentPage.total=data.total
+ // this.commentList = data.records.map(item => {
+ // return {
+ // ...item,
+ // commentImagesList: item.commentImages ? JSON.parse(item.commentImages) : [] // 将字符串转换成数组
+ // };
+ // });
+ data.records.forEach(item => {
+ const commentImagesList = item.commentImages ? JSON.parse(item.commentImages) : [];
+ const existingCommentIndex = this.commentList.findIndex(comment => comment.id === item.id);
+
+ if (existingCommentIndex !== -1) {
+ // 更新已存在的评论
+ this.commentList[existingCommentIndex] = {
+ ...this.commentList[existingCommentIndex],
+ ...item,
+ commentImagesList,
+ updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
+ };
+ } else {
+ // 新增评论
+ this.commentList.push({
+ ...item,
+ commentImagesList,
+ updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
+ });
+ }
+ console.log("评论列表：")
+ console.log(this.commentList)
+ });
+
+ }
+
+ 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() {
if (this.list) {
for (var item of this.list) {
@@ -482,6 +673,12 @@
}
}
+
+ if(flg=="2"){
+ this.getCommentsStatis()
+ this.getComments()
+ }
+
this.flg = '' + flg
//如果没有加载数据，需要加载一下
@@ -758,11 +955,55 @@
.input {
background-color: #fff !important;
-
+
border-radius: 8rpx;
}
}
}
+ .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;
+ color: #6582B6;
+ 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