.

pages/index/user.vue

@@ -8,7 +8,8 @@
     :navbarStyle="template.navigationBar"
     onShareAppMessage
   >
-    <userAvatarCard />
+    <userAvatarCard :userFormData="userFormData" />
+
     <s-block
       v-for="(item, index) in template.components"
       :key="index"
@@ -16,7 +17,17 @@
     >
       <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
     </s-block>
-    <userTryOn />
+
+    <userTryOn :recordList="dataState.pagination.list" />
+
+    <uni-load-more
+      v-if="dataState.pagination.total > 0"
+      :status="dataState.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
 
     <view class="logout-box" v-if="isLogin">
       <button class="ss-rest-button logout-btn" @click="handleLayout">退出登录</button>
@@ -31,11 +42,19 @@
 
 <script setup>
   import { computed, reactive, ref } from 'vue';
-  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import {
+    onShow,
+    onPageScroll,
+    onPullDownRefresh,
+    onReachBottom,
+    onLoad,
+  } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
+  import _ from 'lodash-es';
   import userAvatarCard from './components/user-avatar-card.vue';
   import userTryOn from './components/user-tryOn.vue';
   import AuthUtil from '@/sheep/api/member/auth';
+  import UserApi from '@/sheep/api/member/user';
 
   // 隐藏原生tabBar
   uni.hideTabBar({
@@ -47,8 +66,23 @@
 
   onShow(() => {
     sheep.$store('user').updateUserData();
+
+    getInfo();
+    getTryOnList();
   });
 
+  const userFormData = ref({});
+  async function getInfo() {
+    const { data } = await UserApi.getInfoByUser();
+    try {
+      const { dataJson } = data;
+      userFormData.value = dataJson ? JSON.parse(dataJson) : {};
+    } catch (err) {
+      userFormData.value = {};
+      console.log(err);
+    }
+  }
+
   onPullDownRefresh(() => {
     sheep.$store('user').updateUserData();
     setTimeout(function () {
@@ -79,6 +113,45 @@
       },
     });
   };
+
+  const dataState = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+  });
+
+  async function getTryOnList() {
+    dataState.loadStatus = 'loading';
+    const { code, data } = await UserApi.getTryOnList({
+      pageNo: dataState.pagination.pageNo,
+      pageSize: dataState.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    dataState.pagination.list = _.concat(dataState.pagination.list, data.list);
+    dataState.pagination.total = data.total;
+    dataState.loadStatus =
+      dataState.pagination.list.length < dataState.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (dataState.loadStatus === 'noMore') {
+      return;
+    }
+    dataState.pagination.pageNo++;
+    getTryOnList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
 </script>
 
 <style lang="scss" scoped>