·修改部分页面数据冗余

pages/product/comment.vue

@@ -1,11 +1,7 @@
 <template>
   <view class="comment">
-    <!-- <view class="status_bar" -->
-    <!--</view> -->
     <view class="top-tab">
-      <!-- <view class="good-comment">商品好评率{{ grade || "100" }}%</view> -->
       <view class="tab-btn" :v-if="commentDetail">
-        <!-- <view v-for="item in selectObj" :key="item.id" @click="select(item.id)" :class="{cur:selectIndex===item.id}">{{item.text}}</view> -->
         <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>
@@ -13,25 +9,19 @@
         <view @click="select(4)" :class="{ cur: selectIndex == 4 }">有图{{ commentDetail.haveImage }}</view>
       </view>
     </view>
-
     <!-- 评价 -->
-
     <div class="goodsBoxOver">
-      <scroll-view :style="{ height: DivHeight }" lower-threshold="150" @scrolltolower="loadmore()" scroll-anchoring enableBackToTop="true" scroll-y class="scoll-page">
+      <div class="scoll-page">
         <view class="eva-section">
-          <div class="nodata" v-if="commDetail.length < 1">
+          <div class="empty" v-if="commDetail.length < 1">
             <view>
-              <image style="height: 240rpx; width: 320rpx" src="/static/nodata.png" alt="" />
-            </view>
-            <view>
-              <p>暂无评价</p>
+              <u-empty mode="message" text="赞无评论"></u-empty>
             </view>
           </div>
-
           <view class="eva-box" v-for="(item, index) in commDetail" :key="index">
             <view class="section-info">
               <image class="portrait" :src="item.memberProfile || '/static/missing-face.png'" mode="aspectFill"></image>
-              <view class="star-con">
+              <view class="star-content">
                 <text class="name">{{ item.memberName | noPassByName }}</text>
                 <text class="time">{{ item.createTime }}</text>
               </view>
@@ -44,48 +34,30 @@
               </view>
             </view>
             <view class="section-contant">
-              <div class="con">{{ item.content }}</div>
+              <div class="content">{{ item.content }}</div>
               <view class="img">
-
+                <!-- 循环出用户评价的图片 -->
                 <u-image width="140rpx" height="140rpx" v-if="item.image" v-for="(img, i) in splitImg(item.image)" :src="img" :key="i" @click="preview(splitImg(item.image), i)">
                 </u-image>
               </view>
               <view class="bot">
                 <text class="attr">{{ item.goodsName }} - {{ gradeList[item.grade] }}</text>
-                <!-- <text class="zan" :class="{cur:item.isZan}" @click="dianzan(index)">{{item.zan}}</text> -->
               </view>
             </view>
-            <view class="addComment commentStyle" v-if="item.additional_comment">
-              <div>
-                <b>追加评价:</b>
-                <span class="addCommentSpan">{{
-                  item.additional_comment.content
-                }}</span>
-                <view class="img">
-                  <image v-for="(item, addIndex) in item.additional_comment.images" :src="item" :key="addIndex" @click="preview(item)"></image>
-                </view>
-              </div>
-            </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(replyImg.image)" :src="replyImg" :key="replyIndex"
+                <!-- 循环出商家回复评价的图片 -->
+                <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>
               </view>
             </view>
-            <view class="commentStyle" v-if="item.additional_comment && item.additional_comment.reply">
-              商家回复:
-              <span class="addCommentSpan">{{
-                item.additional_comment.reply.content
-              }}</span>
-            </view>
           </view>
+          <u-loadmore bg-color="transparent" style="margin:40rpx 0" :status="status" @loadmore="loadmore()" icon-type="iconType" />
         </view>
-
-        <!-- <u-loadmore :status="status" @loadmore="loadmore()" icon-type="iconType" /> -->
-      </scroll-view>
+      </div>
     </div>
   </view>
 </template>
@@ -93,23 +65,14 @@
 <script>
 // import { getGoodsDetail } from '@/api/goods.js';
 import * as membersApi from "@/api/members.js";
+
 export default {
   data() {
     return {
-      header: {
-        top: 0,
-        height: 50,
-      },
-      DivHeight: "",
-      status: "loadmore",
-      commentObj: {},
-      selectObj: [],
-      commentDetail: "",
+      status: "loadmore", //底部刷新状态
+      commentDetail: "", //评价详情
       selectIndex: "0", //检索条件
-      imgUrl: "",
-      previewImgFlag: false,
-      // 评论分页提交数据
-      params: {
+      params: {  // 评论分页提交数据
         pageNumber: 1,
         pageSize: 10,
         grade: "",
@@ -122,21 +85,28 @@ export default {
       },
       // 评论详情
       commDetail: [],
-      dataTotal: 0,
-
-      opid: "",
-      grade: "100%",
+      dataTotal: 0, //评论的总total数量
+      opid: "", //上级传参id
     };
   },
   async onLoad(options) {
-    this.grade = options.grade;
-
     this.getGoodsCommentsFun(options.id);
     this.getGoodsCommentsNum(options.id);
     this.opid = options.id;
   },
-  mounted() {},
+  
+  /**
+   * 触底加载
+   */
+  onReachBottom() {
+    this.params.pageNumber++;
+    this.getGoodsCommentsFun(this.opid);
+  },
+
   methods: {
+    /**
+     * 切割图像
+     */
     splitImg(val) {
       if (val && val.split(",")) {
         return val.split(",");
@@ -146,12 +116,10 @@ export default {
         return false;
       }
     },
-    loadmore() {
-      this.params.pageNumber++;
-      this.getGoodsCommentsFun(this.opid);
-    },
 
-    // 获取商品评论
+    /**
+     * 获取商品评论
+     */
     getGoodsCommentsFun(id) {
       this.status = "loading";
       // getGoodsComments
@@ -165,13 +133,14 @@ export default {
           return false;
         }
         this.commDetail = this.commDetail.concat(res.data.result.records);
-
-        console.log(this.commDetail);
         this.dataTotal = res.data.result.total;
         this.status = "loadmore";
       });
     },
 
+    /**
+     * 获取商品评论数
+     */
     getGoodsCommentsNum(id) {
       membersApi.getGoodsCommentsCount(id).then((res) => {
         if (res.statusCode === 200) {
@@ -179,10 +148,12 @@ export default {
         }
       });
     },
+
+    /**
+     * 顶部筛选条件
+     */
     select(index) {
-      //顶部筛选条件
       this.selectIndex = index;
-      console.log(this.selectIndex);
       this.params.grade = ["", "GOOD", "MODERATE", "WORSE", ""][
         this.selectIndex
       ];
@@ -197,27 +168,14 @@ export default {
           grade: "",
         };
       }
-
+      // 重新加载评论
       this.getGoodsCommentsFun(this.opid);
     },
-    // 返回
-    back() {
-      uni.navigateTo({
-        url: "./product?id=" + this.opid,
-      });
-    },
-    // 点赞
-    dianzan(index) {
-      if (this.commentObj.item[index].isZan) {
-        this.commentObj.item[index].zan--;
-      } else {
-        this.commentObj.item[index].zan++;
-      }
-      this.commentObj.item[index].isZan = !this.commentObj.item[index].isZan;
-    },
-    // 预览
+
+    /**
+     * 点击图片放大或保存
+     */
     preview(urls, index) {
-      console.log(urls);
       uni.previewImage({
         current: index,
         urls: urls,
@@ -240,10 +198,6 @@ export default {
         },
       });
     },
-    close() {
-      this.previewImgFlag = false;
-      this.imgUrl = "";
-    },
   },
 };
 </script>
@@ -285,123 +239,14 @@ export default {
   overflow-y: scroll;
 }
 
-.headerBox {
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 26rpx;
-  font-size: 34rpx;
-
-  .left,
-  .right {
-    position: absolute;
-    width: max-content;
-    height: max-content;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  .left {
-    float: left;
-    top: 0;
-    bottom: 0;
-    left: 20rpx;
-  }
-
-  .right {
-    float: right;
-    right: 20rpx;
-  }
-}
-
 page {
   background: #f7f7f7;
 }
-
-.preview-img {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  /* background: rgba(0,0,0,0.5); */
-  background-repeat: no-repeat;
-  background-color: rgba(0, 0, 0, 0.5);
-  background-position: center;
-  background-size: 90% auto;
-  z-index: 1000;
-
-  .close {
-    position: absolute;
-    width: 100rpx;
-    height: 100rpx;
-    text-align: center;
-    line-break: 50rpx;
-    /* background: rgba(0,0,0,0.5); */
-    font-size: 80rpx;
-    color: #fff;
-    top: 100rpx;
-  }
-
-  image {
-    /* width: 100%; */
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-// .goodsBoxOver{
-// 	height: calc(100vh - 200rpx) ;
-// }
-
 .comment {
   color: #333;
   background: #f7f7f7;
 
   overflow: hidden;
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #fff;
-    z-index: 999;
-    display: flex;
-    justify-content: space-between;
-    height: 90rpx;
-    line-height: 90rpx;
-    font-size: 30rpx;
-    transition: all 0.5s;
-
-    .back {
-      width: 90rpx;
-      background: url(/static/search/back.png);
-      background-size: 100%;
-    }
-
-    .share {
-      width: 90rpx;
-      background: url(/static/search/back.png);
-      background-size: 100%;
-    }
-  }
-
-  .header-line {
-    height: 2px;
-    background: #f2f2f2;
-    position: fixed;
-    top: 90rpx;
-    left: 0;
-    right: 0;
-    z-index: 999;
-  }
-
-  .header-line1 {
-    height: 20rpx;
-    position: static;
-  }
 
   .top-tab {
     background: #fff;
@@ -412,11 +257,6 @@ page {
     padding: 0 30rpx 0 30rpx;
     font-size: 24rpx;
 
-    .good-comment {
-      text-align: right;
-      color: #a5a5a5;
-    }
-
     .tab-btn {
       margin-top: 20rpx;
       display: flex;
@@ -449,7 +289,7 @@ page {
       background: #fff;
       border-radius: 20rpx;
       /* star */
-      .star-con {
+      .star-content {
         display: flex;
         flex-direction: column;
 
@@ -493,7 +333,7 @@ page {
         display: flex;
         flex-direction: column;
 
-        .con {
+        .content {
           font-size: 24rpx;
           line-height: 46rpx;
           font-weight: 400;
@@ -519,7 +359,7 @@ page {
           color: $font-color-light;
           margin-top: 20rpx;
 
-          .zan {
+          .good {
             color: #333;
             position: relative;
 
@@ -541,31 +381,13 @@ page {
           }
         }
       }
-
-      .reply {
-        padding: 16rpx 30rpx;
-        background: #f8f8fe;
-        font-size: 24rpx;
-        border-radius: 5px;
-        margin-top: 20rpx;
-
-        text {
-          color: #999;
-          line-height: 48rpx;
-        }
-      }
     }
   }
 }
 
-.nodata {
+.empty {
   padding-top: 300rpx;
   color: #999999;
   text-align: center;
-
-  img {
-    width: 346rpx;
-    height: 304rpx;
-  }
 }
 </style>