1.商品评论优化

陶杰

2024-10-16 c337b40f1052733c86696cf3dbeb44ad8bf2a73d

 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}} &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>
@@ -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>