前端联调接口

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

@@ -1,5 +1,5 @@
 <template>
-  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+  
     <van-list
       class="list"
       v-model:loading="loading"
@@ -7,7 +7,8 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-      <van-row v-for="item in list" class="row">
+
+      <van-row v-for="(item,index) in articleList" :key="index" class="row">
         <van-col span="4" class="leftCol">
           <van-image
             round
@@ -20,7 +21,7 @@
         <van-col span="14" class="centerTitle">
        <span class="justtitle">   大白</span>
           <br />
-          <span class="subtitle">一小时前</span>
+        <app-createTime :time="item.createTime"/>
         </van-col>
 
         <van-col span="6" class="down">
@@ -28,21 +29,19 @@
         </van-col>
 
         <van-col class="rowBody" span="24"
-          >这是第:{{
-            item
-          }}个,不要害怕重新开始，因为这一次你不是从头开始，而是从经验开始</van-col
+          >{{item.content}}</van-col
         >
 
         <van-col
           span="8"
-          v-for="item of 9"
-          :key="item"
+          v-for="(image,imageIndex) in item.images"
+          :key="imageIndex"
           class="imageCol"
-          @click="imageShow = true"
+          @click="openImage(item.images)"
           ><van-image
             width="100%"
             height="7rem"
-            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            :src="url+image"
             radius="5"
           />
         </van-col>
@@ -56,7 +55,7 @@
         </van-col>
       </van-row>
     </van-list>
-  </van-pull-refresh>
+
 
   <!-- 功能页面 -->
   <van-action-sheet
@@ -69,27 +68,40 @@
   <!-- 图片预览 -->
   <van-image-preview
     v-model:show="imageShow"
-    :images="images"
+    :images="imagesPreview"
     @change="onChange"
     :closeable=true
   >
-    <template v-slot:index>第{{ index }}页</template>
+    <template v-slot:index>第{{ index+1 }}页</template>
   </van-image-preview>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref ,onMounted,reactive, toRefs} from "vue";
 import { ImagePreview, Toast } from "vant";
-
+import AppCreateTime from '@/components/AppCreateTime.vue'
+import articleApi from "@/api/articleApi.ts";
+import { ArticleEntity } from "@/type/interface/ArticleEntity.ts";
 const VanImagePreview = ImagePreview.Component;
+const url=`${import.meta.env.VITE_APP_BASE_API}/file/image/`
+const data=reactive({
 
+  queryParams:{
+    pageNum: 1,
+    pageSize: 10,
+    // dictName: undefined,
+    // dictType: undefined,
+    isDeleted: false
+  }
+});
+const {queryParams} =toRefs(data);
 
+const articleList=ref<ArticleEntity[]>([]);
+const totol=ref<Number>(0);
 const imageShow = ref(false);
 const index = ref(0);
-const images = [
-  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
-  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
-];
+let imagesPreview =ref<string[]>([]);
+
 const onChange = (newIndex: any) => {
   index.value = newIndex;
 };
@@ -105,24 +117,40 @@ const actions = [
   { name: "将TA拉黑" },
   { name: "举报"}
 ];
-const onLoad = () => {
-  setTimeout(() => {
-    if (refreshing.value) {
-      list.value = [];
-      refreshing.value = false;
-    }
+// const onLoad = () => {
+ 
+//     if (refreshing.value) {
+//       articleList.value = [];
+//       refreshing.value = false;
+//       queryParams.value.pageNum=0;
+//     }
 
-    for (let i = 0; i < 10; i++) {
-      list.value.push(list.value.length + 1);
-    }
-    loading.value = false;
+//     queryParams.value.pageNum+=1;
+//     getList();
 
-    if (list.value.length >= 40) {
-      finished.value = true;
-    }
-  }, 100);
-};
+//     loading.value = false;
 
+//     if (articleList.value.length >= 40) {
+//       finished.value = true;
+//     }
+
+// };
+const onLoad = async() => {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(async() => {
+        console.log("执行")
+        // await getList();
+        // queryParams.value.pageNum+=1
+        // 加载状态结束
+        loading.value = false;
+
+        // 数据全部加载完成
+        if (list.value.length >= 4000) {
+          finished.value = true;
+        }
+      }, 1000);
+    };
 const onRefresh = () => {
   // 清空列表数据
   finished.value = false;
@@ -130,8 +158,23 @@ const onRefresh = () => {
   // 重新加载数据
   // 将 loading 设置为 true，表示处于加载状态
   loading.value = true;
-  onLoad();
+  // onLoad();
 };
+const openImage=(imagesUrl :string[])=>{
+  imagesPreview.value=imagesUrl.map(i=>url+i);
+  imageShow.value=true;
+}
+onMounted(()=>{
+  articleList.value=[];
+  getList();
+})
+
+const getList=()=>{
+  articleApi.pageList(queryParams.value).then((response:any)=>{
+    articleList.value.push(...response.data.data as ArticleEntity[]);
+    totol.value=response.data.totol;
+  })
+}
 </script>
 <style scoped>
 .list {

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

@@ -3,7 +3,14 @@
 
   <van-row class="test ">
     <van-col span="24">
-      这里是广场页面
+      <van-list
+  v-model:loading="loading"
+  :finished="finished"
+  finished-text="没有更多了"
+  @load="onLoad"
+>
+  <van-cell v-for="item in list" :key="item" :title="item" />
+</van-list>
     </van-col>
 
   </van-row>
@@ -11,4 +18,31 @@
   <van-col span="24"></van-col>
 </template>
 <style scoped>
-</style>
+</style>
+<script lang="ts" setup>
+import {ref} from 'vue'
+
+  const list = ref([]);
+    const loading = ref(false);
+    const finished = ref(false);
+
+    const onLoad = () => {
+      console.log("执行")
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 100; i++) {
+          list.value.push(list.value.length + 1);
+        }
+
+        // 加载状态结束
+        loading.value = false;
+
+        // 数据全部加载完成
+        if (list.value.length >= 1000) {
+          finished.value = true;
+        }
+      }, 1);
+    };
+
+</script>

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

@@ -1,95 +1,126 @@
 <template>
-<transition name="van-slide-right">
-    <div v-show="visible" >
-        <van-sticky>
-            <van-row class="head-row">
-                <van-col span="3">
-                    <router-link to="/recommend">
-                        <van-icon name="arrow-left" size="1.5rem" />
-                    </router-link>
-                </van-col>
-                <van-col span="18"><span>发图文</span></van-col>
-                <van-col span="3">发布</van-col>
-            </van-row>
-        </van-sticky>
-
-
-
-        <van-cell-group>
-            <van-field rows="5" autosize type="textarea" v-model="value" label-width="0" :show-word-limit="true"
-                maxlength="500" placeholder="每一天，都是为了下一天" />
-        </van-cell-group>
-        <van-row class="body-row">
-            <van-col span="10">
-                <van-icon name="share-o" size="1.5rem" /><span>发布到去其他</span>
-            </van-col>
-            <van-col span="4"></van-col>
-            <van-col span="10"><span>选择更多人看到</span>
-                <van-icon name="arrow" size="1.2rem" />
-            </van-col>
+  <transition name="van-slide-right">
+    <div v-show="visible">
+      <van-sticky>
+        <van-row class="head-row">
+          <van-col span="3">
+            <router-link to="/recommend">
+              <van-icon name="arrow-left" size="1.5rem" />
+            </router-link>
+          </van-col>
+          <van-col span="18"><span>发图文</span></van-col>
+          <van-col span="3" @click="send">发布</van-col>
         </van-row>
+      </van-sticky>
 
+      <van-cell-group>
+        <van-field
+          rows="5"
+          autosize
+          type="textarea"
+          v-model="content"
+          label-width="0"
+          :show-word-limit="true"
+          maxlength="500"
+          placeholder="每一天，都是为了下一天"
+        />
+      </van-cell-group>
+      <van-row class="body-row">
+        <van-col span="10">
+          <van-icon name="share-o" size="1.5rem" /><span>发布到去其他</span>
+        </van-col>
+        <van-col span="4"></van-col>
+        <van-col span="10"
+          ><span>选择更多人看到</span>
+          <van-icon name="arrow" size="1.2rem" />
+        </van-col>
+      </van-row>
 
-        <van-divider />
-        <van-row>
-            <van-col class="img-col" span="24">
-                <van-uploader v-model="fileList" multiple />
-            </van-col>
-        </van-row>
+      <van-divider />
+      <van-row>
+        <van-col class="img-col" span="24">
+          <van-uploader :after-read="afterRead" v-model="fileList" multiple />
+        </van-col>
+      </van-row>
     </div>
-
-</transition>
-
-
+  </transition>
 </template>
 <script setup lang="ts">
-import { ref,onMounted } from 'vue'
-const value = ref<string>("")
-const fileList = ref([
-]);
-const visible=ref<boolean>(false)
+import { ref, onMounted, reactive, toRefs } from "vue";
+import { ArticleEntity } from "@/type/interface/ArticleEntity.ts";
+import fileApi from "@/api/fileApi.ts";
+import articleApi from "@/api/articleApi.ts";
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const form = reactive<ArticleEntity>({
+  title: "",
+  content: "",
+  images: [],
+  isDeleted: false,
+});
 
+const { images, content } = toRefs(form);
+const fileList = ref([]);
+const visible = ref<boolean>(false);
 onMounted(() => {
-   visible.value=true;
-})
+  visible.value = true;
+});
+const afterRead = (file: any) => {
+  file.status = "uploading";
+  file.message = "上传中...";
+  var formData = new FormData();
+  formData.append("file", file.file);
+  fileApi.upload("image", formData)
+    .then((response: any) => {
+      images.value.push(response.data);
+      file.status = "done";
+      file.message = "成功";
+    })
+};
+
+const send = () => {
+    articleApi.add(form).then((response:any)=>{
+      router.push({ path: '/recommend'});
+    })
+
+};
 </script>
 <style scoped>
 .head-row {
-    background-color: #F8F8F8;
+  background-color: #f8f8f8;
 
-    padding: 2rem 1rem 1.5rem 1rem;
+  padding: 2rem 1rem 1.5rem 1rem;
 }
 
 .head-row span {
-    font-size: large;
+  font-size: large;
 }
 
 .van-field-5-label {
-    display: none;
+  display: none;
 }
 
 .body-row {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 .preview-cover {
-    position: absolute;
-    bottom: 0;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 4px;
-    color: #fff;
-    font-size: 12px;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .van-uploader {
-
-    margin: 0 1.2rem 0 1.2rem;
+  margin: 0 1.2rem 0 1.2rem;
 }
 
 .img-col {
-    text-align: left;
+  text-align: left;
 }
 </style>