✨ feat(我的未看): API联调

+import { ref } from 'vue'
+import axios from '@/utils/axios';
+import _ from 'lodash'
+import { Toast } from 'vant';
+
+export const useUnwatchList = () => {
+  // 绑定页面数据
+  const prod_list = ref([]);
+  const limit = ref(10)
+  const offset = ref(0)
+
+  // 处理书籍下作品列表
+  const loading = ref(false);
+  const finished = ref(false);
+
+  /**
+   * 向下滚动查询数据
+   */
+  const onLoad = () => {
+    // 异步更新数据
+    axios.get('/srv/?a=my_unplay', {
+      params: {
+        limit: limit.value,
+        offset: offset.value
+      }
+    })
+      .then(res => {
+        if (res.data.code === 1) {
+          prod_list.value = _.concat(prod_list.value, res.data.data.prod);
+          offset.value = prod_list.value.length;
+          loading.value = false;
+          // 数据全部加载完成
+          if (!res.data.data.prod.length) {
+            // 加载状态结束
+            finished.value = true;
+          }
+        } else {
+          // tslint:disable-next-line: no-console
+          console.warn(res);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        // tslint:disable-next-line: no-console
+        console.error(err);
+      })
+  };
+
+  return {
+    onLoad,
+    prod_list,
+    finished,
+    loading
+  }
+}

 <template>
   <div class="unwatch-list-page">
-    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-      <template v-for="item in dataList" :key="item" style="height: 3rem;">
-        <video-card :item="item"></video-card>
-      </template>
-    </van-list>
+    <div class="book-video-list">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <template v-for="item in prod_list" :key="item" style="height: 3rem;">
+          <video-card :item="item"></video-card>
+        </template>
+      </van-list>
+    </div>
   </div>
 </template>
 
 <script setup>
-import dataList from '@/mock/video_list'
-import VideoCard from '@/components/VideoCard/index.vue'
-
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import axios from '@/utils/axios';
-import $ from 'jquery'
-import { Toast } from 'vant';
-const $route = useRoute();
-const $router = useRouter();
-
-// 处理书籍下作品列表
-const list = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-
-const onLoad = () => {
-  // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 20; i++) {
-      list.value.push(list.value.length + 1);
-    }
-
-    // 加载状态结束
-    loading.value = false;
+import { useUnwatchList } from '@/composables/useUnwatchList.js'
 
-    // 数据全部加载完成
-    if (list.value.length >= 100) {
-      finished.value = true;
-    }
-  }, 1000);
-};
+import VideoCard from '@/components/VideoCard/index.vue'
 
-onMounted(() => {
+const { onLoad, prod_list, finished, loading } = useUnwatchList();
 
-})
 </script>
 
 <script>