1

src/pages/assistingAgriculture/commentList/card.vue

 <template>
-  <div class="card">
+  <div class="card" v-for="(item, index) in commentData" :key="index">
     <div class="card-top">
       <div class="avatar flex-align-center">
-        <img src="/static/assistingAgriculture/comment/1.png" alt="" />
+        <img :src="item.avatar" alt="" />
         <div class="name">
-          <p>不爱吃鱼的小猫咪</p>
-          <div class="flex-align-center">
-            <img src="/src/static/assistingAgriculture/comment/emoji.png" alt="" />
-            5.0分 好评
-          </div>
+          <p>{{ item.nickName }}</p>
+          <div class="grade flex-align-center">5.0分</div>
         </div>
       </div>
-      <div class="info">2024-08-03发表于贵州 ｜ 朋友出游 ｜ 2024-07-22出发</div>
+      <div class="info">{{ item.createTime[0] }}发表</div>
     </div>
     <div class="card-content">
-      <div class="text-wrap" :style="showMore ? 'max-height:none;' : ''">
-        跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游
-        <div class="more" v-if="!showMore" @click="showMore = true">全文</div>
+      <div class="text-wrap">
+        {{ item.evaluation }}
       </div>
       <div class="img-wrap">
-        <wd-img
-          v-for="v in Math.floor(Math.random() * 6 + 1)"
-          :key="v"
-          :src="`/src/static/assistingAgriculture/comment/${v}.png`"
-          enable-preview
-        />
+        <wd-img v-for="(item, index) in item.images" :key="index" :src="item" enable-preview />
       </div>
     </div>
   </div>
@@ -33,6 +24,12 @@
 <script setup>
 import { ref } from 'vue';
 const showMore = ref(false);
+const props = defineProps({
+  commentData: {
+    type: Array,
+    default: () => [],
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -40,6 +37,7 @@ const showMore = ref(false);
   background-color: #fff;
   border-radius: 16rpx;
   padding: 20rpx;
+  margin-bottom: 10rpx;
   .card-top {
     padding-bottom: 20rpx;
     border-bottom: 2rpx solid #f3f3f3;
@@ -55,23 +53,23 @@ const showMore = ref(false);
           font-size: 28rpx;
           color: #3d3d3d;
         }
-        div {
+        .grade {
           margin-top: 18rpx;
           font-size: 16rpx;
           background: rgba(253, 223, 109, 0.1686);
           line-height: 24rpx;
           color: #e1961d;
-          width: 116rpx;
+          // width: 116rpx;
           border-radius: 200rpx;
-          padding-left: 32rpx;
+          // padding-left: 32rpx;
           box-sizing: border-box;
           position: relative;
-          img {
-            height: 24rpx;
-            position: absolute;
-            left: 0;
-            width: 24rpx;
-          }
+          // img {
+          //   height: 24rpx;
+          //   position: absolute;
+          //   left: 0;
+          //   width: 24rpx;
+          // }
         }
       }
     }
@@ -88,7 +86,7 @@ const showMore = ref(false);
       line-height: normal;
       color: #3d3d3d;
       overflow: hidden;
-      max-height: 150rpx;
+      // max-height: 150rpx;
       position: relative;
       .more {
         position: absolute;

src/pages/assistingAgriculture/commentList/index.vue

@@ -2,37 +2,52 @@
   <div class="comment-list">
     <div class="top-bar flex-align-center">
       <wd-icon name="thin-arrow-left"></wd-icon>
-      <wd-search hide-cancel placeholder="点评关键词/特色" placeholder-left />
+      <wd-search @search="search" hide-cancel placeholder="点评关键词/特色" placeholder-left />
     </div>
-    <scroll-view class="content" :scroll-y="true">
+    <scroll-view @scrolltolower="scrolltolower" class="content" :scroll-y="true">
       <div class="filter-box">
         <div class="score-sort flex-between">
           <div class="score">
-            <span class="num">6.9</span>
-            <span class="t1">超棒</span>
-            <span class="t2">527条</span>
-            <wd-icon name="check-outline" class="t1"></wd-icon>
+            <span class="num">{{ topData.score }}</span>
+            <!-- <span class="t1">超棒</span> -->
+            <span class="t2">{{ topData.count }}条</span>
+            <!-- <wd-icon name="check-outline" class="t1"></wd-icon> -->
           </div>
-          <div class="sort">
+          <!-- <div class="sort">
             <span class="active">推荐排序</span>
             ｜
             <span>重新点评</span>
-          </div>
+          </div> -->
         </div>
         <div class="type flex-between">
-          <p class="active">全部</p>
-          <p v-for="(v, i) in commentTypeList" :key="i">{{ v.text }}({{ v.value }})</p>
+          <p @tap="choice(-1)" :class="{ active: select === -1 }">全部</p>
+          <p
+            @tap="choice(i, v.type)"
+            :class="{ active: select === i }"
+            v-for="(v, i) in commentTypeList"
+            :key="i"
+          >
+            {{ v.text }}({{ v.value }})
+          </p>
         </div>
-        <div class="tags" :style="{ 'max-height': showMoreTag ? '600px' : '90rpx' }">
-          <div class="item" v-for="(v, i) in tagList" :key="i">{{ v.text }}({{ v.value }})</div>
-          <div class="more" @click="showMoreTag = !showMoreTag">
+        <div class="tags">
+          <div class="item" v-for="(v, i) in tagList" :key="i">
+            {{ v.evaluation }}({{ v.count }})
+          </div>
+          <!-- <div class="more" @click="showMoreTag = !showMoreTag">
             更多
             <wd-icon name="arrow-down" :class="{ rotate: showMoreTag }"></wd-icon>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="card-list">
-        <card v-for="v in 10" :key="v" />
+        <card :commentData="commentData" />
+        <view
+          style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
+          v-if="show"
+        >
+          没有更多啦~
+        </view>
       </div>
     </scroll-view>
     <div class="back">
@@ -44,91 +59,120 @@
 <script setup>
 import { ref } from 'vue';
 import card from './card.vue';
-import { getCommentList } from '../../../api/packageDetail';
-const commentTypeList = [
+import { getCommentList, getEvalStatis } from '../../../api/packageDetail';
+const commentTypeList = reactive([
   {
     text: '图/视频',
-    value: 183,
+    value: 0,
+    type: 'img',
   },
   {
     text: '追评',
-    value: 5,
+    value: 0,
+    type: 'append',
   },
   {
     text: '中差评',
-    value: 5,
+    value: 0,
+    type: 'diff',
   },
   {
     text: '好评',
-    value: 514,
-  },
-];
-const tagList = [
-  {
-    text: '餐食棒',
-    value: 44,
-  },
-  {
-    text: '导游负责耐心',
-    value: 44,
-  },
-  {
-    text: '车辆条件好',
-    value: 514,
-  },
-  {
-    text: '餐食棒',
-    value: 44,
-  },
-
-  {
-    text: '餐食棒',
-    value: 44,
-  },
-  {
-    text: '导游负责耐心',
-    value: 44,
-  },
-  {
-    text: '行程安排合理',
-    value: 5,
-  },
-  {
-    text: '车辆条件好',
-    value: 514,
-  },
-  {
-    text: '行程安排合理',
-    value: 5,
+    value: 0,
+    type: 'good',
   },
-
-  {
-    text: '导游负责耐心',
-    value: 44,
-  },
-  {
-    text: '行程安排合理',
-    value: 5,
-  },
-  {
-    text: '车辆条件好',
-    value: 514,
-  },
-];
+]);
+const imgUrl = import.meta.env.VITE_APP_IMG_URL;
+const tagList = ref([]);
+const commentData = ref([]);
 const commentParameters = {
   shopId: '1818876196597334017',
+  prodId: '43828',
   current: 1,
   size: 10,
 };
+const show = ref(false);
+let total;
+const select = ref(-1);
+const topData = ref({});
+
 onLoad((options) => {
+  getEvalStatisFn();
   getCommentListFn();
 });
+const search = (e) => {
+  reset();
+  commentParameters.evaluation = e.value;
+  getCommentListFn();
+};
+// 数据重置
+const reset = () => {
+  commentParameters.current = 1;
+  commentData.value = [];
+  show.value = false;
+};
+const scrolltolower = () => {
+  console.log('触底加载触底加载触底加载');
+  if (commentData.value.length < total) {
+    commentParameters.current++;
+    getCommentListFn();
+    return;
+  }
+  show.value = true;
+};
+// 触底加载
+onReachBottom(() => {
+  if (cardData2.value.length + 5 < total) {
+    listParams.current++;
+    getMerchantListPaging();
+  }
+});
 const showMoreTag = ref(false);
+// 评论列表数量统计和相同好评最多的评语
+const getEvalStatisFn = () => {
+  getEvalStatis({ prodId: commentParameters.prodId }).then((res) => {
+    console.log('评论数量统计和相同好评最多的评语', res);
+    res.data.score = res.data.score.toFixed(1);
+    topData.value = res.data;
+    tagList.value = res.data.evals;
+    commentTypeList[0].value = res.data.imgCount;
+    commentTypeList[1].value = res.data.append;
+    commentTypeList[2].value = res.data.diffCount;
+    commentTypeList[3].value = res.data.goodCount;
+  });
+};
+// 评论列表
 const getCommentListFn = () => {
+  xma.showLoading({
+    title: '加载中...',
+    mask: true,
+  });
   getCommentList(commentParameters).then((res) => {
-    console.log('打印评论', res);
+    xma.hideLoading();
+    total = res.data.total;
+    res.data.records.forEach((v) => {
+      v.avatar = imgUrl + v.avatar;
+      v.prodPic = imgUrl + v.prodPic;
+      v.createTime = v.createTime.split(' ');
+      if (v.images) {
+        v.images = v.images.split(',').map((item) => {
+          item = imgUrl + item;
+          return item;
+        });
+      }
+      // console.log('v.images', v.images);
+    });
+    console.log('res.data.records', res.data.records);
+    commentData.value = [...commentData.value, ...res.data.records];
   });
 };
+// tabs选择
+const choice = (i, type) => {
+  select.value = i;
+  reset();
+  commentParameters.type = type;
+  getCommentListFn();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -188,6 +232,7 @@ uni-page-body {
       .type {
         font-size: 22rpx;
         color: #767676;
+        box-sizing: border-box;
         .active {
           color: #3d3d3d;
           font-size: 24rpx;
@@ -212,7 +257,7 @@ uni-page-body {
         flex-wrap: wrap;
         gap: 10rpx;
         position: relative;
-        max-height: 80rpx;
+        // max-height: 80rpx;
         overflow: hidden;
         transition: all 0.3s;
         .item {

src/pages/index/index.vue

@@ -14,7 +14,7 @@
             v-for="(item, index) in classificationT"
             :key="index"
           >
-            <image class="imgs" :src="item.icon" mode="widthFix" />
+            <image class="imgs" :src="item.icon" />
             <text class="introduce">{{ item.categoryName }}</text>
           </view>
         </view>
@@ -25,7 +25,7 @@
             v-for="(item, index) in classificationB"
             :key="index"
           >
-            <image class="imgs" :src="item.icon" mode="widthFix" />
+            <image class="imgs" :src="item.icon" />
             <text class="introduce">{{ item.categoryName }}</text>
           </view>
         </view>
@@ -564,7 +564,7 @@ page {
         display: flex;
         justify-content: space-evenly;
         margin-top: 32rpx;
-        align-items: center;
+        align-items: flex-end;
         .choice {
           display: flex;
           flex-direction: column;
@@ -577,6 +577,7 @@ page {
             Source Han Sans;
           .imgs {
             width: 88rpx;
+            height: 88rpx;
           }
         }
       }
@@ -584,7 +585,7 @@ page {
         display: flex;
         justify-content: space-evenly;
         margin-top: 34rpx;
-        align-items: center;
+        align-items: flex-end;
         .choice {
           display: flex;
           flex-direction: column;
@@ -597,6 +598,7 @@ page {
             Source Han Sans;
           .imgs {
             width: 68rpx;
+            height: 68rpx;
             margin-bottom: 8rpx;
           }
         }

vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
-  }, 
+  },
   server: {
     open: true,
     // 代理配置