✨ 商品详情：评论列表

pages/goods/comment/list.vue

@@ -1,104 +1,101 @@
-<!-- 页面  -->
+<!-- 商品评论的分页 -->
 <template>
   <s-layout title="全部评价">
-		<su-tabs :list="state.type" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
+    <su-tabs
+      :list="state.type"
+      :scrollable="false"
+      @change="onTabsChange"
+      :current="state.currentTab"
+    />
+    <!-- 评论列表 -->
     <view class="ss-m-t-20">
-			<view class="list-item" v-for="item in state.pagination.data" :key="item">
+      <view class="list-item" v-for="item in state.pagination.list" :key="item">
-				<comment-item :item="item"></comment-item>
+        <comment-item :item="item" />
       </view>
     </view>
     <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
-		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+    <!-- 下拉 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
         contentdown: '上拉加载更多',
-      }" @tap="loadmore" />
+      }"
+      @tap="loadMore"
+    />
   </s-layout>
 </template>
 
 <script setup>
-	import sheep from '@/sheep';
+  import CommentApi from '@/sheep/api/product/comment';
-	import {
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-		onLoad,
+  import { reactive } from 'vue';
-		onReachBottom
-	} from '@dcloudio/uni-app';
-	import {
-		computed,
-		reactive
-	} from 'vue';
   import _ from 'lodash';
   import commentItem from '../components/detail/comment-item.vue';
 
-	const pagination = {
-		data: [],
-		current_page: 1,
-		total: 1,
-		last_page: 1,
-	};
   const state = reactive({
-		list: [],
+    id: 0, // 商品 SPU 编号
-		type: [],
+    type: [
-		currentTab: 0,
+      { type: 0, name: '全部' },
+      { type: 1, name: '好评' },
+      { type: 2, name: '中评' },
+      { type: 3, name: '差评' },
+    ],
+    currentTab: 0, // 选中的 TAB
+    loadStatus: '',
     pagination: {
-			data: [],
+      list: [],
-			current_page: 1,
+      total: 0,
-			total: 1,
+      pageNo: 1,
-			last_page: 1,
+      pageSize: 1,
     },
-		commentId: 0,
-		code: 0,
   });
+
   // 切换选项卡
   function onTabsChange(e) {
-		state.pagination = pagination
     state.currentTab = e.index;
-		state.code = e.code;
+    // 加载列表
-		getList(state.commentId, e.code);
+    state.pagination.pageNo = 1;
+    state.pagination.list = [];
+    state.pagination.total = 0;
+    getList();
   }
-	async function getType(id) {
+
-		const {
+  async function getList() {
-			error,
+    // 加载列表
-			data
-		} = await sheep.$api.goods.getType(id);
-		if (error === 0) {
-			console.log(data)
-			// state.type = data;
-			state.type = [{code:0,name:'全部'},{code:1,name:'好评'},{code:2,name:'中评'},{code:3,name:'差评'}];
-		}
-	}
-	async function getList(id, code=0, page = 1, list_rows = 6) {
     state.loadStatus = 'loading';
-		let res = await sheep.$api.goods.comment2(id, {
+    let res = await CommentApi.getCommentPage(
-			type: code,
+      state.id,
-			pageSize: list_rows,
+      state.pagination.pageNo,
-			pageNo: page,
+      state.pagination.pageSize,
-		});
+      state.type[state.currentTab].type,
-		console.log(res);
+    );
-		if (res.code === 0) {
+    if (res.code !== 0) {
-			let orderList = _.concat(state.pagination.data, res.data.list);
+      return;
-			state.pagination = {
-				...res.data,
-				data: orderList,
-			};
-			if (state.pagination.current_page < state.pagination.last_page) {
-				state.loadStatus = 'more';
-			} else {
-				state.loadStatus = 'noMore';
-			}
     }
+    // 合并列表
+    state.pagination.list = _.concat(state.pagination.list, res.data.list);
+    state.pagination.total = res.data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
   }
+
   // 加载更多
-	function loadmore() {
+  function loadMore() {
-		if (state.loadStatus !== 'noMore') {
+    if (state.loadStatus === 'noMore') {
-			getList(state.commentId, state.code, state.pagination.current_page + 1);
+      return;
     }
+    state.pagination.pageNo++;
+    getList();
   }
+
   onLoad((options) => {
-		state.commentId = options.id;
+    state.id = options.id;
-		getType(state.commentId);
+    getList();
-		getList(state.commentId);
   });
+
   // 上拉加载更多
   onReachBottom(() => {
-		loadmore();
+    loadMore();
   });
 </script>
 

pages/goods/components/detail/comment-item.vue

@@ -1,81 +1,80 @@
+<!-- 商品评论项 -->
 <template>
   <view>
+    <!-- 用户评论 -->
     <view class="user ss-flex ss-m-b-14">
       <view class="ss-m-r-20 ss-flex">
-        <image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image>
+        <image class="avatar" :src="item.userAvatar"></image>
-      </view>
-      <view class="nickname ss-m-r-20">
-        {{ item.userNickname }}
       </view>
+      <view class="nickname ss-m-r-20">{{ item.userNickname }}</view>
       <view class="">
         <uni-rate :readonly="true" v-model="item.scores" size="18" />
       </view>
     </view>
-    <view class="content">
+    <view class="content"> {{ item.content }} </view>
-      {{ item.content }}
-    </view>
     <view class="ss-m-t-24" v-if="item.picUrls?.length">
       <scroll-view class="scroll-box" scroll-x scroll-anchoring>
         <view class="ss-flex">
-          <view v-for="(item, index) in item.picUrls" :key="item" class="ss-m-r-10">
+          <view v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="ss-m-r-10">
-            <su-image class="content-img" isPreview :previewList="state.commentImages" :current="index" :src="item"
+            <su-image
-              :height="120" :width="120" mode="aspectFill"></su-image>
+              class="content-img"
+              isPreview
+              :previewList="item.picUrls"
+              :current="index"
+              :src="picUrl"
+              :height="120"
+              :width="120"
+              mode="aspectFill"
+            />
           </view>
         </view>
       </scroll-view>
     </view>
-    <view class="ss-m-t-20 reply-box" v-if="item.reply_time">
+    <!-- 商家回复 -->
+    <view class="ss-m-t-20 reply-box" v-if="item.replyTime">
       <view class="reply-title">商家回复：</view>
-      <view class="reply-content">{{ item.reply_content }}</view>
+      <view class="reply-content">{{ item.replyContent }}</view>
     </view>
   </view>
 </template>
 
 <script setup>
-import sheep from '@/sheep';
+  const props = defineProps({
-import { reactive } from 'vue';
-const props = defineProps({
     item: {
       type: Object,
-    default() { },
+      default() {},
     },
-});
+  });
-const state = reactive({
-  commentImages: [],
-});
-props.item.images?.forEach((i) => {
-  state.commentImages.push(sheep.$url.cdn(i));
-});
 </script>
 
 <style lang="scss" scoped>
-.avatar {
+  .avatar {
     width: 52rpx;
     height: 52rpx;
     border-radius: 50%;
-}
+  }
 
-.nickname {
+  .nickname {
     font-size: 26rpx;
     font-weight: 500;
     color: #999999;
-}
+  }
 
-.content {
+  .content {
     width: 636rpx;
     font-size: 26rpx;
     font-weight: 400;
     color: #333333;
-}
+  }
 
-.reply-box {
+  .reply-box {
     position: relative;
     background: #f8f8f8;
     border-radius: 8rpx;
     padding: 16rpx;
-}
+  }
 
-.reply-title {
+  .reply-title {
     position: absolute;
     left: 16rpx;
     top: 16rpx;
@@ -83,13 +82,13 @@ props.item.images?.forEach((i) => {
     font-size: 26rpx;
     line-height: 40rpx;
     color: #333333;
-}
+  }
 
-.reply-content {
+  .reply-content {
     text-indent: 128rpx;
     font-weight: 400;
     font-size: 26rpx;
     line-height: 40rpx;
     color: #333333;
-}
+  }
 </style>

pages/goods/components/detail/detail-comment-card.vue

@@ -1,3 +1,4 @@
+<!-- 商品评论的卡片 -->
 <template>
   <view class="detail-comment-card bg-white">
     <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
@@ -12,19 +13,20 @@
         v-if="state.commentList.length > 0"
       >
         <button class="ss-reset-button more-btn">查看全部</button>
-        <text class="cicon-forward"></text>
+        <text class="cicon-forward" />
       </view>
     </view>
+    <!-- 评论列表 -->
     <view class="card-content">
       <view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
-        <comment-item :item="item"></comment-item>
+        <comment-item :item="item" />
       </view>
       <s-empty
         v-if="state.commentList.length === 0"
         paddingTop="0"
         icon="/static/comment-empty.png"
         text="期待您的第一个评价"
-      ></s-empty>
+      />
     </view>
   </view>
 </template>
@@ -32,25 +34,27 @@
 <script setup>
   import { reactive, onBeforeMount } from 'vue';
   import sheep from '@/sheep';
+  import CommentApi from '@/sheep/api/product/comment';
   import commentItem from './comment-item.vue';
+
   const props = defineProps({
     goodsId: {
       type: [Number, String],
       default: 0,
     },
   });
+
   const state = reactive({
-    commentList: [],
+    commentList: [], // 评论列表，只展示最近的 3 条
-    total: 0,
+    total: 0, // 总评论数
   });
+
   async function getComment(id) {
-    const { data } = await sheep.$api.goods.comment(id, {
+    const { data } = await CommentApi.getCommentPage(id, 1, 3, 0);
-      list_rows: 3,
+    state.commentList = data.list;
-    });  
+    state.total = data.total;
-	 const {data:datas} = await sheep.$api.goods.comment2(id);
-    state.commentList = data;
-    state.total = datas.total;
   }
+
   onBeforeMount(() => {
     getComment(props.goodsId);
   });

pages/goods/index.vue

@@ -34,8 +34,7 @@
 						<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
 							<div class="tag-content">
 								<view class="tag-box ss-flex">
-									<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos"
+									<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity">
-										:key="promos.id" @tap="onActivity">
 										{{ promos.title }}
 									</view>
 								</view>
@@ -71,10 +70,10 @@
 				<!-- 详情 -->
 				<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
 
-				<!-- 活动跳转 -->
+				<!-- TODO 芋艿：活动跳转 -->
-				<detail-activity-tip v-if="state.goodsInfo.activities" :data="state.goodsInfo"></detail-activity-tip>
+				<detail-activity-tip v-if="state.goodsInfo.activities" :data="state.goodsInfo" />
 
-				<!-- 详情tabbar -->
+				<!-- 详情 tabbar -->
 				<detail-tabbar v-model="state.goodsInfo">
 					<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
 						<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">

sheep/api/goods.js

@@ -49,16 +49,6 @@ export default {
         showError: false,
       },
     }),
-  comment2: (id, params = {pageNo:1,pageSize:10,type:0}) =>
-    request2({
-      url: 'product/comment/page?spuId='+id,
-      method: 'GET',
-      params,
-      custom: {
-        showLoading: false,
-        showError: false,
-      },
-    }),
   // 商品评价类型
   getType: (id) =>
     request({

sheep/api/product/comment.js

@@ -0,0 +1,18 @@
+import request from '@/sheep/request';
+
+const CommentApi = {
+  // 获得商品评价分页
+  getCommentPage: (spuId, pageNo, pageSize, type) => {
+    return request({
+      url: '/app-api/product/comment/page',
+      method: 'GET',
+      params: {
+        spuId,
+        pageNo,
+        pageSize,
+        type
+      },
+    });
+  },
+};
+export default CommentApi;

sheep/hooks/useGoods.js

@@ -157,6 +157,16 @@ function getDayjsTime(time) {
   }
 }
 
+/**
+ * 将分转成元
+ *
+ * @param price 分，例如说 100 分
+ * @returns {string} 元，例如说 1.00 元
+ */
+export function fen2yuan(price) {
+  return (price / 100.0).toFixed(2)
+}
+
 /**
  * 从商品 SKU 数组中，转换出商品属性的数组
  *