1.商品评论优化

陶杰

2024-10-16 c337b40f1052733c86696cf3dbeb44ad8bf2a73d

 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}} &nbsp; {{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>