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

pages/product/comment.vue

@@ -1,7 +1,14 @@
 <template>
   <view class="comment">
+    <u-navbar
+      title="商品评价"
+      :fixed="true"
+      :placeholder="true"
+      :border="false"
+      :auto-back="true"
+    ></u-navbar>
     <view class="top-tab">
-      <view class="tab-btn" :v-if="commentDetail">
+      <view class="tab-btn" v-if="commentDetail">
         <view @click="select(0)" :class="{ cur: selectIndex == 0 }">全部</view>
         <view @click="select(1)" :class="{ cur: selectIndex == 1 }">好评{{ commentDetail.good }}</view>
         <view @click="select(2)" :class="{ cur: selectIndex == 2 }">中评{{ commentDetail.moderate }}</view>
@@ -9,36 +16,42 @@
         <view @click="select(4)" :class="{ cur: selectIndex == 4 }">有图{{ commentDetail.haveImage }}</view>
       </view>
     </view>
-    <!-- 评价 -->
-    <div class="goodsBoxOver">
-      <div class="scoll-page">
+    <view class="goodsBoxOver">
+      <view class="scoll-page">
         <view class="eva-section">
-          <div class="empty" v-if="commDetail.length < 1">
-            <view>
-              <u-empty mode="message" text="赞无评论"></u-empty>
-            </view>
-          </div>
+          <view class="empty" v-if="commDetail.length < 1">
+            <u-empty mode="message" text="暂无评论"></u-empty>
+          </view>
           <view class="eva-box" v-for="(item, index) in commDetail" :key="index">
             <view class="section-info">
-              <image class="portrait" :src="item.memberProfile || userImage" mode="aspectFit"></image>
+              <image class="portrait" :src="item.memberProfile || userImage" mode="aspectFill"></image>
               <view class="star-content">
-                <text class="name">{{noPassByName(item.memberName) }}</text>
+                <text class="name">{{ noPassByName(item.memberName) }}</text>
                 <text class="time">{{ item.createTime }}</text>
               </view>
               <view class="stars">
-                <text :class="{ star: item.deliveryScore > 0 }"></text>
-                <text :class="{ star: item.deliveryScore > 1 }"></text>
-                <text :class="{ star: item.deliveryScore > 2 }"></text>
-                <text :class="{ star: item.deliveryScore > 3 }"></text>
-                <text :class="{ star: item.deliveryScore > 4 }"></text>
+                <text
+                  v-for="starIndex in 5"
+                  :key="starIndex"
+                  class="star-item"
+                  :class="{ active: commentScore(item) >= starIndex }"
+                ></text>
               </view>
             </view>
             <view class="section-contant">
-              <div class="content">{{ item.content }}</div>
-              <view class="img">
-                <!-- 循环出用户评价的图片 -->
-                <u-image width="140rpx" height="140rpx" v-if="item.images" v-for="(img, i) in splitImg(item.images)" :src="img" :key="i" @click="preview(splitImg(item.images), i)">
-                </u-image>
+              <view class="content">{{ item.content }}</view>
+              <view class="img-list" v-if="splitImg(item.images)">
+                <u-image
+                  v-for="(img, i) in splitImg(item.images)"
+                  :key="i"
+                  class="comment-img"
+                  width="160rpx"
+                  height="160rpx"
+                  mode="aspectFill"
+                  border-radius="12"
+                  :src="img"
+                  @click="preview(splitImg(item.images), i)"
+                ></u-image>
               </view>
               <view class="bot">
                 <text class="attr">{{ item.goodsName }} - {{ gradeList[item.grade] }}</text>
@@ -46,35 +59,41 @@
             </view>
             <view class="commentStyle" v-if="item.reply">
               商家回复：
-              <span class="addCommentSpan">{{ item.reply }}</span>
-              <view class="img">
-                <!-- 循环出商家回复评价的图片 -->
-                <u-image width="140rpx" height="140rpx" v-if="item.replyImage" v-for="(replyImg, replyIndex) in splitImg(item.replyImage)" :src="replyImg" :key="replyIndex"
-                  @click="preview(splitImg( item.replyImage), index)">
-                </u-image>
+              <text class="addCommentSpan">{{ item.reply }}</text>
+              <view class="img-list" v-if="splitImg(item.replyImage)">
+                <u-image
+                  v-for="(replyImg, replyIndex) in splitImg(item.replyImage)"
+                  :key="replyIndex"
+                  class="comment-img"
+                  width="160rpx"
+                  height="160rpx"
+                  mode="aspectFill"
+                  border-radius="12"
+                  :src="replyImg"
+                  @click="preview(splitImg(item.replyImage), replyIndex)"
+                ></u-image>
               </view>
             </view>
           </view>
           <u-loadmore bg-color="transparent" style="margin:40rpx 0" :status="status" @loadmore="loadmore()" icon-type="iconType" />
         </view>
-      </div>
-    </div>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-// import { getGoodsDetail } from '@/api/goods.js';
 import * as membersApi from "@/api/members.js";
 import configs from '@/config/config'
 export default {
   data() {
     return {
       configs,
-      status: "loadmore", //底部刷新状态
-      userImage:configs.defaultUserPhoto,
-      commentDetail: "", //评价详情
-      selectIndex: "0", //检索条件
-      params: {  // 评论分页提交数据
+      status: "loadmore",
+      userImage: configs.defaultUserPhoto,
+      commentDetail: "",
+      selectIndex: "0",
+      params: {
         pageNumber: 1,
         pageSize: 10,
         grade: "",
@@ -85,10 +104,9 @@ export default {
         WORSE: "差评",
         HAVEIMAGE: "有图",
       },
-      // 评论详情
       commDetail: [],
-      dataTotal: 0, //评论的总total数量
-      opid: "", //上级传参id
+      dataTotal: 0,
+      opid: "",
     };
   },
   async onLoad(options) {
@@ -96,19 +114,17 @@ export default {
     this.getGoodsCommentsNum(options.id);
     this.opid = options.id;
   },
-  
-  /**
-   * 触底加载
-   */
+
   onReachBottom() {
     this.params.pageNumber++;
     this.getGoodsCommentsFun(this.opid);
   },
 
   methods: {
-    /**
-     * 切割图像
-     */
+    commentScore(item) {
+      return item.descriptionScore || item.deliveryScore || 0;
+    },
+
     splitImg(val) {
       if (val && val.split(",")) {
         return val.split(",");
@@ -119,12 +135,8 @@ export default {
       }
     },
 
-    /**
-     * 获取商品评论
-     */
     getGoodsCommentsFun(id) {
       this.status = "loading";
-      // getGoodsComments
       membersApi.getGoodsComments(id, this.params).then((res) => {
         if (
           res.data.result.records == [] ||
@@ -140,9 +152,6 @@ export default {
       });
     },
 
-    /**
-     * 获取商品评论数
-     */
     getGoodsCommentsNum(id) {
       membersApi.getGoodsCommentsCount(id).then((res) => {
         if (res.statusCode === 200) {
@@ -151,9 +160,6 @@ export default {
       });
     },
 
-    /**
-     * 顶部筛选条件
-     */
     select(index) {
       this.params = {
         pageNumber: 1,
@@ -172,27 +178,23 @@ export default {
           grade: "",
         };
       }
-      // 重新加载评论
       this.getGoodsCommentsFun(this.opid);
     },
 
-    /**
-     * 点击图片放大或保存
-     */
     preview(urls, index) {
       uni.previewImage({
         current: index,
         urls: urls,
         longPressActions: {
           itemList: ["保存图片"],
-          success: function (data) {
+          success: function () {
             uni.showToast({
               title: "保存成功",
               duration: 2000,
               icon: "none",
             });
           },
-          fail: function (err) {
+          fail: function () {
             uni.showToast({
               title: "保存失败",
               duration: 2000,
@@ -207,74 +209,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.commentStyle {
-  margin-top: 16rpx;
-  padding: 14rpx 26rpx;
-  background: #f5f5f5;
-  border-radius: 6px;
-  font-size: 22rpx;
-  font-weight: 700;
-  text-align: left;
-  line-height: 40rpx;
-}
-
-.addCommentSpan {
-  color: $u-tips-color !important;
-  padding-left: 20rpx;
-}
-.img {
-  display: flex;
-  flex-wrap: wrap;
-  /* height: 140rpx; */
-  overflow: hidden;
-
-  image {
-    width: 166rpx;
-    height: 166rpx;
-    margin: 0 15rpx 15rpx 0;
-
-    &:nth-of-type(3n + 0) {
-      margin: 0 0 15rpx 0;
-    }
-  }
-}
-
-.goodsBoxOver {
-  overflow-y: scroll;
-}
-
 page {
   background: #f7f7f7;
 }
+
 .comment {
+  min-height: 100vh;
   color: #333;
   background: #f7f7f7;
 
-  overflow: hidden;
-
   .top-tab {
+    margin: 0 20rpx 20rpx;
     background: #fff;
-    margin-bottom: 10rpx;
     border-radius: 20rpx;
-    display: flex;
-    flex-direction: column;
-    padding: 0 30rpx 0 30rpx;
+    padding: 24rpx 24rpx 4rpx;
     font-size: 24rpx;
 
     .tab-btn {
-      margin-top: 20rpx;
       display: flex;
       flex-wrap: wrap;
+      gap: 20rpx;
 
       view {
         min-width: 118rpx;
         text-align: center;
         height: 50rpx;
         line-height: 50rpx;
-        padding: 0 10rpx;
+        padding: 0 20rpx;
         background: #f8f8fe;
         border-radius: 25rpx;
-        margin: 0 20rpx 30rpx 0;
 
         &.cur {
           background: $aider-light-color;
@@ -285,92 +248,117 @@ page {
   }
 
   .eva-section {
-    padding: 20rpx 0;
+    padding: 0 20rpx 20rpx;
 
     .eva-box {
-      padding: 40rpx;
-      margin-bottom: 10rpx;
+      padding: 32rpx 30rpx;
+      margin-bottom: 20rpx;
       background: #fff;
       border-radius: 20rpx;
-      /* star */
-      .star-content {
-        display: flex;
-        flex-direction: column;
-
-        view {
-          flex: 1;
-          display: flex;
-          align-items: center;
-        }
-
-        .time {
-          font-size: 24rpx;
-          color: #999;
-        }
-      }
 
       .section-info {
         display: flex;
+        align-items: flex-start;
 
-        .stars {
-          flex: 1;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-
-          .star {
-            width: 30rpx;
-            height: 30rpx;
-            background: url("/static/star.png");
-            background-size: 100%;
-          }
-        }
         .portrait {
           flex-shrink: 0;
           width: 80rpx;
           height: 80rpx;
-          border-radius: 100px;
+          border-radius: 50%;
           margin-right: 20rpx;
         }
-      }
-      .section-contant {
-        display: flex;
-        flex-direction: column;
 
-        .content {
-          font-size: 24rpx;
-          line-height: 46rpx;
-          font-weight: 400;
-          color: $font-color-dark;
-          color: #333;
-          padding: 26rpx 0;
+        .star-content {
+          flex: 1;
+          min-width: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding-top: 4rpx;
+
+          .name {
+            font-size: 28rpx;
+            color: #333;
+            line-height: 1.4;
+          }
+
+          .time {
+            margin-top: 8rpx;
+            font-size: 24rpx;
+            color: #999;
+            line-height: 1.4;
+          }
         }
 
-        .img {
+        .stars {
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          gap: 6rpx;
+          padding-top: 8rpx;
+
+          .star-item {
+            width: 28rpx;
+            height: 28rpx;
+            background: url("/static/star.png");
+            background-size: 100%;
+            opacity: 0.25;
+
+            &.active {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .section-contant {
+        .content {
+          font-size: 26rpx;
+          line-height: 1.6;
+          color: #333;
+          padding: 20rpx 0 12rpx;
+        }
+
+        .img-list {
           display: flex;
           flex-wrap: wrap;
-          /* height: 140rpx; */
-          overflow: hidden;
           gap: 16rpx;
+          margin-bottom: 8rpx;
         }
 
         .bot {
-          display: flex;
-          justify-content: space-between;
-          font-size: $font-sm;
-          color: $font-color-light;
-          margin-top: 20rpx;
+          margin-top: 8rpx;
+          padding-top: 8rpx;
 
-       
+          .attr {
+            font-size: 22rpx;
+            color: #999;
+            line-height: 1.5;
+          }
         }
       }
     }
   }
 }
 
+.commentStyle {
+  margin-top: 20rpx;
+  padding: 20rpx 24rpx;
+  background: #f5f5f5;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.addCommentSpan {
+  color: $u-tips-color !important;
+  font-weight: 400;
+}
+
 .empty {
-  padding-top: 300rpx;
-  color: #999999;
+  padding: 200rpx 0;
+  color: #999;
   text-align: center;
 }
 </style>