Feat;旅居评价列表

components/UserEvaluation.vue

@@ -5,64 +5,85 @@
       :key="evaluateWtapperIndex"
       class="evaluateItem"
     >
-      <view class="pic-text acea-row row-middle">
-        <view class="pictrue">
-          <image :src="item.avatar" class="image" />
+      <!-- 用户信息头部 -->
+      <view class="user-header">
+        <view class="avatar-box">
+          <image :src="item.avatar" class="avatar" mode="aspectFill" />
         </view>
-        <view class="acea-row row-middle">
+        <view class="user-info">
           <view class="name line1">{{ item.nickname }}</view>
-          <view class="time">{{ item.createTime }} </view>
+          <view class="time">{{ item.createTime }}</view>
         </view>
       </view>
-      <view class="v12-px-4">
-        <view class="v12-secondary-dark-text v12-font-24 attr-bg"> {{ item.sku }}</view>
-        <view class="start" :class="'star' + item.star"></view>
+
+      <!-- 默认标签 -->
+      <view class="tag-row" v-if="item.sku">
+        <view class="default-tag">{{ item.sku }}</view>
       </view>
-      <view class="evaluate-infor v12-font-24">{{ item.comment }}</view>
-      <view class="imgList acea-row">
+
+      <!-- 评分星星 -->
+      <view class="star-row">
+        <u-icon 
+          v-for="n in 5" 
+          :key="n" 
+          :name="n <= item.star ? 'star-fill' : 'star'" 
+          color="#FE5261" 
+          size="28"
+          class="star-icon"
+        ></u-icon>
+      </view>
+
+      <!-- 评论内容 -->
+      <view class="evaluate-infor">{{ item.comment }}</view>
+
+      <!-- 图片/视频列表 -->
+      <view class="imgList">
+        <!-- 视频 -->
         <view v-if="item.video" class="pictrue">
           <view 
             @click="pauseOtherVideo('video' + evaluateWtapperIndex)"  
             v-if="activeVideo !== 'video' + evaluateWtapperIndex" 
             class="play-icon"
-            >
-              <u-icon name="play-right-fill" color="#fff" size="48"></u-icon>
-            </view>
+          >
+            <u-icon name="play-right-fill" color="#fff" size="48"></u-icon>
+          </view>
           <image
             v-if="activeVideo !== 'video' + evaluateWtapperIndex"
             :src="item.video + '?vframe/jpg/offset/1'"
-            class="image pic-img"
+            class="image"
+            mode="aspectFill"
             @click="pauseOtherVideo('video' + evaluateWtapperIndex)"
-          >
-
-          </image>
+          />
           <video
             v-else
             :src="item.video"
             :poster="item.video + '?vframe/jpg/offset/1'"
             controls
             autoplay
-            play-btn-position="center"
-            :id="'video' + evaluateWtapperIndex"
             class="image"
+            :id="'video' + evaluateWtapperIndex"
             @play="pauseOtherVideo('video' + evaluateWtapperIndex)"
           />
         </view>
+        <!-- 图片 -->
         <view
-          v-for="(itemn, eq) in item.picturesArr"
-          :key="eq"
+          v-for="(pic, idx) in item.picturesArr"
+          :key="idx"
           class="pictrue"
         >
-          <image :src="itemn" class="image" @click="previewImage(item.picturesArr, eq)" />
+          <image :src="pic" class="image" mode="aspectFill" @click="previewImage(item.picturesArr, idx)" />
         </view>
       </view>
+
+      <!-- 商家回复 -->
       <view class="reply" v-if="item.merchantReplyContent">
-        <span class="font-color-red">店小二</span>
+        <text class="font-color-red">店小二</text>
         ：{{item.merchantReplyContent}}
       </view>
     </view>
   </view>
 </template>
+
 <script>
 import { dataFormat } from "@/utils";
 
@@ -105,30 +126,122 @@ export default {
   }
 };
 </script>
-<style lang="less" scoped>
 
-.attr-bg{
-  background: rgba(197,39,51,0.1);
-  padding: 7rpx 5px;
-  width: fit-content;
-  border-radius: 12rpx;
-}
-.time{
-  padding: 0 !important;
-}
-.evaluateWtapper .evaluateItem .imgList .pictrue{
-  position: relative;
-  width: 300rpx;
-  height: 300rpx;
-  .play-icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    width: 80rpx;
-    height: 80rpx;
+<style lang="less" scoped>
+.evaluateWtapper {
+  .evaluateItem {
+    margin-bottom: 30rpx;
+    border-bottom: 1px solid #f5f5f5;
+    padding-bottom: 30rpx;
+    &:last-child {
+      border-bottom: none;
+    }
   }
 }
+
+.user-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+  
+  .avatar-box {
+    margin-right: 20rpx;
+    .avatar {
+      width: 70rpx;
+      height: 70rpx;
+      border-radius: 50%;
+    }
+  }
+  
+  .user-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    .name {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 4rpx;
+    }
+    
+    .time {
+      font-size: 22rpx;
+      color: #999;
+    }
+  }
+}
+
+.tag-row {
+  margin-bottom: 12rpx;
+  .default-tag {
+    display: inline-block;
+    background: #FFF0F1;
+    color: #FE5261;
+    font-size: 20rpx;
+    padding: 4rpx 12rpx;
+    border-radius: 6rpx;
+  }
+}
+
+.star-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  .star-icon {
+    margin-right: 4rpx;
+  }
+}
+
+.evaluate-infor {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.6;
+  margin-bottom: 20rpx;
+  text-align: justify;
+}
+
+.imgList {
+  display: flex;
+  flex-wrap: wrap;
+  
+  .pictrue {
+    width: 220rpx;
+    height: 220rpx;
+    margin-right: 15rpx;
+    margin-bottom: 15rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    position: relative;
+    background: #f5f5f5;
+    
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+    
+    .play-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 10;
+    }
+  }
+}
+
+.reply {
+  background: #F5F5F5;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.5;
+}
 </style>