添加评论功能

Yi.Vue3.x.Vant/src/api/commentApi.ts

@@ -0,0 +1,17 @@
+import myaxios from '@/utils/myaxios'
+
+export default {
+    add(data:any) {
+        return myaxios({
+            url: `/comment/add`,
+            method: 'post',
+            data: data
+        })
+    },
+    getListByArticleId(articleId:any) {
+        return myaxios({
+          url: `/comment/GetListByArticleId/${articleId}`,
+          method: 'get',
+        })
+      }
+}

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -1,14 +1,24 @@
 <template>
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-    <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+    <van-list
+      class="list"
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
       <van-row v-for="(item, index) in articleList" :key="index" class="row">
         <van-col span="4" class="leftCol">
-          <AppUserIcon width="3rem" height="3rem" :src="item.user == null ? null : item.user.icon" />
+          <AppUserIcon
+            width="3rem"
+            height="3rem"
+            :src="item.user == null ? null : item.user.icon"
+          />
         </van-col>
 
         <van-col span="14" class="centerTitle">
           <span class="justtitle">{{
-              item.user == null ? "-" : item.user.nick ?? item.user.username
+            item.user == null ? "-" : item.user.nick ?? item.user.username
           }}</span>
           <br />
           <app-createTime :time="item.createTime" />
@@ -20,9 +30,21 @@
 
         <van-col class="rowBody" span="24">{{ item.content }}</van-col>
 
-        <van-col span="8" v-for="(image, imageIndex) in item.images" :key="imageIndex" class="imageCol"
-          @click="openImage(item.images, imageIndex)">
-          <van-image lazy-load fit="cover" width="100%" height="7rem" :src="url + image + '/true'" radius="5" />
+        <van-col
+          span="8"
+          v-for="(image, imageIndex) in item.images"
+          :key="imageIndex"
+          class="imageCol"
+          @click="openImage(item.images, imageIndex)"
+        >
+          <van-image
+            lazy-load
+            fit="cover"
+            width="100%"
+            height="7rem"
+            :src="url + image + '/true'"
+            radius="5"
+          />
           <template v-slot:loading>
             <van-loading type="spinner" size="20" />
           </template>
@@ -31,30 +53,55 @@
         <van-col span="24" class="bottomRow">
           <van-grid direction="horizontal" :column-num="3">
             <van-grid-item icon="share-o" text="分享" />
-            <van-grid-item icon="comment-o" text="评论" @click="commentShow = true" />
-            <van-grid-item icon="good-job-o" :text="`点赞:${item.agreeNum}`" @click="aggreeHand(item.id)" />
+            <van-grid-item
+              icon="comment-o"
+              text="评论"
+              @click="openComment(item.id)"
+            />
+            <van-grid-item
+              icon="good-job-o"
+              :text="`点赞:${item.agreeNum}`"
+              @click="aggreeHand(item.id)"
+            />
           </van-grid>
         </van-col>
       </van-row>
     </van-list>
   </van-pull-refresh>
   <!-- 功能页面 -->
-  <van-action-sheet v-model:show="show" :actions="actions" cancel-text="取消" close-on-click-action />
+  <van-action-sheet
+    v-model:show="show"
+    :actions="actions"
+    cancel-text="取消"
+    close-on-click-action
+  />
 
   <!-- 图片预览 -->
-  <van-image-preview v-model:show="imageShow" :images="imagesPreview" :startPosition="startIndex" @change="onChange"
-    :closeable="true">
+  <van-image-preview
+    v-model:show="imageShow"
+    :images="imagesPreview"
+    :startPosition="startIndex"
+    @change="onChange"
+    :closeable="true"
+  >
     <template v-slot:index>第{{ index + 1 }}页</template>
   </van-image-preview>
 
   <!-- 评论面板 -->
   <van-action-sheet v-model:show="commentShow" title="共10条评论">
-
-    <van-row v-for="i of 10" :key="i" class="commentContent">
+    <van-row v-for="i in commentList" :key="i" class="commentContent">
       <van-col span="4">头像</van-col>
-      <van-col span="16">内容</van-col>
+      <van-col span="16">{{ i.content }}</van-col>
       <van-col span="4">点赞</van-col>
     </van-row>
+
+    <van-cell-group inset>
+      <van-field v-model="commentData.content"  placeholder="请输入评论" >
+        <template #button>
+      <van-button size="small" type="primary" @click="sendComment()">发布</van-button>
+    </template>
+      </van-field>
+    </van-cell-group>
   </van-action-sheet>
 </template>
 
@@ -65,6 +112,7 @@ import AppCreateTime from "@/components/AppCreateTime.vue";
 import AppUserIcon from "@/components/AppUserIcon.vue";
 import articleApi from "@/api/articleApi";
 import agreeApi from "@/api/agreeApi";
+import commentApi from "@/api/commentApi";
 import { ArticleEntity } from "@/type/interface/ArticleEntity";
 const VanImagePreview = ImagePreview.Component;
 const url = `${import.meta.env.VITE_APP_BASE_API}/file/`;
@@ -77,14 +125,34 @@ const data = reactive({
     isDeleted: false,
   },
 });
-const { queryParams } = toRefs(data);
 
+const commentData = reactive({
+  content: "",
+  articleId:0
+});
+const sendComment=()=>{
+ commentData.articleId=openCommentId.value;
+  commentApi.add(commentData).then(()=>{
+    getCommentList(openCommentId.value);
+    commentData.content="";
+  })
+}
+
+const { queryParams } = toRefs(data);
+const {content}=toRefs(commentData);
 const articleList = ref<any[]>([]);
+const commentList = ref<any[]>([]);
 const totol = ref<Number>(0);
 const imageShow = ref(false);
-const commentShow = ref(false)
+const commentShow = ref<any>(false);
 const index = ref(0);
 let imagesPreview = ref<string[]>([]);
+const openCommentId=ref(0);
+const openComment = (id: any) => {
+  commentShow.value = true;
+  openCommentId.value=id;
+  getCommentList(id);
+};
 
 const onChange = (newIndex: any) => {
   index.value = newIndex;
@@ -140,6 +208,12 @@ onMounted(() => {
   // getList();
 });
 
+const getCommentList = (id: any) => {
+  commentApi.getListByArticleId(id).then((response: any) => {
+    commentList.value = response.data;
+  });
+};
+
 const getList = () => {
   articleApi.pageList(queryParams.value).then((response: any) => {
     articleList.value.push(...response.data.data);
@@ -150,16 +224,16 @@ const aggreeHand = (articleId: any) => {
   agreeApi.operate(articleId).then((response: any) => {
     //更改显示的值
     if (response.status) {
-      articleList.value.filter(p => p.id == articleId)[0].agreeNum += 1
+      articleList.value.filter((p) => p.id == articleId)[0].agreeNum += 1;
     } else {
-      articleList.value.filter(p => p.id == articleId)[0].agreeNum -= 1
+      articleList.value.filter((p) => p.id == articleId)[0].agreeNum -= 1;
     }
     Toast({
       message: response.message,
-      position: 'bottom',
-    })
-  })
-}
+      position: "bottom",
+    });
+  });
+};
 </script>
 <style scoped>
 .list {