登录页面搭建

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

@@ -1,3 +1,34 @@
 <template>
-    登录页面
+    <div class="div-top">
+        你好
+   </div>
+   <div class="div-bottom">
+      <!-- <van-field v-model="value" label="文本" placeholder="请输入用户名" /> -->
+   </div>
 </template>
+<script setup lang="ts">
+import {ref} from 'vue';
+const value=ref("")
+
+</script>
+<style scoped>
+.div-top{
+    background-color: aqua;
+    position:absolute;
+    top: 0;
+    left: 0;
+   right: 0;
+   bottom: 60%;
+}
+.div-bottom{
+   background-color: bisque;
+   position:absolute;
+    top: 30%;
+    left: 0;
+   right: 0;
+   bottom: 0;
+   border-radius: 4rem 4rem 0rem 0rem;
+   /* min-height: 70%; */
+}
+
+</style>

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,6 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-
       <van-row v-for="(item, index) in articleList" :key="index" class="row">
         <van-col span="4" class="leftCol">
           <van-image
@@ -28,9 +27,7 @@
           <van-icon name="arrow-down" @click="show = true" />
         </van-col>
 
-        <van-col class="rowBody" span="24"
+        <van-col class="rowBody" span="24">{{ item.content }}</van-col>
-          >{{item.content}}</van-col
-        >
 
         <van-col
           span="8"
@@ -55,8 +52,7 @@
         </van-col>
       </van-row>
     </van-list>
-
+  </van-pull-refresh>
-
   <!-- 功能页面 -->
   <van-action-sheet
     v-model:show="show"
@@ -70,7 +66,7 @@
     v-model:show="imageShow"
     :images="imagesPreview"
     @change="onChange"
-    :closeable=true
+    :closeable="true"
   >
     <template v-slot:index>第{{ index + 1 }}页</template>
   </van-image-preview>
@@ -79,20 +75,19 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, toRefs } from "vue";
 import { ImagePreview, Toast } from "vant";
-import AppCreateTime from '@/components/AppCreateTime.vue'
+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 url = `${import.meta.env.VITE_APP_BASE_API}/file/image/`;
 const data = reactive({
-
   queryParams: {
     pageNum: 1,
     pageSize: 10,
     // dictName: undefined,
     // dictType: undefined,
-    isDeleted: false
+    isDeleted: false,
-  }
+  },
 });
 const { queryParams } = toRefs(data);
 
@@ -112,69 +107,55 @@ const finished = ref(false);
 const refreshing = ref(false);
 
 const show = ref(false);
-const actions = [
+const actions = [{ name: "取消关注" }, { name: "将TA拉黑" }, { name: "举报" }];
-  { name: "取消关注" },
-  { name: "将TA拉黑" },
-  { name: "举报"}
-];
-// const onLoad = () => {
 
-//     if (refreshing.value) {
-//       articleList.value = [];
-//       refreshing.value = false;
-//       queryParams.value.pageNum=0;
-//     }
-
-//     queryParams.value.pageNum+=1;
-//     getList();
-
-//     loading.value = false;
-
-//     if (articleList.value.length >= 40) {
-//       finished.value = true;
-//     }
-
-// };
 const onLoad = async () => {
+  if (refreshing.value) {
+    articleList.value = [];
+    refreshing.value = false;
+  }
   // 异步更新数据
   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-      setTimeout(async() => {
+  articleApi.pageList(queryParams.value).then((response: any) => {
-        console.log("执行")
+    if (response.data.data.length == 0) {
-        // await getList();
+      console.log("结束");
-        // queryParams.value.pageNum+=1
+      finished.value = true;
-        // 加载状态结束
+    } else {
+      console.log("执行");
+      articleList.value.push(...(response.data.data as ArticleEntity[]));
+      totol.value = response.data.totol;
+      queryParams.value.pageNum += 1;
+    }
+
     loading.value = false;
 
-        // 数据全部加载完成
+    console.log(loading.value);
-        if (list.value.length >= 4000) {
+  });
-          finished.value = true;
-        }
-      }, 1000);
 };
 const onRefresh = () => {
-  // 清空列表数据
   finished.value = false;
 
   // 重新加载数据
   // 将 loading 设置为 true，表示处于加载状态
   loading.value = true;
-  // onLoad();
+  queryParams.value.pageNum = 1;
+  onLoad();
 };
 const openImage = (imagesUrl: string[]) => {
-  imagesPreview.value=imagesUrl.map(i=>url+i);
+  imagesPreview.value = imagesUrl.map((i) => url + i);
   imageShow.value = true;
-}
+};
 onMounted(() => {
   articleList.value = [];
-  getList();
+  // getList();
-})
+});
 
 const getList = () => {
   articleApi.pageList(queryParams.value).then((response: any) => {
-    articleList.value.push(...response.data.data as ArticleEntity[]);
+    articleList.value.push(...(response.data.data as ArticleEntity[]));
     totol.value = response.data.totol;
-  })
+  });
-}
+};
 </script>
 <style scoped>
 .list {
@@ -211,8 +192,7 @@ const getList=()=>{
   padding: 0.1rem 0.1rem 0.1rem 0.1rem;
 }
 .subtitle {
-color: #CBCBCB;
+  color: #cbcbcb;
-
 }
 
 .justtitle {
@@ -221,8 +201,7 @@ color: #CBCBCB;
 .bottomRow {
   color: #979797;
 }
-.down
+.down {
-{
   text-align: right;
   padding-right: 0.5rem;
 }

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

@@ -3,14 +3,7 @@
 
   <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>
@@ -22,27 +15,4 @@
 <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>