登录页面搭建

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,8 +7,7 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-
+      <van-row v-for="(item, index) in articleList" :key="index" class="row">
-      <van-row v-for="(item,index) in articleList" :key="index" class="row">
         <van-col span="4" class="leftCol">
           <van-image
             round
@@ -19,29 +18,27 @@
         </van-col>
 
         <van-col span="14" class="centerTitle">
-       <span class="justtitle">   大白</span>
+          <span class="justtitle"> 大白</span>
           <br />
-        <app-createTime :time="item.createTime"/>
+          <app-createTime :time="item.createTime" />
         </van-col>
 
         <van-col span="6" class="down">
           <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"
-          v-for="(image,imageIndex) in item.images"
+          v-for="(image, imageIndex) in item.images"
           :key="imageIndex"
           class="imageCol"
           @click="openImage(item.images)"
           ><van-image
             width="100%"
             height="7rem"
-            :src="url+image"
+            :src="url + image"
             radius="5"
           />
         </van-col>
@@ -55,8 +52,7 @@
         </van-col>
       </van-row>
     </van-list>
-
+  </van-pull-refresh>
-
   <!-- 功能页面 -->
   <van-action-sheet
     v-model:show="show"
@@ -70,37 +66,36 @@
     v-model:show="imageShow"
     :images="imagesPreview"
     @change="onChange"
-    :closeable=true
+    :closeable="true"
   >
-    <template v-slot:index>第{{ index+1 }}页</template>
+    <template v-slot:index>第{{ index + 1 }}页</template>
   </van-image-preview>
 </template>
 
 <script setup lang="ts">
-import { ref ,onMounted,reactive, toRefs} from "vue";
+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({
+const data = reactive({
-
+  queryParams: {
-  queryParams:{
     pageNum: 1,
     pageSize: 10,
     // dictName: undefined,
     // dictType: undefined,
-    isDeleted: false
+    isDeleted: false,
-  }
+  },
 });
-const {queryParams} =toRefs(data);
+const { queryParams } = toRefs(data);
 
-const articleList=ref<ArticleEntity[]>([]);
+const articleList = ref<ArticleEntity[]>([]);
-const totol=ref<Number>(0);
+const totol = ref<Number>(0);
 const imageShow = ref(false);
 const index = ref(0);
-let imagesPreview =ref<string[]>([]);
+let imagesPreview = ref<string[]>([]);
 
 const onChange = (newIndex: any) => {
   index.value = newIndex;
@@ -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) {
+const onLoad = async () => {
-//       articleList.value = [];
+  if (refreshing.value) {
-//       refreshing.value = false;
+    articleList.value = [];
-//       queryParams.value.pageNum=0;
+    refreshing.value = false;
-//     }
+  }
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  articleApi.pageList(queryParams.value).then((response: any) => {
+    if (response.data.data.length == 0) {
+      console.log("结束");
+      finished.value = true;
+    } else {
+      console.log("执行");
+      articleList.value.push(...(response.data.data as ArticleEntity[]));
+      totol.value = response.data.totol;
+      queryParams.value.pageNum += 1;
+    }
 
-//     queryParams.value.pageNum+=1;
+    loading.value = false;
-//     getList();
 
-//     loading.value = false;
+    console.log(loading.value);
-
+  });
-//     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;
 
   // 重新加载数据
   // 将 loading 设置为 true，表示处于加载状态
   loading.value = true;
-  // onLoad();
+  queryParams.value.pageNum = 1;
+  onLoad();
 };
-const openImage=(imagesUrl :string[])=>{
+const openImage = (imagesUrl: string[]) => {
-  imagesPreview.value=imagesUrl.map(i=>url+i);
+  imagesPreview.value = imagesUrl.map((i) => url + i);
-  imageShow.value=true;
+  imageShow.value = true;
-}
+};
-onMounted(()=>{
+onMounted(() => {
-  articleList.value=[];
+  articleList.value = [];
-  getList();
+  // getList();
-})
+});
 
-const getList=()=>{
+const getList = () => {
-  articleApi.pageList(queryParams.value).then((response:any)=>{
+  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;
+    totol.value = response.data.totol;
-  })
+  });
-}
+};
 </script>
 <style scoped>
 .list {
@@ -210,19 +191,17 @@ const getList=()=>{
 .imageCol {
   padding: 0.1rem 0.1rem 0.1rem 0.1rem;
 }
-.subtitle{
+.subtitle {
-color: #CBCBCB;
+  color: #cbcbcb;
-
 }
 
-.justtitle{
+.justtitle {
   font-size: large;
 }
-.bottomRow{
+.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>