点赞功能接口开发

Yi.Vue3.x.Vant/src/view/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="div-top">
-    <span class="title">大白荟</span>
+    <span class="title">意框架</span>
     <br />
     <span class="subtitle">有幸相遇、不负未来</span>
   </div>
@@ -19,7 +19,7 @@
       type="password"
       placeholder="请输入密码"
     />
-    <van-button type="primary" @click="login">进入大白荟</van-button>
+    <van-button type="primary" @click="login">进入意框架</van-button>
     <p>其他方式登录<van-icon name="arrow" /></p>
 
     <van-row class="row-bottom" style="margin-top: 6rem">

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

@@ -1,6 +1,5 @@
 <template>
-
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
       class="list"
       v-model:loading="loading"
@@ -10,11 +9,17 @@
     >
       <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)}}</span>
+          <span class="justtitle">{{
+            item.user == null ? "-" : item.user.nick ?? item.user.username
+          }}</span>
           <br />
           <app-createTime :time="item.createTime" />
         </van-col>
@@ -25,29 +30,29 @@
 
         <van-col class="rowBody" span="24">{{ item.content }}</van-col>
 
-     <van-col
+        <van-col
           span="8"
           v-for="(image, imageIndex) in item.images"
           :key="imageIndex"
           class="imageCol"
-          @click="openImage(item.images,imageIndex)"
+          @click="openImage(item.images, imageIndex)"
           ><van-image
-          lazy-load
-          fit="cover"
+            lazy-load
+            fit="cover"
             width="100%"
             height="7rem"
-            :src="url + image+'/true'"
+            :src="url + image + '/true'"
             radius="5"
           />
           <template v-slot:loading>
-    <van-loading type="spinner" size="20" />
-  </template>
-        </van-col> 
+            <van-loading type="spinner" size="20" />
+          </template>
+        </van-col>
 
         <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="评论" />
+            <van-grid-item icon="comment-o" text="评论" @click="commentShow=true" />
             <van-grid-item icon="good-job-o" text="点赞" />
           </van-grid>
         </van-col>
@@ -72,13 +77,23 @@
   >
     <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-col span="4">头像</van-col>
+<van-col span="16">内容</van-col>
+<van-col span="4">点赞</van-col>
+      </van-row>
+  </van-action-sheet>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, reactive, toRefs } from "vue";
 import { ImagePreview, Toast } from "vant";
 import AppCreateTime from "@/components/AppCreateTime.vue";
-import   AppUserIcon from "@/components/AppUserIcon.vue";
+import AppUserIcon from "@/components/AppUserIcon.vue";
 import articleApi from "@/api/articleApi";
 import { ArticleEntity } from "@/type/interface/ArticleEntity";
 const VanImagePreview = ImagePreview.Component;
@@ -97,6 +112,7 @@ const { queryParams } = toRefs(data);
 const articleList = ref<any[]>([]);
 const totol = ref<Number>(0);
 const imageShow = ref(false);
+const commentShow=ref(false)
 const index = ref(0);
 let imagesPreview = ref<string[]>([]);
 
@@ -108,7 +124,7 @@ const list = ref<Number[]>([]);
 const loading = ref(false);
 const finished = ref(false);
 const refreshing = ref(false);
-const startIndex=ref(0)
+const startIndex = ref(0);
 const show = ref(false);
 const actions = [{ name: "取消关注" }, { name: "将TA拉黑" }, { name: "举报" }];
 
@@ -125,7 +141,7 @@ const onLoad = async () => {
       finished.value = true;
     } else {
       console.log("执行");
-      articleList.value.push(...(response.data.data));
+      articleList.value.push(...response.data.data);
       totol.value = response.data.totol;
       queryParams.value.pageNum += 1;
     }
@@ -144,9 +160,9 @@ const onRefresh = () => {
   queryParams.value.pageNum = 1;
   onLoad();
 };
-const openImage = (imagesUrl: string[],imageIndex:any) => {
+const openImage = (imagesUrl: string[], imageIndex: any) => {
   imagesPreview.value = imagesUrl.map((i) => url + i);
-  startIndex.value=imageIndex;
+  startIndex.value = imageIndex;
   imageShow.value = true;
 };
 onMounted(() => {
@@ -156,15 +172,14 @@ onMounted(() => {
 
 const getList = () => {
   articleApi.pageList(queryParams.value).then((response: any) => {
-    articleList.value.push(...(response.data.data));
+    articleList.value.push(...response.data.data);
     totol.value = response.data.totol;
   });
 };
 </script>
 <style scoped>
 .list {
-  background-color: #F4F4F4;
-
+  background-color: #f4f4f4;
 }
 .row {
   background-color: white;
@@ -210,4 +225,7 @@ const getList = () => {
   text-align: right;
   padding-right: 0.5rem;
 }
+.commentContent {
+margin-bottom: 4rem;
+}
 </style>

Yi.Vue3.x.Vant/src/view/send/imageText.vue

@@ -9,7 +9,12 @@
             </router-link>
           </van-col>
           <van-col span="18"><span>发图文</span></van-col>
-          <van-col span="3" @click="send" :style="{color: isSend?'#FE70A0':'#979797'}">发布</van-col>
+          <van-col
+            span="3"
+            @click="send"
+            :style="{ color: isSend ? '#FE70A0' : '#979797' }"
+            >发布</van-col
+          >
         </van-row>
       </van-sticky>
 
@@ -39,28 +44,33 @@
       <van-divider />
       <van-row>
         <van-col class="img-col" span="24">
-          <van-uploader  accept="image/*" :after-read="afterRead" v-model="fileList" multiple />
+          <van-uploader
+            accept="image/*"
+            :after-read="afterRead"
+            v-model="fileList"
+            multiple
+          />
         </van-col>
       </van-row>
     </div>
   </transition>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive, toRefs,watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 import { ArticleEntity } from "@/type/interface/ArticleEntity";
 import fileApi from "@/api/fileApi";
 import articleApi from "@/api/articleApi";
 import { Toast } from "vant";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
 const router = useRouter();
 const form = reactive<any>({
   title: "",
   content: "",
   images: [],
-  isDeleted: false
+  isDeleted: false,
 });
 
-const isSend=ref(false)
+const isSend = ref(false);
 const { images, content } = toRefs(form);
 const fileList = ref([]);
 const visible = ref<boolean>(false);
@@ -72,60 +82,64 @@ const afterRead = (file: any) => {
   file.message = "上传中...";
   var formData = new FormData();
   //一个文件
-  if(file.length==undefined)
-  {
+  if (file.length == undefined) {
     formData.append("file", file.file);
+  } else {
+    //多个文件
+    file.forEach((f: any) => {
+      formData.append("file", f.file);
+      f.status = "uploading";
+      f.message = "上传中...";
+    });
+    Toast({
+      message: "全部文件正在上传",
+      position: "bottom",
+    });
   }
-else
-{
-//多个文件
-file.forEach((f:any) => {
-  formData.append("file", f.file);
-});
-Toast({
-        message: "全部文件正在上传",
-        position: "bottom",
-      });
-}
-  fileApi.upload("image", formData)
-    .then((response: any) => {
-      images.value.push(...response.data);
+
+  fileApi.upload("image", formData).then((response: any) => {
+    images.value.push(...response.data);
+
+    if (file.length == undefined) {
       file.status = "done";
       file.message = "成功";
+    } else {
+      //多个文件
+      file.forEach((f: any) => {
+        f.status = "done";
+        f.message = "成功";
+      });
       Toast({
-        message: "文件上传成功",
+        message: "全部文件上传成功",
         position: "bottom",
       });
-    })
+    }
+  });
 };
 
 const send = () => {
-  if(form.content.length<5)
-  {
+  if (form.content.length < 5) {
     Toast({
-        message: "请输入至少5个字符",
-        position: "bottom",
-      });
+      message: "请输入至少5个字符",
+      position: "bottom",
+    });
+  } else {
+    articleApi.add(form).then((response: any) => {
+      router.push({ path: "/recommend" });
+    });
   }
-  else
-  {
-    articleApi.add(form).then((response:any)=>{
-      router.push({ path: '/recommend'});
-    })
-  }
-
 };
 
-watch(()=>form.content,(newValue,oldValue)=>{
- if(newValue.length<5)
- {
-  isSend.value=false
- }
- else
- {
-  isSend.value=true
- }
-})
+watch(
+  () => form.content,
+  (newValue, oldValue) => {
+    if (newValue.length < 5) {
+      isSend.value = false;
+    } else {
+      isSend.value = true;
+    }
+  }
+);
 </script>
 <style scoped>
 .head-row {
@@ -165,8 +179,7 @@ watch(()=>form.content,(newValue,oldValue)=>{
 .img-col {
   text-align: left;
 }
-.right-span
-{
+.right-span {
   color: #979797;
 }
 </style>