refactor: 更新多个页面的样式和结构

pages/product/product/evaluation/-evaluation.vue

@@ -2,27 +2,45 @@
   <view class="evaluate-box">
     <view class="eva-section" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
       <view class="e-header">
-
         <view class="evaluate-title">评价</view>
         <text class="evaluate-num">{{ commDetail.total || '0' }}+</text>
         <text class="tip">好评率 {{ grade || '100' }}%</text>
       </view>
-      <div v-if="commDetail && commDetail.records && commDetail.records.length > 0">
-        <view class="eva-box" v-for="(commItem,commIndex) in commDetail.records.slice(0,2)" :key="commIndex">
+      <view v-if="commDetail && commDetail.records && commDetail.records.length">
+        <view class="eva-box" v-for="(commItem, commIndex) in commDetail.records.slice(0, 2)" :key="commIndex">
           <view class="section-info">
-            <u-avatar mode="circle" size="60" class="portrait" :src="commItem.memberProfile"></u-avatar>
+            <u-avatar
+              mode="circle"
+              size="40"
+              class="portrait"
+              :src="commItem.memberProfile"
+            ></u-avatar>
             <view class="star-con">
-              <text class="name">{{noPassByName(commItem.memberName) }}</text>
+              <text class="name">{{ noPassByName(commItem.memberName) }}</text>
             </view>
           </view>
           <view class="section-contant">
-            <u-read-more ref="uReadMore" :color="lightColor">
-              <rich-text @load="parseLoaded" :nodes="commItem.content " class="con"></rich-text>
+            <u-read-more
+              ref="uReadMore"
+              :color="lightColor"
+              text-indent="0"
+              :show-height="120"
+            >
+              <rich-text @load="parseLoaded(commIndex)" :nodes="commItem.content" class="con"></rich-text>
             </u-read-more>
-            <scroll-view scroll-x class="scroll-x" v-if="commItem.image">
-              <view class="img">
-                <u-image border-radius="12" class="commImg" width="160rpx" height="160rpx" v-for="(item, index) in commItem.image.split(',')" :src="item" :key="index"
-                  @click.stop="previewImg(commItem.image, index)"></u-image>
+            <scroll-view scroll-x class="scroll-x" v-if="commentImages(commItem).length">
+              <view class="img-list">
+                <u-image
+                  border-radius="12"
+                  class="commImg"
+                  width="160rpx"
+                  height="160rpx"
+                  mode="aspectFill"
+                  v-for="(item, index) in commentImages(commItem)"
+                  :src="item"
+                  :key="index"
+                  @click.stop="previewImg(commentImages(commItem), index)"
+                ></u-image>
               </view>
             </scroll-view>
             <view class="bot">
@@ -30,14 +48,17 @@
             </view>
           </view>
         </view>
-      </div>
+      </view>
 
-      <div v-else class="goodsNoMore">
+      <view v-else class="goodsNoMore">
         <u-empty text="该商品暂无评论" mode="message"></u-empty>
-      </div>
+      </view>
     </view>
-    <!-- 查看全部评价按钮 -->
-    <view v-if="commDetail && commDetail.records && commDetail.records.length > 0" class="eva-section-btn" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
+    <view
+      v-if="commDetail && commDetail.records && commDetail.records.length"
+      class="eva-section-btn"
+      @click="toComment(goodsDetail.goodsId, goodsDetail.grade)"
+    >
       <text class="btn-text">查看全部评价</text>
     </view>
   </view>
@@ -49,10 +70,8 @@ export default {
   data() {
     return {
       lightColor: this.$lightColor,
-      // 评论集合
       commDetail: [],
       grade: "",
-      // 评论分页提交数据
       params: {
         pageNumber: 1,
         pageSize: 10,
@@ -62,7 +81,7 @@ export default {
   },
   props: {
     goodsDetail: {
-      default: {},
+      default: () => ({}),
       type: Object,
     },
   },
@@ -70,40 +89,47 @@ export default {
   watch: {
     goodsDetail: {
       handler(val) {
-        this.grade = val.grade;
-        this.getGoodsCommentsMethods();
+        if (val && val.goodsId) {
+          this.grade = val.grade;
+          this.getGoodsCommentsMethods();
+        }
       },
       deep: true,
       immediate: true,
     },
   },
-  mounted() {
-  
-  },
+
   methods: {
-    parseLoaded() {
-      this.$refs.uReadMore.init();
+    commentImages(item) {
+      const images = item.images || item.image;
+      if (!images) return [];
+      return typeof images === "string" ? images.split(",").filter(Boolean) : images;
     },
 
-    // 获取商品评论
-    getGoodsCommentsMethods() {
-      API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
-        (res) => {
-          this.commDetail = res.data.result;
-        }
-      );
+    parseLoaded(index) {
+      this.$nextTick(() => {
+        const refs = this.$refs.uReadMore;
+        const target = Array.isArray(refs) ? refs[index] : refs;
+        target && target.init && target.init();
+      });
     },
+
+    getGoodsCommentsMethods() {
+      if (!this.goodsDetail.goodsId) return;
+      API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then((res) => {
+        this.commDetail = res.data.result;
+      });
+    },
+
     toComment(id, grade) {
       uni.navigateTo({
         url: `/pages/product/comment?id=${id}&grade=${grade}`,
       });
     },
-    /**
-     * 点击图片放大或保存
-     */
-    previewImg(url, index) {
+
+    previewImg(urls, index) {
       uni.previewImage({
-        urls: url,
+        urls,
         indicator: "number",
         current: index,
       });
@@ -114,33 +140,31 @@ export default {
 
 <style lang="scss" scoped>
 @import "../product.scss";
-.commImg {
-  margin-right: 12rpx;
-  margin-bottom: 10rpx;
-  display: inline-block;
-}
+
 .name {
   color: #262626;
-  font-size: 22rpx;
+  font-size: 26rpx;
+  line-height: 1.4;
 }
+
 .eva-section-btn {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 40rpx 40rpx 50rpx;
-  margin: 2px 0 20rpx 0;
+  padding: 24rpx 0 40rpx;
   background: #fff;
 
   .btn-text {
-    width: 200rpx;
-    height: 50rpx;
-    font-size: 22rpx;
-    line-height: 46rpx;
+    min-width: 200rpx;
+    height: 56rpx;
+    padding: 0 24rpx;
+    font-size: 24rpx;
+    line-height: 52rpx;
     text-align: center;
     color: #262626;
     border: 2rpx solid #ededed;
     box-sizing: border-box;
-    border-radius: 30px;
+    border-radius: 28rpx;
   }
 }
 
@@ -149,30 +173,21 @@ export default {
   text-align: center;
   color: $u-tips-color;
 }
-/* 评价 */
+
 .eva-section {
   display: flex;
   flex-direction: column;
-
   background: #fff;
 
   .e-header {
     display: flex;
-    align-items: baseline;
+    align-items: center;
 
-    font-size: $font-sm + 2rpx;
-    color: $font-color-light;
-    > .evaluate-num {
+    .evaluate-num {
       margin-left: 10rpx;
       font-size: 24rpx;
       color: #333;
     }
-    .tit {
-      font-size: 32rpx;
-      color: $font-color-dark;
-      font-weight: 500;
-      margin: 0 4rpx;
-    }
 
     .tip {
       flex: 1;
@@ -180,55 +195,69 @@ export default {
       color: #8c8c8c;
       font-size: 24rpx;
     }
-
-    .icon-you {
-      margin-left: 10rpx;
-    }
   }
 }
-.scroll-x {
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
 
-  overflow-x: auto;
+.scroll-x {
+  width: 100%;
+  white-space: nowrap;
 }
+
 .eva-box {
-  padding: 36rpx 0 30rpx 0;
+  padding: 28rpx 0;
   border-bottom: 2rpx solid #f2f2f2;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
   .section-info {
     display: flex;
     align-items: center;
 
     .portrait {
       flex-shrink: 0;
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 100px;
-      margin-right: 20rpx;
+      margin-right: 16rpx;
     }
 
-    > .star-con > .name {
-      margin-left: 6rpx;
+    .star-con {
+      flex: 1;
+      min-width: 0;
     }
   }
 
   .section-contant {
-    display: flex;
-    flex-direction: column;
+    width: 100%;
+    margin-top: 16rpx;
+
+    :deep(.u-read-more__content) {
+      text-indent: 0 !important;
+    }
 
     .con {
       font-size: 26rpx;
-      line-height: 46rpx;
-      color: $font-color-dark;
+      line-height: 1.6;
       color: #333;
-      padding: 20rpx 0;
     }
+
+    .img-list {
+      display: inline-flex;
+      gap: 12rpx;
+      padding: 16rpx 0 4rpx;
+    }
+
+    .commImg {
+      flex-shrink: 0;
+    }
+
     .bot {
-      display: flex;
-      justify-content: space-between;
-      font-size: 22rpx;
-      color: #999;
-      margin-top: 20rpx;
+      margin-top: 12rpx;
+
+      .attr {
+        font-size: 22rpx;
+        color: #999;
+        line-height: 1.5;
+      }
     }
   }
 }