🦄 refactor(我的留言): 使用TS重写列表功能

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-17 12:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-09 09:40:35
+ * @LastEditTime: 2022-06-12 22:50:29
  * @FilePath: /tswj/src/composables/index.js
  * @Description:
  */
@@ -13,6 +13,7 @@ import { useDefaultPerf } from '@/composables/useDefaultPerf.js'
 import { useBookList, useAsyncBookList } from '@/composables/useBookList.js'
 import { useShortcutBar } from '@/composables/useShortcutBar.js'
 import { useScrollTop } from '@/composables/useScrollTop.js'
+import { useMessageList } from '@/composables/useMessageList.ts'
 
 export {
   useVideoList,
@@ -20,7 +21,8 @@ export {
   useBookList,
   useAsyncBookList,
   useShortcutBar,
-  useScrollTop
+  useScrollTop,
+  useMessageList,
 }
 
 /**
@@ -30,6 +32,6 @@ export {
  * @param {*} callback 
  */
 export function useEventListener(target, event, callback) {
-  onMounted(() => target && target.addEventListener(event, callback))
-  onUnmounted(() => target && target.removeEventListener(event, callback))
+  onMounted(() => target?.addEventListener(event, callback))
+  onUnmounted(() => target?.removeEventListener(event, callback))
 }

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-07 17:46:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-09 11:26:42
+ * @LastEditTime: 2022-06-12 22:55:58
  * @FilePath: /tswj/src/composables/useBookList.js
  * @Description: 
  */

+/*
+ * @Date: 2022-06-12 22:51:21
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-12 23:00:04
+ * @FilePath: /tswj/src/composables/useMessageList.ts
+ * @Description: 文件描述
+ */
+import { ref } from 'vue'
+import { myCommentAPI } from '@/api/C/me'
+import _ from 'lodash'
+
+export const useMessageList = () => {
+  // 我的留言接口联调
+  interface commentListType {
+    id: string;
+    avatar: string;
+    name: string;
+    kg_name: string;
+    comment_time: string;
+    note: string;
+    c_action: string;
+    c_name: string;
+    cover: string;
+    prod_id: string;
+    perf_id: string;
+    book_id: string;
+    perf_name: string;
+    book_name: string;
+    localism_type: string;
+    is_new: number;
+  }
+  const commentList = ref<commentListType[]>([])
+  const loading = ref(false);
+  const finished = ref(false);
+  const limit = ref(10);
+  const offset = ref(0)
+  const finishedTextStatus = ref(false);
+  const emptyStatus = ref(false);
+  const onLoad = async () => {
+    const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
+    data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
+      let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
+      item.c_action = arr[0]; // 评论动作
+      item.c_name = arr[1]; // 评论姓名
+    });
+    // 数据全部加载完成
+    if (!data.length) {
+      // 加载状态结束
+      finished.value = true;
+    }
+    commentList.value = [...commentList.value, ...data];
+    offset.value = commentList.value.length;
+    loading.value = false;
+    // 隐藏loading标识，空列表图标
+    if (!commentList.value.length) {
+      finishedTextStatus.value = false;
+      emptyStatus.value = true;
+    } else {
+      emptyStatus.value = false;
+    }
+  }
+  return {
+    onLoad,
+    commentList,
+    loading,
+    finished,
+    finishedTextStatus,
+    emptyStatus,
+  };
+}

@@ -53,79 +53,23 @@
 <script lang="ts" setup>
 // import { mainStore } from '@/store'
 import { no_image, icon_avatar } from '@/utils/generateIcons.js'
-import { ref, onActivated } from 'vue'
+import { onActivated } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 import _ from 'lodash'
 import { Toast, Dialog } from 'vant';
 // import { addPages } from '@/hooks/useKeepAlive'
 import goToVideoDetail from '@/router/methods/videoDetail'
-import { myCommentAPI, delCommentAPI } from '@/api/C/me'
+import { delCommentAPI } from '@/api/C/me'
 import { myCommentTimeAPI } from '@/api/C/perf'
+import { useMessageList } from '@/composables';
+
+const { onLoad, commentList, loading, finished, finishedTextStatus, emptyStatus, } = useMessageList();
 
 onBeforeRouteLeave(async () => {
   // 更新留言阅读情况
   await myCommentTimeAPI({ optr_type: 'my_comment' });
 })
 
-// 我的留言接口联调
-const loading = ref(false);
-const finished = ref(false);
-interface commentListType {
-  id: string;
-  avatar: string;
-  name: string;
-  kg_name: string;
-  comment_time: string;
-  note: string;
-  c_action: string;
-  c_name: string;
-  cover: string;
-  prod_id: string;
-  perf_id: string;
-  book_id: string;
-  perf_name: string;
-  book_name: string;
-  localism_type: string;
-  is_new: number;
-}
-const commentList = ref<commentListType[]>([])
-let limit = ref(10);
-let offset = ref(0)
-
-// 因为不能让空图标提前出来的写法
-const finishedTextStatus = ref(false);
-const emptyStatus = ref(false);
-const onLoad = async () => {
-  const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
-  //
-  // _.each(data, item => {
-  //   let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
-  //   item.c_action = arr[0]; // 评论动作
-  //   item.c_name = arr[1]; // 评论姓名
-  // })
-  data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
-    let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
-    item.c_action = arr[0]; // 评论动作
-    item.c_name = arr[1]; // 评论姓名
-  });
-  commentList.value = [...commentList.value, ...data];
-  // commentList.value = _.uniqBy(commentList.value, 'id');
-  offset.value = commentList.value.length;
-  loading.value = false;
-  // 数据全部加载完成
-  if (!data.length) {
-    // 加载状态结束
-    finished.value = true;
-  }
-  // 隐藏loading标识，空列表图标
-  if (!commentList.value.length) {
-    finishedTextStatus.value = false;
-    emptyStatus.value = true;
-  } else {
-    emptyStatus.value = false;
-  }
-}
-
 const deleteComment = (id: string) => { // 删除评论
   Dialog.confirm({
     title: '温馨提示',